Study
[HTML] <head> tag
면접 질문 제목 설정하기: 태그 웹 페이지의 제목은 SEO에 큰 영향을 미칩니다. 기능 브라우저 툴바에 제목을 정의합니다 즐겨찾기에 해당 페이지가 추가될때 제목을 제공합니다 검색 엔진의 결과에 해당 제목이 노출됩니다. 좋은 title을 설정하는 방법 더 길고 설명이 포함된 제목을 사용하세요. (한 단어 또는 두 단어로 된 제목은 피하세요). 검색 엔진은 약 50-60자의 제목을 표시하므로 제목이 그보다 길지 않도록 하십시오. 제목으로 단어 목록만 사용하지 마십시오. (이렇게 하면 검색 결과에서 페이지의 위치가 줄어들 수 있음). HTML title tag W3Schools offers free online tutorials, references and exercises in all the major la..
[WEB] HTTP / HTTPS
면접 질문 HTTP 프로토콜에 대해 설명해주세요 HTTP는 데이터를 주고받기 위한 프로토콜이며, 서버-클라이언트 모델을 따릅니다. 비연결성, 무상태성 이라는 특징을 가져 쿠키와 세션과 같은 상태 정보 유지 기술이 등장하게 되었습니다. HTTP와 HTTPS의 차이점은 무엇인가요? 이 둘의 차이점은 보안입니다. HTTP는 데이터를 평문으로 전달하는 반면 HTTPS 는 데이터를 암호화하여 전송합니다. SSL또는 TLS 프로토콜을 사용하여 데이터를 암호화합니다. 따라서 보안이 중요한 웹사이트난 애플리케이션에서는 HTTPS를 사용하는것이 권장됩니다. HTTP 메서드(GET, POST, PUT, DELETE 등)의 역할과 각각의 차이점은 무엇인가요? GET 메소드는 서버로부터 리소스를 요청할때 사용되며 주로 조회할..
Next.js Cors Error 처리 (feat. API Routes, TypeScript)
문제상황 요약 : next js에서 제공하는 커스텀 에러 페이지를 만들기 위해서는 rewirte의 sorce가 '/' 이면 안된다. (사실 rewirte를 사용하며 커스텀 에러페이지를 사용 할 수 있는 방법이 있을 것 같지만... (rewrite의 sorce의 depth를 바꾼다던가 등...) 내가 해결한 방향성과는 다르다. 그래도 해결 했으니까... 🥲) 1. 이전에 naver api를 사용하여 이미지를 불러오면 CORS 에러가 떠서, next js 에서 제공하는 rewrite 옵션을 추가하여 해결하였다. // next.config.json // some setting ... async rewrites() { return [ { destination: 'https://openapi.naver.com/:..
[JS] Promise
면접 답변 예시 Promise란 무엇인가요? 자바스크립트에서의 Promise 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업의 결과로 대기(panding), 이행(fulfilled), 거부(rejected) 상태를 가집니다. Promise의 장점은 무엇인가요? 비동기 작업의 성공 또는 실패와 관련된 로직을 명확히 나타낼 수 있습니다. 여러개의 비동기 작업을 조합하거나 순차적으로 실행할 수 있는 유용한 메서드를 제공합니다. 비동기 작업을 간결하고 가독성 있게 처리할 수 있습니다. Promise의 상태는 어떤 종류가 있나요? 대기, 이행, 거부 의 3가지 상태를 가지고 있습니다. 대기 상태는 비동기 작업이 아직 완료되지 않은 상태를 나타냅니다. 거부 상태는 비동기 작업이 실패한 상태를 나타냅니다. 이행..
[CS] 시간복잡도와 공간복잡도
시간복잡도와 공간복잡도 효율적인 알고리즘이란, 알고리즘이 수행을 시작해 결과가 도출될때까지 실행에 걸리는 시간이 짧고 컴퓨터 자원을 덜 사용하는것이 효율적인 알고리즘이라고 말할 수 있습니다. 시간 복잡도(Time Complexity)와 공간 복잡도(Space Complexity)는 알고리즘의 효율성을 분석하고 측정하는 데 중요한 개념입니다. 시간 복잡도는 알고리즘의 실행 속도를 분석하며, 공간 복잡도는 알고리즘이 사용하는 메모리 공간의 크기를 분석합니다. 컴퓨터과학에서 이 둘은 '점근적 표기법' 을 이용해 함수식으로 표현합니다. 점근적 표기법 점근(漸近)이란? 더보기 - 점근(漸近): 점점 가까워지는 모양 - 점근적 표기법 어떤 함수의 증가 양상을 다른 함수와의 비교로 표현하는 수론과 해석학의 방법 주워..
[JS] Event Loop : JavaScript의 비동기 처리 방법
면접 답변 예시 Q. JavaScript 의 EventLoop 에 대해 설명해보세요 A. JavaScript의 Event Loop는 비동기적 작업을 처리하기 위한 기술입니다. 이는 호출 스택과 큐를 모니터링하며 스택이 비게 되면 큐에서 태스크를 가져와 스택에 넣습니다. 이를 통해 JavaScript는 단일 스레드를 사용하여 비동기 작업을 처리할 수 있습니다. 이벤트 루프는 자바스크립트의 호출 스택과 큐를 감시하고 있으며 호출 스택이 전부 비워지게 되면 큐에 있는 작업을 스택으로 옮깁니다. 이를 통해 Web API나 Promise 와 같은 비동기 통신 메소드를 만나게 되면 해당 작업을 브라우저 또는 큐에 옮기게 됩니다. 이후 현재 실행중인 자바스크립트의 코드를 모두 실행하게 되고, 스택이 비워지게 되면 순..
[Web] 웹 퍼포먼스 최적화
Wanted - FE - Study 그룹에서 기술 공부 및 면접 준비를 위해 작성한 글 입니다. 면접 예상 질문 Q. 웹 퍼포먼스 최적화가 필요한 이유가 무엇인가요? 사용자 경험 개선 및 검색 엔진에서의 높은 순위를 위해 필요합니다. Q. 웹 페이지 로딩 속도를 개선하기 위한 방법은 무엇이 있나요? 렌더링 차단 리소스인 JavaScript 와 스타일 코드를 최적화, 이미지 파일 크기를 줄이고 압축을 통한 로딩 속도 개선, 렌더링 지연 최소화, CND 활용 등이 있습니다. Q. 웹 페이지의 초기 렌더링 속도를 향상시키기 위한 기술은 무엇인가요? 코드 스플리팅, 서버 사이드 랜더링, 프리로딩, 코드 최적화 등이 있습니다. Q. 웹 페이지에서 사용되는 이미지 최적화 기술에 대해 설명해주세요. 알맞은 이미지 포..
[React] React의 렌더링 과정
Wanted - FE - Study 그룹에서 기술 공부 및 면접 준비를 위해 작성한 글 입니다. 면접 답변 예시 Q. 리액트의 렌더링 과정에 대해 설명해보세요. A. React의 랜더링 과정은 크게 Trigger, Render, Commit의 3가지 단계로 이루어집니다. 트리거 단계에서는 컴포넌트 자신 혹은 부모 컴포넌트의 상태(state)나 속성(props)이 변경된다면, 해당 컴포넌트는 렌더링이 필요하다는 신호를 받습니다. 렌더 단계에서는 트리거 된 컴포넌트의 업데이트가 필요한 부분을 가상 DOM에 적용합니다. 이후 커밋 단계에서 가상 DOM에 적용된 변경 사항만 실제 DOM에 적용하여 UI를 업데이트 합니다. 내용 요약 React app의 모든 화면 업데이트는 크게 3가지 단계로 이루어진다. Tri..
[JS] Closure의 의미와 활용
Closure 의미 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수 = 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합 = 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는 것 클로저는 JS뿐만이 아니라 함수형 프로그래밍 언어에서 모두 나타난다. 렉시컬 환경(Lexical environment) 이란? Lexical : 언어의, 어휘의 ;사전의 Lexical environment = 언어적 환경 변수와 함수 등의 식별자(identifier)를 포함하는 환경(Environment)을 의미한다. 각각의 함수는 자신만의 언어적 환..
[PJ Log] React 프로젝트에 Next js 적용
기본적인 와꾸가 잡혀가는 내 개인 플래너 프로젝트... 대충이라도 빨리 만들어서 사용하고 싶다. 그러려면 빨리 Back-end와 Server를 돌려야 한다. 챗지피티에게 이것저것 물어보기도 하고 구글링도 하며 Next js를 사용해 express 서버에서 돌리기로 결정하였다. NEXT. JS 사용 전, 간단하게 NEXT JS가 뭔 대해 알아보자. The React Framework for the Web 사이트 들어가보니 가장 상단에 쓰여있는 카피. 말 그대로 React Framework라고 한다. NEXT 가 밀고 있는 장점들은 다음과 같다. Client and Server Rendering Nested Routing Data Fetching Built-in Optimizations TypeScript ..