목록react.js (16)
너와 나의 프로그래밍

Next.js의 기본적으로 내장되어 있는 styled-jsx는 따로 노드 모듈을 설치할 필요없이 바로 사용할 수 있다. 제일 많이 사용하고 있는 styled-component와 공통점이 굉장히 많아 둘 다 사용하는데 큰 어려움이 없다. 다만 styled-jsx을 사용할 때의 render 방식과 styled-component의 Nesting 기능은 지원히지 않는다는 단점이 있다. import css from "styled-jsx/css"; // 스타일을 적용할 객체 생성 const style = css` .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .first-div ..

Next.js를 공부하면서 Styled Component의 대해서 알게 되었다. Styled Component는 React.js의 컴포넌트의 CSS 적용에 굉장히 많은 도움이 되는 CSS-in-JS의 대표적인 라이브러리다. 기본적으로 Next.js에서 제공하는 Styled-jsx도 그렇지만 Styled Component도 컴포넌트별로 scope를 주면서 독립적으로 css를 관리하는 방식인 것 같다. Vue.js를 해본 사람들이라면 .vue 파일에 style을 scope 속성을 주면서 css를 적용했던 방식과 너무 비슷하다. 먼저 Styled Component를 설치하기 위해서는 node가 기본적으로 설치가 되어있어야하고 npm 명령어로 모듈을 받을 수 있다. # npm npm install --save ..

Next.js는 장점으로 "파일 시스템 기반 정적라우팅(Static Routing)과 동적라우팅(Dynamic Routing)"을 지원한다. 간단하게 정적라우팅은 직접 경로를 일일히 설정을 해주는 것이고 동적라우팅은 한번 설정 해주면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 정해진다. 라우팅이라는 용어는 보통 네트워크에서 많이 사용되는 용어로 나는 솔직히 많이 생소했다. 그냥 라우팅이라 하면 페이지 이동 경로설정이라고만 생각했는데 Next.js를 공부하면서 정적, 동적 라우팅을 하는 것에 대해 뭔가 낯설게 느껴졌다. Next.js의 정적, 동적 라우팅이 장점이라고 하는 이유는 맨 처음에 설명에서 적었듯이 "파일 시스템 기반"이라 라우팅을 해주기가 아주 편하다는 것이다. 그럼 "파일 시스템 기반"의 ..

React.js는 프론트엔드 기술의 대표적인 자바스크립트 라이브러리다. 전형적인 SPA(Single Page Application) 방식이며 CSR(Client Side Rendering)으로 동작한다. React.js가 나오고 나서부터 국내의 최신 프로젝트들은 React.js를 기반으로 하는 프로젝트들이 너무나도 많고 실제 React.js를 쓰고 있는 기업들도 굉장히 많다. 과거에 HTML, CSS, Javascript(jQuery)를 사용하던 옛날시대에서 이제는 React.js라는 최고의 자바스크립트 라이브러리로 성능은 물론 UI/UX에서도 많은 변화를 일으킬 정도로 정말 대단한 라이브러리다. 하지만, 이 마저도 만족스럽지 못했던 것이 바로 SPA 단점에서 부터 시작되었다. SPA 방식은 첫 사이트에..