SWR 네트워크 상태 관리 툴 React hooks for Data Fetching made by vercel stale-while-revalidate SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data. 빠르게 화면에 보이는 캐시된 데이터를 제공하고, 동시에 백그라운드에서 데이터를 다시 가져와서 UI를 새로 고치는 방식 SWR에서 "캐시"는 메모리 내에 저장된 데이터의 일시적인 복사본을 의미한다 사용자 경험을 향상시키고, 데이터의 최신 상태를 유지 가능 const { data, isLoading..

Redux 구성 store 저장소 전역상태를 보관하는 곳 reducer 상태를 변경하는 로직이 담긴 함수 이전 상태와 액션을 받아 새로운 상태를 반환한다. action 상태 변화를 일으키는 객체 type 필드로 어떤 종류의 액션인지 구분 액션 생성자 : 액션을 생성하는 함수 dispatch 액션을 실행하여 리듀서에게 상태 변화를 요청하는 함수 액션 객체를 인자로 받아 리듀서에 전달 동작 액션을 디스패치 리듀서가 그 액션을 처리하여 새로운 상태를 반환 이 상태는 저장소에 저장 ↪ 이로써 애플리케이션의 상태를 중앙에서 효과적으로 관리할 수 있다. Redux Thunk Redux에서 비동기 작업을 처리하기 위한 미들웨어 중 하나 액션 생성자가 일반 객체뿐만 아니라 함수도 반환할 수 있게 되어, 비동기 작업을 ..

이전 포스팅에서 어떻게 진행할 지 알아보았다. ( https://aboveimagine.tistory.com/128 ) 이제 코드를 작성해볼 차례! 물론 내 코드가 절대 정답은 아닐 것이므로 개선해야할 부분이 있다면 댓글로 알려주시길 🙏🏻 마크다운 파일의 메타데이터 관리 Front matter 내 로컬 환경의 마크다운 파일을 이용하여 블로그를 만들려면 해당 마크다운 파일에 대한 상세 정보가 필요하다. 즉, 제목, 작성일, 카테고리 등등의 정보를 미리 마크다운 파일 상단에 작성해주면 된다. 이렇게 마크다운(markdown) 파일이나 다른 텍스트 기반 파일의 상단에 위치하며, 해당 파일에 대한 메타데이터(metadata)를 정의하는 부분을 Front matter 라고 한다. --- title: '제목' da..

Automatic Class Sorting with Prettier 공식 문서 : https://tailwindcss.com/blog/automatic-class-sorting-with-prettier tailwind css 공식 Prettier 플러그인 테일윈드가 추천하는 기준에 따라 클래스명을 정리해준다. ... ... 설치 터미널 명령어 이용하여 설치 npm install -D prettier prettier-plugin-tailwindcss Prettier Configuration file을 생성하여 플러그인 추가 // .prettierrc.json { "plugins": ["prettier-plugin-tailwindcss"] } tailwindcss/typography 공식문서 : https:..

백엔드 개발자들이 정말 많이 얘기하는 컨트롤러, 서비스, 서비스로직... 신입 프론트 개발자에게는 너무나 어려운 백엔드의 세계 🫠 Next.js is a React framework for building full-stack web applications. Next.js 를 공부하다 보면 자꾸 보이는, "Next.js는 풀스택 프레임워크"라는 말. 넥스트로 백엔드까지 구현할 수 있다는 것. 네임드 개발자 제로초님에 의하면, Next.js에는 서버 코드가 내장되어 있으며, 거기서 서버 코드를 작성하면 서버처럼 작동한다고 한다. Next.js를 이용하여 풀스택으로 블로그를 만들어 보았는데, 그 과정을 순서대로 포스팅하기 전에 작업하면서 개인적으로 미리 알고 시작했으면 좋았겠다 싶은 내용으로 먼저 시작해보고자..

서버 = 백엔드, DB 라고 생각했던 사람, 나야 나 🙋🏻‍♀️... 그래도 프론트엔드 개발자로 입사하고, 백엔드 개발자들과도 얘기해보면서 백엔드 개발이 서버와 DB 다루는 거구나 라고 이해하게 되었다. 그런데 Next.js 공부를 하면서 접한 서버 사이드 렌더링... 이 서버도 그 서버야? 하는 의문이 들었다. 그리하여 찾아보고 정리하는 포스팅! 서버란? 서버 : 클라이언트의 요청에 응답하는 프로그램 요청에 따라 html, css, js 등 정적 파일을 보내주는 프론트엔드 서버와, DB 데이터를 보내주고 연산하는 백엔드 서버로 나눌 수 있다. 프론트 서버 주로 정적 리소스(static resources)를 다루는 데 사용된다. 정적 리소스는 서버 측에서 동적으로 생성되는 게 아니라, 이미 저장되어 있는..