복잡한뇌구조마냥

1. var, let, const 차이를 설명해보세요 - var은 ES6이전 문법으로 지역과 함수레벨의 스코프를 지니고 있으며, let과 const는 ES6 문법에 추가된 내용으로 블록레벨의 스코프를 지니고 있습니다. let과 const의 차이는 const는 선언과 동시에 초기화를 해줘야합니다. 2. 이벤트 버블링과 캡처링에 대해 설명해보세요 - 버블링은 하위 요소에서 상위요소로 이벤트가 올라가는 과정을 얘기하고, 캡처링은 반대로 상위에서 하위로 내려가는 반응을 합니다. 버블링을 막는 방법은 stopPropagation을 활용하여 버블링이 더이상 퍼지지 않도록 할 수 있습니다. 버블링을 사용하는 이유는 하위 요소를 눌렀을 때 상위요소로 올라가기 때문에 이벤트 위임을 사용하기 용이합니다. 따라서 상위 요소..

1. 브라우저에 ‘naver.com’을 입력하면 내부적으로 어떤 일이 일어나는지 설명해주세요 - url로 되어있는 http요청을 DNS를 통해 host에 해당하는 실제 IP주소로 변환하여 서버에 요청 1. DNS 서버에서 도메인 → IP주소 변환 2. IP주소로 HTTP 데이터 전송 3. HTTP 요청정보를 TCP 프로토콜로 전송 4. 서버는 HTTP로 받아 URL데이터 탐색 5. 서버 → 브라우저 응답 , HTTP메세지전송 6. 응답메세지 렌더링, TCP프로토콜 전송 7. 브라우저가 파싱 및 렌더링 과정 → 화면 2. 웹 브라우저 공격을 아는대로 설명해주세요 - *SQL Injection 서버에 실행되는 SQL을 악의적으로 이용하는 공격 악의적인 SQL 구무능 삽입하여 데이터를 탈취, 삭제 할 수 있다..

41. 타입스크립트란? - 정적 타입을 명시하는 컴파일 언어 - 타입스크립트 컴파일러 or babel을 통해 자바스크립트 코드로 변환 코드 작성 단계에서 타입을 체크해 오류를 확인 할 수 있고 미리 타입을 결정하기 때문에 실행속도가 매우 빠르다는 장점이 있습니다. 하지만 코드작성 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래걸린다는 단점이 있습니다. - 타입스크립트는 자바스크립트의 슈퍼셋 - 자바스크립트 기본문법 + 자료형 문법 추가 유효한 자바스크립트로 작성한 코드는 ts로 변환할 수도 있음 42. Angular와 React의 차이점 - angular는 실제 돔 방식, SSR 지원, 양방향 바인딩, 주요 언어 ts, MVC모델,객체 - React : virtual do..

31. 웹 프로토콜이란? - 웹에서 쓰이는 통신 규약 - 통신할 때 상호간의 규칙 protocol://computer_name:port/document_name?parameters 프로토콜 : 문서에 접근하기 위해 사용하는 프로토콜 이름 (http, https 등) computer_name : 문서가 있는 컴퓨터 도메인 (아이피, 도메인) port : 서버가 어떤 포트 숫자를 바라고 있는지 (http: 80, https:443 등) document_name: 서버 컴퓨터에 있는 특정 문서의 이름 parameters : 페이지에 넘기는 변수 " - HTTP : get, head, post, put 브라우저 웹 서버 통신 주요 프로토콜 - FTP 파일, 문서, 이미지 등 다양한 형태, 파일 교환시 호환성 보..

21. GET, POST 방식의 차이점 - GET : 클라이언트 → 서버 리소스 정보 요청 - POST: 클라 → 서버로 리소스 생성 or 업데이트 22. Webpack 써보신 적 있나요 - webpack - 여러개 파일을 하나로 합쳐주는 모듈 번들러 html파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어줌 사용 이유 : 옜날에는 html을 여러개 사용했으나, 요새는 SPA방식으로 하나의 html페이지에 여러개의 자바스크립트를 포함하여, 관리편이 컴파일시 여러 모듈의 파일을 읽어오는데 시간이 오래걸림 babel - ES6버전 → ES5 변환 , 지원하지 않는 브라우저 지원..(최신문법 → 최대 호환버전) 23. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요 - 쿠키 - 클라이언트에..

11. useEffect와 useLayoutEffect 차이에 대해 설명해주세요. - uesEffect는 DOM이 화면에 그려진 이후 호출화면이 복잡해지면 느려지고 렌더링 시간증가 - useLayoutEffect는 DOM이 그려지기 전 호출 12. Closure란? - 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 외부 함수에 접근할 수 있는 내부함수 상태를 안전하게 변경, 유지하기 위해 사용 ex )함수 return 함수 function init(){ var name = "아무거나"; function displayName(){ // 클로저 alert(name); } display(); } init(); 13. Javascript 호이스팅에 대해 설명해주세요. - 호이스팅은 변수와 함수의 메모리..

리액트 면접 예상문제 1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? -하나의 상태에서 동일한 값을 지니기 위해서 상태 관리가 필요함. useState로 동일 상태의 값 관리 Props로 상하위 컴포넌트로 state값 전달 redux로 전역 상태의 값 관리 context로 전역 상태관리 react-query로 전역상태관리 2. Redux가 무엇인가요, 왜 Redux를 사용하시나요? - 상태 관리를 현재 컴포넌트 뿐만 아니라 전체적으로 관리하기위함 Props Drilling으로는 규모가 커질수록 관리어렵 따라서 전역 저장소인 redux로 상태관리 3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요 - context, react-query등이 존재 - c..

1. JSON-SERVER 1) json-server는 REST API를 구축을 짧은 시간에 할 수 있도록 지원해주는 라이브러리 입니다. 2) 사용 이유 : BE에서 실제 DB와 API 서버가 구축 될 때 까지 FE 개발에 임시적으로 사용할 mock data 명령어 1) 설치 yarn add json-server 2) 실행 json-server --watch db.json --port 3001 // yarn 으로 명령어 실행 가능 // json-server -watch [db.json] --port [포트번호] 3) db.json 설정 { "todos": [ { "id": 1, "title": "json-server", "content": "json-server를 배워봅시다." } ] } { "이름" :..