개발자 도담씨

참고 React 문서: https://ko.legacy.reactjs.org/docs/lists-and-keys.html 리액트를 사용하다보면 반복문을 사용할때 자식 컴포넌트에 대해 key값을 지정해달라는 console log를 본적이 많습니다.리액트 문서에서 적혀있듯 순서가 바뀔 수 있는 경우 key값으로 index값을 사용하지 않는 것을 권장하고 있습니다. 리액트는 가상의 DOM을 두는데 실제 DOM과 가상의 DOM을 순회하다차이가 있다면 변화를 적용하고 있습니다.  first second first second third 위의 코드를 보면 하단에 자식 끝에 엘리먼트를 추가할 경우 first와 second는 변화하지 않고끝에 third만 추가해주면 됩니다.그런데 만약 가장 상단에 추가하게 될..

최근 새 프로젝트의 시작과 함께 디자이너와 협업을 시작했는데익숙하지 않다보니 아쉬운 부분이 생겨 정리해두려고한다. 디자인을 보고 퍼블리싱을 진행하는 과정에서 묘하게 정리되지 않은 부분들이 많았는데,내가 잘못하고 있는 부분인가 하면서 억지로 맞춰 넣었더니 조금씩 탈이 나기 시작했다. 초반에 공통적인 부분에서 디자이너와 개발자간의 대화가 필요해보이고,이번엔 특히 디자인에서 line-height가 뒤죽박죽인 부분때문에 문제가 많이 발생했다.추후엔 line-height도 확인하는게 좋을 것 같다. +) line-height문제가 아니라 디자이너분이 height를 직접 수정했던것...😭

나의 개발 환경은 Next.js, Typescript를 사용중이다. 데이터베이스를 이용하기 위해 Prisma를 사용하기로 했고 필자는 우선 sqlite를 이용할 예정이다. 1. 프로젝트에 Primsa 설치하기 yarn add prisma 또는 npm i prisma 2. prisma init npx prisma init 초기화시 /prisma/schema.prisma가 자동으로 생성 되고, 우리가 사용할 데이터 베이스에 접근하기 위해 .env 파일에 DATABASE_URL 값을 저장해주어야한다. ⭐️ 이때 .env파일은 꼭 gitignore에 추가해주기! 3. 사용할 데이터베이스 종류와 URL 설정 나는 sqlite를 이용하여 로컬파일로 관리하기를 원해 다음과 같이 수정해주었다. ## .env DATAB..

ES6의 reduce함수와 태그 함수 그리고 정규식을 이용해서 숫자 포맷을 깔끔하게 적용하는 멋진 코드를 하나 기록해두려 한다. function tag (str, ...arg) { return arg.reduce((p, c, i) => { return p + str[i] + String(c).replace(/\d{1,3}(?=(\d{3})+(?!\d))/g) }); } console.log(tag `사과는 ${3000}원 이고, 포도는 ${5000}원 입니다.`);

어우 올게 왔다 실행 컨텍스트.. 여기서 출발하는 많은 개념들이 초면은 아니지만 아직도 만날때마다 매번 정의를 딱 내리기 어려운것 같다. 간단하게 메모형으로 남겨놓으려고한다. Excution Context :: 함수를 실행할때 필요한 환경 정보를 담은 객체 :: 전역공간, 함수, module, eval 이 Excution Context의 내부를 들여다보면 아래와 같이 생겼다. VariableEnviroment enviromentRecord outerEnviromentReference LexicalEnviroment: 실행 컨텍스트를 구성하는 환경정보들을 모아 사전처럼 구성한 객체 enviromentRecord: 현재 문맥의 식별자 정보 - 호이스팅 outerEnviromentReference: 외부 식별..

최근 기초의 심화 과정이라고 해야할까... 읽고 까먹고 읽고 까먹고 했던 부분을 상기시키는 시간을 가지고 있다. 기초가 제일 어려워 🫨 Javascript의 데이터 타입에 대해 정리하려고 한다. 단순히 string, number, array 하나씩 이건 이겁니다 하는것은 아니고 크게 Primitive Type(원시타입)과 Reference Type(참조타입)에 대해 보려고한다. Primitive Type :: Null, Undefined, Number, String, Boolean, Symbol, BigInt ... Reference Type :: Object, Array, Function ... Primitive Type의 변수는 크기가고정되어 있기때문에 스택 메모리에 저장되게 된다. 아래와 같은 코드..

:: 설치 환경 yarn berry next.js vscode typescript 강의들으면서 따라하는데 강의는 npm을 사용했고 나는 이제 yarn berry에 익숙해져 보려고 혼자 yarn berry로 셋팅했다. 그런데 자동으로 import가 안된다. ( 필자는 vscode 사용중, 패키지 찾는거 조차 못함 바보 쨔석..! ) @type/react를 설치해봐라 tsconfig.json 파일을 수정해보라는 답변들은 다 소용없었다!! 확인해보니 기존 node_modules에서 패키지를 읽어오는 방식과 달리 yarn berry에서는 PnP 방식에 zip 아카이브를 사용하고 있어서 vscode가 못 불러오는 듯 하다. 그래서 별도의 확장 프로그램 설치 및 에디터 설정이 필요했다. vscode extensio..

Next.js 버전 14를 다시 공부하려고 설치를 하려던 도중 강의는 npm을 이용했지만 이제 yarn berry를 이용해보고 싶은 마음에 개인적으로 yarn berry로 셋팅을 했는데...또 나망 앙댕..😩 package.json은 아래와 같았다. { "name": "next14-example", "packageManager": "yarn@4.1.0", "scripts": { "dev": "next dev" }, "dependencies": { "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0" } } 여기서 yarn dev를 실행 했는데 아래와 같은 에러가 발생했다! 음...🤔 읽어보면 보자... 3000번 포트가 사용중이라 3001번이 사용..

이전에 npm과 yarn 중에 고민할때 대충 아아 음~ 그렇지 하고 넘겼다가 이제서야 기술 블로그에서 상세하게 설명한 글을 보고 머리를 한대 맞았다 🥺 패키지 관리 도구로 대표적으로 npm과 yarn이 있는데 그중에서도 최근 많이 사용중인 yarn berry 버전이 npm과 비교했을때 어떤 이점이 있는지 왜 인기가 많은지 알아보려고한다. 🤔 npm의 문제점 비효율적인 의존성 검색 npm은 node_modules 폴더를 통해 파일 시스템을 이용하는데, node.js에서 제공하는 require.resolve.paths() 함수를 통해 react를 require했을 때 react를 찾기위해 어떤 폴더를 확인하는지 봤다. $ node Welcome to Node.js v20.5.1. Type ".help" fo..

오늘도 어김없이 오는 에러 로그 어서오고..😩 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. const [list, setList] = useState(); useEffect(() => { setList(data); }, [data]); useEffect 함수내에서 setState를 사용했고 해당 부분때문에 발생한 무한 루프 현상이다. useEffect는 컴포넌트가 랜더링 될 ..