akjfal

배경 프로젝트에 투입되기 1달 전 타 팀 개발자 분들이 신규 프로젝트의 에디터를 개발하면서 기술 스택과 환경들을 구축해놓은 상태였습니다. React, React Query, Sass등 대부분의 기술 스택은 사용해본 경험이 있었지만, Next13은 처음해보는 버전이 였습니다. React17에서 18로 올라가듯이 일부 기능들이 추가되는 정도라면 문제가 없지만, getStaticProps와 getServerProps가 사라지고, ‘use client’와 app Directory가 추가되는 등 완전히 다루는 방식이 달라졌기 때문에 기대 반 걱정 반 마음으로 프로젝트에 투입되었습니다. 정적과 동적 Next12에서 정적 파일의 경우 getStaticProps, 동적 파일의 경우 getServerProps를 통해서 ..

Nextjs 공식 문서를 찾아보면, 로그에 관련되서 구조화된 로크 패키지를 원한다면 Pino를 사용할 것을 권하고 있습니다. 참고 Going to Production | Next.js Before taking your Next.js application to production, here are some recommendations to ensure the best user experience. nextjs.org 해당 로그들을 파일로 뽑아내야 할 일이 있어 Pino를 사용해 getServerSideProps에서 나오는 로그들을 뽑아내보았습니다. 아래는 버전 참고하시면 될듯합니다. // package.json { "name": "my-app", "version": "0.1.0", "private": tr..

참고한 사이트다. 프로젝트를 최적화하는데 정말 큰 도움이 되었다. https://medium.com/myrealtrip-product/fe-website-perf-part1-6ae5b10e3433 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩 여행 경험을 돕는 웹사이트 가꾸기 medium.com 최적화 과정 1. webpack-bundle-analyzer 설치 처음부터 난관에 부딪혔다. CRA를 통해서만 프로젝트를 구성하고, 따로 webpack을 구성해본적이 없어 이쪽에 관한 지식이 거의 없는 상태다. 이전에도 Antd를 사용하기 위해 Sass를 설정하기위해 eject를 해봤지만 실패했던 경험이 있었다. 이번에도 eject를 통해서 webpack.config.js를 수정하려고 했지..

div의 float를 해제하려고 header: { "&::after": { display: "block", clear: "both", content: "", }, }, 위 코드를 작성했는데 정상적으로 작동하지 않았다. 해결방법은 content의 ""를 ''로 한번감싸주면 문제가 해결된다. 참고 https://stackoverflow.com/questions/53768260/css-pseudo-selectors-with-material-ui

에러 발생 코드 //useAlert.ts return [{sentence, isOpen}, {open, close}] //useLogin.ts const [alertData, alertAction] = useAlert(); ... alertAction.open("로그인 성공"); // error 발생 발생 에러 Cannot invoke an object which is possibly 'undefined'.ts(2722) Cannot invoke an object which is possibly 'undefined'.ts(2722) const alertAction: { sentence: any; isOpen: any; open?: undefined; close?: undefined; } | { open:..

배열을 직접 수정하려고 하면 이러한 오류가 발생한다. https://stackoverflow.com/questions/53420055/error-while-sorting-array-of-objects-cannot-assign-to-read-only-property-2-of/53420326 Error while sorting array of objects Cannot assign to read only property '2' of object '[object Array]' I'm having array of objects where object looks like this (values change): { stats: { hp: 2, mp: 0, defence: 4, agility: 11, speed: 6..

함수 호출을 잘 못 했을때 발생한다. 문제 예제) import { Layout } from '../Component' export function Main(){ const Bar = () => { return ( App bar ) } return( // // 문제 코드 // 정상 코드 ... ) } Bar의 선언이 잘못되어 발생했다. 함수 선언이 제대로 되어있느닞 확인해보자

객체를 생성하는데 잘못 생성한 경우 발생한다. 문제 예시) const data = { ...temp, hair: { // ...temp.hair, color : 'blue' } } 본인의 코드 중 ...temp.hair와 같이 객체 구성시 빠진 코드가 있는지 확인해보자