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/CS

오늘은 다른 운영체제 강의를 듣기 전 강민철 저자님의 컴퓨터구조와 운영체제 50분만에 핵심 개념 정복하기를 듣고 글을 정리해 보았다. 컴퓨터 구조의 큰 그림 - 컴퓨터가 이해하는 정보 : 데이터와 명령어 - 컴퓨터의 4가지 핵심 부품 : CPU, 메모리 (RAM , ROM), 보조기억장치, 입출력장치 메인보드 & 시스템버스 - 4가지 핵심 부품이 서로 정보를 주고받기 위해 연결 시킬 수 있는 메인보드 - 서로 정보를 주고 받을 수 있는 통로는 시스템버스 - 즉, 메인보드에 연결된 부품은 버스를 통해 정보를 주고 받음 - 버스는 컴퓨터 부품끼리 정보를 주고받는 통로 - 다양한 종류의 버스가 존재함 - 이 중, 컴퓨터의 핵심부품을 연결하는 버스는 시스템버스 - 시스템 버스의 내부구성 : 주소버스, 데이터버스..

2023. 2. 25.

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/CS

오늘은 마지막 6주차를 끝으로 혼공학습단 9기가 끝나서 간략한 회고를 남겨보는 시간을 가지려고 한다. 내가 혼공학습단 9기를 지원한 이유는? - 컴퓨터구조와 운영체제의 기본기를 다지기 위해서 - 사실 나에게 있어서 공부는 뭔가 실제로 필요하지 않는 이상 내가 시간을 가지고 공부하는 스타일은 아니다 ㅋㅋ - 물론 운영체제와 컴퓨터 구조를 알고 있으면 개발을 할 때 더 도움이 된다는 이야기는 항상 들었지만 당장에 공부해야할 프로그래밍 언어, 라이브러리, 프레임워크 등 해야될 공부는 넘쳐서 CS지식은 항상 뒤로 제쳐두고 공부를 해왔다. - 하지만 결론적으로 든 생각은 미루면 결국 안하게 된다는 생각이 들었다. 그래서 2023년 1월의 목표로 혼공컴운을 진행해 보자라고 생각했다 간략한 후기 1. 혼자 공부하는 ..

2023. 2. 19.

TIL/CS

Chapter 14. 가상 메모리 스와핑 - 메모리에서 사용되지 않는 일부 프로세스를 보조기억장치로 내보내고 실행할 프로세스를 메모리로 들여보내는 메모리 관리 기법 - 스왑 영역 : 프로세스들이 쫓겨나는 보조기억장치의 일부 영역 - 스왑 아웃 : 현재 실행되지 않는 프로세스 메모리 → 스왑 영역 - 스왑 인 : 스왑 영역 → 메모리로 옮겨지는 것 장점 - 프로세스들이 요구하는 메모리 주소공간의 크기가 실제 메모리 크기보다 큰 경우에도 프로세스들을 동시 실행할 수 있음. 메모리 할당 (연속 메모리 할당) - 비어있는 메모리 공간에 프로세스를 연속적으로 할당하는 대표적인 방식으로 최초 적합, 최적 적합, 최악 적합이 있다. 최초 적합 - 운영체제가 메모리 내 최초로 발견한 적재 가능한 빈 공간에 프로세스를 ..

2023. 2. 19.

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.