I'm a Fig, Not a Pig

1. JSON.parse(), response.json() 차이점을 설명해주세요 JSON.parse()와 response.json()은 둘 다 JSON 데이터를 다루는 데 사용되지만, 사용 환경과 역할에 차이가 있다. 1. JSON.parse() 주로 문자열 형태의 JSON 데이터를 파싱하는 데 사용된다. 입력으로 문자열을 받아 JavaScript 객체로 변환한다. 클라이언트 측 코드에서 JSON 데이터의 문자열 표현을 JavaScript 객체로 변환하는 데 사용된다. 예를 들어, API에서 가져온 문자열 데이터나 로컬 스토리지에서 가져온 JSON 문자열을 파싱할 때 사용한다. const jsonString = '{"name": "Alice", "age": 30}'; const jsonObject = J..

목차 1. ref prop 2. useRef 3. 예제 1. ref prop JavaScript 를 사용 할 때는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생하는데 이 때 ref라는 것을 이용한다. 사용 예시는 크게 두 가지로 나눌 수 있다. 1. DOM 요소 참조 useRef를 통해 특정 DOM 요소를 참조하여 직접 제어할 수 있다. 2. 변수 참조 useRef를 통해 변수의 값을 렌더링 사이클과 관계없이 저장하고 관리할 수 있다. 이렇게 하면 렌더링이 발생해도 값은 그대로 유지되고 값의 변경이 컴포넌트의 리렌더링을 유..

1. 제어 컴포넌트 인풋 태그의 value 속성을 지정하고 사용하는 컴포넌트이다. 리액트에서 인풋의 값을 제어하는 경우로 리액트에서 지정한 값과 실제 인풋 value 의 값이 항상 같다. 이렇게 하면 1. 값을 예측하기가 쉽고 2. 인풋에 쓰는 값을 여러 군데서 쉽게 바꿀 수 있다는 장점이 있어서 리액트에서 권장하는 방법이다. 이때 State냐 Prop이냐는 중요하지 않고 리액트로 value 를 지정한다는 것이 핵심이다. 아래 두 경우 모두 제어 컴포넌트이다. function TripSearchForm() { const [values, setValues] = useState({ location: 'Seoul', checkIn: '2022-01-01', checkOut: '2022-01-02', }) co..

1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 답: 3 동기 실행은 코드가 순차적으로 실행되는 방식이다. console.log("1st"); console.log("2nd"); console.log("3rd"); // '1st' // '2nd' // '3rd' 위와 같은 코드를 작성하고 실행해 보면 예상했던 것처럼 1st, 2nd, 3rd가 차례대로 찍히는 것을 알 수 있다. 이처럼 코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리 (Synchronous)라..

1. 빌드, 트랜스파일링, 번들링 각 용어에 대해 설명해주세요 1) 빌드란 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정을 말한다. 대부분은 원하는 프로그램을 만들기 위해 고수준 언어(C, JAVA 등)를 사용해서 코딩을 한다. 하지만 컴퓨터는 0과 1이라는 숫자밖에 모르기 때문에 우리가 사용한 고수준 언어를 컴퓨터는 해석하지 못한다. 따라서 우리가 원하는 프로그램을 만들기 위해서는 우리가 작성한 언어를 컴퓨터가 이해할 수 있는 기계어로 번역해줘야 한다. 즉, 우리가 사용하는 고수준 언어를 기계어로 번역해서 실행 파일을 만들어내는 과정을 '빌드'라고 한다.(빌드의 단계 중 컴파일이 포함되어 있기 때문에 컴파일은 빌드의 부분집합이라고 할 수 있다.) 2) 트랜스파일링 트랜스파일..

1. 리액트에서 명시적으로 key를 지정해야하는 이유를 설명해주세요. Key는 React에서 element list를 만들 때 포함해야 하는 문자열 속성으로, 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 주의할 점은 key 값을 배열의 index로 지정할 경우, 배열의 순서가 바뀌면 key도 변경되기 때문에 key는 id와 같은 고유한 속성을 넣어주어야 한다. 2. 리액트가 화면에 페이지를 그리는 과정을 설명해주세요 props나 state가 변경될 때 리렌더링이라는 과정을 통해서 화면에 페이지를 그린다. 만약 상태나 속성값이 변경된 경우, 변경된 값으로 React는 가상의 돔을 그리게 된다. 그린 Virtual DOM과 Real DOM을 비교하여 변경된 사항만 반영하여 해당 내용을 실제..

목차 1. DOM (Document Object Model) 이란? 2. DOM의 문제점 3. Virtual DOM 보통 자바스크립트를 배우면서 자연스럽게 리액트도 배우게 된다. 그럼 리액트를 왜 사용하게 됐냐는 질문을 받으면 뭐라고 답해야 할까? 많은 사람들이 사용하니까, 인기있는 라이브러리니까 등 여러 답변이 있겠지만, 만족스럽지는 못한 답변이라고 생각한다. 그래서 앞으로 리액트의 등장배경, 내부동작들을 정리하며 어떠한 이유에서 리액트가 등장했고, 또 왜 리액트를 사용해야 하는지에 대해 공부하려고 한다. DOM은 HTML, CSS, JS를 익히면서 알게된 개념인데, 리액트에서 Virtual DOM 이라는 개념으로 또 만나게 됐다. Virtual DOM이란 무엇일까? 우선 DOM의 의미부터 살펴보자. ..

원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 따라서 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장 후, 변수가 참조하던 메모리 공간의 주소를 변경한다.(값의 이러한 특성을 불변성 이라 한다) 다음의 예제를 보자. "hello" + "world"; // "helloworld" 위의 예제를 보면 "hello"와 "world"가 결합되어 좌항의 값이 변경되는 것 같이 보인다. 그러나 실제로는 두 문자열을 합친 새로운 값이 생성된다. 때문에 빈번한 원시형 값의 수정으로 인한 성능 저하를 막기 위해서는 버퍼(Buffer)를 사용하는 것이 권장된다. 1. 버퍼(Buffer) Buffer의 영단어 뜻은 완충제, 완화하다 라는 의미이다. 뜻만 보..

이번주 위클리 페이퍼는 주제는 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. HTTP 메소드에 대해 설명해 주세요. 이 두 개다! 두 주제 모두 예전에 한 번 정리한 적이 있어서 수월하게 쓸 수 있겠다 ㅎㅎ 1. 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. 1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말한다. 간단한 예시를 통해 알아보자. Click me! document.getElementById('inner').addEventListener('click', function() { console.log('Inner clicked'); }); document.getElementById('outer').addEventL..

1. 멱등성이란? 수학에서 사용하는 용어에서 유래한 것으로. 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 뜻한다. 2. HTTP Method 의 멱등성 멱등성의 개념은 HTTP 에서도 동일하게 적용될 수 있다. 동일한 요청을 한 번 보내는 것과 여러번 보내는 것이 서로 동일한 효과를 지니고, 서버의 상태도 동일하게 남을 때 해당 HTTP Method가 멱등성을 갖는다고 이야기한다. 멱등성을 따질 때에는 서버의 상태만 바라보면 되며, HTTP 응답 Status는 신경쓰지 않아도 된다. 올바르게 구현된 REST API 의 GET, HEAD, OPTIONS, PUT, DELETE 메소드는 통계 기록(e.g. 게시물 조회수의 증가 등)을 제외하였을 경우 멱등성이 보장된다 어떤 이유로 GET, HEA..