완벽보다는 완료

사내어드민만 개발하다 오랜만에 사용자 사이트 개발이라 컴포넌트의 재사용성을 높이기 위해 사용하였다. 이전 프로젝트때 맛보기로 사용해본적은 있지만 처음부터 설치부터 내가 직접 세팅 하는건 처음이다!! 일단 스타일드컴포넌트 설치 방법 # with npm npm install --save styled-components # with yarn yarn add styled-components 설치가되었으면 In package.json 에 추가가 되었을 것이다. { "resolutions": { "styled-components": "^5" } } 그리고 페이지에 임포트 import 시켜서 사용하면 끝! 사실상 큰 어려움은 없다. import styled, { css } from "styled-components"..

vue만 사용하던 나로서는 hook이란는 개념 자체가 생소했다. 클래스형 컴포넌트를 접한지 얼마 안되기도 했는데 함수형 컴포넌트라니. 그래서 이번엔 hook에 대해 알아보겠다. React Hooks란? 리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나뉩니다. 간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다. 클래스형 컴포넌트 단점 1. 계층이 너무 많아지는 단점. 2. Component가 복잡해진다. 3. Class를 Component로 쓰면 constructor, this, binding 등 지켜야 할 규칙이 많아서 코드가 복잡하고 길어집니다. 이 방식은 컴퓨터에게는 복잡한..

버튼 컴포넌트를 사이즈/색깔별로 나누면서 스타일링 하던중에 이런 오류가 발생 랜더링 할때마다 css 스타일이 적용이 안되는 오류가 발생하였다. 그래서 브라우저에서 개발자 페이지를 봐보니 Warning : Props 'className' did not match. Server : "dsdfsdf" Client: :"sdfssdf" 이런 문구가 나오는 오류여서 확인해 보니 babel을 설치하면 해결이 된다고 하여 구글링을 통해 원인과 해결방법을 알게 되었다. 원인 : Next.js는 SSR을 도와주는 프레임워크이며 SEO 등을 위해 처음 페이지를 로드할 때는 서버에서 렌더해 오지만, 페이지에서 링크를 클릭해 다른 페이지로 넘어갈 때는 CSR로 페이지를 렌더링하여 SEO와 속도를 해결해주는 프레임워크로 작동하..

styled-components 기존 css파일을 만들어서 불러오는 방법을 쓰면 불편한 점이 몇가지 있다. * 대표적인 클래스(class)의 중복 - css 파일을 분리하고, 컴포넌트 별로 따로 불러와도 결국 여러 파일이 번들링 되기 때문에 클래스는 전역으로 작동한다. 그래서 스타일이 겹쳐버릴 수 있어, 우리는 접두사를 만들거나, 부모클래스를 명시하는 등의 불편한 방식으로 해결해왔다. styled-components 우리가 어떤 컴포넌트를 만들었을때, 기존 CSS 방식의 스타일링의 불편함과 Styled components 가 어떤 방법으로 문제를 해결해 주는지 알아보자. Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS in JS 라이브러리 Javascript 코드 내에서 ..

vue에선 nuxt.js만 쓰다 리액트의 Next.js는 처음 접해본다. 포스팅하게 된 이유이다. 쉽게 말해 리액트를 기반으로 한 SPA를 빌드 할 수있록 도와주는 프레이무어크 입니다. 환경을 하나씩 잡아가지 않아도 Next.js를 이용하면 빠르게 빌드 가능합니다. Next.js의 가장 큰 장점 중 하나는 매우 간단하지만 커스터마이징이 매우 용이하다는 것입니다. Next.js특징 장점 기본적으로 SSR 제공함 - 서버사이드 렌더링의 장점 - 검색엔진 최적화 - 초기 로딩 성능 개선 - 검색엔진 최적화 - SEO (Search Engine Optimization) 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화 HMR을 지원하는 웹팩 기반 환경 Express나 Node.js와 같은 http 서버와 함께..