초보 개발자의 성장 일기

1. 문제 해석 https://www.acmicpc.net/problem/10810 10810번: 공 넣기 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 또, 1번부터 N번까지 번호가 적혀있는 공을 매우 많이 가지고 있다. 가장 처음 바구니에는 공이 www.acmicpc.net 바구니안에는 하나의 공만 들어갈 수 있고 그 공에는 숫자가 적혀있다. 예를들어 1번 바구니에 공3번을 넣었다가 이후에 다시 공5번을 넣으면 1번 바구니에는 공5번만 남아있는 것이다. N개의 바구니가 주어지는데 M번 공을 넣는 문제이다. 2번째줄부터는 바구니의 범위와 공의 번호가 주어진다. 바구니의 범위에 공의 번호를 넣어주면 되는데, 공은 누적이 되지 않고 교체가 돼야 한다. 2..

사이즈 별로 div 컴포넌트를 만들었고, "medium"을 props로 넣어주면 설정해준 width, height가 나오는데 props를 지정하면 컴포넌트에 에러가 났다. '{ children: Element; size: string; }' 형식은 'IntrinsicAttributes & Size' 형식에 할당할 수 없습니다. 'IntrinsicAttributes & { size: Size; }' 형식에 'children' 속성이 없습니다. return ( // 에러 ); } Container에는 아래와 같이 컴포넌트를 만들었다. import { StyledContainer } from '@/src/components/Home/Container/Container.styles'; type Size = 's..

카카오 로그인 구현 중 .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..

프로젝트할 때 상대경로를 사용하면 depth의 깊이가 깊어질 때 ../../ 가 많아져 코드가 길어지고, 경로를 파악하기에도 불편했다. 리팩토링할 때, 유지보수할 때도 관리하기 불편함이 생겨 절대경로를 사용하였다. 적용 방법 타입스크립트를 사용한 프로젝트에서는 tsconfig.json 파일에서 수정한다. "compilerOptions"에 코드를 추가하면 바로 절대경로 코드 사용이 가능하다. { "compilerOptions": { /* 절대경로 추가 코드 */ "baseUrl": ".", // 기본 경로 "paths": { "@/*": ["*"] // "기본 경로를 대체할 문자/입력할 경로": ["실제 경로"] }, /* --- */ "target": "ES2020", "useDefineForClassF..

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..

위치 허용을 하게 되면 내 위치의 위도와 경도를 불러오는 자바스크립트 내장 함수가 존재한다. navigator.geolocation.getCurrentPosition() 2개의 콜백함수를 인자를 받는데 첫번째는 위치를 성공적으로 불러왔을 때, 두번째는 실패했을 때 실행시킬 각각의 함수를 불러온다. function onGeoOk(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; console.log('You live in', lat, lng); } function onGeoError() { alert("can't find you"); } 위치를 불러왔을 때 위도, 경도를 상수로 저장하고, 실패했을 ..

시계를 만드는 도중 10초 미만의 한자리 숫자일때는 1, 2, 3 ... 이렇게 나오는데, 모두 두자리로 01, 02, 03으로 맞추고 싶었다. 처음 생각해낸 방법은 if문을 이용해서 길이가 2미만일 경우 앞에 0을 붙이도록 하려고 했으나, 원하는 길이를 지정하고 그 길이에 부족한만큼 채울수 있는 메소드가 있지 않을까 해서 찾아봤다. padStart를 사용하면 긴 if문을 사용하지 않아도 된다. '2'.padStart(2, '0'); // '02' 2라는 문자에 padStart를 사용해서 길이를 2로 만들고 길이가 부족한 만큼 앞에서부터 0문자를 채우는 것이다. 반대로 padEnd를 사용하면 뒤에서부터 부족한 만큼 채워준다. 주의할 점은 문자만 가능하다는 점이다. 숫자를 사용할 경우 문자로 변환해서 사용..