프론트엔드 개념 1

Об этом предложении

프론트엔드 개념 1 Node.js, React, Next.js, TypeScript — 이름은 다 들어봤는데 막상 "이 넷이 뭐가 다른데?"라고 물으면 헷갈렸던 개념들 정리. Node.js / React / Next.js / TypeScript, 뭐가 다른가 결론부터 말하면 이 넷은 경쟁 관계가 아니라 레이어가 다른 것들 임. 이름 정체 역할 Node.js JS 런타임 (엔진) 브라우저 밖에서 JS를 실행시켜주는 환경. 덕분에 백엔드 서버, CLI 툴 등을 JS로 짤 수 있음 React 라이브러리 UI를 컴포넌트 단위로 만드는 도구. 화면 그리는 것만 담당, 라우팅/서버사이드는 알아서 없음 Next.js 프레임워크 React 위에 라우팅, SSR/SSG, API Route, 이미지 최적화 등을 얹은 완성형 패키지 TypeScript 언어 (JS의 상위집합) JS에 타입을 붙인 것. 코드 실행 전에 타입 오류를 잡아줌 계층으로 보면: Node.js는 "JS를 어디서 돌릴지"의 문제 (런타임) React는 "화면을 어떻게 만들지"의 문제 (뷰 라이브러리) Next.js는 React를 실무에서 쓰기 좋게 감싼 프레임워크 TypeScript는 위 셋 어디에나 얹을 수 있는 언어 레벨의 안전장치 즉 넷을 "비교"하기보다 "조합"으로 이해하는 게 맞음. Next.js 프로젝트 하나에 Node.js(런타임)+React(UI)+TypeScript(타입)가 전부 같이 들어가 있는 구조가 일반적. 실제로 많이 쓰는 조합 프론트엔드 그냥 SPA면 React + Vite SEO, 초기 로딩 속도, 서버 렌더링이 필요하면 Next.js 요즘 신규 프로젝트는 Next.js가 사실상 디폴트에 가까움. 라우팅/API/최적화가 다 내장이라 세팅 시간이 확 줄어듦 백엔드 (Node.js 계열) Express: 가볍고 자유도 높음, 관례가 적어서 팀마다 구조가 다름 NestJS: 구조 잡힌 프레임워크 Next.js API Route: 별도 백엔드 서버 없이 프론트 프로젝트 안에서 API 몇 개 처리할 때 (소규모 서비스에 적합) useState — React의 상태 관리 Hook 컴포넌트 안에서 "상태(state)"를 저장하고 관리하게 해주는 함수. import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); // 초기값 0 return ( <button onClick={() => setCount(count + 1)}> 클릭 수: {count} </button> ); } 요소 역할 useState(0) 초기값 0으로 상태 하나 생성 count 현재 상태 값 setCount 상태를 바꾸는 함수 — 이걸 호출해야 화면이 리렌더링됨 핵심 원칙: count 를 직접 count = count + 1 처럼 바꾸면 안 되고, 반드시 setCount(...) 를 통해서만 바꿔야 함. React가 setter 호출을 감지해야 "이 컴포넌트 다시 그려야겠다"고 인식하기 때문. 실무에서는 검색창 입력값, 로딩 상태, 결과 표시 여부 같은 게 전형적인 useState 활용 케이스. 반면 서버에서 가져온 데이터는 useState보다 React Query/SWR로 관리하는 게 더 적합한 경우가 많음 — useState는 "컴포넌트 안에서만 쓰는 UI 상태"에, React Query는 "서버 데이터 캐싱/동기화"에 특화되어 있어서 역할이 나뉨. 백엔드: Node.js 계열 vs Java(Spring) 차이 Node.js / Next.js API Java (Spring/Spring Boot) 성격 가볍고 빠르게 구축, 자유도 높음 구조가 엄격, 관례가 강함 동시성 처리 이벤트 루프 기반 (비동기 I/O에 강함) 스레드 기반 (CPU 연산에 강함) 적합한 규모 스타트업, MVP, 소~중규모 서비스 대규모, 트래픽 많은 엔터프라이즈 언어 통일성 프론트/백 다 JS(TS) 프론트는 JS, 백은 Java 채용 시장(한국) 스타트업 다수, 늘어나는 추세 대기업/금융권/공공기관 여전히 압도적 다수 "풀스택"이라는 단어가 가리키는 두 가지 결 한국 채용시장에서 "풀스택"이 의미하는 바가 회사 유형에 따라 다름. SI/대기업/공공형 풀스택 스타트업형 풀스택 백엔드 Java/Spring Node.js, Python 프론트 React/Vue (백엔드 부속처럼 취급되는 경우도 많음) React/Next.js가 메인 공고 특성 사실상 백엔드 중심인 경우 많음 프론트-백 다 다루는 사람 한국 시장 비중 신입 공고 수는 이쪽이 더 많음 (SI/SM 물량) 공고 수는 적지만 늘어나는 추세 "풀스택 개발자"라는 타이틀만 보고 지원했다가 실제로는 Java/Spring을 요구하는 SI 자리인 경우가 흔해서, 채용공고의 기술스택 항목은 꼭 확인해야 함.

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.39

Уверенность