코딩연습장

답변 DOM에 접근할 때 사용합니다. 특정 엘리먼트의 크기, 스크롤바의 위치, 포커스 설정 등등 다양한 상황에서 사용됩니다. 또한 useRef로 설정된 주소값은 리렌더링 되더라도 바뀌지않아 current값이 변화해도 리렌더링에 관여하지 않습니다. 꼬리질문 ref와 state의 차이? state는 리렌더링에 관여하지만 useRef로 선언된 변수는 리렌더링에 관여하지 않습니다. 특정 버튼을 눌렀을 때 특정 input태그에 focus가 잡히는 기능을 구현할 때 사용 참고자료 https://velog.io/@fejigu/React-useRef-%ED%95%84%EC%9A%94%EC%84%B1-%ED%95%84%EC%9A%94%ED%95%9C-%EC%83%81%ED%99%A9-%EC%82%AC%EC%9A%A9%E..

답변 배열, 객체는 const로 변수를 선언했을 때 찾아가는 주소만 할당된 참조 자료형이기 때문입니다. 요소나 속성을 변경하더라도 해당 주소는 변경되지 않으므로 const로 선언된 배열, 객체라도 속성을 추가할 수 있는 것 입니다. 꼬리질문 불변객체를 만드는 법. const로 재할당은 불가능하지만 속성은 변경이 가능합니다. 이때 Object.freeze()메소드의 재할당은 가능하지만 속성은 변경 불가한 특성을 활용해 불변객체를 만들 수 있습니다. 또는 Object.assign()메소드, 전개연산자, lodash의 cloneDeep()을 활용해 깊은 복사를 하여 원본 객체를 보존하는 방법도 있습니다.

답변 모듈시스템으로 CommonJS를 사용한 것과 ES6을 사용한 것의 차이입니다. 대표적으로 CommoneJS를 사용한 Nodejs는 require을 통해 외부 파일이나 라이브러리를 불러오지만, ES6 모듈 시스템을 사용한 리액트는 import틀 통해 라이브러리를 불러옵니다. Babel과 같은 ES6 코드를 변환해주는 도구가 없다면 require을 사용해야합니다. 꼬리질문 바벨이란? 바벨이란 ES6+버전의 자바스크립트, 타입스크립트, jSX 등 다른 언어로 분류되는 언어들에 대해 모든 브라우저에서 동작할 수 있도록 호환시켜주는 툴입니다. 바벨은 최신 문법을 이전세대 문법으로 호환시켜주는 기능이 있는데 그 중 하나가 JSX문법입니다. JSX를 ES5 코드로 바꿔 브라우저에 작동할 수 있도록 하여 리액트에..

답변 브라우저 저장소는 로컬스토리지, 세션스토리지, 쿠키가 있습니다. 로컬스토리지는 브라우저 종료시에도 보관되고, 브라우저가 다르더라도 동일 도메인일 경우 공유가 되지만, 세션스토리지는 브라우저 종료시 삭제되며 동일 도메인이더라도 공유되지 않습니다. 쿠키는 만료기간을 설정할 수 있고, 지속적인 데이터 교환을 위해 만들어졌습니다. 웹스토리지는 필요한 경우 꺼내서 사용하므로 자동전송의 위험이 없고, 오리진 단위로 접근이 제한되어 CSRF공격으로부터 안전합니다. 또한 4kb로 제한되는 쿠키에 비해 스토리지는 용량이 더 큽니다. 꼬리질문 CSRF? CSRF(Cross-Site Request Forgery)란 사이트간 요청 위조로, 사용자의 의도와는 무관하게 공격자의 의도한 행위를 웹사이트에 요청하게 만드는 공격..

HTTP란? HTTP란 Hyper Text Transfer Protocol로, 인터넷에서 데이터를 주고 받을 수 있는 규칙입니다. HTTP 메세지 구조 GET https://dev.sparta-chuchu.shop/api/events/reviews HTTP/1.1 User-Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWe... accept : application/json (본문...) 서버에게 요청을 보낼 때, 서버에서 응답을 보낼 때 정보를 담아 메시지를 보내는데, 이를 HTTP 메시지라 합니다. HTTP메시지는 시작줄, 헤더, 본문으로 구성됩니다. GET으로 시작하는 것이 시작줄입니다. HTTP메소드와 요청주소, HTTP버전으로 구성되어있습니다...

캐시의 장점은 계산, 접근시간 없이 빠른속도로 데이터에 접근할 수 있습니다. 단점으로는 비용이 비싸고, 메모리공간이 상대적으로 작습니다. 프론트엔드에서는 캐시를 웹 서비스 최적화에 사용합니다. 여러번 요청해도 같은 이미지, CSS, JS같은 정적 컨텐츠를 캐시를 사용합니다. 꼬리질문 캐시의 지역성과 동작방식에 대해 설명해주세요 참고자료 https://toss.tech/article/smart-web-service-cache 웹 서비스 캐시 똑똑하게 다루기 웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다. toss.tech https://mmsesang.tistory.com/entry/%EC%9B%B9-%EC%B5..

프레임워크 뼈대나 기반구조를 뜻한다. 완성된 제품을 만들기 위해서 개발자를 도와주는, 기반 역할을 한다. 소프트웨어의 특정 문제를 해결하기위해 상호 협력하는 클래스와 인터페이스의 집합입니다. (Vue.js, Angularjs, nodejs 등... 리액트는 라이브러리임) 라이브러리 단순 활용가능한 도구들의 집합이다. 프로그래머가 어떤 기능을 수행하기위해 도움을 주고 필요한 것을 제공해주는 역할을 한다. 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식이다. (리액트, jQuery, styled-component 등...) 프레임워크와 라이브러리의 차이점 제어흐름이 어디있냐의 차이이다. 프레임워크는 전체적인 흐름을 자체적으로 가지고있어 개발자가 프레임워크 안에..

parameter(매개변수)는 함수 내부에 있는 인자로, 특정한 값으로 정해진 것이 아니라 함수를 어디선가 호출하며 건네준 argument가 담기는 공간입니다. argument(전달인자)는 함수를 호출할 때 값을 전달한다는 의미로 전달인자라고도 불리며 인수라고도 합니다. 매개변수와 달리 전달인자는 고정되어있지 않고, 호출할 때 마다 수시로 변하는 값이기 때문에 변수가 아닌 값으로 정의합니다. function sum(a,b) { return a+b; } sum(1, 2) 위에서 a와 b는 매개변수이고, 1과 2는 전달인자이다.

Hoisiting이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var, let, const, 선언적함수, class가 대표적으로 호이스팅되는 것들입니다. 이때 const, let, class는 TDZ의 영향을 받습니다. TDZ란 Temporal Dead Zone으로 const, let, class가 호이스팅 시 초기화되지않기 때문에 갖는 일시적 사각지대입니다. // var var->AllocateTo(VariableLocation::PARAMETER, index); // const VariableProxy* proxy = DeclareBoundVariable(local_name, VariableMode::kConst, pos); proxy->var()->set_..

Restful API란? REST란? Representational State Transfer의 약자로 자원을 이름으로 구분하여 자원의 상태를 주고 받는 모든것을 의미 HTTP URI를 통해 자원을 명시하고 HTTP Method(POST, GET, PUT, DELETE, PATCH)를 통해 해당 자원에 대한 CRUD를 적용하는 것을 의미 CRUD란? Create(POST), Read(GET), Update(PUT, PATCH), Delete(DELETE)를 일걷는 말로 대부분의 소프트웨어가 가지는 기본 데이터 처리기능을 의미한다. REST API란? REST의 원리를 따르는 API들을 의미합니다. 올바르게 설계하기 위해서는 규칙을 지켜야합니다. URI는 동사보다 명사를, 대문자보다는 소문자를 사용해야한다..