☁️

디자인시스템을 만드는 팀 프로젝트를 진행 중 우리가 만든 컴포넌트들을 npm 패키지로 배포해야 했다. 처음에는 Rollup으로 시도했다가 이건 뭔가 아닌 것 같다는 판단이 들었다. 왜냐하면 Next.js는 Vite와 달리 Rollup 번들러가 아니라 Webpack 번들러를 사용하기 때문이다. 팀원과 함께 Webpack으로 번들링하는데는 성공했지만 tailwind 스타일링이 적용되지 않는 문제가 발생했다. 배포한 npm 패키지를 설치하고 Toast 컴포넌트를 적용시켰을 때 div에는 tailwindcss가 잘 적용된 것 처럼 나온다. 하지만 결과는 제대로 나오지 않고 폰트 크기만 적용되어서 나오는 문제가 발생했다. 구글링을 해도 검색이 잘 되지 않아 영문으로 검색하니 동일한 문제를 겪은 사람들이 있었다. ..

Each child in a list should have a unique key prop. 처음엔 todoList를 리스트렌더링할 때 idx값을 key값으로 넘겨줬었다. 근데 배열의 원소 순서가 바뀌면 index값도 바뀌고 컴포넌트마다 고유해야 하는 key값도 바뀌기 때문에 지양해야 한다고 한다. 그래서 나는 idx 부분을 todo.id로 바꿨고 저런 오류가 발생했다. [초기 코드] {todoList.map((todo, idx) => ( ))} [수정 코드] {todoList.map((todo) => ( ))} 코드를 수정했을때 id값을 찾지 못하는 것 같았다. 이거때문에 3일이라는 시간이 소요됨.... 에러를 해결하는 방법을 엄청나게 찾아봤는데 해결방법이 2개가 있었다. 1. Key값을 정확하게 넣을..

개발 중에 만난 axios 401 에러.. 처음에는 서버가 잘못된건지 뭐가 잘못된건지 계속 헤맸다. 한 두시간 넘게 계속 헤맸다가 정말 어이없게 해결했다. 이 오류 해결에 도움을 준 내 친구에게 영광을 돌린다. 사실 이 문제는 같이 오류해결을 하려고 했던 친구가 먼저 이 오류를 마주했다. 함께 찾아보다 결국 해결하지 못했는데 이 친구는 선언했던 변수명과 응답해야하는 변수명이 달라서 오류를 뱉어낸 것이었다. (내가 준 코드 때문에 변수명이 달랐음) 그래서 나도 변수명이 문제인가했지만 그럴리가 없었다. 왜냐면 나는 계속 똑같은 코드를 써왔기 때문에.. 투두리스트를 만들고 axios를 이용해서 통신을 하는데 계속 오류가 발생했다. 나는 headers도 잘 넣었는데 왜 안될까..를 고민하던 와중 데이터를 보내는..

리액트로 투두리스트(todoList)를 구현하고 있던 도중 이런 오류를 만났다. 폼을 제출할 때 콘솔창에 이런 오류가 뜨기 시작했다.. 뭐가 문제인지 구글링해봤는데 form 안에 버튼이 2개가 존재하면 이런 오류가 뜰 수 있다고 한다. 내가 쓴 코드는 이러하다. { onEdit(index); }} > setNewTodo(e.target.value)} /> 제출 setEdited(false)} > 취소 버튼이 2개인데 버튼마다 타입을 명시해줘야 한다고 해서 각 버튼마다 타입을 명시해줬다. 제출 setEdited(false)} > 취소 근데도 오류가 뜸.. 그래서 다른 방법을 찾아야 했다. 나머지 방법을 스택오버플로우에서 찾았는데 e.preventDefault()를 사용해야 한다고 나와있었다. 그러면 저 코..

📖 서두 로그인 기능을 구현하려던 와중 회원가입 → 로그인을 하면 계속 로그인 상태를 유지하고 만약 token 값을 가지고 있지 않다면 다른 기능을 사용하지 못하도록 설정을 해야했다. 한 번 로그인을 했다면 계속 유지를 시켜야하므로(즉 로그인을 했다는 정보를 가지고 있어야 한다.) localStorage를 이용해서 로그인 정보를 유지할 수 있도록 token값을 저장해줘야 했다. 📝 localStorage localStorage는 자바스크립트의 Web Storage를 이용한 것이다. 웹 스토리지에는 localStorage와 sessionStorage 2종류가 있다. 두 가지의 차이점을 간단히 설명하자면, 데이터 저장이 어떤 범위로 계속 보존되어 있는지에 달려있다. localStorage는 어떤 세션에 들어..

axios로 통신을 하던 와중 headers에 왜 이것을 써주어야 하는지 궁금했다! axios 요청할 때 header에 이런 것을 넣어준다. 'Content-Type' : 'application/json', 이것의 의미는 json 형태로 응답해주세요. 라는 뜻이다. 백엔드와 프론트엔드 사이에 전달을 요즘 다 json형태로 하는 추세라고 한다. request랑 response 형태가 어떤 형태로 들어가고 나오는지 확인 후 헤더를 정한다. 예를들어 로그인을 했을 때(백엔드에서 POST로 signin을 한다면) 어떤 것을 줄까?를 물어본다면 그것은 응답이다. 응답 : json토큰 (jwt) { "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI..

프로젝트를 CRA를 이용해 만드려고 설치를 하던 중 오류를 발견했다. 두번이나 시도했는데 계속 실패해서 구글에 이유를 찾아봤다. 뭔가 node 버전이 맞지 않아서 그런 것 같았다. 오류를 발견했을 때 다른 분은 node 버전이 낮아서 이런 오류가 발생했는데 나는 저번에 yarn을 설치하면서 버전이 너무 높았던 것 같다. node 버전을 18.14.0으로 설치해주니까 CRA 설치가 정상적으로 작동했다. 이렇게 명령어로 설치를 해준 후 확인을 해보면 제대로 바뀌어 있는 것을 볼 수 있다. 나는 원래 노드 버전이 20.3.0이었는데 lts에 맞게 버전을 내려줬다. 다시 재 설치하면 정상적으로 작동하는 것을 볼 수 있다!

내일배움카드를 통해 리액트 리덕스 강의 마지막 주차다. 마지막 주차 강의에서는 성능개선을 위해 어플리케이션을 만들었다. 성능을 체크할 때 구글에 프로파일러와 하이라이트를 통해 성능을 체크할 수 있었다. 이것은 구글 확장프로그램이어서 깔고 쓸 수 있다! 프로파일러와 하이라이트를 사용하면 내가 입력할 때마다 반짝이는 것을 볼 수 있다. 이 부분은 하이라이트를 체크해야 볼 수 있는 부분이다. A, B 컴포넌트를 각각 만들 때 A컴포넌트는 한 번에 만들었고 B는 쪼개서 만들었다. 쪼개서 만들었을 때 성능이 더 좋지않을까? 싶지만 그것도 아니다. 오히려 불필요한 곳에서 리렌더링이 일어나 좋지 않을 수 있다. 따라서 React.memo를 이용해 성능을 최적화 시킬 수 있다. React.memo로 래핑될 때 리액트는..

타입스크립트를 공부하면서 node를 최신 버전으로 업데이트를 해야했다. 그치만 계속 안되는 오류가 발생했다. 원래는 노드버전이 v17.08.5 인지 아무튼 이랬는데 아무리 최신버전을 설치해도 되지 않았다. Node 터미널을 열고 Node.js 버전을 확인해준다. node -v v x.x.x n 모듈이 설치되지 않았을 경우 n 모듈을 설치해준다. sudo npm install -g n 이경우 나는 권한? 때문에 앞에 sudo를 붙이니까 설치가 잘 되었다. Node.js를 원하는 버전으로 업데이트 한다. Stable 버전 설치 $ sudo n stable 최신 버전 설치 $ sudo n latest LTS 버전 설치 $ sudo n lts 특정 버전 설치 $ sudo n 원하는 방식을 붙여넣고 설치해준 후 ..

어느덧 내일배움카드를 통해 듣고 있는 리액트 & 리덕스 강의 7주차째다! 새삼 시간이 빠르고 많은 일이 있었지만 앞으로 나아갈 일만 남은 것 같다. 이번주에는 저번에 만들었던 것에 이어서 상태관리를 app 컴포넌트로 옮겼다. 처음에는 square 컴포넌트였다가 두번째는 board 컴포넌트로 옮겼었는데 아예 제일 최상위 컴포넌트로 상태를 옮겨서 board컴포넌트에 props를 통해 받아줄 수 있도록 변경했다. 코드는 이런식으로 다시 짰다. 좀 많이 길어지긴 했는데 앱 컴포넌트에 squres안에 들어갈 내용과 눌렀을 때 변경되는 부분등을 관리하도록 넣어준 부분이다. 처음에 똑같이 작성했는데 홈페이지에 나오지 않아서 당황했다. 나는 calculateWinner라는 함수를 계속 사용했는데 위에서 사용되지 않는다..