초코chip의 코딩 생활

운영 환경을 위한 도커 파일 작성(Dockerfile)빌드 단계(builder)배포 단계(Nginx 서버)./Dockerfile# 빌드 단계FROM node:16 AS builder# 작업 디렉토리 설정WORKDIR /usr/src/app# package.json 복사COPY package.json ./# 의존성 설치RUN npm install# 모든 소스 코드 복사COPY . .# production 모드로 빌드RUN npm run build# Nginx 서버 단계FROM nginx:alpine# 빌드된 정적 파일을 Nginx의 기본 제공 HTML 디렉토리에 복사COPY --from=builder /usr/src/app/dist /usr/share/nginx/html# 필요에 따라 Nginx 설정 파일..

들어가며..Router: URL에 따른 페이지 이동React-Router: React에서 URL에 따른 페이지 이동 Client-Side vs Server-SideClient-Side Routing vs Server-Side RoutingClient-Side Routing:  Server-Side Routing:Client-Side Rendering vs Server-Side RenderingClient-Side RenderingServer-Side Rendering React-Router 설정리액트 라우터 설치폴더 구조 설정Vite 설정 파일(vite.config.js)에 절대 경로 별칭 설정 리액트 라우터 설치리액트 라우팅을 위해 react-router-dom 패키지를 설치npm install rea..

최신 방식 - Vitenpm create vite@latest -- --template react 프로젝트 폴더 구성my-app/├── node_modules/           # 프로젝트 종속성 모듈├── public/                 # 정적 파일 (CRA와 달리 HTML 파일 없음)├── src/│   ├── assets/             # 이미지와 폰트 같은 정적 파일│   ├── App.css             # App 컴포넌트 스타일│   ├── App.jsx             # 메인 컴포넌트│   ├── main.jsx            # 엔트리 포인트 (ReactDOM.createRoot() 호출)└── package.json            # 프..

들어가며..“어떤 결과를 보여줘야 하는지”에만 집중하고 “어떻게 작업을 수행할지”는 리액트가 알아서 함IoC (Inversion of Control): 렌더링 관리 책임을 리액트에 위임 우리는 화면에 어떤 “결과(상태)“가 보여져야 하는지에만 집중즉, 원하는 결과(상태)만 정의하고, 변화가 필요할 때는 그 결과(상태)만 업데이트React는 일반적인 JS와는 다르게 직접적인 DOM 조작을 최소화하고, 상태 변화에 따라 자동으로 UI를 렌더링하는 패턴을 사용 코딩 순서React에서는 상태와 컴포넌트를 기반으로 UI를 동적으로 업데이트하는 방식으로 진행상태(state) 선언 및 초기화: useState을 이용해 컴포넌트 내부에서 동적으로 변하는 값을 상태로 선언하고 초기화이벤트 핸들러 함수 정의: 특정 동작(..

리액트란?정의: UI 개발에 도움을 주는 JavaScript 라이브러리기능: 코드를 통해 컴포넌트를 만들고, 컴포넌트를 조합해 UI를 생성 2가지 주요 특징선언형(Declarative)정의: 원하는 UI 상태를 무엇으로 표현할지 작성하고, 어떻게 렌더링할지는 리액트가 알아서 처리하게 맡기는 방식“어떤 결과를 보여줘야 하는지”에만 집중하고 “어떻게 작업을 수행할지”는 리액트가 알아서 함IoC (Inversion of Control): 렌더링 관리 책임을 리액트에 위임장점직관적: 결과 중심으로 작성하므로 코드가 간결하고 이해하기 쉬움자동 업데이트: 상태가 변경되면 리액트가 UI를 자동으로 업데이트하여 일일이 수동으로 조작할 필요 없음명령형 방식: 요소를 일일이 지정하고 DOM을 작업하는 과정을 직접 지정선언..

들어가며..Axios로 HTML 문서를 가져온 후 Cheerio를 사용해 파싱하는 과정을 정리이 방법은 주로 웹 스크래핑이나 특정 HTML 요소의 데이터를 추출하는 데 유용Cheerio는 jQuery와 유사한 문법을 제공해 HTML 문서에서 쉽게 요소를 선택하고 조작 가능 진행 과정Axios로 HTML 가져오기: axios를 사용하여 HTML 문서를 가져옴Cheerio로 HTML 파싱: cheerio.load()를 통해 가져온 HTML을 파싱하여 $ 객체에 저장파싱한 데이터 처리:요소 선택: const title = $(".title")로 요소를 선택선택한 요소에서 데이터 추출: title.text()로 요소에서 필요한 데이터 추출 Axios로 HTML 문서를 가져와 Cheerio로 파싱import ax..

들어가며..JavaScript에서 웹 요청을 보내는 방법 중 하나는 Axios 라이브러리를 사용하는 것Axios는 간결하고 사용이 쉬운 API를 제공하여 비동기 HTTP 요청을 처리하는 데 널리 사용Axios를 통해 서버로 데이터를 보내거나 받아올 수 있으며, AJAX 호출을 더욱 쉽게 구현할 수 있음 Async/Await 방식으로 Axios를 사용요청 보내기async function fetchData() { try { const response = await axios.get("https://api.example.com/data"); const response = await axios.post("https://api.example.com/data", { name: "홍길동", ..

DOM (Document Object Model)DOM은 웹페이지의 구조를 객체로 표현한 모델목적: 주로 웹페이지의 HTML 구조나 내용을 동적으로 변경해야 할 때 사용일반적인 처리 순서:요소 선택: document.querySelector등의 메서드를 사용해 요소를 선택하고 변수에 저장.요소 조작 함수 정의: 변수에 저장된 요소에 대해 스타일, 텍스트, 구조 변경 등을 수행.이벤트 연결 (필요 시): 사용자 상호작용을 처리하기 위해 이벤트 핸들러를 추가// 1. 요소 선택const button = document.getElementById("changeButton");const textElement = document.querySelector(".text");// 2. 요소 조작 함수 정의functi..

BOM (Browser Object Model)BOM은 브라우저의 창과 관련된 객체 모델을 의미사용 목적주로 브라우저 창이나 세션에 대한 제어가 필요할 때 사용됨.브라우저의 기본적인 정보(화면 크기, 사용 언어, 방문 기록 등)를 다루거나, 페이지의 URL을 변경하거나 새 창을 여는 등의 브라우저 자체 기능을 제어하는 데 사용주요 BOM 객체:window: 브라우저 창을 나타내는 최상위 객체로, 모든 BOM 객체와 DOM 객체를 포함함.  window.open(url): 새 창을 열 때 사용.  window.alert(message): 경고창 표시.navigator: 브라우저 정보 (브라우저 이름, 버전, OS 등) 제공.navigator.userAgent: 브라우저와 OS에 대한 정보 반환.naviga..

함수형 프로그래밍JS는 함수형 프로그래밍의 특징을 가지고 있어서 인자로 함수를 전달하는 경우가 많음.함수형 프로그래밍은 코드의 간결성과 유연성을 높이는 데 유리함.// 함수형 프로그래밍 예시 (인자를 함수로 전달함)function ask(f1, f2, f3){ if (f1("질문이다!")) { f2(); } else { f3(); }}ask( (username) => confirm(username), () => alert("대답"), () => alert("??"));  동기 vs 비동기JS는 대부분 비동기적으로 동작함 (HTTP 요청, 이벤트 핸들링 등)비동기 작업을 순차적으로 실행하려면 어떻게 해야 할까?콜백 함수, Promise, async/await 방식이 있음 콜백 함수• ..