Code&Data Insights

상태(State)와 상태 관리란?State: 컴포넌트의 데이터 상태(ex) 사용자가 입력한 값이나 버튼 클릭 상태 상태 관리 : 화면을 변경하는 데 필요한 데이터를 관리하는 과정 [ 상태관리의 필요성 & 효과 ]- 상태가 변경될 때, Virtual DOM을 사용하여 관련된 DOM만 효율적으로 업데이트함 => 불필요한 DOM 접근최소화- 상태관리를 통해 코드 간결화와 유지보수성 강화가 가능 => 상태 관리는 필요한 상태만 관리하는 것이 중요! 최소한의 상태를 관리 : 불필요한 상태를 관리하면, 코드가 복잡해지고 렌더링 성능이 저하됨! 상태 관리의 범위1) 로컬 상태 (Local State) => useState: 각 컴포넌트 내에서만 사용되는 상태- 사용자가 입력한 데이터를 처리하거나 UI의 동작을 제어하..

React란?: Meta(구 Facebook)이 개발한 UI 라이브러리 주요 특징 Keyword (1) 컴포넌트 기반 구조(2) Virtual DOM 바탕의 성능 최적화(3) SPA 개발에 필요한 기능과 도구를 제공=> SPA(Single Page Application) : 하나의 HTML 페이지를 처음에 로드한 뒤, 페이지 이동이나 추가 데이터가 필요할 때 자바스크립트를 이용해 서버와 소통하여 필요한 부분만 업데이트하는 방식 React의 특징1) 컴포넌트를 기반으로 UI를 표현할 수 있음 -> 유지 보수 측면에서 매우 효율적임-> 페이지를 컴포넌트 단위로 개발할 수 있음  2) 화면 업데이트 구현이 쉬움-> 리액트는 선언형 프로그래밍(목적만 깔끔하게 명시, 코드가 간결함)의 방식으로 동작함==> 업데이..

(1) "use strict": strict mode 선언시, 선언되지 않은 변수를 사용할 수 없음  (2) 문자열 인덱싱 (string index): 문자열의 특정 인덱스에 접근가능=> str[0]  (3) string literal break up : 문자열을 여러 줄로 나누어 작성이 가능" hello" + "hh" => return hello hh  (4) 예약어를 속성 이름으로 사용 가능 (5) 배열의 모든 요소를 합산하거나, 특정 로직을 적용하여 값을 축약할 수 있음=> Array reduce(), reduceRight() : sum of all numbers in an array  (6) 배열의 모든 요소가 특정 조건을 만족하는지 확인=> Array every() : numbers.every(..

HTTP와 HTTPS의 차이점 및 HTTPS의 장점=> 현재 웹에서는 대부분 HTTPS를 사용한다.주요 웹사이트와 브라우저들이 보안을 강화하기 위해 HTTPS를 기본으로 요구하고 있으며, HTTP로 접속할 경우 "안전하지 않음" 경고가 표시되는 경우도 많음.=> (24.10 update) 데이터 암호화를 가능하게 해줌 : 중간자 공격 방지 브라우저 렌더링 엔진의 HTML, CSS, JavaScript 해석 순서: 파일을 웹페이지로 변환하기 위해 브라우저가 따르는 흐름- DOM : 요소들의 위치, 배치, 모양에 관한 모든 정보가 담겨 있음=> 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를..

웹 애플리케이션은 클라이언트(웹 브라우저)와 서버 간의 요청-응답 사이클로 작동한다. 클라이언트가 서버에 정보를 요청하면, 서버는 필요한 리소스를 처리하여 클라이언트에게 반환한다. 이러한 과정 덕분에 사용자는 웹 페이지를 보고 상호작용할 수 있게 되는 것이다.Web 브라우저의 데이터 저장 방식웹 스토리지웹 애플리케이션은 사용자 데이터를 저장하기 위해 여러 가지 스토리지 옵션을 제공한다.세션스토리지: 세션스토리지는 현재 열려 있는 브라우저 창에서만 데이터를 유지한다. 창을 닫으면 데이터는 삭제되며, 약 5MB의 용량을 제공한다. 일시적인 데이터를 저장하는 데 적합하며, 역시 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. 일반적으로 폼 정보나 장바구니와 같은 휘발성이 강한 데이터를 저장하는 데 ..

1. 웹이란 무엇인가?: 웹은 인터넷을 통해 전 세계적으로 정보를 공유하고 접근할 수 있는 시스템=> 하이퍼텍스트로 연결된 문서들의 집합체 2. 웹이 탄생한 이유?: 웹은 1989년에 팀 버너스리에 의해 제안되었으며, 정보를 공유하고 연결하는 데에 초점을 맞췄습니다. 그 당시에는 정보를 공유하기 위해서는 주로 이메일이나 FTP와 같은 방식을 사용했는데, 이러한 방식은 사용자가 직접 해당 서버에 접속해야 했고, 정보를 찾는 과정이 번거로웠습니다.그러나 웹은 하이퍼텍스트를 이용하여 문서들을 링크시키고, 이를 통해 사용자가 쉽게 정보를 찾고 연결할 수 있게 하였습니다.=> 하이퍼텍스트로 연결된 문서들의 집합체 3. 초기 웹페이지의 형태는? : 초기의 웹페이지는 단순하고 정적인 형태였습니다. 대부분의 페이지는 ..

Git 기본 컨셉 Working Directory : 작업하는 파일이 있는 디렉토리Staging Area : Git에 등록할(커밋) 파일들이 올라가는 여역Local Repository : 로컬 git 프로젝트의 메타데이터와 데이터 정보가 저장되는 영역Remote Respository : Github 등의 서비스를 통한 온라인 상의 저장소  Git의 동작 원리** Github상에서 만들어진 것은 Remote Repository / 내 PC에 저장되있는 것은 Local Repository  Git 명령어Local Repository: 내 PC에 파일이 저장되는 개인 전용 저장 공간 저장소(Repository)?- 파일이나 폴더를 저장하는 곳 - Git 저장소는 파일 변경 이력 별로 구분되어 저장  Local..

Git 이란?? - 형상관리도구(Configuration Management Tool) 중 하나이다. => 형상관리도구 = 버전관리 시스템  - 프로젝트 소스코드를 효과적으로 관리할 수 있는 시스템- 여럿이 작업하더라도 문제가 없게 함- 소프트웨어의 여러 버전을 동시에 관리 할 수 있다.- 프로젝트 진행의 모든 로그를 볼 수 있으며 해당 시점으로 되돌리는 것도 가능하다. Git을 사용하는 이유- 프로젝트 시 어떤 기능을 빼고 더하고 고치고 수정하는 과정은 필수이다.기능을 되돌리게 될 수도 있고, 서로 다른 기능의 버전을 유지해야 하는 경우도 있다.  1. 코드 관리 측면- 변경된 이력 확인 / 이전 이력으로 되돌리기 / 현재 최종이 어느 시점인지 표현할 수 있음 2. 협업의 측면 - 각 기능별로 분업 후..