JayGo 개발 연습장

코드 리뷰 챌린지 서비스? 만들기코드 리뷰를 위한 체크리스트 부분을 작업했다.짧지만 현업에 계신 분들과 같이 작업해 보면서 배운 게 참 많았다.프로젝트를 할 때 어떤 순서로 준비하고 진행해나가는지, 처음으로 경험해 봤다.일단 현업에 있는 분들의 대화 자체를 따라가는 게 버겁다 보니 위축되는 게 좀 있다. 내 의견이 있다가도 뭔가 전달했을 때 잘 이해를 못 하면 '내가 뭘 잘못 얘기한 건가?' 싶다. 완전 6년 전 처음 사회생활 시작할 때의 모습이 떠올라서 속상했다.그래도 좋은 자극이 됐다. 개발 지식도 지식이지만, 현업에서 어떤 흐름으로 일 하는지, 주로 사용하는 도구는 무엇인지, 뭐가 일반적인 상식이고 뭐는 아닌지, 하나씩 잘 알아가야겠다.코드 리뷰 요청 시 만들 체크리스트 기능을 만들면서는 아래의 내..

할 일 목록 관리 서비스 만들어보기아주 느리고 미세하지만 조금씩 진행을 해나가고 있다.오늘은 로그인, 회원가입 페이지의 UI 이벤트 처리 작업을 완료했다Input 컴포넌트의 Validation 경고 메시지와 Button 컴포넌트의 disable 처리, 그리고 각 상태의 초기값 설정 등을 일치시키느라 어제 새벽에 애를 먹었는데, 막상 오늘 다시 고민해 보니 꽤 쉽게 풀렸다. 좀 억울하긴 했는데, 맑은 정신으로 생각하면 안 풀리던 것도 풀린다는 걸 경험적으로 배울 수 있어서 (나름) 괜찮았다.이제 로그인 API 요청을 보내는 걸 구현해야 하는데, 아직 인증/인가에 대한 지식이 거의 없다싶이해서, 개발에선 손을 떼고 인증/인가 구현에 대한 이런저런 자료들을 찾아봤다. 아직 100% 완벽히 소화하진 못해서 틀린..

할 일 관리 서비스 만들기Module CSS로 정의한 CSS 파일은 해싱 알고리즘으로 클래스 명이 변경되기 때문에 다른 CSS 파일에서 접근해 스타일을 덮어쓰기 어렵다. 컴포넌트에서의 스타일을 덮어쓰고 싶다면 사용하는 곳에서 div 태그 등으로 한번 감싸고, > 같은 선택자를 이용해 접근해 변경하는 게 필요하다(네임 스페이스를 구분해준다는 점은 편하지만, 이런 점은 좀 아쉬운 것 같다).useNavigate로 생성하는 navigate 함수의 타입은 react-router-dom에서 제공하는 NavigateFunction이다. 타입 정의가 필요한 곳에 `import { NavigateFunction } from 'react-router-dom'으로 불러와서 사용하면 된다.훅이나 라이브러리에서 제공되는 다양..

Date Picker 만들기벤더사에 따라 지원되는 가상 선택자 속성에 일부 차이가 있는 경우가 있다. Chrome, Edge, Safari 등은 -webkit, Firefox는 -moz라는 접두어를 사용한다.예를 들어서, input[type='date']인 요소에 기본 제공되는 Picker Indicator(옆에 작게 나오는 캘린더 아이콘)는 ::-webkit-calendar-picker-indicator라는 가상 선택자로 접근 가능하고, 기본 제공되는 '연도, 월, 일' 텍스트는 ::-webkit-datetime-edit으로 접근해 커스텀할 수 있다.이런 벤더 프리픽스를 많이 사용하면 브라우저 간 호환이 되지 않아 특정 브라우저에서 깨지는 크로스 브라우징 이슈가 발생할 수 있다. 가급적 위험 요소가 될..

모듈 CSS 관련 공부클래스 명 중복 문제를 해결하는 방법 중 모듈 CSS가 있다.모듈 CSS는 CSS 모듈에 정의된 스타일을 자바스크립트 객체 형태로 파싱해 스타일로 제공한다.일련의 알고리즘에 따라 파싱 된 자바스크립트 객체로 정의된 클래스 명이 있는 부분에 정해진 해시값으로 클래스 명을 고유화한다.파일 경로, 사용자가 정의한 클래스 이름 등을 통해 해시를 만들기 때문에 CSS 모듈 간 클래스 이름이 중복될 일이 없다.모듈 CSS는 웹 표준으로 등록된 문법은 아니고, 번들러에 의해 번들링 되는 과정에서 해당 로직을 처리해 준다. 번들러가 번들링 시 CSS 파일을 모듈 CSS로 인식하고 파싱 해주도록 하기 위해 파일명 확장자를 모듈명.module.css 형태로 지어야 한다.기타, 모듈 CSS 관련 이런저..

프로젝트 세팅 관련 공부한 내용들프로젝트에선 보통 사이즈 단위를 지정할 때 반응형을 고려해서 루트인 html 태그에 적용된 font-size 대비 비율을 기준으로 하는 rem 단위를 많이 사용한다.별도의 처리를 하지 않으면 브라우저에서 기본 세팅되는 html 태그의 font-size는 16px이다. 해당 값을 기준으로 24px을 rem으로 표현하려면 1.5rem과 같은 식으로 사용하면 된다.16px이 기준이 되면 사이즈 계산이 어려워진다. 대신, 16px인 html 태그의 font-size를 62.5%로 설정해주면 루트의 기준 font-size가 10px이 된다. 10px로 font-size가 조정되면 rem으로 사이즈 단위를 계산할 때 굉장히 직관적이라는 장점이 있다. 24px를 표현하고 싶다면 자리수..

할 일 관리 서비스 준비Task 목록을 칸반 보드 형태로 관리해 주는 서비스를 만들어보려고 준비 중이다. 해당 프로젝트 시작 전 몇 가지 사항에 대해 알아보는 시간을 가졌다.Context API 사용:Context를 사용해 상태를 관리하는 다양한 패턴이 있다. Provider를 별도로 만들고, 매개 변수로 Context.Provider 내부에 들어가야 하는 컴포넌트들을 받아, Context 생성, 정의, 데이터 제공 등을 전담하는 함수를 만들어 사용하면 깔끔하게 상태를 관리할 수 있다.useContext로 컨텍스트를 바로 받아와 사용하기보단, 별도의 커스텀 훅으로 래핑 해서 사용하면 타입 좁히기나 예외 처리 등 좀 더 안전하게 컨텍스트를 사용할 수 있다. useMyContext와 같은 식으로 컨텍스트 사..

Tic-Tac-Toe 만들기리액트 공식문서에 틱택토 게임의 주요 기능을 직접 구현해 봤다.uesEffect를 사용해서 특정 상태가 업데이트된 이후의 동작을 핸들링 하려고 했는데, 결과적으로 실행 순서를 제어하는 게 쉽지는 않았다. 의도치 않게 두 개 이상의 useEffect가 관리하는 상태가 물리면서 상태 업데이트 동작이 두 번씩 실행되기도 하고, A 상태가 업데이트돼서 DOM에 반영된 이후에 후속 작업을 하고 싶은데 이런 디테일한 실행 순서 관리가 마음대로 되지 않아 애를 먹었다.useEffect 사용 경험이 많지 않아서, 계속 연습이 필요하겠다. 여러 자료들에서 'useEffect`를 두고 굉장히 다루기 까다로운 훅이라고 하는 걸 봤는데, 오늘 개발하면서 그게 좀 와닿았다. 분명히 이유가 있는 상황에..

감정 일기 만들기 with React, TypeScript타입스크립트를 써보니, 공통되는 타입 정의를 어디서 어떻게 만들고 불러와서 사용할지에 대한 고민이 추가적으로 생기게 됐다. 여러 글을 찾아보니 별도로 types 파일을 만들어서 정의하는 것 같긴 한데, 이걸 페이지 단위로 할지, 기능 단위로 할지, 아니면 통합할지 등등, 여러 결정의 요소가 있는 것 같다. 좀 더 여러 레퍼런스 찾아보면서 공부를 잘해봐야겠다.이벤트 핸들러를 붙일 때 매개 변수로 들어오는 이벤트 객체 e에도 타입을 붙여줘야 하는데, 리액트에서는 보통 React.MouseEvent와 같은 식으로 쓰는 것 같다. 이벤트 유형에 따라 MouseEvent가 아니라 다른 값이 올 수 있다(e.g. onChange 이벤트에선 React.Chan..

인프런 제네릭 함수는 함수에 전달되는 인수의 타입에 따라 반환 값의 타입을 가변적으로 바꿔주는 함수를 의미한다.기본적으론 인수에 number가 들어가면 number, string이 들어가면 string, number[]가 들어가면 number[]가 나온다. 인수에 들어간 타입이 반환 값에 그대로 적용된다.function func(value: T) { return value}let num = func(10); // 매개 변수 숫자형, 반환된 num 또한 숫자형let str = func('string'); // 매개 변수 문자열, 반환된 num 또한 문자열let bool = func(true); // 매개 변수 불리언, 반환된 num 또한 불리언물론, 전달된 매개 변수와 다른 반환 값 타입을 갖도록 제네릭..