atomicdev 님의 블로그

React 프로젝트 생성 및 Tailwind CSS 설정강의 목표React로 프론트엔드 프로젝트를 시작하면서 Tailwind CSS를 사용하여 기본적인 스타일링을 설정합니다. Tailwind CSS의 유틸리티 클래스를 활용해 간편하고 빠르게 UI 스타일링을 적용하는 법을 배웁니다.1. Create React App으로 프론트엔드 프로젝트 생성React 프로젝트 생성guestbook-app이라는 이름으로 프로젝트를 생성합니다.npx create-react-app guestbook-app cd guestbook-app프로젝트 파일을 확인합니다.기본적으로 제공되는 src, public 등의 폴더 구조를 확인합니다.App.js, index.js 파일이 주요 시작점입니다. 2. Tailwind CSS 설치 및 기..

Node.js와 Express로 API 구현 (2) - 방명록 CRUD API이번 강의에서는 방명록의 CRUD API를 구체적으로 구현하고, Postman을 통해 각 API가 올바르게 작동하는지 테스트하는 방법을 배웁니다. 실습 위주로 진행하며, API 요청과 응답의 전체 흐름을 따라갈 수 있도록 설명합니다.1. 방명록 작성 (Create) API 구현기능 설명:사용자가 작성한 이름과 메시지를 데이터베이스에 저장하는 API입니다.라우트 설정POST 요청을 통해 방명록을 작성합니다. server.js 파일에 다음 코드를 추가하세요.app.post('/api/guestbook', (req, res) => { const { name, message } = req.body; const sql = 'INSER..

다음은 Flutter와 Bootstrap을 활용한 웹 개발 기초 예제입니다. 초보자가 쉽게 따라할 수 있도록 프로젝트 생성부터 실행까지의 단계별 가이드입니다.1단계: Flutter 프로젝트 생성하기Flutter 설치: Flutter가 설치되지 않았다면, Flutter 공식 웹사이트에서 설치 지침에 따라 설치합니다.Flutter 프로젝트 생성: 다음 명령어로 새로운 Flutter 프로젝트를 만듭니다.flutter create flutter_web_calculator 프로젝트 폴더로 이동: 생성된 프로젝트 폴더로 이동합니다.cd flutter_web_calculator  2단계: 웹 개발 환경 설정Flutter 웹 환경 활성화: 웹 환경을 지원하려면 Flutter 웹 타겟을 활성화해야 합니다.flutter ..

Node.js와 Express 기본 셋업이번 글에서는 Node.js를 설치하고, Express를 사용해 간단한 서버를 구축하는 방법을 다룹니다. 기본적인 라우팅 설정과 서버 실행까지 실습을 통해 익힐 수 있습니다.1. Node.js 설치Node.js는 서버사이드에서 JavaScript를 실행할 수 있게 해주는 환경입니다. 먼저, 시스템에 Node.js를 설치하는 과정을 살펴보겠습니다.1.1 Node.js 설치Step 1: Node.js 공식 웹사이트로 이동하여 운영체제에 맞는 Node.js LTS(Long Term Support) 버전을 다운로드합니다.Step 2: 다운로드한 설치 파일을 실행하고, 기본 설정에 따라 설치를 진행합니다.설치가 완료되면, 터미널(DOS 명령어창, cmd)에서 다음 명령어를 ..

1강: Flutter와 웹 개발 - 개요 및 목표내용 요약1. Flutter와 Bootstrap 소개Flutter란?Google이 개발한 오픈 소스 UI 소프트웨어 개발 키트(SDK)입니다. 하나의 코드베이스로 Android, iOS, 웹, 데스크탑 애플리케이션을 개발할 수 있습니다.Flutter의 주요 장점으로는 빠른 개발, 우수한 성능, 풍부한 UI 위젯 등이 있습니다. 이 시리즈에서는 특히 웹 애플리케이션 개발에 중점을 두고 Flutter를 활용할 것입니다.Bootstrap이란?가장 인기 있는 오픈 소스 프론트엔드 프레임워크로, 반응형 웹 디자인을 쉽게 구현할 수 있습니다. HTML, CSS, JavaScript 기반의 다양한 UI 컴포넌트를 제공합니다.Flutter와 Bootstrap을 함께 사용..