javascript

HTML,SCSS,Javascript를 이용한 반응형 header - 메뉴바 소스

HTML,SCSS,Javascript를 이용한 반응형 header - 메뉴바 소스를 공유합니다

Javascript - 그리드 레이아웃 이미지 교체 효과

핀터레스트에서 영감을 받아 3x3 그리드 레이아웃에서 이미지를 순차적으로 교체하는 웹 효과를 자바스크립트로 구현한 예시입니다. 더미 데이터는 photo.json에 저장되어 있습니다.자바스크립트에서는 이미지를 순차적으로 교체하는 스크립트를 구현했습니다.

Radix-UI Select + React Hook Form 사용시 ref 전달 처리 에러 대응

Radix UI의 Select 컴포넌트와 React-Hook-Form을 이용해서 처리할때 ref 전달시 문제가 생기는 경우가 있습니다. React-hook-form의 Controller와 forwardRef를 활용한 방법으로 이 문제를 해결할 수 있습니다.

직접 만들어보는 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 형태로 데이터를 전송하기 위한 설정 변경과 라우팅 처리 방법을 소개합니다.