초보 개발자의 성장 일기

리액트 + ts로 프로젝트를 만들던 도중 고유한 atom key만 사용했는데도 불구하고 atom의 키가 중복되었다는 오류메시지가 나왔다. atom에 있는 모든 키가 중복되었다는 에러가 나왔고 atom의 키를 바꿔도 같은 에러가 나타났다. 개발 환경에서 Recoil을 사용하면 파일이 변경되어 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다고 한다. key는 고유한 값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생하는 것이다. recoil을 사용할 때 발생하는 고질적인 문제이며 기능상에는 문제가 없지만 무시하기엔 에러가 너무 많이 났다. 에러메시지를 없애기 위한 방법은 공식 문서에 잘 나와있다. https://recoiljs.org/blog/202..

카카오 로그인 구현 중 .env 파일에 key를 넣고 process.env.VITE_KAKAO_CLIENT_ID를 했으나 에러가 떴다. process.env를 사용할 수 없어서 찾아보니 Vite를 사용할 경우 CRA과는 다르게 사용해야한다는 것이다. CRA는 환경변수 이름이 REACT_APP_으로 시작해야했다면 Vite는 환경변수 이름이 VITE_로 시작해야 한다. .env VITE_FRONTEND_BASE_URL = "http://localhost:5173/" VITE_KAKAO_CLIENT_ID = VITE_KAKAO_JS_SDK_KEY = 그리고 Vite는 문자열에 ""큰따옴표 사용이 가능하다. const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/auth..

todo 리스트를 구현하다가 버그를 발견했다. 첫번째 투두리스트를 수정하고 있던 도중 두번째 투두리스트를 수정하게되면 둘이 동시에 같은 내용으로 수정되는 버그이다. 투두 수정 중 다른 투두를 수정할때는 처음에 수정했던 투두의 수정모드를 해지해야겠다고 판단했다. 어떻게 처음 수정했던 투두의 수정모드를 해지할까 고민하다가, 수정하고 있는 input영역에 ref를 주고 이 부분 바깥 클릭시에 수정모드가 해제되도록 구현했다. import { useRef } from 'react'; const inputRef = useRef(null); useRef를 불러오고 변수로 설정해준다. setUpdateTodo(e.target.value)} ref={inputRef} /> editMode가 참일때만 나오는 Input에 ..

todo리스트 구현 중 O버튼을 누르면 객체 속성 중에서 done이 false에서 true로 바뀌고 style에 props로 done의 상태를 전달받아 true로 바뀌면 style이 바뀌도록 구현했다. 데이터는 localstorage로 저장했고, 배열의 상태가 변화할때마다 localstorage의 상태로 업데이트 되도록 useState를 해 놓은 상태이다. 삭제, 등록은 바로 리렌더링이 돼서 화면에 구현이 되는데 할일을 완료했을 때는 새로고침해야만 스타일이 반영이 됐다. state가 변경이 되면 리렌더링이 되는데, state가 바뀌지 않고 있다고 판단이 되었고, 버튼을 클릭할 때 객체안의 done의 속성이 false에서 true로 바뀌는 순간에 "state가 변경되었다고 인식하지 못하는건가?" 라는 생각..

todo리스트 삭제하는 이벤트를 구현하려고 e.target속성을 넣고 확인하는데 function deleteClickHandler(e: React.MouseEvent) { const target = e.target as HTMLButtonElement; console.log(target.parentElement); } 버튼 안에 있는 SVG파일인 Delete도 선택되는것이다. 어느 부분을 누르냐에 따라 path, svg, button이 각각 클릭돼서 다른 타겟의 부모가 나왔다. 하지만 내가 원하는건 button을 클릭했을 때 버튼 자체만 타켓이 되길 원했다. 처음에는 캡쳐링, 버블링문제인줄 알고 e.stopPropagation()속성을 deleteClickHandler에 넣었지만 문제가 해결되지 않았다...

아이콘을 사용할 때 React-icons를 주로 사용했다. 웬만한 아이콘들이 전부 다 있고 라이브러리를 다운받아서 import하기만 하면 쉽게 사용할 수 있기 때문이다. 이번에 사이드 프로젝트를 진행하면서 난관을 겪었다. 투두리스트 인풋 안에 버튼을 만들어 아이콘을 넣었고 relative, absolute하고 right를 0으로 했지만 오른쪽에 미세한 공간이 남았다. 끝 라인을 맞추고 싶었는데 margin-right, padding-right등으로 하드코딩이 가능하겠지만, 이유를 찾고 효율적인 방법을 찾고 싶었다. 개발자 도구로 확인해보니 이유를 어렵지 않게 찾을 수 있었다. svg크기와 path크기가 있는데 svg크기가 path크기 보다 더 크기 때문에 공간이 남았던 것이다. 라이브러리에서 svg, p..

export const Navigation = styled.ul` display: flex; gap: 20px; li { font-size: 18px; font-weight: 800; cursor: pointer; border-bottom: 1px solid ${(props) => props.theme.color.white}; &:hover { border-bottom: 1px solid ${(props) => props.theme.color.gray}; } } `; 메뉴에 hover했을 때 아래에 밑줄이 가도록 border-bottom 속성을 넣어주었으나 미세하게 글씨가 움직인다. export const Navigation = styled.ul` display: flex; gap: 20px; li { ..

API를 fetch하고 데이터를 map으로 할당하다보면 제대로 데이터를 불러왔지만 map을 읽을 수 없다는 오류를 보게된다. 이때 data를 console로 찍으면 빈 배열이 나오게 된다. 이유가 무엇일까? 데이터를 fetch하는 함수가 비동기식이기 때문이다. 데이터를 불러오기전에 데이터를 할당 해 데이터의 할당 항목을 알 수 없는 것이었다. 이것은 간단하게 해결이 가능하다. if (!data) return ; 데이터가 없으면(즉 거짓이면) 빈 를 넣는 것이다. 데이터가 있을 때는 if안의 값이 거짓이 되어 데이터를 할당 할 수 있게 되는 것이다. 하지만 이렇게 하다보면 데이터 양이 많아질 때 데이터를 불러오는 동안 빈 화면이 보여지면 사용자 입장에서는 데이터를 불러오는건지, 원래 빈 화면인지 알 수 없..

로그인 폼을 구현하다가 사용자가 로그인할 때 입력폼에 아무것도 입력되지 않으면 로그인 버튼을 비활성화를 해야할지 입력 폼에 focus를 주어야 할지 고민이 들었다. 입력을 안했을 때 버튼 자체가 비활성화가 되는것도 좋지만, 로그인 버튼을 눌렀을 때 어떤 입력폼에 입력을 해야할지 focus를 주면 사용자 입장에서 더 편리할 수도 있겠다는 생각이 들었다. 무엇을 입력해야 하는지 알 수 있고, focus를 주면 사용자가 바로 입력하기 편리할 것 같다는 생각이 들었다. 1. focus를 줄 수 있는 activate 함수 만들기 const Input = (props) => { const inputRef = useRef(); const activate = () => { inputRef.current.focus();..

리액트 훅이란? use로 시작하는 모든 함수를 의미한다. 1. 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅에서만 호출해야 한다. 컴포넌트 함수가 아닌 일반 return하는 함수에서는 적용할 수 없다. 2. 리액트 컴포넌트 함수 사용자 정의 훅 함수의 최상위 수준에서 직접 호출해야 한다. 중첩 함수, block문에서 훅을 호출하면 안된다. if문에서도 허용되지 않는다. 3. 참조하는 모든 항목의 의존성으로 useEffect 내부에 추가해야 한다. useReducer 또는 useState에 의해 노출된 state 업데이트 함수는 변경되지 않도록 리액트가 보장한다.