
목차 1. 고차 함수 2. 콜백 함수 일급 객체란? 일급객체란 일반 객체처럼 모든 연산이 가능한 객체를 뜻한다. 보통 변수에 할당, 다른 함수의 전달인자로 전달, 다른 함수의 결과로 리턴 같은 연산을 지원할 때 일급 객체라고 한다. 또한 JavaScript에서 함수는 일급 객체이다. 일급 객체의 특성은 다음과 같다. 함수의 매개변수로 전달이 가능하다 함수의 반환 값으로 전달할 수 있다 할당 명령문을 통해 값을 할당할 수 있다 동일 비교 대상으로 사용할 수 있다 const firstClassObj1 = { name : 'QQ', age : 20 }; // 1) 함수의 매개변수로 전달 ! function func1 (firstClassObj1) { console.log(`name : ${firstClassO..

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. 다음 코드의..
1. URL은 크게 호스트, 패스, 쿼리로 이루어져 있다. https://www.example.com/search?q=apple&category=fruit&page=1 위의 URL에서 쿼리 부분은 어디부터 어디까지인가? 답: 물음표 뒤부터 끝까지 2. 물음표에 들어갈 **서버로 보내는 리퀘스트의 종류**는? 기존 데이터를 조회하는 리퀘스트 - GET 새 데이터를 추가하는 리퀘스트 - ? 기존 데이터를 수정하는 리퀘스트 - PUT 기존 데이터를 삭제하는 리퀘스트 - DELETE 답: POST 3. **상태 코드(Status Code)**에 관한 문제이다. 각 번호에 물음표에 들어갈 상태 코드는 무엇일까? (1) 클라이언트의 리퀘스트가 성공 처리되었음을 의미하는 상태 코드는 ? 번 대 이다. (2) 404 ..

1. 자바스크립트 데이터 타입의 종류 (총 8가지) 답: number string boolean undefined null object symbol bigint 2. 자바스크립트에서 함수는 어떤 형태로 활용이 가능한지 3가지 이상 설명하시오 답: 함수 선언 함수 표현식 객체의 메소드로 활용 콜백 함수로 활용 고차 함수로 활용 // 함수 선언 function sayHi() { console.log('Hi!'); } // 함수 표현식 const sayHi = function () { console.log('Hi!'); }; // 객체의 메소드로 활용 const codeit = { printTitle: function () { console.log('Codeit'); } } // 콜백 함수로 활용 myBtn...

1. arguments 객체에 대해서 설명해주세요. 답: 자바스크립트는 함수를 호출 할 때 arguments 객체가 함수 내부로 전달된다. arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 말한다. 만약 함수의 인자보다 적게 함수를 호출할 경우, 넘겨지지 않은 인자에는 undefined 값이 할당된다. arugments 객체는 유사 배열 객체이기 때문에 배열과 비슷하지만 length 속성만 쓸 수 있고 배열 메서드는 사용할 수 없다. 2. this는 호출에 따라 달라집니다. 아래를 읽고, 어느 객체를 가리키는지 말해주세요. 1) var x = this; console.log(x); 답: 전역객체인 window를 가리킨다. 2) const user = { firstName..

목차 1. innerHTML 2. innerText 3. textContent 4. 정리 매번 찾아보는 셋의 차이점.. 텍스트를 읽어오고 설정할 수 있다는 점이 비슷하지만 조금씩 다른 차이가 있어서 이 차이를 아는게 중요하다. 1. innerHTML 먼저 innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML 마크업을 읽어오거나 설정 할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다. // html 코드와 함께 작성 가능 document.documentElement.innerHTML = "innerHTML" // 스타일 적용 document.documentElement.innerHTML =..

목차 1. Rest Parameter란? 2. Arguments란? 3. Rest Parameter와 Arguments 비교 1. Rest Parameter Rest Parameter 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. 이름 그대로 먼저 선언된 매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당된다. 따라서 Rest parameter는 반드시 마지막 매개변수여야 한다. 다음은 Rest Parameter를 사용해서 전달된 모든 숫자를 더하는 예제이다. function sum(...numbers) { let total = 0; for (let number of numbers) { total += number; } return total; }..

1. 다음 HTML 코드를 보고 문제를 해결해주세요. 음식 햄버거 치킨 피자 나라 한국 일본 미국 영국 (1) 코드에서 1번과 2번의 접근 대상은? const foodList = document.querySelector("#food_list"); const countryList = document.querySelector("#country_list"); // 1번 console.log( foodList.parentElement.children[2].nextElementSibling.children[2] ); // 2번 console.log( countryList.parentElement.firstElementChild.nextElementSibling .children[1] ); 답: 1번: 미국 2번:..

2주차 위클리 페이퍼 쓴게 엊그제 같은데 벌써 3주차라니..!! 시간 넘 빠르다.. 이번주차에는 Git과 인터렉티브 자바스크립트 챕터를 들었다. 특히 Git을 배우면서 여러 커맨드를 실습해봤는데, 검은 바탕에 흰글씨가 좀 익숙해졌달까..?ㅋㅋㅋ 유용한 명령어들도 배울 수 있어서 좋았다. 이번주 위클리 페이퍼 미션은 다음과 같다. Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. Git Flow 브랜치 전략에 대해 설명해 주세요. 1. Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. Git에서 브랜치를 병합하는 방법은 크게 세 가지가 있다. merge commit을 만들며 합치기 Squash and merge 하기 Rebase and merge 하기 ..
- Total
- Today
- Yesterday
- react
- 취업까지달린다
- Target
- map
- 비동기
- hydrationboundary
- innerhtml
- 프론트엔드
- 코드잇스프린트
- rest parameter
- CSS
- 배열
- 중급 프로젝트
- 스프린트프론트엔드6기
- Git
- js
- currentTarget
- 객체
- tanstackquery
- Next.js
- 비제어 컴포넌트
- html
- arguments
- 코드잇 스프린트
- 제어 컴포넌트
- javascript
- 동기
- 유사배열객체
- GitHub
- 리액트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |