React

데이터 구조 상태는 배열 타입이고, 배열의 요소는 각 object 객체이다. const initialState = [{id: '1', isDone: false }, {id: '2', isDone: false }, ...] 목표 위와 같은 데이터 구조를 가지고있는 전역 상태 state 배열에서 해당하는 요소를 먼저 찾고, isDone 속성을 바꾸고 싶다. redux toolkit을 사용해서 상태를 관리하는데, 배열 안 특정 요소의 속성 isDone을 유저가 누르는 checkbox 이벤트 값대로 바꿔야한다. UI 코드 유저가 체크하는 체크박스의 event.target.checked 값을 받아서 rtk 슬라이스로 dispatch하는 코드 export interface Todo { id: string; isDo..

상황 d3 차트 라이브러리로 line 차트를 그리는데, 차트에 그려지는 value 값이 0일때는 라인 차트가 아예 나타나지 않고, 다른 값이 있을때는 차트가 그려지다가 0이 나오면 차트가 끊기는 이상한 현상이 있었다. Error: attribute d: Expected number, "M36.5,NaNL79.5,NaNL122…". 게다가 콘솔에는 이런 에러가 찍히고 있었다. 기존 import { line } from 'd3-shape'; const LineChart = ({bars, xScale, yScale}) => { const lineGenerator = line() .x((bar) => xScale(bar.data.indexValue) + bar.width / 2) .y((bar) => yScal..

react 기본 자바스크립트로 만들어둔 todo app을 타입스크립트를 배우고 한번 마이그레이션 해보았다. 그런데 마이그레이션하면서 컴파일에서 에러 내주는 것들을 나름 이것저것 해보면서 빨간 줄 다 없앴다고 좋아했는데 실제로 켜보니 제대로 작동하질 않는 것....??? 이걸 디버깅 하는데도 시간을 얼마나 들였는지... ^^ 다음엔 실수하지 않기위해 기록해본다! 📌 문제 form 태그에 submit 이벤트를 등록해두어서 input을 작성하고 추가 버튼을 누르면 내용이 서버로 가고 화면 리스트에 추가가 되어야함. But, 자꾸 화면이 새로고침됨. 아무런 콘솔도 안보이고 그냥 완전 새로운 화면 이게 e.preventDefault()가 작동을 안해서 그런건지도 한참 이후에 깨달았다... 😂 form 태그 사용하..

hana@Hanaui-MacBookAir ~ % npm install -g typescript npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/typescript npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/typescript' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/typescript'] { npm ERR! errno: -13, npm ERR! code: 'EACCES',..

프로젝트를 하면서 가장 해결하기어려워서 애먹었던 부분이 있다. 바로 App.js의 useEffect 비동기요청의 실행순서 부분이다. 예상했던 실행순서에 따라 실행이되지않아 사용자 인가가 정보가 필요한 페이지 (ex 마이페이지)에서 새로고침시 데이터를 받아오지 못하는 이슈가 있었다. 프로젝트가 끝날때 까지도 해결이되지 않아 임시방편으로 해결해두고, 이후 리팩토링을 하면서도 그 이슈에 대해 여러가지를 찾아보고 적용해보았지만 쉽게 해결이 되지 않았다. 플젝이 끝나고 약 1달이 지난무렵.. 같이 개발했던 우리팀 수진님하고 디스코드로 근황주고 받다가 그 이슈에 대해 얘기하게되었고 그날 그 문제를 diggingg하다가 드디어...!!! 새벽 3시가 넘어서 문제가 해결되었다. 😭 정말 ... 이 문제를 해결하려고 u..

코드스테이츠를 수료하고 20일동안 기술면접 스터디 챌린지를 참여했다! 이걸 매일할 수 있을까? 했는데 또 하다보니 금방 20일이 다갔다는... 매일 기술면접 질문이 올라오면 답변 적는 연습을 하면서 개념도 다시 공부하는 시간을 가질 수 있어서 좋았다. 그런데 역시 기술을 말로 설명하려니 더 어려운것.. ^^ 나 언제 기술자될 수 있지..? 20일 챌린지에서 받았던 질문과 내가 적은 답변들을 블로깅해본다. 1. 배열, 객체를 const로 선언했는데 요소, 속성을 추가가능한 이유 const 키워드는 재선언과 재할당이 불가능합니다. 하지만 const로 선언한 배열이나 객체에 요소, 속성을 추가하는 것은 재할당의 개념이 아닙니다. 배열과 객체의 경우 메모리에 값 자체가 할당되는 것이 아니라 주소값이 할당되기 때..

리팩토링 이후 데모 input이 비어있을때 + 유효성 검사를 모두 통과하기 전에는 로그인 버튼이 disabled 되어 버튼을 누를 수 없다. 모든 유효성 검사를 통과해야지 로그인 버튼에 불이 들어오고 로그인 버튼을 클릭해서 서버에 로그인 요청을 보낸다. 이번 프로젝트에서는 로그인, 회원가입 기능 구현시 유효성 검사가 필요한 모든 input창을 useState hook 상태로 관리할 필요없이, react-hook-form 라이브러리를 도입해서 form을 완성했다. react-hook-form을 사용하면 서버로 통신이 가기 이전에 클라이언트에서 해야되는 유효성검사를 쉽고 간단한 코드로 짤 수 있다는 장점이 있다. react-hook-form 라이브러리 공식 문서의 타이틀도 Simple React forms ..

VSCode 테마를 마음에 드는 테마로 변경했는데 이럴때가 있다. 아 이 색깔만 좀 바꿀수 없나.. 다른 건 다 괜찮은데 이 색깔이 너무 거슬려 ㅠㅠ 이번에 pc를 리셋당하고? 프로젝트 도중에 급한대로 vscode에 내장되어있는 테마 중 그래도 젤 맘에 드는걸로 변경했는데.. 도저히.. 프로젝트를 계속하는데 저 JSX 태그의 빨간 글씨가 너무너무 눈이 아팠다... 이렇게 컴포넌트 태그가 죄다 빨간색 ... 윽.. 자.. 한번 바꿔보겠습니다.. 특정 태그만 바꾸려면 뭐로 검색해야되는지 ...? 바꾸는데도 조콤 시간이 걸렸어서 적어보는 포스팅 먼저 VSCode 설정 Settings 로 가서 editor: token 이라고 검색한다. 초창기엔 일일이 settings 에서 카테고리를 다 찾고 다녔는데 너무 방대..

최종 구현 모습 JSX 코드 마크업 구조 이번 프로젝트에서 마이페이지를 구현하면서 조금 애를 먹었던 부분이 있는데, 외부 네비게이션바에서 마이페이지 안에 메뉴 탭으로 구현했던 내 프로필, 내 레시피, 내 좋아요, 받은 댓글 네개의 탭을 각각 하나씩 다른 페이지처럼 접근할 수 있게 만드는 것이었다. 처음에는 useState를 이용해서 상태로 처음 currentTab을 0으로 두고, 현재 눌러진 탭이 currentTab이 되도록 구현했는데, 이렇게 했더니 마이페이지에 들어오면 무조건 상태가 0번째인 내 프로필로 시작이되고, 외부에서 마이페이지 각각의 탭에 접근할 수 없다는 문제점이 있었다. 기존 코드 const [currentTab, setCurrentTab] = useState(0); {menuArr.ma..