RittoRitto

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 의 특징에 대해 간략하게 정리했습니다.