![]()
객체 리터럴 개발하다 보면 비슷한 객체를 여러 개 만들어야 하는 경우 생김 예를 들어 회원, 상품 등.. 그럴 때 쓸 수 있는 것이 바로 생성자 함수 객체에 대한 개념 잘 잡고 있어야 이후 프로토타입, 상속, 클래스에 대해 학습할 수 있음 이해 안 되는 부분 있으면 꼭 복습하기! let user = { name: 'Mike', age: 30, }; 생성자 함수 생성자 함수는 보통 첫 글자를 대문자로 User라는 함수를 만들고 이름과 나이를 인자로 받아 this에 넣어주고 있음 그리고 new 연산자를 사용해 함수를 호출 각각 다른 변수명을 이용해 함수를 호출 전달하는 값도 각각 다르게 전달했음 생성자 함수는 붕어빵 틀이나 와플 팬과 비슷한 역할 필요한 재료들을 넣고 찍어주는 개념(여기에서는 이름, 나이) ..
![]()
let과 const는 ES6부터 생겼다. 그 이전에는 var를 사용했다. var와 let은 크게 다르지 않다. 둘을 바꿔 사용해도 문제가 생기지 않는다. 그런데 var는 한번 선언된 변수를 다시 선언할 수 있다. // var는 한번 선언된 변수를 또 선언할 수 있다. var name = 'Mike'; console.log(name); // "Mike" var name = 'Jane'; console.log(name); // "Jane" // 같은 상황에서 let은 에러가 발생한다. let name = 'Mike'; console.log(name); // "Mike" let name = 'Jane'; console.log(name); // SyntaxError // var는 선언하기 전에 사용할 수 있다...
![]()
Generator 함수의 실행을 중간에 멈췄다가 재개할 수 있는 독특한 기능 Generator 함수 실행하면 Generator 객체가 반환됨 Generator 객체는 next() 메서드가 있음 function* fn() { console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return 'finish'; } const a = fn(); // 이렇게 Generator 함수 실행하면 Generator 객체만 반환되고 함수 본문 코드는 실행되지 않음 console.log(a); // fn {} console.log(a.next()); // 1 // {value: 1, done: false} conso..
![]()
async async/await을 사용하면 Promise에 then 메서드를 chain 형식으로 호출하는 것보다 가독성이 향상된다. // 함수 앞에 async를 붙이면 항상 Promise를 반환한다. async function getName() { return 'Mike'; } console.log(getName()); // Promise {: 'Mike'} // 그래서 함수를 호출하고 then을 사용할 수가 있다. async function getName() { return 'Mike'; } getName().then((name) => { console.log(name); // "Mike" }); // 만약에 여기서 반환값(return)이 Promise면 해당 값을 그대로 사용한다. async func..
![]()
const user = { name: 'Mike', }; console.log(user.name); // "Mike" console.log(user.hasOwnProperty('name')); // true console.log(user.hasOwnProperty('age')); // false 상속 const car = { wheels: 4, drive() { console.log('drive..'); }, }; const bmw = { color: 'red', navigation: 1, }; const benz = { color: 'black', }; const audi = { color: 'blue', }; bmw.__proto__ = car; const x5 = { color: 'white', n..
![]()
Class ES6에 추가된 스펙 new를 통해 호출했을 때, 내부에서 정의된 내용으로 객체를 생성하는 것은 동일 일단 class라는 키워드를 사용하고, 내부에 constructor가 있음 constructor는 객체를 만들어 주는 생성자 메서드 new를 통해 생성하면 자동 실행 const User = function (name, age) { this.name = name; this.age = age; this.showName = function () { console.log(this.name); }; }; const mike = new User("Mike", 30); class User2 { constructor(name, age) { this.name = name; this.age = age; } //..
![]()
setTimeout 일정 시간이 지난 후 함수를 실행한다. function fn() { console.log('3초'); } setTimeout(fn, 3000); // 3000 = 3s // 이 코드는 3초 후에 로그를 찍어줌 setTimeout(function () { console.log('3초'); }, 3000); // 위 코드와 동일 const tId = function showName(name) { console.log(name); }; setTimeout(showName, 3000, 'Mike'); // setTimeout(함수, 시간, 인수); clearTimeout(tId); // 예정된 시간을 없애기 // 3초가 지나기 전에 이 코드가 실행되므로 아무 일도 일어나지 않음 setInte..
![]()
인수 전달 function showName(name) { console.log(name); } showName('Mike'); // 'Mike' showName('Mike', 'Tom'); // 'Mike' // 자바스크립트에서 함수에 넘겨주는 인수의 개수는 제약 없음 // 인수 개수 정해놓고 함수 만들어도 실제 호출할 때 정확히 그 개수 맞출 필요도 없음 showName(); // undefined => 이렇게 아무것도 전달하지 않아도 작동되긴 함 arguments 함수로 넘어온 모든 인수에 접근 함수 내에서 이용 가능한 지역 변수 length / index 배열 아니고 Array 형태의 객체 배열의 내장 메서드 없음(forEach, map 사용 불가능) function showName(name) { ..
![]()
배열 구조 분해 let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 1 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; // let user1 = users[0]; // let user2 = users[1]; // let user3 = users[2]; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' let str = 'Mike-Tom-Jane'; let [user1, user2, user3] = str.split('-'); console.log(user1);..
![]()
arr.sort() 배열 재정렬, 배열 자체가 변경되니 주의 인수로 정렬 로직을 담은 함수를 받음 let arr = [1, 5, 4, 2, 3]; arr.sort(); console.log(arr); // (5) [1, 2, 3, 4, 5] let arr = ['a', 'c', 'd', 'e', 'b']; arr.sort(); console.log(arr); // (5) ['a', 'b', 'c', 'd', 'e'] let arr = [27, 8, 5, 13]; arr.sort(); console.log(arr); // (4) [13, 27, 5, 8] let arr = [27, 8, 5, 13]; arr.sort((a, b) => { console.log(a, b); return a - b; // 8 ..
![]()
Array push() // 뒤에 삽입 pop() // 삭제 unshift() // 앞에 삽입 shift() // 앞에 삭제 arr.splice(n, m, x) n번째 요소부터 m개를 지운다. x로 교체할 수도 있다. let arr = [1, 2, 3, 4, 5]; arr.splice(1, 2); console.log(arr); // [1, 4, 5] let arr = [1, 2, 3, 4, 5]; arr.splice(1, 3, 100, 200); console.log(arr); // [1, 100, 200, 5] let arr = ["나는", "철수", "입니다"]; arr.splice(1, 0, "대한민국", "소방관"); // ["나는", "대한민국", "소방관", "철수", "입니다"] arr.s..
![]()
에러 코드 git pull 시도 중 다음과 같은 오류가 발생했다. 원인은 git pull을 통해 가져오려는 코드와 현재 로컬 컴퓨터의 코드가 서로 충돌하고 있기 때문이었다. 해결 방법 다음 명령어를 통해 git stash를 시도했다. stash란 사전적 의미로 뭔가를 안전한 곳에 숨기는 것이다. git stash는 기능적인 측면에서 로컬 컴퓨터의 변경 사항을 임시로 저장해준다. git stash && git pull origin master && git stash pop git stash 이후 다시 git pull을 시도하자 파일과 코드 들이 정상적으로 병합되었다.
![]()
Footer 생성 넷플릭스 대한민국 넷플릭스 소개 고객 센터 미디어 센터 이용 약관 개인 정보 회사 정보 문의하기 법적 고지 Netflix Rights Reserved. Style Component 불러오기 import styled from 'styled-components'; const FooterContainer = styled.div` display: flex; justify-content: center; align-items: center; padding: 40px 0; border-top: 1px solid rgb(25, 25, 25); width: 100%; position: relative; z-index: 100; @media (max-width: 769px) { padding: 20px ..
![]()
VS Code에서 작업 도중 갑자기 탭이 하나만 켜지는 경우가 생길 때가 종종 있다. 일반적으로는 위 단축키를 입력하면 쉽게 해결된다. 이 방법이 안 먹힌다면 다음 사진 참고. cmd + ctrl + w Settings(Cmd + , )로 이동한 뒤 검색창에 'Enable Preview'를 입력한다. 그리고 'Workbench > Editor: Enable Preview'의 체크된 부분을 해제한다. 파일 프리뷰 모드를 끄는 것이다. 문제가 해결되어 이제 여러 개의 탭이 동시에 열린다.
![]()
스네이크 표기법(Snake Case) 띄어쓰기를 언더바(_)로 표기한다. number_of_donuts = 34 fave_phrase = "Hello World" 케밥 표기법(Kebab Case) 띄어쓰기를 대시(-)로 표기한다. number-of-donuts = 34 fave-phrase = "Hello World" 카멜 표기법(Camel Case) 첫 번째 단어는 소문자로, 두 번째 단어부터 첫 글자를 대문자로 표기한다. numberOfDonuts = 34 favePhrase = "Hello World" 파스칼 표기법(Pascal Case) 첫 번째 단어부터 첫 글자를 대문자로 표기한다. NumberOfDonuts = 34 FavePhrase = "Hello World"
![]()
에러 코드 npm run start 명령어 실행 중 다음과 같은 오류 발생했다. 해결 방법 App.js 폴더에 React를 임포트했다. import React from 'react';
![]()
에러 코드 라이브러리를 설치하던 도중 치명적인 결함이 생겨 node 및 npm 전체를 삭제하고 다시 설치했다. 삭제와 설치까지는 정상적으로 진행되었는데 brew link node 명령어를 실행하던 도중 다음과 같은 오류가 발생했다. 해결 방법 구글링 결과 이 명령어를 써보라는 의견이 많았지만 내 경우에는 이 방법이 통하지 않았다. sudo chown -R [사용자명] /usr/local/share/doc/node/ 다시 한번 검색한 결과 다음 명령어를 발견해 터미널에 입력했다. 그러자 노드 링크에 성공했다. sudo chown -R $(whoami) $(brew --prefix)/*
![]()
에러 코드 프로젝트를 시작하는 과정에서 "Git Repository에 활성 변화가 너무 많습니다. Git 기능의 하위 집합만 사용하도록 설정됩니다."라는 오류가 떴다. 원인은 git init 명령어가 유저 폴더 안에서 실행되었기 때문이다. 그래서 Git이 내 메인 디렉토리를 포함한 하위 디렉토리의 모든 파일들을 추적하려고 시도하고 있다는 것. 이 경우 '.git' 폴더를 삭제해야 한다. 해결 방법 [Macintosh HD - 사용자(Users) - 사용자 이름(your_usename)]으로 이동 숨겨진 폴더 표시(단축키 shift +command + . ) '.git' 폴더 삭제 원하는 장소에 새로운 폴더 만들어서 git init 명령어 실행
![]()
Memoization 메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환해 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술이다. function Component({ a, b }) { const result = compute(a, b); return {result}; } 컴포넌트 내의 compute 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는 데 오랜 시간이 걸린다. 이럴 때 컴포넌트가 계속 리렌더링되면 연산을 계속 수행하는 데 오랜 시간이 걸려 성능에 안 좋은 영향을 미치게 되며 UI 지연 현상도 일어나게 된다. 이러한 현상을 해결해주기 위해 사용하는 것이 useMemo이다. compute 함수에 넘겨주는 a, b의 값..
![]()
VS Code에서 단축어로 함수형 컴포넌트가 간단히 생성할 수 있다. 사용하려면 ES7+ React/Redux/React-Native snippets 익스텐션이 필요하다. rafce
