Web & App 50

웹 프론트엔드 개발자가 앱 개발을 시작할 때 꼭 알아야 할 React Native 개념들

React 기반의 웹 개발에 익숙한 프론트엔드 개발자라면, React Native(RN) 역시 금방 적응할 수 있다.하지만 웹과 앱은 환경 자체가 다르기 때문에, 초기 진입 시 반드시 인지하고 있어야 할 차이점들이 있다.이 글에서는 웹 개발자가 RN을 시작하면서 반드시 이해하고 넘어가야 할 핵심 개념들과 함께 코드 예시를 정리했다.1. DOM이 없다React Native에서는 HTML 태그를 사용할 수 없다. 대신 View 기반의 추상 UI 요소를 사용한다.// 웹 (React) Hello world// RN Hello world2. 브라우저 API는 사용할 수 없다브라우저 환경이 아니기 때문에 window, document, localStorage 등은 사용할 수 없다.// ❌ 이런 코드는 에러 남..

MongoDB와 NoSQL

1. NoSQL과 관계형 데이터베이스(SQL)의 차이1.1 SQL vs NoSQLSQL(관계형 데이터베이스, RDBMS)과 NoSQL(비관계형 데이터베이스)은 데이터 저장 방식과 확장성 측면에서 큰 차이가 있다.비교 항목 SQL (관계형 DB) NoSQL (비관계형 DB)데이터 모델테이블 기반 (행, 열)문서, 키-값, 그래프, 컬럼 기반스키마엄격한 스키마 필요유연한 스키마 (동적 구조)확장성수직 확장 (Scale-up)수평 확장 (Scale-out)트랜잭션강력한 ACID 지원CAP 이론 적용 (일관성 vs 가용성)적용 사례금융, ERP, CRM실시간 분석, IoT, 빅데이터NoSQL은 유연한 데이터 저장 방식과 높은 확장성을 제공하기 때문에, 대량의 데이터 처리가 필요한 최신 웹 애플리케이션에서 많이 ..

현대 웹 개발에서 백엔드 작업 순서 및 기술 스택 🚀

현대적인 웹 개발에서 백엔드 작업 순서는 프로젝트의 성격과 요구사항에 따라 다르지만, 일반적으로 다음과 같은 흐름으로 진행된다.1️⃣ 기획 및 요구사항 분석 📝✅ 목표 정의: 프로젝트의 기능과 요구사항을 정의✅ 데이터 모델링: ERD(Entity Relationship Diagram) 설계✅ 기술 스택 결정: 프레임워크, 데이터베이스, 배포 환경 등 선택📌 주요 도구 & 기술문서화: Notion, Confluence, Google Docs협업 툴: Jira, Trello, SlackERD 설계: dbdiagram.io, Draw.io, MySQL Workbench2️⃣ 백엔드 아키텍처 설계 🏗✅ API 설계: RESTful API 또는 GraphQL API 설계✅ 데이터베이스 구조 설계: SQL v..

Node.js와 Sequelize: 효율적인 데이터베이스 ORM 활용

1. Node.js와 Sequelize 1.1 Node.js란?Node.js는 JavaScript로 서버 측 애플리케이션을 개발할 수 있도록 해주는 비동기 이벤트 기반 런타임 환경이다.✅ 비동기 I/O 처리 → 고성능 서버 구축 가능✅ 싱글 스레드 이벤트 루프 → 많은 동시 요청을 처리 가능✅ 다양한 패키지 지원 → npm을 통한 빠른 개발 가능Express.js 같은 프레임워크와 함께 사용하면 웹 서버 개발이 용이하다.1.2 Sequelize란?Sequelize는 Node.js에서 사용하는 ORM(Object-Relational Mapping) 라이브러리로, SQL 데이터베이스를 쉽게 다룰 수 있도록 도와준다.✅ SQL 없이 JavaScript 코드로 데이터베이스 조작 가능✅ MySQL, Postgre..

Node.js에서 MySQL 연결하기

🚀 Node.js에서 MySQL 연결하기 + DBeaver 사용 이유 총정리 Node.js 프로젝트에서 MySQL을 연결할 때, 생각보다 많은 문제들이 발생할 수 있다. 특히 MySQL 9.x 버전을 사용하면 mysql2 라이브러리에서 인증 방식 문제, SSL 인증 오류 등이 발생할 수 있다. 이번 글에서는 Node.js에서 MySQL을 올바르게 연결하는 방법과 DBeaver를 활용한 MySQL 관리 방법을 정리해본다.✅ 1. Node.js에서 MySQL 연결하는 방법 Node.js에서 MySQL을 사용하려면 mysql2 패키지를 설치하고, 데이터베이스 연결을 설정해야 한다. 📌 1) mysql2 설치 먼저 프로젝트 폴더에서 mysql2 패키지를 설치한다.npm install mysql2설치가 완료되..

SQL vs NoSQL

SQL vs NoSQL: 백엔드 개발자를 위한 데이터베이스 선택 가이드1. 개요데이터베이스는 백엔드 개발에서 가장 중요한 요소 중 하나이다. 데이터의 구조, 확장성, 성능 요구 사항 등에 따라 SQL 또는 NoSQL을 선택해야 한다. 이 글에서는 두 가지 데이터베이스 유형을 비교하고, 언제 어떤 데이터베이스를 선택해야 하는지 설명한다.2. SQL (관계형 데이터베이스)SQL (Structured Query Language) 데이터베이스는 관계형 데이터베이스(RDBMS)로, 데이터를 테이블 형태로 저장하며, 관계(Relationship)를 활용하여 정규화된 구조를 유지한다.2.1 SQL 데이터베이스의 특징✅ 스키마(데이터 구조) 고정 → 테이블 구조가 미리 정의되어 있으며, 데이터 입력 시 스키마를 따라야..

MVC(Model-View-Controller) 패턴이란?

1. MVC란 무엇인가?MVC(Model-View-Controller)는 애플리케이션의 코드 구조를 모델(Model), 뷰(View), 컨트롤러(Controller) 세 부분으로 분리하는 소프트웨어 디자인 패턴이다.이 패턴을 사용하면 코드의 구조화와 유지보수가 쉬워지고, 역할별로 모듈화할 수 있어 확장성이 높아진다.Model (모델) → 데이터 및 비즈니스 로직을 처리한다.View (뷰) → 사용자에게 보이는 화면을 담당한다.Controller (컨트롤러) → 사용자 요청을 받아 Model과 View를 연결하는 역할을 한다.2. MVC 패턴의 구조사용자 ←→ [Controller] ←→ [Model] ↓ [View]1) Model (모델..

Express.js란 무엇인가?

1. Express.js 개요Express.js는 Node.js 환경에서 실행되는 경량 웹 애플리케이션 프레임워크로, 서버 개발을 쉽고 빠르게 할 수 있도록 도와주는 라이브러리이다.Node.js의 표준 웹 프레임워크로 널리 사용된다.RESTful API 및 웹 애플리케이션 구축에 적합하다.미들웨어를 활용한 요청 및 응답 처리가 용이하다.2. Express.js의 특징1) 간결한 코드Express.js는 코드의 복잡성을 줄이고 간결한 방식으로 서버를 구축할 수 있도록 설계되었다.2) 미들웨어 지원미들웨어를 활용하여 요청과 응답을 쉽게 가공할 수 있다. 예를 들어, 요청을 로깅하거나, 인증 및 권한 부여를 수행할 수 있다.3) RESTful API 설계Express.js는 REST API를 빠르게 개발할 수..

Node.js 백엔드(Web)의 기본 동작 원리

1. Node.js의 Program Lifecycle (프로그램 생명주기)Node.js 애플리케이션은 다음과 같은 단계로 동작한다.초기화 단계:필요한 모듈을 로드 (require 또는 import 사용).서버, 데이터베이스 연결을 설정한다.이벤트 루프 실행 단계:비동기 I/O 작업, 네트워크 요청, 타이머 등이 실행된다.작업이 완료되면 콜백 함수가 이벤트 루프에서 처리된다.종료 단계:특정 종료 조건(예: process.exit())이 발생하면 종료된다.SIGINT(Ctrl + C) 같은 시그널이 감지되면 종료 이벤트가 발생한다.2. 이벤트 루프(Event Loop) 원리Node.js는 단일 스레드(single-threaded) 기반의 비동기 이벤트 루프 모델을 사용하여 많은 동시 요청을 효율적으로 처리할..

Next.js _ Form 전송 및 저장

자체 기능으로 FormData를 전송할 수 있는데next.js는 위 상단에 'use client' 와 'use server'를 설정하여 쓸 수 있으나 두개가 한번에 사용은 불가능하다. 그래서 useState 같은 거나 eventHandel 을 사용할때는 use client를 사용하게 될텐데그럴경우에는 use server를 따로 컴포넌트를 분리해서 가져다가 써야한다. 아래와 같은 방법을 사용할 수 있을 거 같다."use server";export async function shareMeal(formData) { const meal = { name: formData.get("name"), email: formData.get("email"), title: formData.get("title"..