초보 개발자의 성장 일기

1. 문제 해석 아스키코드란? ASCII (American Standard Code for Information Interchange, 미국 정보 교환 표준 부호) 1963년 미국 ANSI에서 표준화한 정보교환용 7비트 부호체계이다. 쉽게 얘기하면 컴퓨터에서 문자를 표현하려면 숫자를 이용해야 하는데 이때 문자 표현을 위한 약속들 중 한 가지가 아스키코드이다. 2. 문제 풀이 자바스크립트에서 아스키코드로 변환해주는 메소드가 있다. 아스키코드 관련 메소드를 더 찾아보았다. charCodeAt() 문자를 아스키 번호로 변환해준다. console.log('A'.charCodeAt()) // 65 String.fromCharCode(아스키 번호) 아스키 번호를 문자로 변환해준다. console.log(String..

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

가계부 웹을 만들던 도중 수입 금액을 리코일로 전역 상태저장하고 기본값을 0으로 한 후 input에 onChange로 값을 넣어주었다. onChange={(e)=> handleChangeImportAmountValue(e)} const handleChangeImportAmountValue = (e:React.ChangeEvent) => { importAmountValue(e.target.value) } 이벤트를 넣어주고 이벤트에 맞는 타입을 지정해주고 값을 변경하려니 타입 에러가 났다. 'string' 형식의 인수는 'number | ((currVal: number) => number)' 형식의 매개 변수에 할당될 수 없습니다. 라고 뜨는 것이다. 상태의 기본값이 0이라 타입은 0으로 추론이 되어있을것인..

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에 넣었지만 문제가 해결되지 않았다...