본문 바로가기
  • soldonii's devlog

JavaScript46

200116(목) : Property Descriptor 오늘은 Property Descriptor에 대해서 알아보려고 한다. 이에 대해서 알아보는 이유는 바닐라코딩에서 알고리즘 문제를 풀 때, String.prototype.isAnagram 이런식으로 Native Prototype에 특정 메소드를 추가하는 방식으로 문제를 풀었는데, Native Prototype에 특정 메소드를 임의로 추가할 경우 해당 메소드가 enumerable하게 만드는 것은 bad practice이기 때문에 수정해보라고 하셨기 때문이다. 그래서 내가 구현한 메소드의 enumerable 프로퍼티를 false로 만들면서 공부한 내용을 정리한다. 본 글을 이해하기 위해 알고 있어야 하는 메소드는 Object.getOwnPropertyDescriptor()와 Object.defineProper.. 2020. 1. 16.
200115(수) : import, export 이번 글에서는 import, export에 대해서 정리해보려고 한다. 바닐라코딩에서 과제나 알고리즘 문제를 풀다보면 제발 import, export에 대해서 공부하고 이해한 후에 문제를 풀어달라는 ken님의 간곡한 요청을 종종 볼 수 있다... 내 예상으로는 5주차부터는 react를 배우게 되는데, 우선 React.Component를 불러오는 것부터 시작해서 직접 만든 컴포넌트를 다른 컴포넌트에게 넘겨줄 일이 빈번하게 생기기 때문에 미리 알아두라는 의미가 아닐까 싶다. 물론 리액트 뿐만 아니라 여기저기에서 무수히 쓰이긴 하지만..! 아무튼 mdn 문서를 읽어보니 export 부터 정리하는게 이해하는데 순서가 맞을 것 같다. 1. export export 명령어는 '자바스크립트 모듈에서 함수, 객체, 원시.. 2020. 1. 15.
200114(화) : var, let, const 차이 1. var, let, const의 차이이미 기존에 작성한 글이 있지만, 명확하게 공부하기 위해서 한 번 더 조사한 자료를 토대로 정리한다. var, let, const의 차이를 정확하게 이해하기 위해서는 호이스팅(hoisting), 스코프(scope)에 대해 정확하게 이해하고 있어야 한다. 아래 링크에서 해당 글들에 대한 내용을 확인할 수 있다. 호이스팅(hoisting)을 정리한 글스코프(scope)를 정리한 글 1) Function scope(var) vs. Block Scope(let, const)결론적으로 var은 함수 스코프를 따르고, let과 const는 블록 스코프를 따른다.즉 var로 변수를 선언할 경우, 해당 변수가 선언된 함수가 종료되기 전까지 var로 선언된 변수는 유효하다.따라서 .. 2020. 1. 14.
200110(금) : 프로토타입 오늘은 프로토타입에 대해 정리한다. 1. 프로토타입 # [[Prototype]] 자바스크립트 객체는 [[Prototype]]이라는 내부 프로퍼티를 가지고 있으며, 이 녀석은 다른 객체를 참조하는 단순한 레퍼런스로 사용된다. [[Prototype]] 링크는 현재 객체(obj)에서 찾고자 하는 프로퍼티(a)를 찾지 못할 경우, obj의 프로토타입 링크를 통해 프로토타입 체인을 거슬러 올라가면서 프로퍼티 a를 수색할 수 있도록 한다. 이 연쇄를 따라 올라가면서 프로퍼티 a를 찾고, 최상단에서도 찾지 못할 경우 undefined를 리턴하게 된다. 또한 for ... in 루프로 객체를 순회할 때에도 [[Prototype]] 링크를 통해 객체 연쇄를 전부 찾는다. 모든 자바스크립트 객체는 최상단의 Object.p.. 2020. 1. 10.
200109(목) : 부동소수점, git 경고메세지, 배열 중복 제거 등 1. 0.1 + 0.2 === 0.3가 false인 이유 자바스크립트를 포함한 여러 프로그래밍 언어들에서 동일한 문제가 발생한다. 이는 프로그래밍 언어와는 달리 컴퓨터는 2진법만을 사용하기 때문이다. 자바스크립트에서는 숫자를 다룰 때, '64비트 IEEE 754 배정도(double-precision) 부동소수점 숫자 형식'에 따라서 숫자를 컴퓨터가 이해할 수 있는 2진법으로 변환한 후, 그 결과를 다시 10진법을 바꾸어서 전달한다. 이 때 컴퓨터의 메모리는 무한하지 않은 것에 비해, 부동소수점은 무한한 숫자이기 때문에 컴퓨터는 이를 100% 정확하게 표현할 수가 없다. 따라서 컴퓨터는 무한한 숫자와 가장 가까운 근사치를 대신 돌려주게 된다. 조금 더 살펴보자면.. 10진법은 분모의 소인수가 2 또는 5로.. 2020. 1. 9.
200106(월) : 비동기, 고차함수, 일급객체, V8 엔진 등 이번 주는 비동기 프로그래밍에 대해서 집중적으로 배워보는 한 주이다. 그런데 비동기에 대해서 배우고 실습하기 전에 우선적으로 고차함수, 일차함수와 일급 객체 등의 개념을 가르쳐주셨다. 그래서 이것이 비동기 프로그래밍과 어떤 연관이 있는 것인지 이해한 나름대로 정리해보고자 한다. 우선 이 개념들과 비동기의 연관성을 이해하기 위해서는 저 용어들이 무엇을 의미하는지부터 알아야 한다. 1. 일급 객체와 고차 함수 Stack Overflow의 한 글에서 아래와 같이 이야기하고 있다. In short, it means there are no restrictions on the object's use. It's the same as any other object. A first class object is an en.. 2020. 1. 7.
리액트로 google 로그인 추가하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Google Authentication 추가하기 리액트에 google 로그인 기능을 추가하려면 우선 firebase 패키지를 설치해주어야 한다. 프로젝트 폴더에 들어간 후, yarn add firebase 로 해당 패키지를 추가해준다. 이후 아래처럼 새로운 파일을 생성한 후 importing한다. // firebase.utils.js 파일 새롭게 생성하기 import firebase from 'firebase/app'; import 'firebase.. 2019. 12. 17.
withRouting()으로 프로퍼티 전달하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. withRouting 앞선 글에서 props는 Route 컴포넌트의 프로퍼티로 전달된 첫번째 컴포넌트만 받을 수 있었다. 현재 만들던 앱의 구조를 살펴보면, Route 컴포넌트는 HomePage 컴포넌트를 렌더링하고 있다. 따라서 HomePage 컴포넌트 내부에서는 match, history, location 같은 객체를 이용할 수 있지만 HomePage 컴포넌트 내부에서 리턴하고 있는 Directory 컴포넌트, MenuItem 컴포넌트 등은 위 .. 2019. 12. 16.
리액트 라우터(React Router)로 컴포넌트에 프로퍼티 전달하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Router를 통해 각 컴포넌트에 전달되는 주요 프로퍼티 import React from 'react'; import { Route, Switch } from 'react-router-dom'; // import HomePage from './pages/homepages/homepage.component'; import './App.css'; const HomePage = (props) => { console.log(props); // 확인해보자. .. 2019. 12. 15.

티스토리툴바