하나의 객체로 쿼리 옵션 관리 기존 useQuery를 비롯한 함수들의 옵션 정의된 통일되지 않았지만 v5버전부터 단일 객체로 전달받아 실행한다 useQuery 일부 옵션 제거 예측 가능하고 일관성 있는 useQuery의 onSuccess, onError, onSettled는 콜백으로 더 이상 제공하지 않는다 useQuery remove 메서드 제거 q...

Charley-WEB frontend Lang : TypeScript ( version 5 ) Framework : NextJS ( version 14 ) API fetching : Tanstack Query ( version 5 ) Style : Tailwind CSS ( version 3 ) State : Recoil Packagemanager : p...

Next.js 컴파일러: 성능 향상API Router 기능 향상 submit 파일 제공 : onSubmit hanldler로 활용가능부분적 Pre-rendering메타데이터 개선viewport: 뷰포트의 초기 확대/축소 및 기타 속성을 설정합니다.colorScheme:

기존 타입스크립트는 에러만 표기해준다 이것만으로도 자바스크립트 생태계 이상의 경험을 하였지만 그 이상의 경험을 할 수 있도록 지원해주는 확장 프로그램 등장

MPA, jquery에서 html을 그리기에는 복잡한 연산이 있었음MVC, MVVM등의 패턴을 도입해 UI/데이터를 사용자에 반응하려고 많은 시도가 있었음(ex. Anguler)React는 UI를 선언전 인터페이스로 작성해 로직 단순화 ,VDOM을 활용해 실제 dom의

Nest 에러 핸드링 request시 의도하지않는 데이터 형식이나 전달을 하더라도 에러를 발생시키지않는다. 이 부분을 유연하게 관리하는 방법에 여러가지가 있다. NotFoundException 생성자를 활용해 request시 조건에 따라 error를 발생시킬 수 있

Nest 설치하기 기존 Next 환경과 동일한 패키지매니저를 사용하기 위해 pnpm으로 세팅함 Nest 파일 구조 main.ts 모듈을 실행하기 위한 초기 단계 React의 root 단계의 index.tsx와 비슷한 느낌 app.module.ts 컨트롤러를 관리

Jira, CLICKUP 등 task 작업번호를 branch로 활용해 작업하는 환경에서보다 안정적인 공간에서 작업할 수 있도록 현재 내가 작업하는 공간에 commit 하는 것이 옳은 건지 검사가 필요하다고 생각해 해당 내용을 고민함 추가로 .git/hooks를 활용한다면 신규 입사자가 올 때마다 해당 코드를 적용해줘야 하는 불편함이 있다. 그래서 husky...

서비스 전체에 디자인 시스템에 맞는 컴포넌트를 사용하기 위한 여정

두 개 뽑아서 더하기 중복제거 방법 Set() filter, indexOf Set이 더 빠른 이유는 상수 시간 복잡도를 가진다? 선형 시간 복잡도(Linear Time Complexity): 선형 시간 복잡도는 입력 크기에 따라 알고리즘의 실행 시간이 선형적으로 증가하는 경우를 말합니다. 즉, 입력 크기가 n이라면, 알고리즘의 실행 시간은 대략적으...

react-router-dom part 1 키워드 HTTP란 무엇일까? HTTP란 서버와 클라이언트가 모델을 따라 데이터를 주고 받기 위한 프로토콜입니다 http는 암호화가 되는 않은 평문 데이터를 전송하기 때문에 보안에는 취약하는 단점이 있습니다. HTTP

CSS-in-JS 키워드 styled-components의 GlobalStyles 이란 무엇이고, 어떻게 사용해야 할까? 전역 스타일을 뜻하며, 공통으로 필요한 스타일은 createGlobalStyle 함수를 사용해 전역 스타일 컴포넌트를 만들 수 있다. cs

Props Part 1 키워드 Props Drilling 이란, 무엇인가? Props 내리꽂기라고 생각하면 됩니다. 부모에서 자식으로 Prop을 전달하는 과정에 과도한 경우를 뜻하고 부모에서 자식의 자식의 자식의 컴포넌트로 전달하는 과정에서 중간 컴포넌트에서는

React란, 무엇일까 키워드 SPA가 뭔가 Single page application으로 정적 리소스를 처음에 한번 다운로드한다. 이후 페이지 간 이동 시 필요한 데이터만을 JSON 형태로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 줄여 페이지 이동 시 속

SPA가 뭔가Single page application으로 정적 리소스를 처음에 한번 다운로드한다

카카오 로그인을 통해 평판 등록이 가능한 유저의 상세 정보를 변경하는 페이지입니다.

실제 리그 오브 레전드 유저의 전적을 검색해 해당 유저의 데이터를 확인할 수 있는 페이지입니다.

챔피언의 상세 정보와 챔피언에 대한 평판을 적을 수 있는 페이지입니다.

챔피언 리스트와 현재 패치 버전에서 2인으로 게임을 진행했을때 포지션별 가장 승률이 높은 순위를 보여 주는 리스트가 있습니다.