React Router <BrowserRouter>사용시 서브페이지 404 페이지가 뜨는 경우 Vercel에 React로 만든 사이트를 배포할 때 서브페이지로 직접 접속 시 404 에러가 발생하는 문제가 있습니다. vercel.json 파일을 통해 Browser Router에서 서브페이지 라우팅을 처리할 수 있습니다.
Javascript - 그리드 레이아웃 이미지 교체 효과 핀터레스트에서 영감을 받아 3x3 그리드 레이아웃에서 이미지를 순차적으로 교체하는 웹 효과를 자바스크립트로 구현한 예시입니다. 더미 데이터는 photo.json에 저장되어 있습니다.자바스크립트에서는 이미지를 순차적으로 교체하는 스크립트를 구현했습니다.
가상 JSON 데이터가 필요할 때 - Fake REST API 서비스 가상 데이터가 필요할 때 요긴한 Fake REST API 서비스들을 소개합니다. Dummy JSON, JSONPlaceholder, Korean JSON, Random User Generator는 각각 다양한 데이터를 제공하여 손쉽게 활용할 수 있습니다.
Bento Grid Layout - css로 벤토 그리드를 만들어보자 Bento(도시락) 레이아웃 예제는 HTML의 간단한 구조로, display: grid와 grid-row, grid-column을 이용하여 화면을 배치합니다. JavaScript를 사용하여 순차적인 애니메이션을 추가하였으며,CodePen에서 확인 가능합니다.
HTML, CSS로 간단하게 구현하는 Sticky Header Sticky Header는 스크롤 시 특정 요소가 화면 상단에 고정되는 기능을 말합니다. CSS의 추가된 기능으로 간편하게 구현 가능합니다. 카페24 쇼핑몰의 상세페이지에서 활용하여 사용자에게 더 편의를 제공하는 예시로 소개되었습니다.
Radix-UI Select + React Hook Form 사용시 ref 전달 처리 에러 대응 Radix UI의 Select 컴포넌트와 React-Hook-Form을 이용해서 처리할때 ref 전달시 문제가 생기는 경우가 있습니다. React-hook-form의 Controller와 forwardRef를 활용한 방법으로 이 문제를 해결할 수 있습니다.
teleport HQ - 프롬프트 한 줄로 디자인과 리액트 코드까지 완성 teleport HQ는 간단한 프롬프트 입력만으로 웹사이트를 빠르게 작성해줍니다. 반응형 디자인과 프론트엔드 코드 생성도 해줍니다만, 실무에 바로 적용하기엔 아쉬운 부분도 있습니다. 빠른 프로토타이핑이 가능하다는 점에서 꽤 편리하다는 인상을 줍니다.
직접 만들어보는 To Do List - Express.js + React.js + SQLite (5) 리액트에서 express의 API 서버와 통신하도록 컴포넌트 별로 정리하여 작성하였습니다. 가장 기본적인 CRUD를 구현하기 위해서 props drilling과 fetch api를 활용하여 최대한 외부 라이브러리에 의존하지 않고 기능을 구현하는데 집중하였습니다
직접 만들어보는 To Do List - Express.js + React.js + SQLite (4) SQLite를 이용해 express에서 CRUD를 구현하는 API 서버를 작성합니다. api/todos 를 통해서 들어오는 get,post,put,patch,delete 요청을 받고, 그에 알맞은 값을 응답하는 백엔드 소스를 작성합니다.
직접 만들어보는 To Do List - Express.js + React.js + SQLite (3) Vite를 이용한 React 프로젝트 설정합니다. Express API 서버와 Vite 개발 서버가 동시 실행 되도록 Concurrently 라이브러리를 사용합니다. 흔히 겪는 CORS 설정, React 와 Express API 서버간의 통신 방법도 다룹니다.
직접 만들어보는 To Do List - Express.js + React.js + SQLite (2) Express를 사용하여 API 서버를 구축하는 과정을 설명합니다. get, post, put, delete 메소드를 사용하여 CRUD를 구현하는 방법입니다. JSON 형태로 데이터를 전송하기 위한 설정 변경과 라우팅 처리 방법을 소개합니다.
직접 만들어보는 To Do List - Express.js + React.js + SQLite (1) Express.js와 React.js를 이용한 To do list를 연재합니다. 프로젝트 폴더 생성 및 초기 설정부터 공부한 내용들을 정리했습니다. 백엔드 경험이 없는 입문자 입장에서 많은 설명을 덜어내고 바로 실행해볼 수 있는 것들 위주로 정리해보았습니다.
자바스크립트와 Node.js 그리고 express.js 자바스크립트를 중심으로 UI 작업을 해오던 웹개발 입문자의 입장에서 백엔드는 생소합니다. 프론트엔드만으로는 충분하지 않은 상태에서, 자바스크립트로 백엔드 입문 과정에서 많이 언급되는 Node.js와 Express.js 의 특징에 대해 간략하게 정리했습니다.
MongoDB 로컬 환경에 설치하는 방법 MongoDB를 로컬 개발 환경에 설치하는 절차를 설명합니다. MongoDB Atlas를 활용하는 방법보다 간소하게 진행할 수 있어서 가볍게 개발 환경을 구성하는 목적에 알맞습니다. 로컬 환경에서 구성하면 빠르고 쉽게 진행할 수 있다는 점이 장점입니다.