오늘 스탠다드반 강의 직후, 튜터님이 질문을 내고 참여 사람들 중 핀볼을 돌려 랜덤으로 세 명이 대답한 후, 맞추면 상품을 주는 퀴즈 실습 세션 가 진행되었다. Next.js를 공부하면서 희미하게 알고 있던 점을 콕콕 집어주는 내용이 도움이 많이 되어서 블로그에 정리해 두려고 한다. *모범 답변은 수강생들의 답변을 총정리하여 재구성함. 1. 라이브러리와 프레임워크의 차이는 무엇이고 어떤 장단점이 있나요? 라이브러리(ex.리액트)는 제어권이 개발자에게 있고, 프레임워크(ex.넥스트)는 제어권을 프레임워크가 가지고 있다. 라이브러리는 개발자가 필요할 때 호출하여 사용하는 도구 모음집이고, 가볍다는 장점이 있지만 직접 (react-router-dom과 같은 것들) 가져와야 한다. 프레임워크는 따로 사용 시..
call 메서드가 this를 명시적으로 바인딩하는 방법 'this'바인딩 이해하기 - 'this'는 함수가 어떻게 호출되는지에 따라 다른 값을 가진다. 'call'메서드는 함수 호출 시 'this'를 특정 값으로 설정할 수 있게 해 준다. 'call'메서드 사용function sayHello(){ console.log('Hello, my name is ${this.name}');}const person = { name = 'John'};sayHello.call(person); //Hello, my name is John위 코드에서 'sayHello' 함수는 'this.name'을 출력한다. 'call' 메서드의 동작 원리1. 함수 정의 : function sayHello(){ console.log('..
콜백 함수 -> 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행한다. (알아서) 콜백함수를 넘겨 받은 코드가 가지는 제어권1. 호출 시점 var count = 0;//timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고 있는지'//알려주는 id값var timer = setInterval(function() { console.log(count); if(++count >4) clearInterval(timer); // count 변수가 4보다 커지면 clearInterval 함수를 사용하여 타이머를 중지. }, 300); // 300밀리초(0.3초)마다 익명 함수를 실..
배열여러 개의 값을 순서대로 저장하는 리스트 형태의 데이터 구조 배열 수정하기let fruits = ['Apple', 'Banana', 'Cherry'];console.log(fruits); // ['Apple', 'Banana', 'Cherry']//배열 요소 수정 fruits[1] = 'Blueberry';console.log(fruits); // ['Apple', 'Blueberry', 'Cherry'] 배열 복사하기 > 배열을 복사할 때는 얕은 복사(shallow copy)와 깊은 복사(deep copy) 두 가지 방법이 있다. 얕은 복사(Shallow copy) - 배열의 참조를 복사하는 것으로, 원본 배열과 복사된 배열이 동일한 객체를 참조한다. 따라서 한 배열을 수정하면 다른 배열에도 영향을..
- 상수 : 변수에 할당되지만 프로그램 실행 중에는 변경하거나 수정할 수 없는 값. 시간이 지나도 변하지 않는 고정 값 또는 값을 나타내는 데 사용된다. - 변수 : 메모리에 저장한다. 저장한 값을 읽어들여서 재사용한다. 변수의 5가지 주요 개념1. 변수 이름 : 저장된 값의 고유 이름. 항상 키워드 뒤에 온다. 이름은 무엇이든 상관 없다.2. 변수 값 : 변수에 저장된 값 "Hello World"3. 변수 할당 : 변수에 값을 저장하는 행위(myVar = "Hello World")4. 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위. var라는 키워드를 이용해서 myVar라는 변수를 반들어줘. (var myvar)5. 변수 참조 : 변수에 할당된 값을 읽어오는 것. a+b > a,b를 참조했..
1. HTML(Hyper Text Markup Language) 1-1 Hyper Text : 일반적인 텍스트의 순차적 접근법을 뛰어넘는 비순차적 접근법. 다른 페이지로 이동하는 것과, 같은 페이지 내의 다른 데이터로 이동하는 것 등이 포함된다. 1-2 Markup Language : 웹 브라우저에게 내 컨텐츠를 어떻게 표현해야 하는지 명령하는 언어. 웹 문서 내의 데이터들을 구조적으로 표시하여 정보를 전달하는 언.어. > 웹사이트에서 화면에 표시되는 정보. 2. CSS(Cascading Style Sheets) > 태그들에 디자인을 입혀주는 것. 3. Backend > 사용자가 볼 수 없는 영역인 데이터베이스나 서버를 관리하는 것. 4. Frontend > 웹 사이트를 방문했을 때 경험..
1. JQuery 사용하기 -JQuery란? > HTML의 요소들을 조작하는 Javascript를 미리 더 쉽게 작성해둔 것. (라이브러리) > 쓰기 전에 임포트(미리 작성된 javascript 코드를 가져오는 것)가 필요하다. -JQuery CDN을 사용하여 라이브러리를 호스팅한다. ( 사이에 아래 코드를 넣는다.) -JQuery 사용법 >"가리켜야"조작할 수 있다! - ex)특정 인풋박스의 값을 -> 가져와줘! 특정 div를 -> 안보이게 해줘! > JQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/..등을 가리키게 된다.(css 할 때 class를 썼던 것 처럼)