전체 글
-
클로저자바스크립트 2021. 9. 4. 17:00
여러 블로그들과 책을 통해 클로저와 관련 개념들을 정리했습니다. 오류가 있을 수 있습니다. 문제 예시 var arr = []; for (var i = 0; i < 3; i++) { arr[i] = function () { return i; }; } for (var j = 0; j < arr.length; j++) { console.log(arr[j]()); } // 결과값 3 3 3 코드 결과값이 0 1 2 로 나올 것이라 생각할 수 있지만 사실 위 코드를 실행하면 결과값이 3 3 3으로 나옵니다. 어떻게 이런 결과가 나왔는지 이해하기 위해 몇 가지 개념들을 알아보겠습니다. 실행 컨텍스트 & 렉시컬 환경 & 렉시컬 스코프 var one = 1; function firstFunc() { var two = ..
-
기능개발알고리즘 2021. 9. 1. 20:57
내 풀이법 문제해석 progresses 배열 내에는 개발의 진도를 엘리먼트로 갖고 있는 일의 양을 확인할 수 있다. speeds의 배열 내 각 index의 엘리먼트에 따라 하루 개발 진도량이 추가된다! 일의 진도가 100에 도달하면 개발은 끝나 배포된다! 즉 배열내에서 삭제됨! 가장 앞의 일이 먼저 끝나야 그 후의 일도 같이 배포 가능하다. ex) [95, 100, 100, 100] 의 상태여도 95가 100에 도달해야 나머지도 전부 배포가능하다 리턴 값은 한번 배포할 때 몇개의 개발 수가 배포되는지 배열로 나타내면 된다. 내가 생각한 풀이법 map 함수를 사용하여 하루에 progressess 배열의 개발진도량을 항상 체크한다 progresses의 첫번째 배열이 100이상이면 개발진도량 전부 확인하여 완..
-
프로토타입 체인 & toString()자바스크립트 2021. 8. 31. 17:03
MDN 페이지를 통해 공부한 것을 정리한 내용입니다. 프로토타입 체인 자바스크립트는 프로타입 기반 언어라고 불리우는데 그 이유는 프로토타입 방식을 통해 서로 간에 상속하기 때문입니다. 모든 객체들은 메소드와 속성을 상속받기 위해 프로토타입 객체를 가지며, 또 해당 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받아 서로 간의 체인을 이루어져 있습니다. 예를 보겠습니다. function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } var dohpark = new Person("dohpark", 29, "male"); 프로토타입 스코프를 확인하겠습니다. dohpark은 Person..
-
Lists & Keys & Reconciliation리액트 2021. 8. 29. 23:32
공부하기 위해 리액트 공식 문서 및 리액트 블로그를 정리한 내용입니다. 리액트 엘리먼트로 리스트를 만들 때 key를 추가하는 것을 깜빡하면 아래와 같은 에러를 확인할 수 있습니다. 오늘은 왜 key를 추가하지 않으면 왜 이런 경고 문구가 나타나는지, 그리고 리액트한테 key란 무슨 역할을 하는지에 대하여 알아보겠습니다. 기본 리스트 컴포넌트 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getEl..
-
폰켓몬 (알고리즘)알고리즘 2021. 8. 28. 18:01
내 풀이법 문제해석 박사님이 갖고 있는 폰켓몬 중 절반을 가져갈 수 있습니다. 그 중 최대 고를 수 있는 포켓몬 종류의 수를 구하세요! 내가 생각한 풀이법 배열 내(박사님이 갖고 있는 폰켓몬)에 중복되는 종류를 삭제한다. -> Set() 값을 구하자 중복되지 않은 폰켓몬들의 수와 내가 최대 고를 수 있는 수를 비교하며 값 도출 나의 코드 function solution(nums) { const set = new Set(nums); const type = [...set]; const limit = nums.length / 2; let answer = 0; type.length >= limit ? (answer = limit) : (answer = type.length); return answer; } 코드..
-
JSX & createElement() & reactDOM.render()리액트 2021. 8. 24. 22:37
리액트를 사용하며 JSX를 기본적으로 사용하는데, 이번에 JSX가 어떻게 바벨을 통하여 자바스크립트 객체를 호출하여 이를 UI에 반영하는지 알아보도록 하겠습니다. 예시와 설명은 리액트 공식문서를 토대로 작성했습니다. JSX 흔히 사용하는 jsx 중 하나입니다. const element = ( Hello, world! ); 바벨은 컴파일을 통하여 위의 우리가 적은 JSX를 아래와 같이 컴파일입니다. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); React.createElement()는 몇 가지 검사를 수행 한 뒤 아래와 같은 객체를 생성합니다. // 주의: 다음 구조는 단순화되었습니다 const e..
-
Hooks (useState, useEffect)리액트 2021. 8. 23. 17:37
공부하기 위해 리액트 공식문서와 블로그를 정리하여 작성한 글입니다. Class 컴포넌트의 생명주기 메서드들과 비교를 하기에 이에 대하여 먼저 알고 공부하시면 좋습니다. 여기에 사용한 코드들은 전부 리액트 공식문서에서 갖고 왔습니다 ㅎ. Hook이란 함수 컴포넌트에 state와 생명주기 등의 리액트 특성들에 접근할 수 있도록 도와주는 특별한 함수입니다! 리액트 훅스는 기존 컴포넌트 생명주기에 기반하여 작성하는 클래스 문법에서 발생하는 여러 불편한 점들로부터 벗어나기 위해 고안한 것입니다. 예를 들어, componentDidMount()와 componentDidUpdate() 내에 중복되는 코드를 작성해야했거나, componentWillUnmount() 내에서 서로 다른 기능을 갖는 함수들을 공존하게 해야했..
-
컴포넌트 생명주기리액트 2021. 8. 22. 17:49
저는 리액트를 활용할 때 주로 함수를 통해 작성해서 생명주기에 대한 공부를 자세히 안했는데, 요새 리액트 에러를 볼 때 생명주기 관련한 단어들을 자주 만나서 이번에 한번 리액트 공식문서 및 블로그를 보며 공부할 겸 작성하게 됐습니다. 코드 예시들은 전부 리액트 공식문서 및 리액트 블로그에서 갖고왔습니다. 우리가 컴포넌트를 렌더링할 때 위의 생명주기에 따라 진행하게 되는데 class를 사용할 때 위 함수들을 접근 할 수 있어 어느정도 제어를 할 수 있습니다. 리액트 컴포넌트를 클래스로 사용하기 위해서는 React.Component를 상속받아야 하며 render() 메소드를 무조건 작성해야합니다. 그 이외는 전부 선택사항입니다. 리액트 문서를 보면 Component를 클래스를 작성하는 것을 추천하지는 않습니..