개발 블로그🐶🐾

0. 기본 개념컴퓨터는 cpu를 사용해 연산하고 메모리를 사용해 데이터를 기억함( * 메모리 : 데이터를 저장 할 수 있는 매모리 셀의 집합체, 컴퓨터는 메모라 셀의 크기인 1바이트 단위로 데이터 저장하고 읽음)( * 셀 : 각 셀은 고유한 메모리 주소를 가짐, 셀 하나당 1바이트)   1. 변수자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않음-> 기억하고 싶은 값을 메모리에 저장하고 재사용 하기 위해 변수 개념 사용 + 메모리주소는 임의로 결정, 실행될때마다 바뀜.변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 의해 붙인 이름값의 위치를 가리키는 상징적인 이름변수에 여러가지 값을 저장하려면 여러개의 변수 필요, 배열이나 객체는 여러개의 값을 그룹화 한..

1. 브라우저와 Node.js 공통점 ECMAScript 실행 가능  2. 브라우저와 Node.js 차이점i) 목적- 브라우저 : html, css, js를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 목적- Node.js : 브라우저 외부에서 js 실행환경 제공하는 것이 목적 ii ) 기본 제공- 브라우저 : DOM API (파싱된 html 요소를 선택하거나 조작하는 기능의 집합) / 클라이언트 사이드 Web API 제공, 파일 시스템 제공 x -> 보안상의 이유- Node.js : 파일 시스템 제공 , DOM API 제공 x ->  브라우저 외부환경에서는 html요소를 파싱해서 객체화한 dom을 직접 다룰 필요가 없으므로, Nodejs 고유 API 지원 + 웹 크롤링 : 서버에서 웹사이트 콘텐츠..

#2.1 : 자바스크립트의 탄생 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적 기능을 수행하기 위해 도입, 브렌던 아이크가 개발한 자바스크립트 1996.03 넷스케이프의 내비게이터2에 '모카'라는 이름으로 탑재,모카 -> 라이브스크립트 -> 자바스크립트 #2.2 : 자바스크립트의 표준화 자사 브라우저의 시장점유율을 높이기 위해서 JScript와 자바스크립트 각각에서만 동작하는 기능 -> 크로스브라우징 이슈 발생(* 크로스브라우징 : 최대한 많은 종류의 웹 브라우저에서 같은 코드로  동일한 동작을 하는 웹페이지를 만드는 방법론, W3C(World Wide Web Consortium)에서 채택된 웹표준 기술) 1996.11 ECMA 인터내셔널에 자바스크립트 표준화 요청1997.07 ECMA-262(표준화된 ..

- SEO에 대해 설명해주세요. (157번) : SEO는 검색 엔진 최적화라고 하며, 웹 사이트가 검색 엔진 결과 페이지에서 상위 순위를 차지할 수 있도록 하는 최적화 프로세스 임. 이를 통해 더 많은 검색 트래픽을 유도할 수 있음 ** SEO 최적화 방법 1) 문법에 맞는 HTML 작성하기 2) 구체적인 페이지 제목 만들기 3) Meta 태그 활용하기 4) HTTPS 사용 권장 5) 다양한 SEO 도구 사용 6) 키워드 연구를 통해 검색량 높은 키워드 식별 - BOM과 DOM에 대해 설명해주세요. (158번) 1. BOM(Browser Object Model) 웹 브라우저의 창이나 프레임을 추상화하여 프로그래밍적으로 제어할 수 있도록 만든 모델 브라우저에 접근 할 수 있는 객체의 모음 window 객체..

⭐ 브라우저 렌더링 과정을 설명해주세요. (141번) 1. HTML 파싱 브라우저는 웹 페이지의 주소(URL)로 서버에 HTTP 요청을 보냄 서버에서 HTML 문서를 전송하면 브라우저는 문서 구조 분석함 파싱 결과로 문서의 요소와 구조를 계층적으로 표현하는 DOM 트리를 생성함. 2. CSS 파싱 및 스타일 계산 브라우저는 나 태그를 통해 연결된 CSS 파일들을 다운로드하고 파싱함 그리고 CSS 규칙을 적용하여 각 요소의 스타일을 계산함 이 결과로 스타일 정보가 CSSOM 트리로 생성된다. 3. 레이아웃(Layout) 브라우저는 DOM 트리와 CSSOM 트리를 사용하여 요소들의 크기와 위치 계산해서 화면에 어떻게 요소들을 배치할 지 결정함. 4. 페인팅(Painting) 레이아웃 단계에서 계산된 크기와 ..

- 웹 프로토콜에 대해 설명해주세요. (131번) : 웹 기반 서비스에서 데이터를 주고받기 위해 사용되는 통신 규약 서로 정보를 주고 받을 때사용되는 규칙과 규약의 모음을 정하는 것 클라이언트와 서버 간의 상호작용을 정의하며, 웹에서 정보를 안전하게 교환할 수 있도록 함 1. HTTP (Hypertext Transfer Protocol) 웹에서 가장 기본적인 통신 프로토콜로, 웹 브라우저(클라이언트)와 웹 서버 간의 문서(HTML, 이미지, 비디오 등)를 주고받는 데 사용됨 상태를 유지하지 않는 비연결성 프로토콜이며, 각 트랜잭션을 별개의 이벤트로 처리함 2. HTTPS (Hypertext Transfer Protocol Secure) HTTP에 SSL/TLS 프로토콜을 결합한 것으로, 클라이언트와 서버..

- React 18 버전 업데이트 내용에 대해 말씀해주세요. (101번) 1. Concurrent Mode(동시성 모드) : React18 업데이트의 가장 큰 변화는 동시성으로, 동시성은 React가 우선순위 대기열 및 다중 버퍼링 같은 기술을 이용하여 동시에 여러 버전의 UI를 준비할 수 있도록 하는 새로운 메커니즘. Concurrent Mode는 사용자 인터랙션에 따라 우선 순위를 변경할 수 있는 강력한 기능 사용자가 중요한 인터랙션을 수행하면 React는 그에 따라 우선순위를 변경하여 최상의 사용자 경험을 제공 2.React Server Components : 버에서 렌더링된 컴포넌트는 필요한 데이터만 클라이언트로 전송하여 초기 페이지 로드 시간을 단축 3. New Root API : 앱의 부분적인..

- React에서 State의 불변성은 어떻게 유지할 수 있나요? (86번) 1. 숫자, 문자열, 불리언의 경우 직접 값을 할당하여 변경하기 ex. this.setState({ count: this.state.count + 1 }); 2.배열의 경우 concat, slice, spread operator, map, filter 등을 사용하여 배열을 수정하지 않고 새로운 배열을 생성하기 3. 객체의 경우 Object.assign() 또는 spread operator를 사용하여 객체를 수정하지 않고 새로운 객체를 생성하기 4. 함수형 setState 상태 업데이트가 이전 상태에 의존하는 경우 함수형 setState를 사용하여 안전하게 상태를 업데이트 하기 ex. this.setState(prevState =..

- ⭐ 라이프사이클에 대해 설명해주세요. (71번) : 라이프사이클은 소프트웨어 엔터티의 생명 동안 발생하는 일련의 단계를 설명하는 용어로, 리액트에서는 특히 컴포넌트의 생명주기를 나타냅니다. 컴포넌트는 마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting)의 세 단계로 나뉩니다. 리액트의 클래스 컴포넌트에서는 각 라이프사이클 단계에 해당하는 라이프사이클 메서드들이 제공되어, 개발자가 해당 메서드 내에서 필요한 로직을 정의하여 컴포넌트의 동작을 조절할 수 있습니다. 반면, 함수형 컴포넌트에서는 기존의 라이프사이클 메서드가 없습니다. 대신, 리액트는 Hook이라는 API를 도입하여 함수형 컴포넌트에서도 비슷한 라이프사이클 동작을 수행할 수 있게 했습니다. - ⭐ 라이프 사이클..

- ⭐ HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요? (50번) : 웹 브라우저의 HTML 파서는 웹 페이지를 순차적으로 해석합니다. 이때, JavaScript 코드를 만나게 되면, 해당 코드에 DOM 혹은 CSSOM을 수정하는 내용이 있을 수 있기 때문에, 안정적인 렌더링을 위해 파싱을 잠시 중단합니다. JavaScript 실행이 끝나면 파싱을 계속 진행합니다. 이러한 동작은 JavaScript가 DOM의 특정 요소에 접근하려 할 때, 그 요소가 아직 파싱되지 않은 경우 오류를 방지하기 위함입니다. 그래서 많은 웹 개발자들이 JavaScript 코드를 태그의 끝 부분에 위치시키는 추천하는 이유 중 하나입니다. 이렇게 하면 대부분의 DOM 요소가 이미 파싱된 상태에서..