리액트 컴포넌트를 외부 라이브러리 없이 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..
협업 해야 할 일들이 점점 생겨나면서 Git flow정도는 기본적으로 알아 둬야 차질 없이 개발 할 수있을 거 같은 느낌을 받았다. Git으로 협업 하는 것이 왜 좋은지 Git Flow에 대한 개념이 뭔지 알아보자. git-flow는 Vincent Driessen의 branching model을 적용하여 저장소를 관리 해주도록 하는 확장된 방법론을 의미한다. Branch는 feature - develop - release - hofixes - master로 나누어 코드를 관리하는 전략을 말한다. master (main) 사용자에게 배포 되고, 기준이 되는 브랜치를 의미한다. master 브랜치의 HEAD에는 소프트웨어의 최신 배포판의 소스코드 버전이 들어있다. 배포 해도 될 만큼 안정성있는 코드들만 병합..
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..
시간은 너무나도 빠르다.. 19살에 대학에 입학하여, 어느덧 20살에 2학년이 되어버렸고.. 수업들도 만만치 않았고 생활도 만만치 않았다.. ㅎㅎ 다양한 사람들도 만나고 (동갑들이 학교에 생긴 게 너무 신기했음), 놀기도 열심히 놀았다. 내 잔디 밭을 보면 얼마나 열심히 놀았는지 알 수 있다. 자리부터 옮기자 이번 학기 가장 먼저 한 일은 내 자리 옮기기였다. 모니터도 많고.. 장비 사놓은 것도 많아서 옮기는데도 한 세월이었다. 한 학기 동안 잘 사용했고 아마 다시 동아리 방으로 돌아갈 것 같다. 동아리에서 할 활동들이 많아서 어쩔 수가 없을 거 같다.. 재밌었어요.. 여기서 밤도 새우고.. 형님들이랑 놀기도 잘 놀고.. 공부도 조금 하고.. ㅎㅎㅎ 학점.. 아 감사합니다.. 이번 학기도 감사하게도 4...
