작은기린우리

프론트엔드 + 백엔드 통합 개발 환경 가이드1. 개발 환경 구성프론트엔드 개발 환경Vite 개발 서버 (Development Server)실제 서버가 아닌 개발 편의를 위한 도구Hot Module Replacement(HMR), 실시간 코드 반영 등 지원백엔드 서버Node.js 기반 실제 서버API 엔드포인트 제공데이터 처리 및 비즈니스 로직 수행개발 vs 운영 환경 차이개발 환경클라이언트 Vite 개발 서버 (localhost:3000) ↕ 백엔드 서버 (localhost:4000)프로덕션 환경클라이언트 웹 서버(Nginx 등) 2. 프로젝트 구조 및 목적프로젝트 구조프로젝트 루트/├── package.json (메인)├── react-shop..

env 파일은 "environment"의 약자로, 환경 변수를 저장하는 파일입니다. 주로 다음과 같은 목적으로 사용됩니다:민감한 정보 보호API 키데이터베이스 비밀번호비밀 토큰환경별 설정 관리개발 환경테스트 환경운영 환경예시# .env 파일API_KEY=your_api_key_hereDATABASE_URL=mongodb://localhost:27017SECRET_KEY=your_secret_key // Node.js에서 사용할 경우require('dotenv').config();const apiKey = process.env.API_KEY;// React에서 사용할 경우// .env 파일명은 REACT_APP_으로 시작해야 함const apiKey = process.env.REACT_APP_API_KEY..

📌 파라미터(Parameter)란?컴퓨터 과학 및 프로그래밍에서 파라미터(Parameter) 또는 매개변수는 함수, 명령어, 프로그램 또는 시스템 등에 값을 전달하여 그 동작을 변경하거나 특정 입력을 제공하는 데 사용되는 변수나 값이다. 어떤 동작을 수행할 때 필요한 추가 정보 또는 설정 값이라고 생각할 수 있다.💾 URL에서의 파라미터 (쿼리 파라미터)웹 개발 및 API 통신에서 "파라미터"는 주로 URL의 쿼리 파라미터(Query Parameter) 또는 쿼리 스트링(Query String) 을 의미하는 경우가 많다.위치: URL 주소에서 ? 문자 뒤에 위치한다.형식: 키(Key)=값(Value) 형태의 쌍으로 구성된다.구분: 여러 개의 파라미터는 & 문자로 구분하여 나열한다.목적: 웹 서버나 웹..

백틱(backtick) `은 키보드의 물결(~) 키 왼쪽에 있는 문자입니다. 주요 용도는: 1. 코드에서: - 템플릿 리터럴(Template Literal) 작성 ```javascript let name = "John"; let greeting = `Hello ${name}!`; // 문자열 내 변수 삽입 가능 ``` 2. 마크다운에서: - 인라인 코드 표시 - 코드 블록 생성 (```로 시작) 3. 명령줄에서: - 명령어 실행 결과를 다른 명령어의 입력으로 사용 4. 데이터베이스에서: - MySQL 등에서 테이블명이나 컬럼명을 구분할 때 사용 백틱은 작은따옴표(')나 큰따옴표(")와 비슷한 역할을 하지만, 더 다양한 기능을 제공합니다. 숫자 1 왼쪽의 ` 모양 키보드로 입력할 수 있다

position : fixed가 적용된 대상이 top:0 left:0 같이 명시적인 위치가 정해지지 않았을때 형제 요소의 margin에 영향을 받는 경우가 있다. headercontainer01와  continer-header-under는 형제요소이다. 그런데 아래와 같은 상황에서는 형제 요소의 margin만큼 아래로 밀려버린다.#container-header-under{margin-top: 50px;}#headercontainer01{position: fixed;}원인: #headercontainer01가 문서의 원래 위치를 유지하려 하기 때문position: fixed;를 적용하면 요소는 문서의 일반적인 흐름에서 제거되지만, 원래 위치(문서 내에서 배치되던 자리)를 기준으로 배치되려는 성질이 있습니다..

node server.js는 작성하신 Node.js 서버 코드를 실행하여 서버를 시작하는 명령어입니다. (현재 시간 2025년 4월 1일 오후 1:37 KST, 천안시 위치)서버를 시작하는 것 외에 관련하여 알아두면 좋은 기본적인 명령어/방법은 다음과 같습니다.1. 서버 끄기 (종료하기): Ctrl + C방법: node server.js를 실행했던 바로 그 터미널 창 (서버 로그 메시지가 계속 올라오거나 커서가 멈춰있는 창)을 활성화하고 키보드에서 Ctrl 키와 C 키를 동시에 누릅니다.동작: 이 키 조합은 현재 실행 중인 프로세스(여기서는 Node.js 서버)에게 중지 신호(Interrupt Signal) 를 보냅니다. 대부분의 경우 서버 프로세스는 이 신호를 받고 실행을 멈추게 됩니다. 터미널에는 다..

우리가 인터넷 사이트를 웹페이지라고 부르는 것은 일반적으로 사이트의 구조가 마치 책과 같은 형식이기 때문이다.1page 즉 1면이다.그런데 막상 웹사이트를 보면 물리적인 책과 다르게 다양한 구조를 하고 있다.포탈처럼 다양한 글들로 넘어가는 페이지가 있는 반면 아예 컨텐츠가 무한해서 스크롤도 무한하게 길어지고 페이지도 세로로 쭉 이어지는 유튜브같은 사이트가 있다. 그리고 API에서도 페이지 개념을 사용한다. 그런데 무한스크롤에선 스크롤이 무한히 길어지는데 왜 페이지 개념을 사용하는 걸까? 📄 API에서의 '페이지(Page)'란 무엇일까? (무한 스크롤)페이지(page)라는 용어가 웹 API, 특히 무한 스크롤 맥락에서는 책 페이지와는 다른 의미로 사용되어 헷갈릴 수 있습니다. 여기서 '페이지'는 눈에 보..

비트 연산자(Bitwise Operators)는 컴퓨터 프로그래밍에서 숫자를 우리가 일상적으로 사용하는 10진수가 아닌, 컴퓨터가 내부적으로 데이터를 처리하는 방식인 2진수(Binary)의 비트(Bit) 단위로 직접 조작하고 연산하는 데 사용되는 특별한 종류의 연산자(Operator)들을 의미한다.⚙️ 핵심 원리: 비트(Bit) 수준에서의 연산2진 표현: 비트 연산자는 피연산자(연산 대상이 되는 값, 주로 숫자)를 먼저 2진수 형태(0과 1로 이루어진 시퀀스, JavaScript에서는 보통 부호 있는 32비트 정수로 간주)로 변환한다.비트 단위 조작: 그런 다음, 이 2진수의 각 자리에 있는 비트(0 또는 1)들을 직접 다루어 연산을 수행한다.& (AND), | (OR), ^ (XOR) 등은 두 피연산자..

JavaScript에서 어떤 숫자가 홀수인지 판별하는 가장 일반적이고 간단한 방법은 나머지 연산자(Modulo Operator) % 를 사용하는 것이다. 정수를 2로 나누었을 때 나머지가 0이 아니면 홀수이다.🧮 방법 1: 나머지 연산자 (%) 사용원리: 홀수/짝수 판별의 핵심 원리는 수학적인 정의에 있다.짝수(even number)는 어떤 정수를 2로 나누었을 때 나누어 떨어지는 정수, 즉 나머지(remainder)가 0인 수이다.홀수(odd number)는 2로 나누어 떨어지지 않는 정수이다. 즉 나머지(remainder)가 1 혹은 -1인 수이다.JavaScript의 나머지 연산자 (%)는 바로 이 나머지 값을 계산해주는 연산자이다.숫자(number) % 2 를 계산하면 'number를 2로 나눈..

프로그래밍, 특히 표현식(Expression)의 맥락에서 **평가(Evaluation)**란, 작성된 코드(주로 표현식)를 컴퓨터(JavaScript 엔진과 같은 인터프리터 또는 컴파일러)가 해석하고 실행하여 최종적인 **하나의 값(Value)**으로 도출해내는 과정을 의미한다.❓평가라는 말 자체가 감정평가와 같이 어떤 대상의 가치를 확인하는 어감이 있어서 헷갈릴 수 있지만 프로그래밍에서의 평가는 결과의 도출, 값의 산출같은 의미로 사용된다.⚙️ 평가 과정 이해하기간단히 말해, "평가한다"는 것은 "계산해서 결과를 낸다"와 비슷하다.해석(Parsing): 엔진은 먼저 코드 조각의 의미를 이해한다. 예를 들어 x + 5라는 코드를 보면, 'x라는 변수의 값과 숫자 5를 더하라'는 의미로 해석한다.실행(Ex..