개발 블로그🐶🐾

- 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 요소가 이미 파싱된 상태에서..

- React에 대해 설명해주세요. (62번) : React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 웹 및 모바일 애플리케이션의 사용자 인터페이스를 개발할 때 주로 사용됩니다. 1. 컴포넌트 React는 재사용 가능한 UI 컴포넌트를 만드는 데 중점을 둡니다. 각 컴포넌트는 독립적이며, 특정 기능이나 UI 조각을 나타냅니다. 이런 방식은 코드의 재사용성을 높이고 관리하기 쉽게 만듭니다. 2. 가상 DOM React는 실제 DOM을 직접 조작하지 않고, 가상 DOM을 이용해 변경사항을 비교 및 적용합니다. 이 방식은 웹 애플리케이션의 효율성과 속도를 향상시킵니다. 3. 선언적 접근 방식 (* 선언적 접근 방식 : 어떤 결과를 원하는지를 선언하고, 내부의 구현이나 동작 방식..

- ⭐ SCSS에 대해 설명해주세요. (47번) : CSS는 CSS의 기능과 호환성을 확장하는 CSS 전처리기의 하나로, "Sassy CSS"의 약자입니다. 원래는 SASS의 새로운 문법 형식으로 도입되었고, 지금은 SASS보다 널리 사용되는 문법이 되었습니다. SCSS는 여러 가지 기능과 특징을 가지고 있습니다. 1. 특정 값을 변수로 저장하고 재사용할 수 있습니다. ex) $primary-color: #3498db; body { background-color: $primary-color; } 2. 선택자의 중첩을 허용하므로 CSS 코드의 계층 구조를 더 명확하게 나타낼 수 있습니다. ex) nav { ul { list-style-type: none; li { display: inline-block; ..

- px, em, rem 의 차이에 대해 설명해주세요. 반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요? (39번) : px는 절대 단위로 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이고, em과 rem은 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 상대 길이를 의미합니다. em과 rem은 둘 다 CCS의 font-size 속성값에 비례해서 결정되는 상대 단위입니다. 둘은 정확히 어디에 있는 font-size 속성값인지에 따라 차이가 발생합니다. em은 해당 단위가 사용되고 있는 요소(부모 요소)의 font-size 속성값이 기준이 됩니다. rem에서 r은 root를 의미하고, 최상위 엘리먼트의 font-size 값을 기준으로 변환된 단위를 의미합니다. rem은..