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.

Error

요즘은 에러에 많이 마주하지 않고 있는데 오늘 이거 때문에 거의 3시간은 소요해서 기록 👿 문제점 : bash: npm:command not found bash: yarn:command not found 등등 모든 명령어가 오류가 뜨는 끔찍한 일이.... 해결방법 : 1) global에 설치하기 - 해결안됨 😥 npm i -g yarn - 요걸로 해결이 되었더라면 나는 금방 퇴근했을 것이다... - 심지어 해결 못해서 집에서 원격 키고 계속 검색해봄 ㅋㅋㅋ 2) PATH 확인하기 - 해결 😎 - path가 제대로 지정 안되었을 경우 이러한 문제가 생긴다. (즉, 읽어들이지 못해서 명령어가 실행이 안되는 것) - powershell(윈도우기준)에는 yarn 혹은 node가 확인되는데 bash에서만 확인이 ..

2023. 3. 21.

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.

카테고리 없음

오늘은 Promise에 이어서 aync & await에 대해 학습해보려고 한다. Async Function - async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의 - 암시적으로 Promise를 사용하여 결과를 반환, 그러나 비동기 함수를 사용하는 코드의 구문, 구조는 표준 동기 함수와 많이 비슷함. ❓ AsyncFunction - 자바스크립트에서 모든 비동기 함수는 사실상 AsyncFunction 객체이다. - AsynFunction 생성자는 새로운 async function 객체를 만든다. 기본 문법 // * getRandomFriendName 함수는 promise // 선언문 async function getFriends () { const name1..

2023. 2. 16.

TIL/FrontEnd

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

2023. 2. 16.