728x90 반응형 source-code/React44 CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제, 이미 프로젝트는 CRA을 바탕으로 개발이 끝난 상황! 따라서 어쩔 수 없이 기존에 작성된 코드에 Next.js를 입혀야 한다. 으악. CRA에 Next.js 적용하기 1. 필요 모듈 설치 일반적으로는 create next-app을 통해 기초 세팅을 자동으로 진행한다. 하지만 이미 CRA으로 애플리케이션을 제작한 상태이므로... 손수 설치해주자. react, react-dom, next를 add 해주면 된다. 2. 기본 환경 설정 Next.js는 pages라는 폴더를 필요로 한다! → 요 pages.. 2021. 5. 13. Props 전달 에러 해결 또 blog를 만드는 과정! Object가 담긴 Array인 data를 mapping 해 OnePost란 컴포넌트에 넣어줬다! 이를 통해 data Array 속 Object가 하나하나 돌면서 OnePost 안에 전달될 테다. 요놈이 하위 컴포넌트인 OnePost! props로 전달해준 blogData를 받아 비구조화 객체 할당을 통해 변수에 할당해줬다. 따라서 blogData 속 title이 화면에 뜰 테다! 오잉? 그런데 hi만 뜨고 {title}이 제대로 뜨지 않는다. Console에 찍어보니... 분명 존재하는 데이터인데 undefined가 뜬다. 대체 왤까? 문제는 바로 이 곳! 하위 컴포넌트에서 전달받은 props인 blogData는 JS 요소! 전달해줄 때도 { } 속에 넣었으니, 받을 때도 .. 2021. 4. 6. .map() is not a function 에러 해결 역시나 Blog Project를 진행하던 중... 우리의 친구 TypeError! 하도 많이 만나서 이제는 익숙하다. X.map() is not a function 에러는 → .map은 Array에 해당되는 함수! 따라서 X가 Array가 아닌 형태일때는 TypeError가 뜨고 만다. 즉 위 사진의 경우에는 data라는 녀석이 Array가 아닐 가능성이 오천퍼센트! data는 API 요청을 통해 받아온 값들을 map으로 return해 준 녀석이다. 전체 코드! 받아온 data 상태를 다시 mapping 해주면서 렌더링하고 있다. data를 console에 찍어보면 정체가 밝혀지겠지! 어...라라? Array 형태가 맞는데??? Array.map()을 했는데 왜 is not a function 에러가 뜬.. 2021. 4. 5. Custom Hooks 1. useInput 2. useTabs useEffect → ComponentDidMount / ComponentDidUpdate / ComponentWillUnMount / (마운트 되고 나서 / 업데이트 되고 나서 / 언마운트 될 때) 3. useTitle 4. useClick 5. useConfirm & usePreventLeave 6. useBeforLeave 7. useFadeIn hook을 이용해 transition 효과 2021. 3. 31. Insta 클론 코딩 _ 자잘자잘 에러 해결 역시 React를 통해 인스타 클론 코딩을 하던 중... 버튼 클릭을 하면 숫자를 올렸다 내렸다 하는 기능(좋아요)을 만드려는데, 요런 에러와 만났다. 이것이 해당 코드! liked라는 상태(true/false)와 likeNum이라는 상태(누르면 +-1)를 선언해줬다. TogggleLike가 작동(onClick이벤트)되면 liked의 상태를 !liked로 업데이트하고, liked가 true면 likeNum에 +1을, false면 likeNum에 -1을 넣어 setLikeNum으로 업데이트! 잘 적었다고 생각했는데... Assignment to constant variable이란 녀석을 만난 것. 요놈이 무엇인고 찾아보니... constant, 즉 상수에 variable한 값을 지정했기 때문에 생긴 문제란.. 2021. 3. 29. API 요청으로 데이터 사용하기 React로 인스타 클론 코딩을 하던 와중, User 정보가 담긴 데이터가 있으면 좋겠다는 생각이 들었다. 그렇다고 직접 Object들을 담은 Array를 만들(수는 있겠지만)고 싶지는 않으니, User 데이터를 가진 서버에 API 요청을 보낸 후 이를 사용해보고자 했다. (API : https://jsonplaceholder.typicode.com/users) 이전에 책에서 했던 외부 API 연동 부분을 참고하면 되겠군! 2021.03.18 - [Frontend/React] - 리액트를 다루는 기술 _ 14장 리액트를 다루는 기술 _ 14장 눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1.. 2021. 3. 26. 리액트를 다루는 기술 _ 22장 슉슉슉 읽고 넘어가는 중... 22장. MongoDB 서버 개발 시 DB를 이용하면 웹 서비스에서 사용되는 데이터를 저장하고, 효율적으로 조회하거나 수정할 수 있다. 기존에는 대부분 MySPL, OracleDB, PostgreSQL 같은 관계형 데이터베이스를 사용했다. 하지만 요 녀석들의 단점은... 1. 데이터 스키마가 고정적 - DB에 들어갈 데이터 형식이 고정적이라 새로운 형식의 데이터가 추가되면 기존 데이터를 몽땅 수정해야 한다. 2. 확장성 - 저장, 처리할 데이터양이 늘어나면 여러 컴퓨터에 분산시키는 것이 아닌, DB 서버의 성능을 업그레이드하는 방식. MongoDB는 이런 한계를 극복한 문서 지향적 NoSQL DB! 즉 데이터의 구조가 자주 바뀐다면 문서 지향적 DB가, 까다로운 조건으로 데.. 2021. 3. 24. 리액트를 다루는 기술 _ 21장 내게는 Django 뿐일 줄 알았는데... 21장. 백엔드 프로그래밍 : Node.js 웹 애플리케이션을 만들 때, React와 같은 프론트엔드 기술만으로 필요한 기능을 모두 구현할 순 없다. 왜? 데이터를 여러 사람과 공유하려면... 저장할 공간이 필요하니까! 이를 위해 우리는 서버를 만들어 데이터를 저장해 여러 사람과 공유한다. 그러나 서버에 데이터를 무작정 담는 것은 아니다! → 이러한 규칙을 지정하는 것이 백엔드(서버) 프로그래밍이라 생각하면 좋을 듯! 21-1) Node.js 알아보기 Node.js는? 웹 브라우저뿐만 아니라 서버에서도 JS를 사용할 수 있는 런타임! Node.js 환경에서 웹 서버를 구축할 때는 보통 Express, Hapi, Koa 등의 웹 프레임워크를 사용한다. 여기서는 K.. 2021. 3. 23. 리액트를 다루는 기술 _ 19장, 20장 얼른 React로 돌아가고 싶다. 19장. 코드 스플리팅 리액트를 완성해서 배포할 때는 빌드 작업을 거쳐야 한다. 빌드 작업을 통해 JS 속 불필요한 요소들을 제거해 파일 크기를 최소화하거나, 브라우저에서 JSX 등 최근 JS 문법이 원활하게 실행되도록 코드 트랜스 파일 작업도 가능! 그리고 이러한 작업은 웹팩(webpack)이란 도구가 담당한다. (웹팩에서 별도 설정을 하지 않을 시? 프로젝트 속 모든 JS, CSS 파일이 하나로 합쳐지고 만다) Create React-App의 기본 웹팩 설정에는 SplitChunks란 기능이 적용되어, node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간 공유된 파일을 자동으로 따로 분리시켜준다! 즉 우리가 SPA를 개발할 때... 아무런 .. 2021. 3. 23. 이전 1 2 3 4 5 다음 728x90 반응형
