구 게시글/React

JS 프로젝트 TS로 마이그레이션하기

알고리즘 텀 프로젝트에서 간단하게 js로 작업을 하였는데 TS를 배우면서 한번 적용해 보고 싶어졌다 그래서 무작정 시작하는 JS프로젝트 TS로 마이그레이션 하기! 기본 세팅 일단 타입스크립트도 라이브러리다 설치하자 npm i typescript 기존 프로젝트에 tsconfig파일 설정하기 npx를 통해 간단하게 설정 파일을 만들 수 있다. npx tsc --init 타입스크립트의 핵심은 타입!! 타입 또한 설치해 주어야 한다 각 프로젝트에 필요한 라이브러리들의 타입을 설치해주자 내가 사용했던 타입은 jest, node, react, react-dom, styled-components의 타입을 설치해 주었다 npm i @types/react ...등등 eslint 또한 typescript에 맞춰서 다시 i..

CSR SSR SSG(NEXT JS) SPA MPA 정리

개발을 하다 보면 어디선가 자꾸 줄임말이 튀어나온다 SSR SSG CSR SPA MPA 아니 이게 뭔데???? CSR(Client Side Rendering) Client Side Rendering의 줄임말로 클라이언트 단에서 랜더링을 하겠다는 말이다. 쉽게 React를 생성할수 있는 CRA(create-react-app)을 사용하면 기본 설정으로 CSR을 사용하도록 한다. CSR 처리 방식 브라우저가 접속을한다. (설정으로 바꿀 수 있다)와 스크립트 파일만 있는 HTML을 받는다. 브라우저가 다시 프런트 서버에 스크립트에 있는 JS를 호출한다. 호출받은 모든 페이지를 브라우저로 받아와서 웹사이트를 그려준다. 웹사이트에 필요한 데이터를 백엔드 서버에 호출한다. 받은 데이터를 웹사이트에 추가해 완전한 웹사..

React 상태관리와 불변성

react의 상태를 관리하다보면 불변성을 지켜서 사용하라고들 한다. 굳이 데이터를 추가할때도 array.push(5); 위의 push방법이 아닌 newArray=[...array, newData]; 이런식으로 spread 방법을 사용해서 데이터를 넣고 한다 이는 불변성을 지키려고 일부러 이런 방법으로 사용한다. 불변성 불변성부터 이야기해보자면 값이나 상태를 변할수 없는것이다 즉 새로운값이 생기면 상태를 변경해주는 것이아니라 새로 할당하는 것을 말한다. 대표적으로 원시타입이 이렇게 동작한다 let a = 3; //원시타입 3이라는 변수를 할당했다 let a = 5; 5로 변경을 하면 메모리에서는 a라는 변수에 5를 다시 할당하게된다 이는 불변성을 지키고있는 것이다. 원시타입이 있으면 참조타입도 있다 let..

SVG 태그

이번 프로젝트를 하면서 처음으로 SVG태그라는 것을 보았다 평소에 fontawsome에서 아이콘을 쓰고 있었는데 여기에 SVG태그가 사용이 되고 있었고 클론 코딩 중에 SVG태그를 사용할 일이 생겨서 한번 찾아보았다 SVG 만능설 이 svg태그는 백터형 이미지 포맷이다 이와 비교되는 것으로는 이미지 파일(jpg,png등) 이 있다. 이 둘의 차이점을 보면 이미지 파일을 이루는 것은 작은 픽셀이어서 크기를 키울수록 픽셀이 깨지는 화질 차이가 나지만 svg는 백터로써 크기가 변해도 화질이 깨지지 않는다 svg는 각 좌표에 점을 찍어서 이으는 개념으로 만들어지기 때문이다 그렇다 보니 이미지 파일은 이 픽셀을 저장하기 위해 용량이 svg파일보다 상대적으로 크다. svg파일은 점을 찍어서 이으는 개념인 백터이므로..

props로 modal관리는 이제 그만

페이지로 만들기는 싫고 간단한 창을 띄워 한 페이지 내에서 유저의 접근을 받고 싶을 때 modal을 애용해 왔다 새 페이지를 왔다 갔다 하는 것보다 좀 더 한 템포 빠르게 유저와의 상호작용이 일어나 좋아했다. Modal 동작원리 modal을 동작하게 하는 방법에는 크게 2가지가 있다 modal open close시에 dom에 직접 component를 넣다 빼는 방법 css의 visible을 이용해서 modal이 안보이는 것처럼 보이게 하는 방법 1번의 방법은 open close마다 component를 랜더링 한다는 의미는 modal전체를 다시 그려야 한다는 것이므로 modal이 커질수록 open close시에 반응이 늦어진다는 이야기이다. 그래서 대부분의 modal창에서는 2번 방법을 사용한다. Moda..