전체 글 썸네일형 리스트형 [기술 면접 스터디-8일차] 순수함수 / state와 props에 대해 1. 순수 함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. 💡 순수함수는 항상 동일한 input에 동일한 output이 나와야 하고, 또 외부의 상태를 변경하거나, 외부 값을 참조하지 않고 내부에서만 값을 변경하여 프로그램의 상태를 직접 변경하지 않도록 합니다. 리액트는 컴포넌트를 엄격하게 순수함수로 작성하도록 설계 하였습니다. 이렇게 함으로서 코드가 복잡해 지더라도 독립성을 유지할 수 있고, 순수함수로서 결과를 예측 가능하여 예상지 못한 사이드 이펙트나 버그를 방지할 수 있고, 코드의 의도를 명확히 파악 가능하므로 유지 보수성이 높아지고, Test하기 쉽습니다. 또 컴포넌트가 순수함수로 작성되면, props가 변경되지 않은 경우 렌더링을 건너뛸 수 있으므로 성능을 최적화할 수 있습니.. 더보기 [기술 면접 스터디-7일차] useRef가 필요한 상황, Cookie의 maxAge, expires 옵션 1. useRef가 필요한 상황을 예시를 들어 설명해주세요 💡useRef는 리액트의 훅 중에 하나로, DOM 요소에 접근하거나 리액트 컴포넌트의 상태와는 별개로 독립적으로 값을 유지해야 할 때 사용됩니다. 예를 들어서 특정 엘리먼트의 크기나 뷰포트 상의 위치를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스 설정을 해줘야 한다던지 등 다양한 상황이 있을 수 있습니다. 또 외부 라이브러리를 사용해야 할 때에도 특정 DOM에다 적용하기 때문에 useRef를 사용합니다. 저같은 경우는 프로젝트에서 무한 스크롤을 구현할 때, 스크롤탑 효과를 주어 스크롤바 위치를 최상단으로 설정할 때 useRef를 유용하게 사용하였습니다. - useRef 리액트 컴포넌트의 상태와는 별개로 독립적으로 .. 더보기 [기술 면접 스터디-6일차] require와 import, const 사용 시 주의할 점 1. require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? 💡둘다 모듈화를 위한 모듈 시스템입니다. require는 CommonJS 키워드이고, import는 ES6에서 새로 도입된 키워드입니다. 최근에는 ES6 모듈 시스템인 import가 많이 사용되고 있지만 모든 브라우저에서 호환되진 않기 때문에 Babel과 같이 ES6 문법을 이전 문법으로 트랜스파일링(Transpiling)해주는 도구가 있어야 import를 사용 가능합니다. 차이점으로는 1. CommonJs 모듈 방식은 전체 모듈을 다 불러오고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없습니다. 이 때문에 ES6(ECMA2015)부터는 import 방식의 모듈 시스템을 사용.. 더보기 모듈 시스템 require와 import의 차이 / commonJs와 ES6 / 웹팩 바벨 모듈 시스템 require와 import의 차이 💡둘다 모듈화를 위한 모듈 시스템입니다. require는 CommonJS 키워드이고, import는 ES6에서 새로 도입된 키워드입니다. 최근에는 ES6 모듈 시스템인 import가 많이 사용되고 있지만 모든 브라우저에서 호환되진 않기 때문에 Babel과 같이 ES6 문법을 이전 문법으로 트랜스파일링(Transpiling)해주는 도구가 있어야 import를 사용 가능합니다. 차이점으로는 1. CommonJs 모듈 방식으로는 전체 모듈을 다 불러오고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없습니다. 이 때문에 ES6(ECMA2015)부터는 import 방식의 모듈 시스템을 사용합니다. import는 require과는.. 더보기 [기술 면접 스터디-5일차] This, 브라우저 저장소의 차이 1. this 가 동작하는 원리와 용법 / 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? 💡this는 인스턴스 자신(self)을 가리키는 참조변수입니다. 자바스크립트에서 this는 함수 호출 방식에 따라 바인딩되는 객체가 동적으로 결정된다. 함수 호출 방식에 따른 this 바인딩 함수 호출 - 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관계없이 this는 전역객체를 바인딩 메소드 호출 - 해당 메소드를 호출한 객체에 바인딩 생성자 함수 호출 - 생성된 객체를 참조 apply/call/bind 호출 - 명시적으로 this를 지정 화살표 함수에서의 this - 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없기 때문에 내부 함수여 this는 전역 객체를.. 더보기 브라우저 저장소의 차이점(Local storage, Session storage, cookie) 브라우저 저장소의 종류 브라우저 저장소의 종류는 Cookie, WebStorage 두가지로 나눠지고, WebStorage는 LocalStorage와 SessionStorage로 이루어져 있다. 웹 스토리지(Web Storage) 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소. HTML5에 포함되어 있는 스펙으로 기존의 저장소로 사용되었던 Cookie의 몇가지 단점을 개선한 스펙이다.(키-밸류 페어로 저장됨, 매번 서버로 전송되지 않음) 쿠키(Cookie) 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 브라우저 저장소의 차이점 1. 웹 스토리지와 쿠키의 차이점 1) 쿠키 목적 : 쿠키는 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어.. 더보기 [기술 면접 스터디-4일차] HTTP란, HTTP 메시지 구조, position 사용방법 1. HTTP란 ? 💡 하이퍼텍스트 전송 프로토콜을 의미. 웹 상에서 클라이언트와-서버 간에 데이터 통신을 하기 위한 통신규약 입니다. HTTP란 무엇인가? 1. HTTP란 ? 1. HTTP(Hyper Text Transfer Protocol) 💡 하이퍼텍스트 전송 프로토콜을 의미. 웹 상에서 클라이언트와-서버 간에 데이터 통신을 하기 위한 통신 프로토콜(규칙), 즉 통신규약 입니다. 클라이언 junvelee.tistory.com + HTTP와 HTTPS의 차이는? 1. HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전이다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정한다. 2. HTTPS는 .. 더보기 HTTP란 무엇인가? 1. HTTP란 ? 1. HTTP(Hyper Text Transfer Protocol) 💡 하이퍼텍스트 전송 프로토콜을 의미. 웹 상에서 클라이언트와-서버 간에 데이터 통신을 하기 위한 통신규약 입니다. 클라이언트가 브라우저를 통해서 어떠한 서비스를 URI로 서버에 요청(Request)하면, 서버에서는 해당 요청에 대한 결과를 응답(Response)하는 형태로 동작한다. HTTP/1.1, HTTP/2는 TCP 기반, HTTP/3는 UDP 기반 프로토콜이다. TCP 연결은 요청을 보내거나(혹은 여러 개의 요청) 응답을 받는데 사용된다. 클라이언트는 새 연결을 열거나, 기존 연결을 재사용하거나, 서버에 대한 여러 TCP 연결을 열 수 있다. 2. HTTP 메시지 구조 HTTP 메시지는 요청(Requests).. 더보기 이전 1 2 3 4 5 6 ··· 18 다음 목록 더보기
