넥스트js의 핵심 키워드는 프리 렌더링 서버에서 미리 리액트 컴포넌트를 HTML로 바꾸어 클라이언트로 보내준다. 이 것을 받은 클라이언트는 react.js가 되고 리액트 환경에서 작동한다. 비로소 리액트와 연결되면 동적인 페이지 이용이 가능하다. 이 프로세스가 Hydration 이다. 1. 링크를 걸때는 리액트와 똑같이 Link를 쓰지만 to 가 아니라 href를 쓴다. useRouter 빌트인 훅을 사용하면 라우팅 정보가 나온다. 2. module css 시스템을 쓴다. 리액트에서는 {`${style.~~~}`}로 쓰는데 여기도 똑같다. 근데 모듈화는 좀 불편하다. 3. styled jsx 방식이 있다. 모듈처럼 클래스명이 충돌하지 않는다. 4. 전역으로 스타일 설정할 때는 jsx global을 통해서..

21.1 자바스크립트 객체의 분류 표준 빌트인 객체, 호스트 객체(web API, Node.js API), 사용자 정의 객체 21.2 표준 빌트인 객체 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects Standard built-in objects - JavaScript | MDN This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties. developer.mozilla.org Math, Reflect, JSON 빼고 다 생성자 함수 객체 표준 빌트인 객체가 생성한 인스턴스..

https://www.youtube.com/watch?v=9b89f21Sizs&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC 모듈은 코드 조각 혹은 common js 노드 js 많은 모듈을 불러와야한다. 모듈 번들어가 필요함 https://www.youtube.com/watch?v=xLziDinqBj0&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC 브라우저 외의 환경에서 동작하기 위해 커먼 JS가 만들어졌다. https://www.youtube.com/watch?v=Mah0QakFaJk&ab_channel=%ED%94%84%EB%A1%B1%ED%8A%B8 이게 리얼 설명 잘 되어있음 커먼 JS는..

스타일 파일을 이렇게 구성했는데 scss를 전체를 바꿔주기엔 너무 범위가 커지는 것 같아 내가 담당한 페이지에 한해서 공통 속성에 대해 변수로 처리하기로 하였다. 만약 바꿔줄 수 있다면 공통으로 처리할 수 있는 것들은 변수로 미리 처리한 다음 각 페이지에서 사용하는 것이 좋다고 생각했다. 지금은 폰트하나를 변수 처리하더라도 일일히 페이지를 다 확인하기에 그건 조금 무리인 듯 싶었다. 일단 base대신 pages로 폴더링 후 폰트 색깔부터 처리해보려한다. 어렵지 않은 일이라 금방하지만 하면서 든 생각은 프로젝트 기간이 매우 짧다보니 이런 설계 측면에서 고민할 시간이 거의 없었다는게 가장 아쉽다. 그리고 또 든 생각은 프로젝트 규모가 작다보니 많은 부분을 공통화 작업을 할 이유가 없었다. 그렇게 겹치는 게 ..

리액트를 하다보면 undefined는 언제나 고민거리이다. 처음에는 || 0 을 통해 undefined를 막았지만 그럼 값을 설정하지 않았을 때 date 값이 1970년으로 나와 UX 상 좋지 않다. 이런 모습을 유저가 본다면 앱이 성의없다고 느낄 것이다. {secondsToDate(plantDetail?.wateredDays?.at(-1)?.seconds)} 아래는 유틸 함수로 빼주었는데 이렇게 했더니 원하는 결과를 얻었지만 export const secondsToDate = (seconds: number) => { if (seconds) { const date = new Date(seconds * 1000); const formattedDate = format(date, 'yyyy-MM-dd'); r..

삭제 로직에 문제가 생겼다. 삭제 자체는 잘 되지만 메인 식물이 삭제 될 때 다음으로 메인 식물을 지정해주지 않는 문제가 발생하였다. const deletePlant = async () => { if (docId) { await deletePlantDataByDocId(docId); } navigate('/myplant'); }; 파이어베이스 함수를 바깥으로 빼주었기에 이 함수를 살펴보면 export const deletePlantDataByDocId = async (docId: string) => { if (!docId) return; const docRef = doc(db, 'plant', docId); const plantData = await findPlantDataByDocId(docId); c..