crabLab

글의 목적 면접을 대비해서 대답을 정리한다. 레퍼런스 React의 state와 props에 대해서 설명해주세요. React props와 state 알아보기 기술 면접 part 2. React의 state와 props에 대해서 설명 본문 리액트의 stste는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다. useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다. props는 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미합니다. props로 넘겨준 값들은 불변하며, readOnly속성을 가지고있습니다. 따라서 자식 컴포넌트에서의 직접적인 props 변경은 불가하며, 내려받은 setState나 함수를 이용하여 props를 바꾸도록 부모 ..

글의 목적 면접을 대비해 대답을 정리한다. 레퍼런스 기술 면접 part 2. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요. 본문 순수함수란? 동일한 인자에 대해서는 항상 동일한 값을 리턴하고 함수 외부에 어떠한 영향도 미치지 않는 함수를 말한다. 사이드 이펙트란? 함수에서 값을 반환하는 일 외에 함수 외부와 상호작용하여 부가적인 작업을 수행할때 그 함수는 사이드 이펙트가 있다고 한다. 사이드 이펙트 예 Ajax, setTimeout, console.log 등 호출이 모두 사이드 이펙트이다. 함수 내부를 벗어나 외부와 상호 작용을 하기때문이다. Ajax, setTimeout 같은 함수들은 브라우저 API를 사용하는 일이고, console.log는 브라우저의 콘솔창에 문자열을 출력하는..

글의 목적 면접을 대비하여 글로 정리한다. 레퍼런스 Cookie의 MaxAge, Expires 옵션 [인증/보안] Cookie 옵션 본문 Session cookies 웹브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐 → MaxAge와 Expires 옵션 중 하나라도 설정하지 않을 때 Permanent cookie 웹브라우저를 껐다 켜도 유지됨 Permanent cookie 기간 설정할 때 쓰이는 옵션이 바로 MaxAge와 Expires 이다. MaxAge와 Expires 옵션은 둘 다 쿠키의 수명을 결정하는 데 사용된다. MaxAge 쿠키가 유지되는 시간(초)을 정의한다. 이 값은 현재 시간에서 더해져서 쿠키의 만료 시간이 계산된다. 예를 들어, MaxAge가 3600으로 설정되어 있으면, 쿠키..

글의 목적 면접에서 질문으로 나왔을 때를 대비하여 글로 정리한다. 레퍼런스 [React] useRef - 필요성, 필요한 상황, 사용법 useRef는 처음이라 :: 개념부터 활용 예시까지 - Deeming 본문 react에서는 DOM을 건드리지 않고 거의 대부분의 요구사항을 구현할 수 있지만 특정 상황에 경우는 DOM을 건드려야 하는 경우가 있다. 또 부모의 props나 자신의 state가 변하면 리렌더링이 일어나는데 이 리렌더링을 일어나지 않게 하기 위해서도 쓰는 경우가 있다. DOM을 건드리는 경우는 회원가입폼의 input에서 포커스를 시키고 싶을 때가 있다. 이때 input요소의 ref에 useRef로 만든 변수를 할당해주고 이 값과 input의 event.target을 비교해준 이후 그 포커스해야..

글의 목적 면접을 대비해서 대답할 수 있도록 정리한다. 레퍼런스 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유? 본문 Const 변수에 할당된 값은 바뀌지 않지만, 배열/객체가 변수에 할당될 때에는 배열/객체의 요소(값) 자체가 아니라 주소(이 값은 불변, 상수)가 할당되기 때문입니다. const는 변하지 않는 상수constant 를 선언하는 키워드이며, 이 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 그러나 배열, 객체는 참조자료형reference data type이며, 참조 값은 변수에 주소를 할당합니다. (cf. 변수에 값을 직접 할당하는 원시자료형primitive data type) 숫자, 문자열 등의 원시 자료형은 stack 영역에 값 자체가 저장되지만..

글의 목적 면접 대비해서 대답할 수 있도록 정리함 레퍼런스 📚 require vs import 문법 비교 (CommonJS vs ES6) 모듈 소개 본문 require는 NodeJS에서 사용하고 있는 CommonJS키워드이고 import는 ES6에서 새롭게 도입된 키워드이다. 즉 require는 서버에서 사용하는 모듈시스템에서의 모듈을 불러오는 문법이고 import는 브라우저에서 사용하는 모듈시스템에서의 모듈을 불러오는 문법이다. require는 프로그램의 어느 지점에서나 호출 할 수 있지만 import는 파일의 시작 부분에서만 실행할 수 있다. 일반적으로 import는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호된다. 또한 require보다 성능이 우수하며 메모리를 절약한다..

글의 목적 면접 대비 정리 레퍼런스 🔍 [단골질문] - 01. 브라우저 저장소에 대해서 설명해보세요. 본문 로컬스토리지와 세션스토리지는 간단한 key와 value를 저장할 수 있는 저장소이다. 이 저장소들은 브라우저에 저장하기 떄문에 새로고침을 해도 데이터가 휘발되지 않는다는 특징이 있는 데 이를 이용해 프론트엔드에서는 로그인시 access token을 로컬스토리지에 저장하고 로그인을 유지하는데 사용할 수 있다. 또한 redux-persist를 사용하면 클라이언트 자체에서 새로고침이나 창을 닫았을 시에도 휘발되지 않게 유저의 정보를 저장할 수 있다. 세션스토리지의 경우는 로컬과는 조금 차이가 있는게 윈도우나 창을 닫으면 그 정보가 사라진다. 그리고 이 로컬과 세션 스토리지 전에 있던 것이 쿠키인데 쿠키는..

글의 목적 면접 대비로 대답을 정리해놓는다. 레퍼런스 this 가 동작하는 원리와 용법 본문 자바스크립트에서는 함수 호출의 방식에 따라 this에 어떤 객체를 바인딩할 지 동적으로 바뀌게 된다. this는 클래스나 함수에서 동적으로 값을 할당하기 위해서 쓰는 기능이다. 함수의 호출하는 방식에는 크게 함수 호출, 메소드 호출, 생성자 함수 호출, apply/call/bind가 있는데 함수 호출시에는 기본적으로 전역 객체에 바인딩 된다. 즉, 그냥 console.log(this === window) 를 하면 true가 나오게 된다. (node.js가 아니라 브라우저에서 사용할 경우의 기준이다. node.js에서는 global객체를 의미한다.) 메소드 호출의 경우 함수가 객체의 프로퍼티 값이면 메소드로서 호출..

글의 목적 면접에서 질문을 받았을 때를 대비하여 대답을 정리한다. 본문 postion의 경우 css에서 중요한 파트 중 하나인 레이아웃을 결정하는 속성입니다. 웹문서는 블럭요소와 인라인 요소로 구분되고 블럭요소들은 가로로 차지할 수 있는 부분을 모두 차지하며 차곡차곡 위에서 아래로 쌓여갑니다. 그래서 특정 박스모델을 웹의 어느 위치에 놓기 위해서는 인라인 요소를 이용하고 마진을 많이 주는 방식으로 놓아야 했습니다. 하지만 웹이 발전하며 헤더나 사이드바 처럼 스크롤에 관계없이 계속 고정시켜두고 싶은 것과, 웹의 구성에서 벗어나 자유로운 위치에 놓고싶은 디자인이 생겼습니다. 이런 부분을 개발자들은 position으로 해결했습니다. postion을 사용한 요소는 우선 웹의 기본적인 구성에서 벗어나게 됩니다. ..

글의 목적 면접에서 질문받았을 때를 대비하여 대답할 것을 정리한다. 레퍼런스 [10분 테코톡] 헌치, 써머의 HTTP HTTP 프로토콜이란? 본문 http란 하이퍼텍스트 트랜스퍼 프로토콜의 약자로 인터넷상에서 데이터를 주고 받기 위한 통신 규약입니다. 즉 클라이언트와 서버사이에서 요청과 응답을 주고받는 과정인데요 이름의 유래는 하이퍼텍스트기반으로 데이터를 전송하겠다라른 뜻입니다. 작동은 클라이언트가 프로토콜, 위치, 자원명으로 서버의 자원에 접근하는 것인데 이는 우리가 브라우저의 주소창에 찾고자 하는 웹사이트의 주소를 적는것과 같습니다. 즉, 우리는 알게 모르게 이미 httpf를 통해서 서버와 통신을 주고받고 있던것입니다. 예를 들어 https://www.naver.com/index.html이라면 htt..