JayGo 개발 연습장

createElement 함수 동작 직접 구현해 보기리액트는 HTML 태그를 거의 그대로 사용할 수 있게 지원하는 JSX 문법이라는 게 적용된다.JSX 구문은 생긴 건 HTML과 거의 유사하게 생겼지만 사실은 JavaScript이고, 실행 결과 또한 Javascript 객체로 변환돼서 메모리에서 관리된다.JSX 구문은 tagName(type), props, children, key 등으로 구성된 객체로 변환되고, HTML의 중첩 구조는 props 객체의 children 프로퍼티를 통해 구현된다. 즉, children 프로퍼티를 사용해 HTML 태그의 위계가 표현된다.Babel을 사용하면 JSX 구문 분석기를 커스텀할 수 있다. @bable/preset-react의 runtime을 automatic, im..

할 일 관리 서비스 만들기createBrowserRouter로 라우팅을 하면 loader라는 속성을 제공한다. 해당 속성을 사용하면 페이지가 라우팅 되는 시점에 곧바로 loader에 등록해 둔 메서드가 실행돼서 서버의 데이터를 받아올 수 있다. 데이터는 컴포넌트에서 useLoaderData 훅을 사용해 받아올 수 있다.useEffect의 의존성 배열로 빈 배열을 넘겨서 처음 컴포넌트가 렌더링 될 시 서버 데이터를 패치할 수도 있지만, 그렇게 되면 useEffect 실행 전에 한 번, useEffect 실행 후 서버 데이터로 상태를 변경한 이후에 또 한 번, 이렇게 총 두 번 렌더링이 발생한다. 하지만 loader와 useLoaderData 훅을 사용하면 라우팅 시점에 페이지의 컴포넌트를 렌더링하기 전에 ..

할 일 관리 서비스 만들기Access Token을 코드의 일반 변수로 정의한 다음 axios의 인스턴스로 관리하면 새로고침 때마다 Access Token이 휘발되는 문제가 있다. Refresh Token이 있었다면 새로고침 시 Refresh Token을 사용해서 토큰을 다시 받아오는 처리를 해줬겠지만, 연습용 API엔 Refresh Token이 구현돼있지 않아서, 일단 local storage에 저장하는 쪽으로 계획을 변경했다.분명 더 찾아보면 로컬 변수에 정적으로 토큰 정보를 받아두면서도 새로 고침에 대응하는 법이 있을 것 같긴 한데, 어떻게 하는건지 잘 모르겠다. 나중에 다시 찾아보고 공부해봐야겠다.API 명세를 보면 필수로 요구되는 params가 있는 경우가 종종 있다. 이럴 땐 headers에 p..

할 일 목록 관리 서비스 작업axios의 인스턴스를 사용하면 headers의 Authorization에 bearer ${accessToken}과 같이 로그인 시 미리 받아온 토큰 정보를 박아두고 사용할 수 있다.http 요청을 보낼 때 따로 키를 챙길 필요 없이 axios 인스턴스로 요청을 바로 보내면 되니까 편리하다.axios의 인터셉터로 request가 보내지기 전의 요청 내용이나 response를 받기 직전의 응답 내용을 사전에 가로채서 원하는 로직을 넣어줄 수도 있다. 예를 들어, 요청을 보내기 전에 Access Token이 없거나, 토큰의 만료 기간이 완료됐다면, 그에 대한 적절한 대응을 해줄 수 있다.만약에 Access Token의 만료 기간을 클라이언트에서 따로 관리하지 않고 있다면 resp..

코드 리뷰 챌린지 서비스? 만들기코드 리뷰를 위한 체크리스트 부분을 작업했다.짧지만 현업에 계신 분들과 같이 작업해 보면서 배운 게 참 많았다.프로젝트를 할 때 어떤 순서로 준비하고 진행해나가는지, 처음으로 경험해 봤다.일단 현업에 있는 분들의 대화 자체를 따라가는 게 버겁다 보니 위축되는 게 좀 있다. 내 의견이 있다가도 뭔가 전달했을 때 잘 이해를 못 하면 '내가 뭘 잘못 얘기한 건가?' 싶다. 완전 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를 표현하고 싶다면 자리수..