개발 공부/NestJS4 [Next js] key 속성을 왜 넣어줘야 하지? Next는 React를 기반으로 만들어졌으니 React의 특징을 많이 가진다. React의 특성인 가상 돔을 이용하여 특정 부분만 다시 그려주는 특성은 비슷한 돔이 반복적으로 나타났을 때 (map을 사용하는 경우) 다른 점을 찾기 위해 순차적으로 돔을 확인한다. 이는 속도 저하와 이어질 수 있기 때문에 각 돔의 key 값을 줘 찾을 수 있도록 한다. React에서도 권장하는 사항임. export default function List() { let products = ["Tomatoes", "Pasta", "Coconut", 'Apple']; return ( 상품목록 {products.map((item, i) => { return ( // index를 key 값으로 넣는 경우가 많다. {item} 이것은.. 2023. 11. 13. Nest build를 했을 때에 cannot find modules 에러 해결 build를 해서 나오는 dist폴더만 있다고 실행가능한 것이 아니다. 한참 뻘짓을 했는데 생각해보니 dist를 실행시키기 위해서는 node_modules폴더가 필요하며 npm install시 설치가 가능하다. 후우.. 2021. 8. 29. 노마드 코더 nestjs 강의 정리2 (세팅) nestjs cli 설치 npm i -g @nestjs/cli 다음을 입력하면 nestjs client의 설치가 시작된다. 하지만 권한이 없다고 한다... sudo npm i -g @nest/cli sudo로 관리자 권한을 주자!! 이번에는 성공했다. nest 프로젝트 만들기 nest new 로 새 프로젝트를 만들자. 프로젝트 이름을 정하고 어떤 패키지 매니저를 사용할 것인지 물어보면 npm을 선택하자. (yarn에서 문제가 약간 있다고 한다. 나는 yarn을 쓰는 버릇을 들이려고 했는데 여기서는 일단 npm을 사용하자) git origin 연결 nest 프로젝트를 만들면 기본적으로 git이 만들어진다. github에서 깃 레포지터리를 만든 후 연결하자. github에서 레포지터리를 만든 후 주소를 복사.. 2021. 8. 1. 노마드 코더 nestjs 강의 정리1 (시작하게된 이유.) 시작한 이유 현재 운영중인 러닝클럽에서 조와 조원들을 매일매일 랜덤하게 배정하는 프로그램을 만들어서 돌렸다. 이 프로그램에서 배열을 sort하는 부분이 있고 랜덤을 사용하다 보니 매번 sort할 때마다 내가 만든 랜덤함수가 사용되었다. 근데 여기서 문제가 발생했다.... 각 브라우저가 sort하는 방식이 다르다는 점이다. 이 프로그램을 사파리에서 돌릴 때와 크롬, IE와 파이어폭스 등 각각 브라우저가 다른 결과가 나올 경우가 있다. 나는 모든 조원이 같은 화면을 보길 원하기 때문에 서버사이드에서 랜더링한 페이지를 사람들에게 보여줘야겠다고 생각했고 그렇게 하기 위해서는 nestjs의 공부가 필요하다고 판단했다. 그래서 시작하겠다.. 아자아자 화이팅!!!!! 오늘 하루만에 강의 다 듣고 정리 다하고 바로 서.. 2021. 8. 1. 이전 1 다음
