sdesign416 님의 블로그

[Node.js] Multer를 이용한 프로필 이미지 업로드 (MongoDB + Express)

Express 환경에서 파일 업로드의 한계Express는 기본적으로 파일 업로드를 자체적으로 처리하지 못한다. 일반적인 JSON 데이터나 텍스트 기반의 Form 데이터는 기본 파서로 쉽게 처리할 수 있다. 하지만 이미지나 압축 파일 같은 이진(Binary) 데이터는 multipart/form-data 형식으로 전송되기 때문에, Express 자체 기능만으로는 데이터를 해석할 수 없어 별도의 처리가 필요하다.Multer란?Multer는 Node.js 환경에서 파일 업로드를 처리하기 위해 사용되는 미들웨어이다.Express와 함께 사용할 수 있으며, 파일크기제한, 파일 형식 필터링 등 조건 설정도 가능하다. 💡 Multer 핵심 기능파일 저장소 설정: 업로드된 파일을 서버의 특정 폴더에 안전하게 저장하거나..

[React] Props와 map()으로 리스트 렌더링하기 (key가 필요한 이유)

Props란?props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이다.리액트에선 하나의 컴포넌트를 여러번 재사용할 수 있는데, 이때 각각 다른 데이터를 전달하기 위해 props를 사용한다.아래 이미지와 같이 부모 컴포넌트인 UserList가 user 데이터를 자식 컴포넌트에게 전달하는것과 같은 방식이다.▶ 부모 컴포넌트 UserList가 user={user}를 자식 컴포넌트 User에게 전달하여 자식 컴포넌트가 해당 데이터를 props로 사용예제코드아래 코드는 사용자 목록을 출력하는 코드로, 하나의 User 컴포넌트를 여러 데이터에 재사용하는 예제코드이다.user 배열에 사용자 정보 저장map() 함수 사용하여 배열을 하나씩 반복반복돌며 User 컴포넌트에 user 객체를 props로 전..

[React] 리액트 기본개념 (SPA, 리액트 사용방법, 동작방식)

웹사이트나 앱을 이용하다 보면 버튼을 클릭하거나 메뉴를 이동했을 때 화면이 빠르게 변경되는것을 볼 수 있다.과거엔 페이지를 이동할때마다 서버에서 새로운 HTML을 받아 화면 전체를 새로고침했지만,최근엔 필요한 부분만 즉시 변경하여 더 빠르고 자연스러운 사용자 경험을 제공하는 React와 같은 프론트엔드 라이브러리를 많이 사용한다.React란?리액트는 사용자 인터페이스(UI)를 구성하기 위한 JavaScript 라이브러리 이다. 리액트의 가장 큰 특징은 화면을 컴포넌트(Component)라는 작은 단위로 나눠 개발한다.하나의 페이지를 Header, Main, Footer처럼 여러 컴포넌트로 분리하여 개발할 수 있고,필요한 곳에서 재사용할 수 있어 유지보수가 쉬워지는것을 말한다. 또한 실제 DOM을 직접 조..

Node.js에서 JavaScript 파일을 작성하다 보면 .js와 .mjs확장자를 볼 수 있다.두 파일 모두 JavaScript 코드를 작성하는 파일이긴 하지만 모듈을 사용하는 방식에 차이가 있다. 프로젝트 환경에 따라 사용하는 모듈 방식이 달라지며, 모듈 방식에 따라 .js 또는 .mjs 확장자를 사용하게 된다.모듈(Module)이란?모듈은 관련된 기능이나 코드를 하나의 파일로 분리하여 관리하는 방식을 말한다. 프로젝트의 규모가 커질수록 하나의 파일에 모든 코드를 작성하게 되면 관리가 매우 어려워진다.그래서 기능별로 파일을 나눈 뒤, 해당 기능을 필요로 하는 파일에서 기능이 속해있는 파일을 불러와 사용하는 방식으로 프로젝트는 만들어진다. 예를 들어 회원 기능은 user.js, 관리자 기능은 admin..

JavaScript 기본 문법과 조작을 복습하기 위해 간단한 Study Planner를 제작하였다.TODO 리스트를 진행하며 배운 할 일을 등록하고 완료 상태를 관리하는 구조에서마감일 설정과 D-Day계산, 마감일 기준 정렬 기능을 추가하여 구현하였다. 🔗 GitHub: https://github.com/sdesign416/Mini-Projects/tree/main/02_StudyPlanner🔗 Demo: https://sdesign416.github.io/Mini-Projects/02_StudyPlanner/ 주요 기능학습 계획 등록하기(과목, 상세내용, 날짜)D-Day 계산계획 완료 상태 변경계획 삭제D-Day 기준 정렬1. 데이터 저장 구조입력받은 계획을 배열 안에 객체 형태로 저장하여 관리..

웹 크롤링(Web Crawling)은 웹사이트에 존재하는 데이터를 자동으로 수집하는 기술을 말한다.웹 크롤링은 기본적으로 웹페이지의 HTML 구조를 분석하고 필요한 데이터가 들어있는 태그를 찾아 원하는 값만 추출하는 방식으로 동작한다.사람이 직접 웹페이지에 접속하여 뉴스, 상품 정보, 이미지 등을 확인하는 과정을 프로그램이 대신 수행한다고 생각하면 된다.예를 들어 쇼핑몰 상품 정보를 모으거나, 뉴스 기사 제목을 수집하거나, 여러 페이지의 데이터를 분석해야 할 때 사용된다.1. 크롤링 라이브러리 설치Python에서 웹 크롤링을 하기 위해선 별도로 두가지 라이브러리를 설치해야한다. 1_1) RequestsRequests는 웹 서버에 요청을 보내 응답을 받아오기 위해 사용하는 라이브러리로쉽게 말해 Python..

[알고리즘] 다익스트라(Dijkstra)알고리즘 - 최단 경로와 동작 원리다익스트라 (Dijkstra) 알고리즘은 시작 정점에서 다른 모든 정점까지의 최단거리를 구하는 알고리즘이다. 예를 들어 지도 어플에서 현재 위치에서 목적지까지 가장 빠른 길을 찾거나네트워크에sdesign416.tistory.com다익스트라는 현재까지 발견한 거리 중 가장 짧은 정점을 선택하면서 최단 거리를 갱신하는 방식이다.하지만 정점이 많아질 경우 매번 가장 가까운 정점을 찾는 과정에서 많은 시간이 필요하다.이를 해결하기 위해 실제 구현에서는우선순위 큐(Priority Queue)와 힙(Heap) 자료구조를 사용한다.1. 우선순위 큐(Priority Queue)우선순위 큐는 일반적인 큐와 다르게먼저 들어온 데이터가 아니라 우선순위..

다익스트라 (Dijkstra) 알고리즘은 시작 정점에서 다른 모든 정점까지의 최단거리를 구하는 알고리즘이다. 예를 들어 지도 어플에서 현재 위치에서 목적지까지 가장 빠른 길을 찾거나네트워크에서 데이터가 이동하는 최적 경로를 찾을 때 사용된다. 다익스트라 알고리즘은 그래프의 가중치를 기준으로 최단 거리를 계산하기 때문에 가중 그래프에서 많이 사용된다. ※ 단, 다익스트라 알고리즘은 음수 가중치가 있는 그래프에서는 사용할 수 없다. 1. 최단 경로 알고리즘(Shortest Path Algorithm) 최단 경로 알고리즘은 그래프에서 특정 정점에서 다른 정점까지 이동할 때 가장 적은 비용이 드는 경로를 찾는 알고리즘이다.그래프의 가중치를 기준으로 최단 경로를 판단하기 때문에거리, 시간, 비용 등 어떤 값을 ..

그래프(Graph)는 정점(Vertex)과 간선(Edge) 으로 이루어진데이터간의 연결 관계를 표현한 자료구조이다. 트리가 계층 구조를 표현하고 있다면그래프는 객체들의 관계를 표현하는데 사용된다. 예를 들어 지하철 노선도, 길찾기 시스템등은 모두 그래프로 표현할 수 있는 예시이다. 즉, 트리는 위에서 아래로 뻗어나가는 구조를 유지해야 하지만그래프는 점과 점이 서로 연결되어 있어트리보다는 좀 더 자유롭게 연결된다라고 생각하면 된다.💡 트리와 그래프의 차이트리는 그래프의 한 종류에 속한다.하지만 트리는 계층 구조를 표현하기 위해 몇가지 제한 조건을 가진 그래프라 생각하면 된다.구분트리그래프구조계층 구조연결 구조방향 부모 → 자식 관계자유로운 연결사이클없음 가능루트 노드존재없을 수 있음예시폴더구조, 조직도지..

그리디(Greedy) 알고리즘은 문제를 해결할 때 현재 시점 기준으로 가장 최선의 선택을 반복적으로 수행하며 결과에 도달하는 알고리즘으로탐욕적인 선택을 한다해서 탐욕 알고리즘이라고도 불린다. 그리디 알고리즘은 각 단계에서 가능한 최선의 선택을 하지만,그 선택이 전체 문제에 대해서 최적해를 보장하는지는 문제별로 다르게 나타난다. 쉽게 말해, 나무만 보고 숲은 보지 못하는 당장의 이익에만 얽매이는 모습이라 생각하면 된다.1. 그리디 알고리즘 동작 흐름그리디 알고리즘은 현재 상황에서 선택할 수 있는 후보들을 확인한 후,후보들 중 가장 좋아보이는 최선의 선택을 한다.선택한 결과를 문제에 반영하여 문제가 해결될 때 까지 반복하는 동작을 한다. 이때 특이한점은한 번 선택한 결과를 다시 되돌아가지 않는다는 점이다. ..