본문 바로가기

분류 전체보기

(17)
input tag type='radio' 그룹 중 하나만 선택되게 하기 input을 이용한 입력은 아주 기본적이지만 이번에 radio button 직접 구현하다보니 여러 세트 중 하나만 선택되도록 하는 방법을 모르고 있던 점에 당황하여 기록해둔다. 문제: 라디오버튼이 여러 개 동시에 선택됨 코드 Public Mode Private Mode 결과: 둘 다 선택 가능 해결: input tag의 attribute로 name 추가 코드 Public Mode Private Mode 결과: 동일한 name attribute를 가진 라디오버튼 중 하나만 선택 가능 끝.
[git] 이미 지나가버린 기존 커밋 작업내용 수정하기 오늘 유용한 기능을 알게 되어서 기록해둔다. 작업하다가 이전 커밋에 관련된 내용이라 수정을 하고 싶은데, 이후에 커밋들이 몇 개 더 쌓여버려서 곤란했던 적이 있다. 예전엔 커밋이 몇 개 안 되면 reset으로 되돌린 뒤 수정하고 순차적으로 다시 커밋을 하거나 아니면 chore를 달아 새로 커밋을 남겼었다. 지나가버린 특정 커밋을 수정하면서 커밋로그는 그대로 유지하고 싶을 때 rebase를 이용할 수 있다는 걸 알게 되었다!  git log  를 통해 수정하고 싶은 커밋 이전의 커밋 해시값을 확인한다. git rebase -i {HASH VALUE}  명령어를 입력한다.vim 에디터가 열리면 해당 커밋 이후에 내가 남긴 커밋들이 쭉 뜬다. i를 눌러 편집모드에 들어가서 각 커밋에 대해 pick(유지), e..
TypeScript - dayjs type 지정 배경 날짜 필터링을 하기 위해 [ 하루, 일주일, 한 달, 분기, 반기, 일년 ] 버튼을 각각 클릭했을 때 오늘 날짜로부터 역산해서 DatePicker(MUI)의 날짜를 세팅하고 싶었다. dayjs 라이브러리를 사용하고 있었으므로 endDate를 오늘(당일) 날짜로, startDate를 오늘(당일) 날짜에서 역산해서 subtract 메서드를 사용하고자 subtract 메서드에 넘겨줄 날짜 단위와 수량을 지정했다. export const SampleComponent = ({ filterOptions: { startDate, endDate }, setFilterOptions, }: SampleComponentProps) => { const timeRange = [ { display: '하루', unit: '..
state값 직접 업데이트 시도시 발생한 타입에러 해결 발생한 문제 react, recoil 사용해서 개인 프로젝트 진행 중 recoil state를 직접 변경하려다가 다음과 같은 에러가 발생했다. TypeError: Cannot assign to read only property 'isFaved' of object '#' 상황 api로 받아온 정보를 recoil에 저장해둔 상태에서, 유저의 액션에 따라 해당 정보를 직접 업데이트하려고 했다. 영화를 클릭하면 즐겨찾기에 저장할 수 있도록 영화 객체 정보에서 isFaved 키에 해당하는 boolean값을 변경하는 로직이다. 원인 에러메시지에서도 볼 수 있듯이 read only 값을 업데이트하려고 해서 문제가 발생한 것, 즉 불변성을 지키지 못해서 발생한 에러이다. 새로운 객체를 만들어서 넘겨주면 해결된다. 해결..
typescript generic 공부2: useInfiniteQuery 초기 pageParams 지정 typescript generic 공부: react query 공통 type 모듈 지정 (https://honey-dev.tistory.com/5) 이 글에서 연결됨 react bulletproof 규칙을 따르다보니 react query를 사용할 때 axios 요청함수 (query function)과 react query hooks를 분리해서 코드를 짜는 중이다. 무한스크롤을 useInfiniteQuery를 이용해서 구현하고 있으며, 팀원이 짠 코드를 베이스로 하여 동일 컴포넌트를 재사용할 수 있게 개발하는 중이다. pageParams 초기값을 지정해주고 싶었는데 어떻게 주면 좋을지 구조를 보면서 고민하다가, initial data를 세팅하는 건 아닌 것 같아서 아예 params로 넘겨주는 값에서 pag..
typescript generic 공부: react query 공통 type 모듈 지정 이번 프로젝트에서 Next.js와 TypeScript 그리고 react query를 처음 사용해보고 있는데, 꽤나 정신없다. 한 번에 새로운 세 가지를 적용해보려니 발생하는 문제가 정확히 어떤 곳에서 어떤 이유로 발생하는지를 구분하는 것도 꽤나 일이다. 이번 프로젝트에서는 특히나 React Bulletproof(https://github.com/alan2207/bulletproof-react)의 컨벤션을 따라 작업하고 있는데, 발생한 이슈(에러) 해결 과정에서 타입스크립트 제네릭에 대해 조금 더 확실히 이해하게 되어서 기록을 남겨둔다. 이번 프로젝트는 개발자 지망생과 주니어 개발자를 위한 프로젝트 공유 및 코드 리뷰 커뮤니티 서비스이다. 그중 작성된 코드 목록을 가져오는 페이지를 무한 스크롤로 구현하기로..
svg로 변수에 따라 변경되는 이미지 만들기 배경 개발자 지망생과 주니어 개발자를 위한 프로젝트 공유 및 코드 리뷰 사이트를 만드는 프로젝트를 진행중이다. 이 서비스를 이용하면서 프로젝트를 공유하여 피드백을 받고, 그를 반영하여 리팩토링한 결과를 다시 공유하는 방식으로 프로젝트 디벨롭 과정을 포트폴리오화할 수 있도록 기획하였다. 코드 리뷰 또한 마찬가지로, 코드 리뷰를 반영하여 어떻게 개선하였는지 버전 관리 기능을 통해 기록할 수 있도록 하였다. 그러다보니 프로젝트 리팩토링 수, 코드를 리뷰한 수, 코드 리뷰가 채택되어 타인의 코드에 반영된 수 등을 스탯 카드로 제공하고 싶어졌다. 참고한 것은 깃허브 스탯을 제공하는 https://github.com/anuraghazra/github-readme-stats 이다. 작업하다보니 api를 기다리다가 시..
axios 모듈화에 대한 이해 발단: 웹 개발을 하면서 계속해서 사용하게 될 axios 라이브러리에 대해, 효율적으로 모듈화하여 사용하는 방법을 제대로 이해하고 싶었다. 내용: 기존에 사용하던 방식 - src/api/index.js 파일에 path를 객체로 저장함 - 서버로 요청을 보낼 각 컴포넌트에서 axios를 임포트해서 try catch문으로 사용함 // src/api/index.js const URL = 'http://localhost:8080/api'; const USERS = '/user'; const DIARY = '/diary'; const api = { user: { signUp: () => URL + USERS + '/sign-up', findUserId: (email) => URL + USERS + `/find-i..