Javascript 공부123 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. 200108(수) : 프로토타입, 객체지향 프로그래밍 오늘 배운 내용은 프토토타입과 객체지향 프로그래밍이다. 본 글에서는 객체, 프로토타입 등에 대해서 공부한 내용을 정리하려 한다. 1. 객체란 무엇인가? 흔히 '자바스크립트에서는 모든 것이 객체다'라는 말을 하는데, 명백하게 사실과 다른 말이다. string, number, boolean, null, undefined와 같은 단순 원시 타입은 객체가 아니다. 다만 함수와 배열의 경우에는 '복합 원시 타입'이라는 객체의 하위 타입의 한 종류이다. # 내장 객체 내장 객체 또한 객체의 하위 타입이다. 이들은 자바스크립트의 타입 중 하나처럼 보이지만 사실은 단지 자바스크립트에 내장된 함수일 뿐이고, 각각 생성자 함수로 사용되어서 주어진 하위 타입의 새로운 객체를 생성하는 역할을 한다. String, Number.. 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. 리액트 라우터(React Router)로 라우팅하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 리액트에서 라우팅하기 리액트로 구현하는 웹페이지는 대부분 Single Page Application, 즉 HTML 파일은 하나만 가지고 있고, 나머지는 자바스크립트로 화면을 통제하여 서버와의 요청/응답 주고받기를 줄여 웹페이지의 로딩 속도를 줄이는 방식을 취하고 있다. 속도 측면에서는 SPA가 장점이 뚜렷하지만, 페이지 간 이동 시 주소의 문제가 발생한다. 예를 들면, 원래는 페이지에 따라서 url link가 달라지게 된다. www.soldonii... 2019. 12. 14. 리액트의 생명 주기(LifeCycle) 메소드 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 생명 주기의 1단계 - 생성(Mounting) 생성 단계는 컴포넌트가 constructor에 의해 초기화되고, rendering 과정을 거쳐 DOM에 최초로 그려지는 단계이다. 이 곳의 주요한 생명 주기 메소드는 componentDidMount가 있다. 생성 단계의 흐름을 순차적으로 정리해보자. 1. 컴포넌트의 base state가 최초로 constructor에 의해서 초기화 된다. 2. 초기화가 완료되면 render() 메소드가 실행된다. rend.. 2019. 12. 12. 이전 1 2 3 4 5 6 ··· 14 다음
