본문 바로가기

분류 전체보기102

20230408 프로젝트 매일회고 / 유효성 검사 구현하기 오늘 배운 것 - Google OAuth로 회원 가입 후, 기본적인 회원 정보 설정하는 페이지에 안내와 유효성 검사를 추가했다. 고민한 것 - 회원 정보 설정 페이지에는 이름 / 성별 / 예산 시작일 / 예산 금액 / 급여일 / 급여 금액 이렇게를 input으로 받고 있다. 이 정보들의 유효성 검사를 다른 라이브러리의 도움 없이 구현해보고자 한다. 또한, 유효성 검사의 패스 여부에 따라 하단 '저장하기' 버튼을 활성화/비활성화 할 예정이다. 해결한 방법 - 유효성 검사의 기본 로직은 다음과 같다. - 상태 관리: 각 정보의 input value / 오류메세지 / 유효성검사 패스 여부 - 상태 변경 로직: 각 정보의 onChange 핸들러에 1. setInputValue(e.target.value) 조건문.. 2023. 4. 8.
20230407 프로젝트 매일회고 오늘 고민한 것 API로 불러온 거래내역과 사용자가 추가한 거래내역의 금액 수정 시 달라지는 뷰와 이에 따른 데이터 수정 방안에 대해 백엔드 팀원과 논의했습니다. 문제 및 해결 과정 - 문제: API로 불러온 거래내역과 사용자가 추가한 거래내역에서의 금액 수정 모두 취소선을 긋고 수정된 금액을 표시했을 때, 엣지케이스가 처리되지 않음. ex. 사용자가 단순 오류로 금액을 수정한것이라면? - 해결 과정: 대안 1. API와 사용자 임의 수정 거래내역을 구분하는 컬럼을 만들어, API의 경우 취소선 유 / 임의 수정의 경우 취소선 없이 바로 수정된 금액만 뜨도록 구현 -> 대안 1에 대한 고민) 임의 수정한 거래내역의 경우에도 더치페이 표시를 명확하게 취소선으로 하고 싶다면? 대안 2. (선택됨) 단순 수정.. 2023. 4. 7.
타입스크립트 Call signature / 오버로딩 - call signature : 함수 위에 마우스를 올렸을 때 보게 되는 것 / 어떻게 함수를 호출하는지와 함수의 반환 타입을 알려줌. -> 선언하는 방식: type Add = (a:number, b:number) => number; const add:Add = (a,b) => a + b; -> 함수의 타입을 설명하고 나서 코드를 구현할 수 있게 해줌. -> props로 함수를 전달할 때의 편의성. - overloading : 여러개의 call signature가 있는 함수 type Add = { (a: number, b:number) : number (a: number, b:string) : number } const add: Add = (a, b) => { if(typeof b === 'strin.. 2023. 4. 5.
20230403 프로젝트 Season 1. 회고 팀원들과 Season 1 을 마무리하며 KPT 회고를 진행했다. 내가 정리한 KPT 각 항목별 사항은 다음과 같았다. Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분) 깃헙 칸반 관리 / 이슈 상세히 작성하여 해야 하는 작업을 정리한 것 소통 방식에 있어서 서로 존중하며 소통한 것 / 팀으로써 같이 으쌰으쌰 하는 분위기가 지속된 것 (가장 좋았습니다!!! 대부옵스 짱…🫶) 빠른 소통 + 적극적인 문제 해결 및 협력 Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점) 초반 프로젝트 기능 명세를 작성할 때, BE와 FE의 더 상세한 소통이 필요함 매일 11시 회의에서 기능 어디까지 구현이 되었고, 어느 이슈가 있었으며 오늘은 어디를 진행할 예정인지 각자 공유하는 부분.. 2023. 4. 4.

티스토리툴바