개발 용어 개념정리
개발 용어 개념 정리
서버/개발 환경 이해를 위한 참고서 — 작업 기록
원래 웹 브라우저(크롬, 사파리 등) 안에서만 동작하던 프로그래밍 언어. 버튼 클릭하면 반응하고, 화면을 동적으로 바꾸는 데 쓰임.
JavaScript를 브라우저 밖(서버)에서도 실행할 수 있게 해주는 환경. 덕분에 새솔CRM 서버(app.js)도 JavaScript로 만든 것.
Node.js와 함께 설치되는 패키지(도구) 관리자. 다른 사람이 만들어놓은 기능들을 내 프로젝트에 쉽게 설치하고 관리.
# 자주 쓰는 npm 명령어
npm install ← 필요한 패키지 전부 설치 (처음 세팅)
npm run build ← 빌드 실행 (소스 → 배포용 파일)
npm run dev ← 개발용 미리보기 (로컬 테스트)
npm run start ← 앱 실행프로젝트의 설명서 겸 설정파일. 어떤 패키지가 필요한지, npm run XXX 명령어가 무슨 작업인지 정의되어 있음.
"scripts": {
"build": "vite build", ← npm run build 할 때 실행
"dev": "vite dev", ← npm run dev 할 때 실행
}Facebook이 만든 UI(화면) 개발 도구. 복잡한 화면을 컴포넌트(부품) 단위로 쪼개서 만들 수 있음. 새솔CRM의 my-notes 앱이 React로 제작됨. 소스파일 확장자 .jsx
사람이 쓴 코드(.jsx)를 브라우저가 읽을 수 있는 압축 파일(.js)로 변환하는 과정. npm run build 명령어로 실행.
React 소스를 빠르게 빌드해주는 도구. npm run build 하면 내부적으로 Vite가 동작. 개발자가 직접 다룰 일은 거의 없고 자동으로 실행됨.
서버에서 Node.js 앱을 24시간 살아있게 관리해주는 도구. 오류로 죽으면 자동 재시작, 서버 재부팅해도 자동 실행.
pm2 list ← 실행 중인 프로세스 목록
pm2 logs ← 로그(오류/기록) 보기
pm2 restart saesol-crm ← 재시작
pm2 stop saesol-crm ← 중지
pm2 start app.js --name saesol-crm ← 새로 등록 및 실행| 구분 | node app.js | pm2 start |
|---|---|---|
| 용도 | 잠깐 테스트 | 실제 서비스 운영 |
| 터미널 닫으면 | 앱 꺼짐 | 계속 실행 |
| 오류로 죽으면 | 그냥 죽어있음 | 자동 재시작 |
| 서버 재부팅 후 | 수동 재시작 필요 | 자동 실행 |
원격 서버(AWS Lightsail)에 안전하게 접속하는 방법. PEM 키 파일로 인증. 접속하면 서버 터미널을 내 PC에서 직접 조작 가능.
# 새솔CRM 서버 접속
ssh -i "C:\Users\user\Downloads\saesoltax.pem" ubuntu@15.106.8X.2X| 명령어 | 뜻 | 예시 |
|---|---|---|
cd | 폴더 이동 | cd /home/ubuntu/saesol-crm-web |
ls | 파일 목록 보기 | ls -la |
cat | 파일 내용 보기 | cat .env |
nano | 파일 편집 | nano app.js |
mkdir | 폴더 만들기 | mkdir backup |
cp | 파일 복사 | cp app.js app.js.bak |
코드의 변경 이력을 스냅샷으로 저장하는 도구. 언제든 이전 버전으로 되돌릴 수 있음.
git add . ← 변경된 파일 전부 선택
git commit -m "원천신고 기능 추가" ← 스냅샷 저장 + 설명 메모
git push ← GitHub 서버에 업로드Git으로 저장한 코드를 인터넷 서버에 보관하는 서비스. 새솔CRM 저장소: viXXXX500-cpu/saesol-crm (Private)
GitHub에 push할 때 신원 확인용 비밀번호 역할. 한 번만 발급되고 다시 볼 수 없으므로 즉시 복사 필요. 서버에 credential 저장해두면 매번 입력 불필요.
프로그램끼리 데이터를 주고받는 창구. 브라우저(화면)가 서버에 “이 데이터 줘” 요청하면 서버가 응답해주는 방식.
페이지 전체를 새로고침하지 않고, 필요한 데이터만 서버에서 가져오는 방식. 새솔CRM에서 업체 목록 클릭할 때 화면이 깜빡이지 않는 게 Ajax 덕분.
Node.js로 API 서버를 쉽게 만들 수 있게 해주는 도구. 새솔CRM의 app.js가 Express 기반. URL별로 어떤 데이터를 돌려줄지 정의.
// /api/companies 요청 오면 업체 목록 반환
app.get('/api/companies', (req, res) => {
res.json(업체목록);
});| 구분 | 프론트엔드 (Frontend) | 백엔드 (Backend) |
|---|---|---|
| 위치 | 사용자 브라우저 안 | 서버 안 (눈에 안 보임) |
| 역할 | 화면 표시, 클릭·입력 처리 | 데이터 저장·조회·인증 |
| 언어/도구 | HTML, CSS, JS, React | Node.js, Express, DB |
| 새솔CRM 예시 | 업체 목록 화면, 노트 폼 | 업체 데이터 저장, Gmail 연동 |
| 기술 | 역할 | 비유 |
|---|---|---|
| HTML | 화면 구조 (뼈대) | 건물의 콘크리트 구조 |
| CSS | 화면 스타일 (디자인) | 인테리어, 도배, 페인트 |
| JavaScript | 화면 동작 (기능) | 전기, 수도, 엘리베이터 |
프론트엔드 + 백엔드 둘 다 개발하는 것. 새솔CRM이 딱 풀스택 앱. Claude Code로 둘 다 개발 중인 것.
| SSR (서버 사이드) | CSR (클라이언트 사이드) | |
|---|---|---|
| 화면 생성 위치 | 서버에서 완성된 HTML 전송 | 브라우저에서 JS로 생성 |
| 대표 도구 | WordPress, 일반 HTML | React, Vue (새솔CRM) |
| 특징 | 첫 로딩 빠름, SEO 유리 | 화면 전환 부드러움 |
데이터를 구조적으로 저장하고 빠르게 찾을 수 있는 시스템. 새솔CRM은 SQLite (파일 하나짜리 간단한 DB) 사용.
DB에 데이터를 넣고, 찾고, 수정하고, 삭제하는 명령어 언어.
SELECT * FROM companies WHERE name = '홍길동' ← 조회
INSERT INTO notes (content) VALUES ('메모내용') ← 삽입
UPDATE companies SET phone = '010-1234' ← 수정
DELETE FROM notes WHERE id = 5 ← 삭제프론트엔드↔백엔드가 데이터를 주고받을 때 쓰는 형식. 사람도 읽기 쉽고 기계도 처리하기 쉬운 구조.
// 백엔드가 프론트엔드에 보내는 JSON 예시
{
"id": 123,
"name": "홍길동 주식회사",
"phone": "031-123-4567",
"taxType": "법인"
}| DB | 특징 | 용도 |
|---|---|---|
| SQLite | 파일 하나 = DB 전체. 설치 불필요 | 새솔CRM (소규모) |
| MySQL | 서버 별도 설치, 다중 접속에 강함 | 중규모 웹서비스 |
| PostgreSQL | 기능 풍부, 대규모에 적합 | 대형 서비스 |
| MongoDB | JSON 형태로 저장 (NoSQL) | 비정형 데이터 |