항해9970 [기술 면접 스터디-10일차] Redux 상태 관리의 주요 개념들과 연결 관계 / HTML 의 inline 요소와 block 요소의 차이점 1. Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요 💡 Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리입니다. Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다. Store: Redux의 상태를 저장하는 객체입니다. 애플리케이션에서 발생하는 모든 상태 변화는 이 Store에서 관리됩니다. Action: 상태를 변화시키기 위한 객체입니다. 액션은 type과 payload라는 두 가지 속성을 가지며, type은 액션의 종류를 나타내는 문자열입니다. 필요에 따라 payload.. 2023. 8. 1. [기술 면접 스터디-8일차] 순수함수 / state와 props에 대해 1. 순수 함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. 💡 순수함수는 항상 동일한 input에 동일한 output이 나와야 하고, 또 외부의 상태를 변경하거나, 외부 값을 참조하지 않고 내부에서만 값을 변경하여 프로그램의 상태를 직접 변경하지 않도록 합니다. 리액트는 컴포넌트를 엄격하게 순수함수로 작성하도록 설계 하였습니다. 이렇게 함으로서 코드가 복잡해 지더라도 독립성을 유지할 수 있고, 순수함수로서 결과를 예측 가능하여 예상지 못한 사이드 이펙트나 버그를 방지할 수 있고, 코드의 의도를 명확히 파악 가능하므로 유지 보수성이 높아지고, Test하기 쉽습니다. 또 컴포넌트가 순수함수로 작성되면, props가 변경되지 않은 경우 렌더링을 건너뛸 수 있으므로 성능을 최적화할 수 있습니.. 2023. 7. 28. [기술 면접 스터디-7일차] useRef가 필요한 상황, Cookie의 maxAge, expires 옵션 1. useRef가 필요한 상황을 예시를 들어 설명해주세요 💡useRef는 리액트의 훅 중에 하나로, DOM 요소에 접근하거나 리액트 컴포넌트의 상태와는 별개로 독립적으로 값을 유지해야 할 때 사용됩니다. 예를 들어서 특정 엘리먼트의 크기나 뷰포트 상의 위치를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스 설정을 해줘야 한다던지 등 다양한 상황이 있을 수 있습니다. 또 외부 라이브러리를 사용해야 할 때에도 특정 DOM에다 적용하기 때문에 useRef를 사용합니다. 저같은 경우는 프로젝트에서 무한 스크롤을 구현할 때, 스크롤탑 효과를 주어 스크롤바 위치를 최상단으로 설정할 때 useRef를 유용하게 사용하였습니다. - useRef 리액트 컴포넌트의 상태와는 별개로 독립적으로 .. 2023. 7. 27. [기술 면접 스터디-6일차] require와 import, const 사용 시 주의할 점 1. require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? 💡둘다 모듈화를 위한 모듈 시스템입니다. require는 CommonJS 키워드이고, import는 ES6에서 새로 도입된 키워드입니다. 최근에는 ES6 모듈 시스템인 import가 많이 사용되고 있지만 모든 브라우저에서 호환되진 않기 때문에 Babel과 같이 ES6 문법을 이전 문법으로 트랜스파일링(Transpiling)해주는 도구가 있어야 import를 사용 가능합니다. 차이점으로는 1. CommonJs 모듈 방식은 전체 모듈을 다 불러오고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없습니다. 이 때문에 ES6(ECMA2015)부터는 import 방식의 모듈 시스템을 사용.. 2023. 7. 26. [기술 면접 스터디-5일차] This, 브라우저 저장소의 차이 1. this 가 동작하는 원리와 용법 / 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? 💡this는 인스턴스 자신(self)을 가리키는 참조변수입니다. 자바스크립트에서 this는 함수 호출 방식에 따라 바인딩되는 객체가 동적으로 결정된다. 함수 호출 방식에 따른 this 바인딩 함수 호출 - 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관계없이 this는 전역객체를 바인딩 메소드 호출 - 해당 메소드를 호출한 객체에 바인딩 생성자 함수 호출 - 생성된 객체를 참조 apply/call/bind 호출 - 명시적으로 this를 지정 화살표 함수에서의 this - 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없기 때문에 내부 함수여 this는 전역 객체를.. 2023. 7. 25. [기술 면접 스터디-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는 .. 2023. 7. 24. 이전 1 2 3 4 ··· 12 다음
