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. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 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을 비교하여 변경된 사항만 반영하여 해당 내용을 실제..

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

1. OSI 7계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 국제 표준화 기구(ISO)에서 정의한 네트워크 표준 모델을 말하는데, 여기서 OSI 7계층 중 7계층인 응용계층(Application layer)에 해당하는 웹 프로토콜의 예로는 HTTP(Hypertext Transfer Protocol)가 있다(O,X) 참고링크: https://lxxyeon.tistory.com/155 답: O 2. JSON 객체의 stringify 메소드와 parse 메소드는 각각 (S____ ) 과 (D____ )을 해주기 위해 사용된다. 이 때 괄호 안에 들어갈 말은? 답: Serialize(직렬화), Deserialize(역직렬화) 해설: JSON(JavaScript Object Notation)이란 자바스크립..

1. 를 실행하였을 때, 오류가 일어난다. 오류가 발생하는 이유와 해결 방법에 대해 설명하시오. // 1번 직원 정보 const p1 = fetch('').then((res) => res.json()); // 2번 직원 정보 const p2 = fetch('').then((res) => res.json()); // 3번 직원 정보 const p3 = fetch('').then((res) => res.json()); Promise .all([p1, p2, p3]) .then((results) => { console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보] }); 답: Promise 객체가 하나라도 rejected 상태가 되는 경우에 대비해서 cat..

1. 다음중, 보기의 실행 결과로 올바른 것은? [보기 A] function outer_function() { let outer_variable = "I am outside!"; function inner_function() { let inner_variable = "I am inside!"; console.log(`${inner_variable} ${outer_variable}`); } return inner_function; } let closure_function = outer_function(); closure_function(); [ㄱ] "I am outside! I am inside!" [ㄴ] "I am inside! I am outside!" [ㄷ] "I am outside!" [ㄹ] "I ..

1. 자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요. 얕은 복사와 깊은 복사를 이해하기 위해서는 원시값과 참조값에 대해 알아야 한다. 자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값 Number String Boolean Null Undefined 참초값 Object Symbol 둘의 차이점은 원래의 값과 복사된 값이 서로에게 영향을 미치느냐, 그렇지 않느냐에 따라 나뉜다. 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 (=새로운 메모리 공간에 독립적인 값을 저장)원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다. (아래에서 정리하겠지만 이는 깊은 복사가 된다.) const a = 1; let b = a; b ..

1. ?에 각각 들어가야 하는 코드는? const new = { name: 'request', }; fetch('url', { method: 'POST', body: ?(new), // 자바스크립트 객체를 string 타입의 JSON 데이터로 변환해야 함.(Serialization) }) .then(() => { fetch('url') .then((response) => response.text()) .then((result) => { const users = ?(result); // string 타입의 JSON 데이터를 자바스크립트 객체로 변환해야 함.(Deserialization) console.log(users); }); }); 답: JSON.stringify, JSON.parse 2. 다음 코드의..