- ⭐️ 주소창에 naver.com을 입력하면 (https://velog.io/@khy226/브라우저에-url을-입력하면-어떤일이-벌어질까)
1. www.naver.com 의 IP 주소를 찾기위해 DNS 서버를 방문합니다.
2. 캐시에서 DNS기록을 확인한후, 만약 요청한 URL이 캐시에 없다면, ISP(Internet Service Provider)의 DNS 서버가 DNS 쿼리로 IP 주소를 찾습니다.
3. 브라우저가 해당 IP 를 가지고 있는 서버와 TCP 연결을 합니다.
4. 브라우저가 해당 서버에 HTTP 요청을 합니다.
5.서버가 요청을 받고 response 를 다시 HTTP 에 실어보냅니다.
6. 브라우저가 해당 응답을 받아 HTML을 파싱하여 브라우저 내에 출력합니다. - ⭐️ HTTP와 HTTPS의 차이점은?
HTTP(Hypertext Transfer Protocol /Secure)는 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜입니다. HTTP는 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않는다는 것이 단점인데 HTTPS는 SSL(보안 소켓 계층)와 TLS(전송 계층 보안)을 사용함으로써 이 문제를 해결했습니다.
SSL와 TLS는 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고 서버 브라우저가 민감한 정보를 주고받을 때 이것이 도난당하는 것을 막아주며 데이터가 전송 중에 수정되거나 손상되는 것을 방지하는 역할을 합니다.
(*프로토콜 이란 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계) - 브라우저 렌더링 원리 (https://medium.com/개발자의품격/브라우저의-렌더링-과정-5c01c4158ce)
렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.
1) DOM, CSSOM 트리 생성
서버로 부터 받은 HTML, CSS 파일을 원시바이트로 읽어와 정의된 인코딩에 따라 개별 문자로 변환합니다. →
브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환합니다 → 토큰을 object model로 변환합니다 → 마지막으로 트리구조로 연결되며 DOM,CSSOM 트리가 생성됩니다.
2)렌더링 트리 생성
DOM Tree와 CSSOM Tree가 만들어졌으면 이 둘을 결합하여 Render Tree를 생성합니다. 렌더링 트리에는 화면에 표현되는 노드들로 구성됩니다.
3)Layout 단계
레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box 모델이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됩니다.
4)페인팅 단계
마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하게 됩니다. 레이아웃 단계에서 모든 계산이 완료가 되면, 화면에 요소들을 그리게 됩니다. - 리플로우(Reflow), 리페인트 (Repaint)
사용자가 웹 페이지에 처음 접속을 하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려지게 됩니다. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 됩니다. 리플로우는 이런 변경을 통해 영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하는걸 말합니다. 리플로우가 일어나면 이후에는 페인팅단계를 수행하는 리페인트가 일어납니다. - ⭐️ 프론트엔드 빌드 시스템
바벨 : 바벨은 모든 실행환경에서 자바스크립트가 정상적으로 동작할 수 있도록 ES6 코드를 ES5코드로 변환해주고, 리액트의 JSX, TS 까지 변환해주는 자바스크립트 컴파일러입니다.
웹팩 : 웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 사용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)입니다. 모듈 번들러는 여러개의 나누어져 있는 파일들을 하나로 만들어주는 라이브러리이고, 웹페이지를 보여주기 위해 수많은 파일을 서버에 개별적으로 요청하는 것이 아닌 하나로 줄여서 요청하여 코드를 압축하고 최적화해줍니다.
폴리필 : 브라우저에서 지원하지 않는 코드를 사용 가능한 코드나 플러그인으로 만들어 줍니다. 바벨의 트랜스파일링 이후에 브라우저에서 지원하지 않는 문법을 서포팅 해주는 역할을 하며 node.js 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미합니다.
Npm : 노드 패키지 매니저는 Node.js 로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이며 NPM을 사용하면 라이브러리의 버전과 의존성을 package.json한 곳에서 관리할 수 입니다. yarn은 facebook 에서 만든 것으로 npm 서버에 비해 속도가 빠르고 사용법이 npm과 비슷하여 쉽게 사용할 수 있습니다.
Eslint : EsmaScript문법에 에러가 있는 코드에 표시를 달아 놓는 것을 의미합니다. JavaScript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와줍니다.
Prettier : 개발자들에게 일관적인 코딩 스타일을 유지할 수 있게 도와주는 Code Formatter 툴입니다.
웹태스크매니저 : 웹 서비스를 개발하고 웹 서버에 배포할 때 HTML, CSS, JS 압축, 이미지 압축, CSS 전처리기 변환 등의 작업을 자동화해주는 도구들입니다. - ⭐️ 자바스크립트 this란? (call, bind, apply)
this는 일반 함수를 호출할 때 바인딩할 객체가 동적으로 결정됩니다. 전역범위과 일반 함수에서 사용될 때 this는 전역객체를 가르키고 객체에 속한 메서드에서 사용될때 메소드를 소유하고 있는 객체를, 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
bind, call, apply 메서드를 사용하여 호출과 무관하게 this를 원하는 객체로 지정할 수 있습니다.
call, apply는 함수를 호출하는 함수이며 호출함수.call(this로지정할대상,함수에 넘겨줄 매개변수)로 사용하면 되고 apply는 매개변수를 배열 형식으로 넣어주어야합니다. Bind 함수는 함수를 호출하지 않으며 함수만 반환합니다. - ⭐️ 브라우저 저장소에 대한 차이점 (https://velog.io/@limuubin/브라우저저장소-비교하기)
브라우저 저장소의 종류는 Cookie, WebStorage인 LocalStorage와 SessionStorage로 이루어져 있습니다. WebStorage는 쿠키의 단점을 보완하고자 등장하였으며 key-value쌍의 구조로 데이터를 저장하고 key 기반으로 데이터를 조회할 수 있습니다. 웹사이트에서 cookie를 설정하면 이후 모든 요청은 서버로 전송이 되고 용량의 제한이 있습니다. 반면 W.S는 클라이언트단에만 저장되어있고 서버로는 전송되지 않으며 용량의 제한이 없습니다. 로컬스토리지는 영구적으로 보관이 가능하며 도메인별로 생성되기 때문에 도메인이 같으면 공유가 가능합니다. 세션스토리지는 브라우저를 종료하면 삭제되며, 도메인이 같아도 브라우저가 다르거나 탭이 다르면 서로 다른 저장소를 생성합니다. - ⭐️ 이벤트 관리 방법에 대해 말씀해주세요 (https://iancoding.tistory.com/172)
- 이벤트란
클릭이나 스크롤을 내리는 등 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것을 말합니다.
- 이벤트 등록, 해제
이벤트 등록에는 인라인과, 프로퍼티, addEventListner 방식이 있습니다. 인라인은 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이며 프로퍼티는 인라인 방식의 단점을 보완하여 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식입니다. 하나의 이벤트 핸들러 프로퍼티엔 하나의 이벤트 핸들러 바인딩이 가능하다는 단점이 있으며 addEventListener은 여러개의 이벤트 핸들러 바인딩이 가능합니다.
이벤트 해제를 할 때, 프로퍼티는 onclick=null을 주고 addEventListener는 removeEventListener를 사용합니다.
- 이벤트 버블링과 캡쳐링
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정이며 이벤트 캡쳐링은 버블링과 정반대입니다. (최상위 부모에서 이벤트 발생 요소까지 이벤트 전달 되는 것) 이벤트 버블링이나 캡처링을 차단 하고 싶을때 e.stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행시킬 수 있습니다.
- 이벤트 위임
동적으로 추가되는 이벤트는 적용되지 않기에 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식입니다. - 자바스크립트 동작 원리
자바스크립트 엔진은 콜스택(Call stack)과 메모리힙(Memory Heap)으로 구성되어 있고 브라우저 환경은 콜백큐, 이벤트 루프로 구성되어있습니다.
콜 스택 : 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 실행됩니다. 자바스크립트는 단 하나의 콜스택을 사용하기 때문에 실행 중인 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 태스크는 실행시키지 않습니다.
메모리 : 힙데이터를 임시 저장하는 곳으로, 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장합니다
콜백큐 : setTimeout이나 setInterval같은 비동기함수의 콜백 함수, 이벤트 핸들러가 일시적으로 보관되는 영역입니다.
이벤트 루프 : 이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기중인 함수가 있는지 반복해서 확인합니다. 콜스택이 비어 있고 콜백큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 콜백큐에 대기 중인 함수를 콜스택으로 이동시켜 함수를 실행합니다. - 자바스크립트 동기와 비동기의 동작원리란? (https://ljtaek2.tistory.com/142)
동기(Synchronous) 동작 원리
1) 코드가 실행되면 순서대로 Call Stack에 실행할 함수가 쌓인다.(push)
2) 쌓인 반대 순서로 함수가 실행된다.(LIFO)
3) 실행이 된 함수는 Call Stack에서 제거된다(pop)
비동기(asynchronous) 동작 원리
1) Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API(혹은 백그라운드라고도 한다)로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.
2) Web API(백그라운드)에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에 push(이동) 된다.
3) 이제 Call Stack이 비어있는지 이벤트 루프(Event Loop)가 확인을 하는데 만약 비어있으면, Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.(push)
4) Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다. - ⭐️ 자바스크립트 비동기 처리 (콜백, Promise, async&await)
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.
콜백함수 : 비동기 처리시 사용하며 매개변수로 함수를 받거나 인자로 전달되는 함수이며, 콜백지옥에 빠질 수 있어 가독성이 떨어질 수 있습니다.
Promise : 비동기 동작을 다루기 위한 패턴으로, 비동기 요청을 보내면 성공 또는 실패가 다양한 형태로 발생합니다. 프로미스를 사용하면 이러한 성공(resolve)이나 실패(reject)를 편리한 방식으로 처리할 수 있으며 new 연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백함수는 호출할 때 바로 실행, 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있으면 둘 중 하나가 실행되기 전까지는 다음 then or catch 구문으로 넘어가지 않습니다. pending, fulfilled, rejected 3가지 상태를 가지며 promise는 .then() 지옥의 가능성이 있어, 코드가 길어질수록 async/await문을 사용하면 가독성이 좋다.
async/await이란 : 앞에서 나온 callback과 Promise보다 좀 더 비동기 작업을 일반적인 함수적으로 실행하기 위해 나온 객체입니다. 동기식으로 비동기 코드를 적을 수 있으며 함수 선언자 앞에다가 async를 붙여주고, 비동기가 필요한 작업 앞에다가 await를 붙여줘서 결과를 기다립니다. 다수의 비동기 처리 작업을 할 때 유용하고, try/catch를 이용해서 에러를 핸들링 할 수 있습니다. - ⭐️ CORS란? CORS를 위한 처리를 했는지, 해결 방법?
CORS란, (= Cross Origin Resource Sharing ) 서로 다른 도메인간에 자원을 공유하는 것을 의미하며 기본적으로 차단되어있습니다. Origin이란 출처를 의미하며 Protocol + Host + Port 를 합친 것을 말합니다. Origin이 같으면 CORS 에러는 발생하지 않습니다. cors 해결 방법은 서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결할 수 있습니다. 저는 클라이언트에서는 withcridentials=true로 서버에서는 헤더에 Access-control-Arrow-Credential를 true로 설정함으로써 해결하였습니다.
(credentials: 쿠키, 인증헤더, TLS 증명서를 내포하는 자격인증) - ⭐️ DOM 과 가상 DOM이란?
Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미하며 HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고 이를 바탕으로 렌더링이 됩니다. 가상돔은 추상화된 DOM을 뜻하며 DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있습니다. - CSR과 SSR의 차이점은 무엇인가요?
SSR은 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일 등을 모두 다운로드하여 화면에 렌더링 하는 방식입니다. CSR은 클라이언트측에서 HTML, JS, 리소스 파일들을 받은 이후에 브라우저에서 렌더링을 진행하는 것으로, JS가 동작하면서 데이터만을 주고 받습니다. 초기 로딩 속도 측면에서, SSR은 필요한 부분의 HTML과 스크립트만 서버에서 렌더링 하여 가져오기 때문에 속도가 빠른 반면, CSR은 HTML, JS 파일을 다운 받고 브라우저에서 렌더링 하기 때문에 초기에 오래걸립니다. 서버 부담측면에서는 SSR은 서버와 잦은 응답(View가 바뀔 때마다 서버에 요청)을 하기 때문에 서버에 부담이 되고 UX측면이 떨어지는 반면(새로고침 많음), CSR은 데이터 요청이 있을때만 서버에 요청하기 때문에 서버에 부담이 적습니다. SEO 측면에서, SSR은 HTML에 대한 정보가 처음에 포함되어 SEO에 유리하지만, CSR은 맨 처음 HTML 파일이 비어있어 SEO에 불리합니다. - 호이스팅에 대해 설명해보시오
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것으로 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것입니다. var로 선언된 변수는 변수 선언과 초기화하는 과정이 한번에 진행됩니다. 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않습니다. 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄지며 그 사이의 시간을 TDZ(Temporary Dead Zone)이라고 합니다. 즉 실행 컨텍스트에 변수가 선언은 되었으나 메모리가 할당되지 않아 ReferenceError가 발생합니다. 함수는 호이스팅이 선언문에서 발생하여 상단에서 참조, 호출이 가능하며 함수 표현식은 선언과 할당의 분리가 일어나기 때문에 상단에서 호출시 Reference Error를 발생시킵니다. 화살표함수는 함수 표현식과 동일합니다. (변수 선언 3단계: 선언 -> 초기화 -> 할당) - 스코프란? 스코프체인이란 무엇인가요?
스코프는 어떤 변수들에 접근할 수 있는 유효범위로 코드 어디서든 참조할 수 있는 전역 스코프, 함수 자신과 하위 함수에서만 참조할 수 있는 지역 스코프가 있습니다. 함수안에서 선언된 변수는 해당 함수안에서만 사용할 수 있어 전역변수에 영향을 끼칠 수 없습니다.
내부 함수는 호출된 변수를 찾기위해 먼저 자신의 스코프에서 찾고 없으면 한단계씩 외부로 나가면서 찾습니다. 이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라고 부르며 중괄호를 기준으로 범위가 구분되는 블록스코프와 함수스코프가 있습니다. 블록스코프는 function을 제외한 if나 for등의 중괄호 안에 있는 범위를 뜻하며 함수스코프는 function{}안에 있는 범위를 뜻합니다 - 클로저는 무엇인가요? 원리와 왜 사용하는지? https://devkingdom.tistory.com/331
클로저는 일반적으로 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다. 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수입니다. 전역 변수의 사용을 억제하고, 정보를 은닉하기 위해 사용합니다. - var, let, const의 차이점
var는 함수 스코프를 따르며 중복선언이 가능하고, let&const는 블록 스코프를 따라 블록 바깥에서는 변수 접근과 중복선언이 불가능합니다. var과 let은 재할당이 가능하며 const는 재할당이 불가능합니다. - Prototype이란? Prototype Chaining은?
프로토타입이란 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 만듭니다. 이 때 만들어진 객체 안에 __proto__ 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있는데 그 링크를 프로토타입이라고 합니다. 어떤 데이터의 __proto__ 프로퍼티 내부에서 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것을 프로토타입 체인(prototype chain)이라 하고, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝(prototype chaining) 이라고 합니다. - 화살표 함수와 일반함수의 차이점
일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 바로 상위 스코프의 this가 정적으로 바인딩됩니다. 또한, 화살표함수는 프로토타입 객체를 생성하지 않기 때문에 생성자 함수로 사용이 어렵고 메모리 관점에서 유리합니다. 일반함수에서는 함수가 실행될때 암묵적으로 arguments 변수가 전달되어 사용할 수 있지만, 화살표 함수에서는 arguments변수가 전달되지않는다는 차이점이 있습니다. (프로토타입 객체를 생성하지 않는다는 것은, 화살표 함수로 정의한 함수는 오직 함수로만 호출해야 한다는 의미입니다.) - ES6 문법에 추가된 것들을 아는대로 설명하세요
let & const, 템플릿 리터럴, 화살표 함수, 구조분해할당, Promise, class, Spread Operator, Rest Parameter,Default Params, 객체 리터럴, import & export - *웹표준, 시맨틱마크업, 웹 접근성이란?
웹표준
‘웹에서 사용되는 표준 기술이나 규칙’을 의미하며 정해놓은 규칙을 잘 지켜서 마크업을 하면됩니다.
시맨틱 마크업
의미를 잘 전달하도록 HTML 태그로 문서를 작성하는 것을 말합니다. 시멘틱 마크업의 장점으로는 웹 접근성이 좋아지며 SEO에 유리합니다. (헤더/푸터에 <header>와 <footer> 사용 / 메인 컨텐츠에 <main>과 <section> 사용 / 독립적인 컨텐츠에 <article> 사용/ 최상위 제목으로 <h1> 사용 /. 순서가 없는 목록으로 <ul>과 <li> 사용 / 내비게이션에 <nav>사용)
웹 접근성
장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리킵니다. (청각 장애인을 위해 영상에 자막을 넣거나, 마우스를 사용할 수 없는 사람들을 위해 키보드를 통해서도 웹을 이용할 수 있게 하거나 이미지에 대체 텍스트를 제공하는 간단한 방법들)까지 모두 웹 접근성에 해당합니다. - *SEO란?
검색 엔진 최적화라 하며 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말합니다. (시맨틱태그 사용, 메타 태그 활용, 이미지에 alt 속성 기재, anchor 태그를 활용한 적절한 키워드 배치 등으로 최적화를 할 수 있습니다.) - Rest API란?
REST란 HTTP URI를 통해 자원을 명시하고, HTTP메소드(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것입니다. REST의 요소로는 크게 리소스, 메소드, 메세지 3가지 요소로 구성됩니다. 즉 리소스는 URI로 표현되며, 메소드는 HTTP Post, 메세지는 JSON 문서를 이용해서 표현됩니다 Restful하게 API를 디자인한다는 것은 URI를 규칙에 맞게 잘 설계했는지의 여부입니다.
1. 동일한 URI(End point)의 행위에 맞는 메소드를 사용합니다.
2. 명사를 사용한다. 리스트를 표현할 때는 복수형을 사용합니다.
3. URI Path에 불필요한 파라미터를 넣지 않습니다. 즉, 단계를 심플하게 설계합니다. - HTTP요청 메소드 POST와 GET의 차이점은 무엇인가요?
GET은 주로 데이터를 읽거나 검색할때 사용되는 메소드인 반면 POST는 update나 create할 때 사용됩니다. GET은 데이터의 변형 위험이 없기때문에 POST보다 안전하다고 간주되며 POST요청은 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함할 수 있지만 GET요청은 필요한 데이터를 URL에 포함하여 요청합니다. - "attribute"와 "property"의 차이점은 무엇인가요?
attribute 는 html 문서 안에서의 정적인 속성을 의미하고, property 는 html DOM 안에서 동적인 속성을 의미합니다. - event.target 과 event.currentTarget의 차이점은?
어떤 것을 반환하느냐의 차이인데, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환합니다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환합니다. - Map()과 Set()의 설명 및 차이점은?
Map은 key가 있는 데이터를 저장합니다. 객체와 비슷한면이 있지만, 키에 다양한 자료형을 허용을 합니다. 예를들어 객체의 키는 무조건 문자형이지만, Map에는 키의 자료형에 제한이 없습니다. 주의 사항은 객체처럼 Map[key] 형태를 사용하면 일반 객체로 취급하기 때문에 안쓰는게 좋습니다. Set은 중복을 허용하지 않는 값을 모아두는 객체이며 new Set(iterable) 이런식으로 선언을 합니다. 요소의 유무를 판단할때 Array.find보다 Set.has()가 더 효율적입니다. - forEach와 Map의 차이점은?
두 메소드 다 배열의 모든 원소를 돌면서 해당 요소에 관한 작업을 실행하는데, map은 그 결과에 대해서 새로운 배열을 리턴한다는 점에서 차이가 있습니다. 그리고 map()은 메모리를 할당하고 리턴 값을 저장하고, forEach()는 리턴 값을 버리고 항상 undefined를 리턴합니다. - "==" 와 "==="의 차이
"=="는 동등 연산자로, 비교하는 대상의 형(타입)이 다르더라도, 강제로 비교합니다. 즉 두 값의 타입이 다르더라도, 형 변환된 값이 같다면 true를 리턴합니다. "==="는 일치 연산자로 동등 연산자보다 엄격하게 비교하며 타입과 값이 모두 같을 경우에만 true를 리턴합니다. - 원시값과 참조값(array, object)의 차이점을 메모리 관점에서 설명해주세요
원시값(Number/String/Boolean/Null/ Undefined)과 참조값(Object/Symbol)으로 나뉘는데 원시값은 불변값이며 데이터가 변경되면 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않습니다. 참조값은 가변값이며 내부 프로퍼티를 바꾼다고 해도 변수 영역이 참고하는 데이터 영역의 주소값이 바뀌지 않기 때문에 원래의 값과 복사된 값이 같은 데이터라고 여겨집니다. 원본데이터를 훼손하지 않으려면 불변성을 지켜야 합니다. - 깊은복사, 얕은복사란?
얕은 복사란 객체의 참조값(주소 값)을 복사하는 방법입니다. 즉 객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있습니다. 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이며 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말합니다. object.assign()이나 전개 구문 같은 경우엔 1depth 까지는 깊은복사가 되고, 2depth 이후부터는 얕은 복사가 됩니다. 깊은 복사를 하기 위해서는 재귀함수를 이용하거나 JSON.stringify, lodash 같은 라이브러리를 사용하면 됩니다. - import와 require의 차이점은 무엇인가요?
import와 require 모두 외부 라이브러리나 다른 파일을 불러오는 동일한 목적을 가지고으며. import의 경우 ES6에서 도입되었기때문에 babel과 같은 ES6 코드를 변환해주는 도구 없이는 사용하지 못합니다. 사용방법은 import는 그냥 바로 키워드를 사용하여 직관적으로(import moment from "moment";) 모듈을 불러 올 수 있지만 require은 다른 변수를 할당하듯이 불러와줘야합니다.(const moment = require("moment"); - JWT 방식을 설명하고, 왜 사용했는지?
JWT는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 말합니다. 기존의 세션인증방식은 인증 관련 정보를 세션 저장소라는 DB에 저장했기 때문에 서버가 과부하 되거나 서버를 확장하기 어려웠습니다. 이를 보완하기 위해( = 서버자원을 절약) 사용자 인증에 필요한 정보를 토큰 자체에 담고 있어 별도 저장소에 정보를 저장해 둘 필요가 없는 JWT을 사용하게 되었습니다. 토큰은 로그인 이후 서버가 만들어주는 문자열이고, 문자열 안에는 사용자의 로그인 정보와 서버의 서명이 들어있으며 사용자가 로그인을 하면 서버는 사용자에 토큰을 발급하고, 사용자는 토큰과 함께 다른 API 작업을 요청합니다. 서버는 토큰의 유효성 검사를 통해 요청한 것에 대한 응답을 해줍니다. 단 한번 발급된 토큰은 수정 및 폐기가 불가하다는 단점이 있고, 유효기간을 짧게 지정해주는 것이 중요합니다. - MVC, MVVM 모델에 대해 설명하세요
MVC 패턴은 모델 + 뷰 + 컨트롤러를 합친 용어이며 모델은 데이터 및 데이터를 처리하는 부분이고, view는 사용자에게 보여지는 UI 부분이며 컨트롤러는 사용자의 입력을 받고 처리하는 부분입니다. MVC는 사용자의 액션이 컨트롤러에 들어오면, 컨트롤러가 액션을 확인하고 모델을 업데이트합니다. 컨트롤러는 모델을 나타내줄 view를 선택하고, view는 모델을 이용하여 화면을 나타내며 컨트롤러는 여러개의 view를 선택할 수 있는 1:n 구조이고, 뷰를 선택할 뿐 직접 업데이트는 하지 않습니다. 보편적으로 널리 사용되는 패턴이며, 단점은 뷰와 모델사이의 의존성이 높고, 어플리케이션이 커질수록 복잡하고, 유지보수가 어렵습니다.
MVVM 패턴은 모델+뷰+뷰모델을 합친 용어이고, 모델과 뷰는 MVC와 동일합니다. 뷰모델은 뷰를 표현하기 위해 만든 뷰를 위한 모델이며 뷰를 나타내 주기 위한 모델이자, 뷰를 나타내기 위해 데이터 처리를 하는 부분입니다. 액션이 뷰를 통해 들어오면, 뷰 모델에 액션을 전달합니다. 뷰 모델은 모델에게 데이터를 요청하고, 모델은 요청받은 데이터를 뷰 모델에게 응답하고, 뷰 모델은 받은 데이터를 가공하여 저장합니다. 뷰는 뷰 모델과 데이터 바인딩을 하여 화면을 그리는 동작 방식이며 이 패턴의 가장 큰 장점은 뷰와 뷰 모델의 의존성을 없애고, 각 부분이 독립적이라는 입니다. 단점은 뷰 모델의 설계가 쉽지 않다는 점이고 이 패턴의 주요 목적은 로직의 분리입니다. 리액트에서는 데이터와 화면 컴포넌트를 분리하는 것을 예시로 들 수 있습니다. - Flex 속성을 설명해주세요.
Flexbox란 기존 컨텐츠를 수평으로 배치할 때, float나 inline-block으로 마크업할때의 불편함을 쉽게 해결할 수 있도록 추가된 기능입니다. 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜줌으로써 반응형 웹 사이트에 유용하게 쓰이며 Flex는 컨텐츠를 감싸는 상위 부모요소인 Flex Container와 각 컨텐츠들인 자식요소 Flex Item으로 구성되어 있습니다. Flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 되며 Flex Container에는 전체적인 정렬과 관련된 속성인 display, flex-direction, align-items, flex-wrap 같은 속성을 정의하고, 자식요소인 flex item에는 flex-grow, flex-shrink 같은 크기나 순서 같은 속성을 정의합니다. - OOP의 특징에 대해서 설명하시오
객체지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법으로 OOP의 장점은 코드 재사용성입니다. 클래스를 한번 만들어 놓으면 계속 이용 가능하고, 상속을 통해 확장 가능하며 수정해야할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 있기 때문에 해당 부분만 수정하면 되어 유지보수가 쉽습니다. 단점은 처리속도가 느리고, 객체가 많으면 용량이 커진다는 것입니다. OOP의 특징으로는 클래스와 객체, 캡슐화, 상속 등이 있으며 클래스는 집단에 속하는 속성과 행위를 변수와 메서드로 정의한 것이고, 객체 즉 인스턴스는 클래스에서 정의한 것을 토대로 실제 메모리 상에 할당된 데이터입니다. 상속은 부모 클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게 하고, 코드의 중복을 없애기 좋습니다. - 타입스크립트 사용해본 적 있는지? 어떤가요?
타입스크립트는 자바스크립트 기반의 언어이며 자바스크립트의 상위확장버전입니다. 정적타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있고, 강력한 객체지향 프로그래밍을 지원합니다. ES6의 새로운 기능들을 사용하기 위해 바벨과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행 가능하며 명시적인 정적 타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 합니다. - 리액트의 개념과 장점, 컴포넌트란?
React는 SPA (Single Page Application) 즉, 단일 페이지 응용 프로그램에서 사용자 인터페이스를 구성하는데 사용되는 오픈 소스 프론트엔드 JS 라이브러리입니다. React의 특징으로는 virtual DOM을 사용해서 어플리케이션의 성능을 향상시키고, 클라이언트 사이드 렌더링이 가능하며 UI 구성 요소를 컴포넌트 단위로 재사용할 수 있도록 개발할 수 있습니다. 컴포넌트란, 레고 블록과 같이 작은 단위로 만들어서 그것을 조립하는 것처럼 개발하는 방법입니다. 컴포넌트를 사용한다면 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다. - React의 라이프사이클에 대해 설명해주세요
리액트는 컴포넌트 단위로 개발하게 되는데 이때 각 컴포넌트들은 라이프사이클 즉, 생명주기를 가지고 있으며 생명주기는 생성부터 시작하여 업데이트가 되기도 하며 마지막에는 소멸되는 과정을 거치게 됩니다. 클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작하는데 이와 달리 함수형 컴포넌트에선 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현합니다. 최초로 컴포넌트 객체가 생성될 때 한 번 수행되어지는 componentDidMount()와 초기에 화면을 그려줄 때와, 업데이트가 될 때 호출되는 render()가 있습니다. 그리고 컴포넌트의 속성 값 또는 상태값이 변경되면 호출되어지는 componentDidUpdate()와 마지막으로 컴포넌트가 소멸될 때 호출되어지는 componentWillUnmount()가 라이프사이클의 역할입니다. - jsx란?
JSX는 자바스크립트 코드를 HTML처럼 표현할 수 있는 React 엘리먼트를 생성하는 언어입니다. - useMemo vs useCallback
메모제이션 훅이라고도 하며 성능 최적화를 위해서 리액트의 불필요한 랜더링(예: 자식 컴포넌트의 상태가 변경되지않아도 랜더링 해버리는 경우)을 방지하여 퍼포먼스 최적화에 사용합니다. 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이며 둘의 차이점은 useCallback은 전달된 함수 그 자체를 캐싱하지만, useMemo는 전달된 함수가 실행되고 반환된 결과를 캐싱합니다. (=useMemo는 메모이제이션 된 값을 반환하고 useCallback은 메모이제이션 된 콜백을 반환합니다.//값, 함수) - 리액트 훅에 대해 설명하시오
리액트 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는데 상태값을 관리할수도, 생명주기 함수 또한 이용할 수 있습니다. 훅을 사용하면 재사용 가능한 로직을 쉽게 만들 수 있고, 또 React의 내장된 훅 말고 새로운 커스텀 훅을 만들수도 있으며 코드 가독성이 좋아지는 장점이 있습니다. (예를들어, componentDidMount + componentWillUnmount를 useEffect 로 간단하게 대체할 수 있음) 리액트에는 useState, useEffect, useCallback 등의 기본적인 내장 훅들이 있다. - 클래스형 컴포넌트와 함수형 컴포넌트를 비교해주세요.
클래스형의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용할 수 있으며 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야 JSX 반환이 가능합니다. 리액트에서도 함수형 컴포넌트를 사용하기를 더 선호하는데 유지보수를 위해 알아두어야 하며 함수형 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리 상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점이며 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용한다. - props와 state에 대해 설명해주세요
props와 state 모두 리액트 컴포넌트에서 다루는 데이터로 그 중 props는 부모 컴포넌트에서 받아온 데이터입니다. 리액트는 부모에서 자식으로만 데이터가 흐르는 단방향 형식으로, 이미 상속된 props는 수정이 불가능한 반면 state는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 해당 컴포넌트 내부에서 선언되기때문에 수정이 가능하다는 차이점이 있습니다. setState를 사용하여 state값을 업데이트 해주면 자동으로 리렌더링되지만 주의할 점은 setState의 비동기적 특성을 기억하고 사용해야합니다. (setState가 있을 경우, 리액트는 다른 state변경까지 한꺼번에 통합해서 리액트 자신이 판단하기에 가장 적절한 시기에 돔을 리렌더링하며 이를 해결하기 위해 콜백 혹은 useEffect를 사용합니다.) - React에서 불변성을 지켜야하는 이유
리액트에서 불변성을 지켜주는 이유는 리액트가 상태 업데이트를 하는 원리 때문입니다. 리액트는 상태값을 업데이트 할 때 얕은 비교를 수행합니다. state가 변한다는 말은 state의 변수영역에서 참조하는 데이터 영역의 주소값이 바뀌어서 이전 데이터와 다른 데이터가 된다는 말입니다. (= 불변성 확보). 참조값을 업데이트 할 때에는 spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용하거나 내부 프로퍼티가 바뀐 새로운 객체를 만들면 됩니다. - useEffect란?
컴포넌트가 렌더링 되거나 업데이트 될 때 그 안에 있는 기능을 실행할 수 있는 React Hooks중 하나 이며 컴포넌트의 특정 값이 업데이트 될 때 해당 기능으로 작동시키고 싶으면 두 번째 파라미터의 배열에 그 값을 넣어주면 되고 컴포넌트가 언마운트 될때 원하는 작업을 하고 싶다면 익명함수를 리턴하면 됩니다. - useEffect와 useEffectLayout 의 차이점
useEffect 는 컴포넌트들이 render 와 paint된 후 실행됩니다. paint된 후 실행되기 때문에, useEffect 내부에 dom 에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다. useLayoutEffect 는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거칩니다. 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점이 있어, 기본적으로는 (데이터 fetch,event handler,state reset) 등의 작업은 항상 useEffect 를 사용하되, state가 조건에 따라 첫 painting 시 다르게 렌더링 되어야 할 때는 useLayoutEffect를 사용하는 것이 바람직 합니다. - 리액트의 useCallback, useEffect등을 사용할 때 의존성 배열을 받게 됩니다. 이 배열의 역할은 무엇인가요?
useEffect의 의존성 배열은 두 번째 매개변수로, 의존성 배열의 내용이 변경되었을 경우, 이펙트 함수가 실행됩니다. 의존성 배열안의 값이 바뀔때만 렌더링 되는 특성을 이용해 state 혹은 props값이 변경될 때 특정 함수를 실행하거나, 컴포넌트가 마운트 될 때 API를 이용해 데이터를 가져오거나 하는데 사용되며 빈 배열을 넣게 되면 최초 마운트 될 때 한번만 호출되도록 할 수 있습니다. useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 훅으로 함수 안에서 사용하는 상태나 props가 있다면 의존성 배열에 추가하게 되며 추가하지 않으면 함수 내에서 해당 값들을 참조할 때 가장 최신의 값을 참조할 것이라는 보장이 없습니다. 의존성 배열에 넣은 값이 변할 때만 함수를 새로 만들게 됩니다. - React의 상태관리 방법에 대해서 설명하시오
리액트의 상태관리에는 context API를 통한 방법 및 MobX, Redux 등의 라이브러리를 사용한 방법이 있습니다. 그 중 가장 많이 사용하는 Redux는 전역 상태를 생성하고 관리하며, 상태관리 라이브러리 중 가장 압도적으로 많이 사용됩니다. 리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킵니다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동합니다. 리덕스는 context api와 다르게 전역 상태 관리 외에도 redux-saga, redux-thunk 등 추가 라이브러리를 통해 비동기 작업을 쉽게 해줄 수 있는 장점이 있지만, 코드가 많고 복잡하기 때문에 이런 부가기능이 필요하지 않은 소규모 프로젝트에는 context api를 쓰는 것이 나을 수도 있습니다. - context api란?
Context API는 리액트에 내장된 기능으로 props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해줍니다. Context에 저장된 데이터를 사용하기 위해서는 공통 부모 컴포넌트에 Context의 Provider를 사용하여 데이터를 제공해야 하며, 데이터를 사용하려는 컴포넌트에서 Context의 Consumer를 사용하여 실제로 데이터를 사용합니다. - redux-thunk를 사용한 이유와 작동원리에 대해 설명하시오
리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리할 때 사용하는 미들웨어 중 하나입니다. (여기서 미들웨어란? dispatch 함수를 결합해서 새 dispatch 함수를 반환하는 고차함수이며 리듀서에는 비동기 로직이 존재할 수 없기 때문에 미들웨어를 씁니다) thunk는 특정 작업을 나중에 하도록 미루기 위해서 함수 형태로 감싼 것을 칭하며 redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줍니다. 리덕스에서는 기본적으로 액션 객체를 디스패치하는데, 일반 액션 생성자는 파라미터로 액션 객체를 생성하는 작업만합니다. thunk를 이용하면 특정 액션이 몇 초 뒤에 실행되게 하거나, 조건이 충족되는 경우에만 dispatch 할 수 있고 함수를 디스패치 할 때에는 dispatch와 getState를 매개변수로 두고, 해당 함수를 만들어주는 함수가 thunk며 thunk를 사용한 이유는 리덕스가 비동기처리를 하지 못하여 미들웨어인 thunk를 이용해 API를 호출하고, 비동기 액션을 처리하기 위함입니다. - AJAX에 대해 자세히 설명하세요(+장단점)
자바스크립트를 이용하여 비동기식으로 XML을 이용해 서버와 통신하는 방식이며 최근에는 XML보다 JSON을 많이 사용합니다. 웹 페이지 전체를 업데이트 하는게 아니라 부분적으로 업데이트를 하기 위해 사용하며 따라서 장점은 SPA와 마찬가지로 웹페이지를 업데이트시 새로고침 없이 필요한 부분만 업데이트 되어서 UX가 향상됩니다. 그러나 단점으로는 SEO가 까다롭고, 동적화면에서 History 관리와 북마크가 어려울 수 있습니다. - Box model에 대해 설명해주세요.
모든 HTML 요소는 BOX모양으로 구성되며, 이것을 박스모델이라고 합니다. 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현하며 박스 모델은 총 네 부분(영역)으로 이루어지고, 이 네가지 부분은 패딩, 테두리(border), 마진, 내용(content)로 구현합니다. 내용은 텍스트나 이미지가 들어가있는 박스의 실질적인 부분으로 색상, 너비, 높이 등을 지정할 수 있고 패딩은 내용과 테두리 사이의 간격이며 눈에 보이지 않습니다. 테두리(border)는 내용과 패딩 주변을 감싸는 테두리이고 마진은 테두리와 이웃하는 요소 사이의 간격이고 마진은 눈에 보이지 않습니다. - 고차 컴포넌트(HOC)란? 사용해본 적 있는지?
고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수입니다. 즉 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이며 컴포넌트 로직을 재사용하기 위한 아주 고급 리액트 기술이고, 유저 인증 로직 처리 혹은 로딩 중 화면 처리, 컨테이너 컴포넌트와 프레젠테이션 컴포넌트를 분리하는 등에 자주 활용합니다. - 이벤트 바인딩이란?
이벤트 바인딩이란, 발생하는 이벤트와 그 후에 어떤일이 일어나는지 알려주는 콜백함수와 연결해준다는 뜻입니다. 이벤트 바인딩이는 총 3가지 방법이 있는데, HTML이벤트 핸들러, 전통적인 DOM핸들러, EventListener을 이용한 핸들러가있습니다. HTML핸들러는 HTML요소의 이벤트 Attribute에 이벤트 핸들러를 넣는 방식이며 현재에서는 지양하는 방식이고, HTML과 JS가 혼용될 수 있는 문제가 생깁니다. 전통적인 DOM이벤트 핸들러는 HTML과 JS가 혼용되는 문제를 해결했으나, 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있고, 함수에 인수를 전달하지 못하며, 바인딩 된 이벤트 핸들러가 2개 이상인 경우 제일 마지막에 추가다된 코드의 이벤트 핸들러만 실행됩니다. 앞에서 설명한 것의 단점을 보완하기 위해 만든 것이 EventListener을 이용한 이벤트 핸들러인데,addEventListener함수를 이용하여 대상 요소에 이벤트를 바인딩하고, 해당 이벤트가 실행될 콜백함수를 지정하며 하나의 이벤트에 대해 다수의 핸들러를 추가할 수 있고, 캡쳐링과 버블링을 지원하며 HTML뿐만 아니라 DOM요소에도 동작한다는 장점이 있다. - 라이브러리, 프레임워크의 정의를 간단하게 해본다면?
라이브러리는 응용프로그램 개발을 위해 필요한 기능을 모아놓은 소프트웨어이고, 기능 사용법은 사용자가 결정합니다. 리액트가 UI를 만들기 위한 대표적인 자바스크립트의 라이브러리이며 프레임워크는 소프트웨어 개발을 위한 개발 환경, 토대, 기반시설을 제공하는 것이고 프로그래머는 프레임워크가 제공하는 전체적인 규칙을 따라가면서 개발해야합니다. 코드를 프레임워크가 제어하는 것이 라이브러리와의 차이점입니다. - 크로스 브라우징이란?
웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업입니다. 브라우저 마다 랜더링 엔진이 다르기 때문에 크로스 브라우징이 필요하며 내가 쓰는 css가 사용되지 않는 브라우저를 can I use 사이트 같은 곳에서 확인하고, 제이쿼리 라이브러리를 사용하거나, css 속성 앞에 브라우져별 접두사인 벤더 프리픽스를 사용하는 것도 해결 방법입니다. - 리액트와 제이쿼리의 차이점은?
제이쿼리와 리액트 모두 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 인터넷 익스플로러의 시장 점유율이 높을땐 많이 사용되었지만, 크롬이 나타나면서 제이쿼리와 같은 라이브러리를 사용하지 않고도 양질의 웹 앱 구현이 가능해졌습니다. 리액트는 가상돔을 사용하는 라이브러리인데, 이와 같은 가상 돔을 사용하는 라이브러리가 많아질수록 돔을 직접 조작하는 제이쿼리의 필요성이 줄어들게되었고 가상돔을 사용하는 리액트는 제이쿼리보다 리렌더링 과정이 빠르고, 그렇다보니 더 많은 DOM조작이 발생하는 규모가 큰 앱일수록 제이쿼리의 선호도가 떨어지고있습니다. - Cascading이란?
HTML요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선순위가 정해져야한다는 뜻입니다. 캐스캐이딩은 CSS가 어디에 선언되어있나 (중요도), 대상을 명확하게 지정할수록 높은 우선순위를 가지고 있습니다 (명시도), 코드 순서에 의해 결정됩니다. 중요도는 head 요소 내에 있는 style이 link로 연결된 css 보다 우선순위가 높고 명시도는 !important, inline스타일 ,id, class,tag선택자, 상속된 스타일 순으로 높으며 코드 순서는 늦게 선언된 스타일이 우선 적용 됩니다. - TDD란?
테스트 주도 개발이라는 뜻으로, 먼저 테스트 코드를 작성 한 후에 구현을 하는 방식입니다. 총 3가지의 절차가 있는데 실패→ 성공 → 리팩토링이 서로 꼬리를 물고 이뤄집니다. TDD를 진행하면 테스트 케이스를 작성할 때 주로 작은 단위로 만들기 때문에 코드가 방대해지지 않고, 코드의 모듈화가 자연스럽게 잘 이루어집니다. React에서 테스트를 위해 jest(프레임 워크)와 enzyme(라이브러리)등이 있습니다.
반응형
'기록과 회고' 카테고리의 다른 글
| 2년차 프론트엔드 개발자의 2023년 회고 (1) | 2023.12.31 |
|---|---|
| 1년차 프론트엔드 개발자의 2022년 회고 (0) | 2023.01.01 |
| WASH KOREA | 1차 프로젝트 회고 (0) | 2021.11.14 |