Latest

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를 활용하는 방법보다 간소하게 진행할 수 있어서 가볍게 개발 환경을 구성하는 목적에 알맞습니다. 로컬 환경에서 구성하면 빠르고 쉽게 진행할 수 있다는 점이 장점입니다.

Rust - 함수(fn)의 기본적인 사용법

Rust를 공부하면서 함수의 기본적인 사용법을 정리했습니다. Rust의 함수는 fn 키워드로 시작합니다. 실행 가능한 코드들은 일반적으로 main 함수 내에 있어야 하며, JS의 console.log처럼 사용할 수 있는 println! 매크로가 있습니다.

H1~H6, P 태그 - 제목과 본문을 작성하는 태그

H1~H6 태그는 문서에서 구조를 구성하는데 중요한 역할을 합니다. 제목과 소제목을 정의하며 주제의 중요도를 표현하는데 사용됩니다. 이는 SEO에도 긍정적인 영향을 미칩니다. P 태그는 문단을 작성하는데 활용되며, 단락 간 여백을 통해 가독성을 향상시킵니다.

Rust - 데이터 유형, 변수

Rust 언어의 기본 데이터 타입과 변수 사용법을 학습한 내용입니다. Boolean, 정수, 부동소수점, 문자, 문자열 등의 데이터 타입과 불변 변수의 특징을 소개하고, mutable 변수의 활용법도 다루었습니다.

HTML이란 무엇인가 - doctype, html, head, body 태그 소개

HTML은 마크업 언어라고 불립니다. 정보를 효율적으로 전달하기 위해 탄생했습니다. 많은 태그가 있지만, HTML 구조를 설명하는 태그들을 알아보겠습니다. HTML은 CSS와 JavaScript와 함께 사용하면 화려하고 기능적인 웹페이지를 만들 수 있습니다

자바스크립트로 텍스트를 바꾸는 방법 3가지 - textContent, innerText, innerHTML

자바스크립트로 텍스트를 변경하는 방법 중 textContent, innerText, innerHTML을 소개합니다. 가장 추천하고 싶은 방법은 textContent입니다. 성능이 우수하고 보안적으로 안전해 효율적인 텍스트 변경에 적합하기에 적극 추천합니다.

윈도우 터미널(Windows Terminal)을 단축키(Shortcut)로 바로 여는 방법

Windows에서도 단축키를 설정해 터미널을 쉽게 열 수 있습니다. 바로가기 생성 후 원하는 단축키를 설정하는 방식으로 손쉽게 설정할 수 있습니다. 마우스로 일일이 클릭해서 터미널을 여는 것보다 효율이 더 높습니다.