이번 DND 7기 활동을 시작하고 1주차를 지나고 있다. 원래 React도 제대로 학습 한 적이 없어 학습중이였는데, 프로젝트 기획 단계에서 웹이 아닌 앱으로 만들어보자는 이야기가 나왔다. 나 같은 경우 CrossFlatform Application 개발은 Flutter가 편하지만, 아무래도 팀 빌딩 단계에서 웹 프론트엔드로 맞춰졌기 때문에 테크 스택 자체가 JS나 TS에 초점이 맞춰져 있을 수 밖에 없었다. 따라서 이번에 RN을 배워보고 RN을 사이드 프로젝트에 실제로 사용 해보고자 한다. Flutter와 RN이 비슷한 부분이 생각보다 많기 때문에 React와 Flutter를 섞은 느낌이라고 생각하고 개발하면 편할 거 같았다. 물론 실제로 프로젝트 셋팅을 해본 결과 Flutter보다 약 10배는 어려운..
리액트 컴포넌트를 외부 라이브러리 없이 CSS로 스타일링 하는 방법중 가장 대중적인 방법이 Styled Components를 사용하는 방법이다. 이번 포스팅에선 Styled Components를 알아볼까 한다. CSS in JS Styled Components는 CSS in JS의 개념으로 제작된 라이브러리이다. 스타일 정의를 보통 css 파일에다가 하지만 CSS in JS는 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법을 말하는 것이다. 고전 프론트엔드의 방식은 HTML, CSS, JS를 분리하여 개발하였지만 최근 개발 패러다임은 컴포넌트들을 분리하고, 각 컴포넌트들 안에 HTML, CSS, JS를 모두 때려 박는 방식이 사용되고 있다. Styled Component 또한 이러한 방..
보통 우리가 페이지 이동을 구현 할 때 를 사용하여 만들었을 것이다. 하지만 a 태그를 사용 했을 때 문제가 있다. 는 페이지가 이동 할 때 js와 css 모두 다시 다운로드 한다는 문제점이 있다. React Application은 SPA 방식으로 한 번 다운로드 하고 나선 다운로드 하지 않기 때문에 react-router-dom을 이용하여 Link를 사용해주어야 한다. App.js import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './pages/Home'; import Profile from './pages/Profile'; import About from './pages/About'; import No..
다이나믹 라우팅이란? 여기서 말하는 다이나믹 라우팅이란 다음과 같다. http://localhost:3000/profile - 이런 방식의 라우팅만 커버하고 있지만 http://localhost:3000/profile/1 - 원래 있던 라우팅 되는 path 뒤에 또 다른 값이 붙었을 때 처리하는 방식을 말한다. Dynamic Routing by ID import { BrowserRouter, Route } from "react-router-dom"; import About from "./pages/About"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; function App() { return ( /*새로 추가된 코드..
React가 나오기 전 전통적인 방식은 다음 그림과 같다. url이라고 불리는 단위를 바탕으로 해당 페이지의 html, css, js를 서버에게 url에 해당하는 html을 받아왔다. React로 넘어오면서 url을 받아오는 것이 아니고, 큰 앱 전체를 받아왔다. 각각의 페이지를 요청하는 것이 아닌 전체(Single Page Application)을 받아오는 방식을 사용하기 시작했다. SPA의 라우팅 과정 브라우저에서 최초에 '/'(root) 경로를 요청하면 서버에서 React Web App을 내려준다. 내려 받은 React App에서 '/' 경로에 맞는 컴포넌트를 먼저 보여준다. React App에서 다른 페이지로 이동하는 동작을 수행하게 된다면 새로운 경로의 컴포넌트를 보여준다. React 범주에서 ..
Class Component 작성법 위와 같이 작성하면 Class Component를 사용할 수 있다. Class Component 정의하기 class ClassComponent extends React.Component{ //React안에 Component라는 클래스를 상속 받음 render(){ //render 메서드는 정의 되어야하고 return 값이 꼭 있어야 함 return Hello; } } ClassComponent라는 이름의 클래스 컴포넌트를 React 라이브러리 안에 있는 Component 클래스로부터 상속받았다. Component 클래스 안에는 render() 메서드 값이 필요하며 render 값에는 꼭 return 값이 있어야 한다. Class Component 사용하기 ReactDO..
CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 브라우저가 렌더하는 방식들을 의미하는 단어들이다. CSR Client Side Rendering의 약자이다. 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다. 과정 설명 어떤 특정 도메인, 즉 웹 서비스에 접속 하게 될 때 그 웹 서비스에서 html을 먼저 다운로드하게 되고 html 화면을 보여주고, html 안에 있는 DOM 요소가 보이거나 CSS가 적용된 스타일이 보인다. React에선 html은 빈 껍데기 html만 내려오게 되고 Browser가 JS 파일을 요청하게 됩니다. (React는 JS파일이 모두 존재 해야 UI가 그려진다) JS 파일 안에는 React Web A..
BootStrap vs React BootStrap 일단 React BootStrap은 BootStrap의 코드를 기초로 개발 되었기 때문에, BootStrap Library를 꼭 가지고 있어야 구동이 가능하다. 일반 BootStrap말고 React-BootStrap, Vue-BootStrap 같이 일반적으로 많이 사용되는 반응형 웹 프레임워크같은 경우엔 본인들만의 BootStrap을 따로 개발하여 사용하고 있다. 일반 부트스트랩을 사용하지 않는 이유는 간단하다. BootStrap 4 기준으로 작성 된 부트스트랩 코드를 살펴보자 import React from 'react'; const ReactWithBootstrap = () => { return ( Email Password Address Addre..
