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)를 다루는 데 사용된다. 정적 리소스는 서버 측에서 동적으로 생성되는 게 아니라, 이미 저장되어 있는..

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..

/* 홀수 */ li:nth-child(odd) { ... } /* 짝수 */ li:nth-child(even) { ... } /* 3의 배수 */ li:nth-child(3n){ ... } /* 8번째 이후부터 모두 */ li:nth-child(n+8) { ... } /* 1번째부터 5번째 까지 */ li:nth-child(-n+5) { ... } /* 10번째부터 15번째 까지 */ li:nth-child(n+10):nth-child(-n+15) { ... } 기본적인 부분은 알고 있었으나 마지막 두개는 신박했다. 역시 css를 잘 알 수록, 작업이 쉬워진다. 추가적으로 무조건 알아둬야할 css 선택자. https://code.tutsplus.com/tutorials/the-30-css-selecto..

이번에 신규 페이지를 제작하며 갤러리를 만들어야 했는데, 다양한 라이브러리를 찾아보다가 기존에 자주 사용하던 swiper를 이용하여 갤러리를 구성할 수 있다는 걸 깨달았다. 먼저 예시를 보자면 다음과 같다. ( 예제 화면이 작게 보인다면 아래쪽 0.5x 클릭하여 확인하기 ) See the Pen swiper 3개 연동하기, thumbnail swiper and layer popup by Gia (@gia-world) on CodePen. 구성은 3개의 슬라이더로 되어있다. 메인 사진 슬라이더, 썸네일 슬라이더, 레이어 팝업 슬라이더. 메인 슬라이더를 넘기면 썸네일도 함께 넘어가고, 썸네일 슬라이더를 넘기면 메인도 같이 돌아간다. 또한 메인 사진을 클릭하여 팝업을 띄울 경우에도 메인 슬라이더와 연동이 되어..

보통 요소들을 수평정렬할 때 세가지 방법을 사용한다. 1. flex 제일 쉽고 간편하다. 하지만 일부 브라우저에서 제한적으로만 사용가능하다. 곧 IE가 사라진다면 최적의 방법. 2. float 예전에 많이 구현하던 방법으로, 요소 자체를 띄워버린다. float을 사용하면 clearfix 등으로 한번 보완을 해줘야하는 단점이 있고, 부작용이 꽤 있어 요즘은 선호하지 않는 방식. 3. inline-block 네비게이션을 만들 때 자주 쓰는 사용된다. 요소를 inline화시켜 수평정렬한다. 오늘은 인라인블럭으로 레이아웃 잡을 때의 주의점에 대해 포스팅해보려고 한다. 많은 분들이 사용하는 방법이지만, 주의해야할 점을 인지하지 못하는 경우가 많다. 예제를 보며 확인해보자. (아래의 코드펜은 바로 수정이 가능하니 ..