buffso 님의 블로그

1. 프로젝트 개요 (Projcet Overview)이번 프젝트 View My Startup 은 사용자들이 다양한 스타트업의 정보를 조회하고 비교할 수 있으며, 모의 투자 기능을 통해 시장 분석과 예측을 경험할 수 있는 플랫폼을 목표로 합니다.사용자는 특정 스타트업의 누적 투자 금액, 매출액, 고용 인원 등을 확인하고, 이를 비교하여 투자 의사 결정을 모의로 연습할 수 있습니다. 2. 담당한 작업 (Task & Contribution)기초 작업기능 요구사항 분석 및 업무 분장표 작성기본적인 프로젝트 디렉토리 구조 구성(팀원별 분업화된 작업 용이 하도록 예시 제시)백엔드 Node.js, Express.js 를 이용하여 기본적인 package.json 구성 및 기능별 작업 디렉토리 분류를 통해 프로젝트 기초..

1. 데이터의 구조화 및 조직화테이블 기반 구조: 데이터를 행과 열로 구성된 테이블 형태로 저장하여 이해하고 관리하기 쉽습니다.관계 설정: 테이블 간의 관계를 정의하여 복잡한 데이터 모델링이 가능합니다.2. 데이터 무결성과 일관성 보장ACID 규정 준수: 원자성(Atomicity), 일관성(Consistency), 격리성(Isolation), 지속성(Durability)을 보장하여 트랜잭션 처리 시 데이터 무결성을 유지합니다.제약 조건 설정: 기본 키, 외래 키, 고유성 제약 등을 통해 데이터의 정확성과 일관성을 확보합니다.3. 강력한 질의 및 조작 기능SQL 지원: 표준화된 구조화 질의 언어(SQL)를 사용하여 데이터 검색, 삽입, 업데이트, 삭제 등의 작업을 효율적으로 수행할 수 있습니다.복잡한 질의..

데이터베이스 정규화란?**정규화(Normalization)**는 데이터베이스 설계에서 데이터의 중복을 최소화하고, 데이터 무결성을 유지하기 위해 데이터를 구조화하는 과정입니다. 정규화를 통해 데이터베이스는 중복과 불일치로 인한 문제를 방지하고, 데이터의 일관성을 유지하며 저장 공간을 효율적으로 사용할 수 있습니다.정규화는 보통 여러 단계(정규형, Normal Form)로 나뉘며, 각 단계는 특정 조건을 만족해야 합니다.정규화의 목적중복 데이터 최소화: 데이터를 중복 저장하지 않음으로써 저장 공간을 절약하고, 데이터 불일치를 방지.데이터 무결성 유지: 중복된 데이터로 인한 데이터 불일치 문제를 해결하고, 데이터의 일관성을 유지.삽입, 수정, 삭제 이상(Anomalies) 방지: 데이터 삽입, 수정, 삭제 ..

CSR (Client-Side Rendering)특징:모든 JavaScript 파일과 리소스가 클라이언트(브라우저)에서 로드된 후에 렌더링이 시작됨.초기 페이지 로딩 시 HTML이 최소한의 내용으로 제공되고, 클라이언트가 모든 JavaScript를 다운로드하여 실행 후, 렌더링이 완료됨.초기 로딩 속도가 느릴 수 있지만, 첫 페이지 로딩 이후 빠른 사용자 상호작용이 가능.사용 상황:인터랙티브한 웹 애플리케이션: 사용자의 상호작용이 많은 애플리케이션 (예: SPA, 대시보드, 메신저 앱 등).클라이언트 측에서의 상태 관리와 UI 변경이 빈번하게 일어나는 경우.SEO(검색 엔진 최적화)가 필요하지 않은 경우.SSR (Server-Side Rendering)특징:페이지가 요청될 때마다 서버에서 HTML을 완성..

1. useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명해 주세요. useMemo와 useCallback이란?useMemo: 리액트 훅으로, 값이 변경될 때마다 함수의 결과를 재계산하지 않고, 특정 값이 변경될 때만 해당 값(메모이제이션된 값)을 재계산하여 캐싱함.사용법: useMemo(() => 계산할 값, [의존성 배열])용도: 복잡한 계산이나 비용이 큰 연산의 결과를 메모이제이션하여 불필요한 재계산을 방지.useCallback: 리액트 훅으로, 함수가 다시 생성되지 않도록 함수 자체를 메모이제이션함.사용법: useCallback(콜백 함수, [의존성 배열])용도: 컴포넌트가 리렌더링될 때 동일한 함수 인스턴스를 재사용하여..

리액트의 렌더링 방식Virtual DOM 사용: 리액트는 메모리에서 관리되는 가상 DOM을 사용해 렌더링 최적화.변경 사항 감지: 상태(State)나 속성(Props) 변경 시 Virtual DOM에서 변경 사항 계산 후 실제 DOM과 비교(diffing).Reconciliation: 변경 사항을 실제 DOM에 반영하는 과정으로, 최소한의 DOM 조작으로 성능 최적화.렌더링 과정: 컴포넌트의 render 함수 또는 함수형 컴포넌트에서 JSX 반환 후 Virtual DOM에 반영.업데이트: 상태나 속성 변경 시 필요한 컴포넌트만 다시 렌더링하여 효율적 업데이트. Virtual DOM이란? 사용하는 이유Virtual DOM이란?리액트가 사용하는 가볍고 메모리 내에서 관리되는 가상 DOM.실제 DOM과 1:1..

JavaScript의 변수 선언 방식 비교 : var, let, const 1. var스코프(Scope): 함수 스코프호이스팅(Hoisting): 변수 선언이 최상단으로 끌어올려짐, 초기화 전에는 undefined재선언 가능: 동일 스코프 내에서 여러 번 재선언 가능예제:function exampleVar() { console.log(x); // undefined (호이스팅 발생) var x = 10; console.log(x); // 10 var x = 20; // 재선언 가능 console.log(x); // 20}exampleVar();2. let스코프(Scope): 블록 스코프호이스팅(Hoisting): 호이스팅되지만 초기화는 선언 위치에서 이루어짐, 초기화 전 접근 시..

브라우저가 어떻게 동작하는지 설명해 주세요 브라우저는 사용자가 입력한 URL(웹 주소)을 통해 웹 서버에 요청을 보내고, 서버로부터 HTML, CSS, JavaScript 등의 파일을 받아와서 이를 렌더링해 화면에 표시합니다.URL 입력 및 요청 전송: 사용자가 브라우저의 주소창에 URL을 입력하고 엔터를 누르면, 브라우저는 이 URL을 해석하여 해당 웹 사이트의 서버로 HTTP 또는 HTTPS 요청을 보냅니다.DNS 조회: 브라우저는 도메인 네임 시스템(DNS)을 이용해 입력된 도메인 이름을 서버의 IP 주소로 변환합니다.서버와의 연결: DNS를 통해 IP 주소를 확인한 브라우저는 이 주소를 통해 웹 서버에 접속하고, HTTP 요청을 전송합니다. 이 요청은 사용자가 원하는 특정 웹 페이지를 요청하는 내..

CSS의 CascadingCSS에서 "Cascading"이란 스타일 규칙이 충돌할 때, 어떤 규칙이 적용될지를 결정하는 우선순위 체계를 의미합니다. "Cascading"이라는 용어는 "폭포처럼 내려간다"는 의미에서, 여러 스타일 규칙이 적용될 때 순서대로 내려오면서 적용된다는 것을 비유적으로 설명한 것입니다.Cascading의 주요 개념우선순위(Specificity):CSS에서 특정 요소에 적용되는 여러 규칙이 있을 때, 우선순위에 따라 어떤 규칙이 적용될지 결정됩니다. 우선순위는 선택자의 타입에 따라 결정되며, 인라인 스타일 > ID 선택자 > 클래스, 속성, 가상 클래스 선택자 > 태그 선택자의 순으로 우선순위가 높습니다.예를 들어, id 선택자가 class 선택자보다 높은 우선순위를 가집니다.출처(..