yesslkim blog

웹 퍼블리셔로 근무 중 🧐

TIL/FrontEnd

오늘 리액트 쿼리 공부하려고 했는데, 곧 들어갈 프로젝트에서 Next.js 사용 할 수도 있어서 급하게 공부 중 오랜만에 새로운거 배우니까 잼따 🥰 오늘 느낀거지만 내가 현타 느낄 때는 리액트에서 상태관리라 라이브러리 공부할 때 인듯... Next.js 13 (stable) Routing Index routes 라우터는 root 파일을 찾아서 렌더링하며 이는 index.js 로 작성 예시 : pages/blog/index.js 의 경로는 /blog 가 됨. Nested routes 중첩 경로 중 경로 이름이 고정인 경우 파일 이름을 경로로 작성하면 됨. 예시 : • pages/blog/first-post.js → /blog/first-post Dynamic route segments 다이나믹 경로는 [요..

2023. 3. 23.

TIL/FrontEnd

요즘은 리액트쿼리를 조금씩 공부중인데 (진짜로 조금씩) 이왕 느리게 공부할거 한번 공부할 때 깊게 공부하는게 좋을거 같아서 공부하면서 조금씩 정리한거 올리기 🍏 참고사이트가 기재되어있지 않은 모든 정보는 React Query 공식문서를 기반으로 합니다. Updated : 23.03.15 Quick Start Installation yarn add @tanstack/react-query QueryClient, QueryClientProvider, Devtools import { Data } from "./Data"; import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from 'react-q..

2023. 2. 27.

TIL/FrontEnd

어제 RTK Query 학습하고 실무에도 적용했는데 확실히 기술 블로그보고 그냥 요즘 사람들 보면 다 리액트 쿼리를 사용하는거 같더라ㅠ 그래서 급하게 공부해보는 리액트 쿼리 어제 너무 졸려서 강의만 듣고 정리를 못했다 오늘 간단히 CRUD 만들어보고 내일, 주말에 깊게 공부하는걸 일단 목표로... 📖 1. 기본세팅 - QueryClient, QueryClientProvider 를 사용한다. 사용방법만 비교했을때 RTK-Query랑 이름만 다를뿐 거의 비슷하게 사용한다. 리액트의 context도 비슷하게 사용하니 사실 context api를 제대로 공부했으면 그렇게 어려운일은 아닌듯 ?! (하지만 context를 안쓴지 꽤 되면서 또 까먹...) 2. Api 세팅 - 폴더 생성 방식도 RTK-Query랑 ..

2023. 2. 23.

TIL/FrontEnd

오늘은 컴퓨터를 못켜서? 😂 대신 모바일로 공부를 했다 월욜부터 공부하는 사람들 대체 어케 하는거?,,, 유튜브 캡처하며 공부한 내용이라 약간 지저분하다.. 기본 폴더 구성 - feature 내에 api라는 폴더를 생성 및 관리 파일명 - ~Slice로 입력 - createApi를 통해 생성됨 - builder를 사용하여 베이스 url을 기반으로 data를 페칭하고 있음 intex.js 에 ApiProvider 생성 - api를 전역에서 사용할 수 있게 함 기본 사용 방법들 ~ mutation의 경우 데이터가 변경되는 api providesTags는 값이 변경되었는지 확인 후 변경 시 재fetching을 하게 됨. 값이 변경 되었는지 어케 알까? InvalidateTags 지금 약간 헷갈리는 부분 모음 ..

2023. 2. 20.

TIL/FrontEnd

오늘은 어제에 이어서 Promise의 메서드에 대해서 공부해 보려고 한다. 그 이유는 MDN에서 나는 주로 공부를 하는데, 알고보니 프로미스에도 다양한 메서드가 있는것이다 물론 이걸 다 외울 순 없겠지만 이해는 하고 있으면 좋을거 같아서 정리해보려고 한다. Promise.all() - 순회 가능한(배열과 같은) 프로미스를 받아서 하나의 프로미스로 리턴한다. - 리턴 값은 1️⃣ 모든 프로미스가 fulfilled 했을 때 fulfilled 값을 리턴하고, 혹은 2️⃣ 하나의 값이라도 rejected 되었으면 첫번 째 reject값을 반환한다. - 해당 메서드는 프로미스의 결과를 집계할 때 유용하다. 예시 ) - 예시를 어떤거를 해볼까라고 생각했는데 갑자기 취업 면접이 생각났다 여튼 중간에 탈락하면 바로 끝..

2023. 2. 16.

TIL/FrontEnd

오늘은 비동기 프로그래밍에서 사용하는 Promise에 대해서 공부해보기로 했다. 사실 요즘 코드를 봤을 때는 대부분 await/async로 작성되어있는거 같은데 그래도 모르면 안될거 같아서 천천히 공부해 본다 🤔 Promise - 우리나라말로 번역하면 말그대로 '약속'이라는 의미이다. Promise는 최종 결과를 리턴하는 것이 아니라 미래의 어떤 시점에 결과를 제공하겠다는 약속(Promise)를 반환한다. ❓ 약속(Promise)을 반환한다는 말의 의미 - 말그대로 어떤 시점의 결과를 제공하는데, 이는 프로미스의 3가지 상태를 통해 콜백함수가 호출된다. * Promise의 3가지 상태 : 대기 (pending) / 이행 (fulfilled) / 거부 (rejected) - 대기중인 Promise가 이행 ..

2023. 2. 15.

TIL/FrontEnd

오늘은 비동기 프로그래밍에 대해서 공부했다. 최근에 redux toolkit thunk를 공부하면서 약간 막혔는데 그 이유가 내가 비동기 프로그래밍에 대해 얕게 알고 있어서가 아닐까? 라는 생각이 들어서 기초부터 잡고 다시 공부해야겠다고 생각했기 때문이다 😂 * 해당 공부자료는 유튜브 얄코 - 비동기 프로그래밍이 뭔가요? 글을 베이스로 다양한 인터넷 자료를 기반으로 만들어졌습니다 🍀 비동기 프로그래밍 동기 (Synchronous) vs 비동기 (Asynchronous) - 동기적 : 작성된 순서대로 실행됨 ↔ 비동기 : 코드가 순서대로 실행되지 않음. ❓ 비동기는 왜 쓸까 - 일반적으로 시간이 소요되는 작업에 사용됨 (네트워크 요청, 타임아웃 등) - 동기적으로 모든 코드를 사용하게 되면, 시간이 소요되..

2023. 2. 14.

TIL/FrontEnd

오늘은 회사에서 일하면서 우연히 알게된 husky와 lint-staged에 대해 정리해보려고 한다. 그 이유는 최근에 관심이 가는 부분 중 하나가 '일관성 있는 코드'이기 때문이다. 혼자서 일을 하다보니 사실 지금은 문제가 없지만 새로운 사람이 들어올 수도있고, 내가 이직을 하고 다른 사람이 들어올 수도 있기 때문에 여러 상황을 고려하는 것이 좋겠다는 생각이 들었다. 그리고 사실 저는 코딩을 그렇게 잘하지 못하기 때문에 좋지 않은 코드라도 일관성 있게 작성하면 다른 분들이 오셨을 때 좀 더 빠르게 코드를 파악하실 수 있지 않을까? 하는 생각도 있었다 😥 여튼 그래서 알게된 husky와 lint-staged! Husky - husky는 깃을 좀 더 일관적으로 사용할 수 있게끔 도와주는 라이브러리이다. - ..

2023. 2. 13.

TIL/FrontEnd

개요 최근에 자바스크립트를 다시 천천히 파고 있다. 사실 이제 어느정도 초보 수준의 스크립트는 구사할 수 있는데, 참조형 데이터 타입은 실무에서도 사용하지만 뭔가 정말 기초적인 부분만 사용하고 더 잘 사용할 수 있는거 같은데 사용하지 못하는 느낌? 그래서 조금씩 공부해보고 그때그때 배운 내용을 정리해보도록 하려고 한다 🍈 객체의 속성에 대하여 (기본편) 사실 속성 하면 기본적으로 인터넷이나, 서적에서 나오는 문법은 이정도일 것이다. 1. 객체의 값에 접근할 때 : 점 표기법 / 대괄호 표기법 const myCar = { make: "Ford", model: "Mustang", year: 1969, }; // Dot notation myCar.make = "Ford"; // Bracket notation ..

2023. 2. 7.

TIL/FrontEnd

오늘은 MSW공부하면서 모킹 데이터를 넣어보는 실습시간을 가져보았다. 최근에 이런 어메이징한 라이브러리를 찾고나서 회사에서 공부한 후 적용하는 시간을 가져보았는데 지금 만들고 있는 장바구니에도 넣으면 딱일거 같아서! 가져왔다 😋 오늘은 UI는 변화가 없어서 배운 내용을 중점적으로 작성해 보려고한다. MSW는 풀어서 쓰면 mocking service worker로 말그대로 request를 클론해서 모킹한 데이터로 응답하는 라이브러리이다. 코드를 보면 더욱 쉽게 이해할 수 있다. 우선 모킹이 될 수 있도록 browser와 index.tsx에 같은 코드를 넣어준다. 그러면 라이브러리가 알아서! public 폴더에 서비스워커가 들어가 모킹을 시작할 수 있도록 도와준다! // browser.js import { ..

2023. 1. 12.