Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned 구조 분해 할당 - 자바스크립트 표현식 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. (출처: MDN) 구문 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b..

❤️‍🔥TIL : Today I Learned 배열 메서드 forEach() map() filter() reduce() forEach() 오직 Array 배열에서만 사용 가능한 메서드 (ES6부터는 Map, Set 등에서도 지원) forEach 구문의 인자로 callback 함수를 등록할 수 있으며, 배열의 각 요소들이 반복될 때 callback 함수가 호출 callback 함수에서 배열 요소의 인덱스와 값에 접근가능 (아래 코드에서는 item 에 해당) array의 길이(length)가 5라면 1, 2, 3, 4, 5 까지 순서대로, 하나씩 접근하여 반환 const items = ['사과', '바나나', '복숭아']; items.forEach(function(item) { console.log(item..

❤️‍🔥TIL : Today I Learned yarn vs npm 우선 둘은 가장 활발하게 사용되는 자바스크립트 런타임 환경인 node.js의 프로젝트 '패키지 관리자' 이다 yarn yarn 설치 npm npm 설치 둘의 차이점 yarn 페이스북에서 개발한 패키지 관리자 이며, 리액트 와 같은 프로젝트를 진행하며 격는 어려움을 해결하기 위해 개발하였고, npm 레지스트리와 호환 하면서 속도, 안정성 측면에서 npm 보다 향상 되었다. 페이스북 아티클 https://engineering.fb.com/2016/10/11/web/yarn-a-new-package-manager-for-javascript/ Yarn: A new package manager for JavaScript In the JavaScr..

❤️‍🔥WIL: Weekly I Learned 티스토리 포스팅 = 매일 TIL 일지 fanpick 프로젝트 = 발표 및 KTP 회고 모던 자바스크립트 = 기초, 브라우저 정독 JS 심화 = 강의 3회 정주행 Weekly review 티스토리 포스팅 내용에 들어가는 내용에 핵심적인 부분만 담고 나머지 공부한 내용은 따로 포스팅 해야겠다 다른 팀원들의 TIL 을 보고 난 후 현재까지 작성했던 TIL 은 내용모두를 상세하게 적어 효율적인 공부를 하지 않는 것 같다고 느꼈다 TIL 은 오늘 공부한 내용의 핵심만을 요약하여 작성하고 해당 하는 카테고리의 키워드 중심으로 배운 내용을 코드에 작업하는 방법, 작업 내용을 중심으로 작성 하도록 시도 해야겠다! WIL 또한 LEARN 이기에 배운 내용적인 부분을 다시한번..

❤️‍🔥TIL : Today I Learned 명시적 this 바인딩 상황에 따라 달라지는 this 메서드 내부 함수에서 this 우회 명시적 this 바인딩 상황에 따라 달라지는 this this는 실행 컨텍스트가 생성될 때 결정(this binding) === this는 함수를 호출할 때 결정하며 전역 공간에서 this === window // 전역 공간에서의 this console.log(this); console.log(window); console.log(this === window); //true 함수 호출시 this === window ex) function(); // 함수와 메서드 호출시 각각 this 는 각각 다르게 할당 var func = function (x) { console.log..

❤️‍🔥TIL : Today I Learned 실행 컨텍스트 실행 컨텍스트란? VariablEnvironment 와 LexicalEnvironment [ VE, LE ] LexicalEnvironment(1) - EnvironmentRecord(= record)와 호이스팅 OuterEnvironmentReference(= outer) 실행 컨텍스트란 실행할 코드에 환경 정보를 제공하는 객체이다! 실행컨텍스트를 모아 콜스택에서 처리하게 된다! 콜스택에서는 가장 위에 쌓인 컨텍스트와 관련된 코드를 실행하는 방법이며, 코드의 환경 및 순서를 보장한다 컨텍스트 구성 방법 전역 공간 > eval( ) 함수 > 함수(우리가 실행컨텍스트를 구성하는 방법) 컨텍스트 구성 예시 // ---- 1번 var a = 1; f..

❤️‍🔥TIL : Today I Learned 데이터 타입 데이터 타입의 종류 데이터 할당 기본형 데이터와 참조형 데이터 불변객체 - 얕은 복사, 깊은 복사 undefined 와 null 데이터 타입의 종류 (이미지 출처 : https://velog.io/@imjkim49/자바스크립트-데이터-타입-정리) 기본형과 참조형의 구분 기준 복제의 방식 기본형(Primitive type) : 값이 담긴 주소값을 복제 참조형(Reference type) : 주소값들의 묶음을 가리키는 주소값을 복제 불변의 여부 : 기본형은 불변형이며, 참조형은 가변형이다! 식별자, 변수 let abc = 10; 식별자 - 위에서 선언한 abc 라는 변수명 변수 - abc라는 변수명에 할당한 10 이라는 숫자 데이터 데이터 할당 //..

Read API 게시글을 조회하고, 보여주는 함수이다 우선은 게시글을 클릭했을 때 우리가 가진 데이터를 보여주려면 id 가 필요했다 id 안에 게시글이 객체형태로 데이터가 들어있기 때문이다 우선 게시글에 삽입 될 HTML 태그이다 /* ...innerHTML */ fanPickList 객체가 가지고있는 id 데이터를 태그 id에 넣어주고 onclick 으로 전달되도록 구현했다. onclick="sendId(${fanPickList.id})" 처음에는 위 처럼 해당아이디를 바로 클릭하면 전달 할 수 있게 작성했으나, 레퍼런스 에러가 나서 수정했다 // 클릭한 카드의 id 받아적는 변수 let selectId = ""; // 함수가 실행 될 때마다, 해당게시글 id 를 update export functio..