본문 바로가기

분류 전체보기126

재귀함수 Recursion Achivement Goals ✅ 재귀의 의미에 대해서 이해하고, 자바스크립트에서 재귀 호출을 할 수 있다. ✅ 재귀를 언제 사용해야 하는지 알고 있다. ✅ 재귀적 사고 연습을 통해 재귀 함수를 base case와 recursive case로 나눠서 작성할 수 있다. ✅ 자료 구조 중 Tree 구조에 재귀 함수를 사용하는 이유를 이해할 수 있다. ✅ 실생활에 사용되는 유용한 Tree 구조를 알고 있다. ✅ 깊이를 알 수 없는 Tree 구조에 재귀 함수를 활용하여 모두 순회(traverse)할 수 있다. 📌 재귀란? 어떤 문제를 해결할 때, 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법이다. --> 처음 접했을 때는 이게 무슨말이야 ...? 했는데 공부해보니까 알겠다. --> 코드.. 2021. 8. 30.
자바스크립트 클래스 Class 입문 Achivement Goals ✅ 클래스와 인스턴스라는 용어를 이해할 수 있다. ( new 키워드 사용법 / class 키워드 사용법 ) ✅ 객체 지향 프로그래밍 특징을 이해할 수 있다. ( 캡슐화 / 상속 / 추상화 / 다형성 ) ✅ JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. ✅ Prototype이 무엇인지 이해할 수 있다 ✅ 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. ✅ 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인하고 상속 관계를 가진 모델을 코드로 작성할 수 있다. ✅ Prototype chain을 이해하고 설명할 수 있다. (__proto__) 📌 돌아보기 ◾ 메서드 호출 : 1번만 쓸 수 있음 (단순)객체 .. 2021. 8. 29.
자바스크립트 클로저 활용 Closure private 변수, 메서드 흉내 내기 📌 Closure 활용 방법 대표적인 이점 중 하나가, private 변수나 메서드를 흉내낼 수 있다는 점이다. // counter에 할당된 이 익명 함수는 정의되는 즉시 실행된다. // 이 lexical environment는 privateCounter라는 변수와 changeBy라는 함수를 포함한다. // 2개 다 private item이다. 익명 함수 외부에서 접근될 수 없는 아이들이다. // 대신 익명 함수에서 반환된 3개의 public 함수를 통해서만 접근할 수 있다. let counter = (function() { let privateCounter = 0; function changeBy(val) { privateCounter += val; } return { // counter.increas.. 2021. 8. 28.
자바스크립트 클로저 Closure 📌 일단 Lexical Scope? Dynamic Scope? ◾ Lexical Scope 함수나 변수의 스코프를 선언된 위치를 기준으로 정함 ( Compile 시점 ) ◾ Dynamic Scope 함수나 변수의 스코프를 호출된 시점을 기준으로 정함 ( Runtime 시점 ) // 01 Lexical Scope와 Dynamic Scope 비교 let x = 1; function print() { console.log(x); // Lexical Scope : 1 -> 선언된 위치 기준 / 변수 x 전역 스코프 } function foo() { let x = 100; print(); // Dynamic Scope : 100 -> 호출된 시점 기준 / 변수 x 지역 스코프 } foo(); // 02 내부 함수.. 2021. 8. 27.
React To Do List 만들면서 useState, useRef 공부하기 2021. 8. 26.
React 좋아요 버튼 만들면서 state 공부 📌 구현 결과 📌 구현 과정 App.js ✔ /* eslint-disable */ npm 눌렀을 때 뜨는 노란 글씨 ( 오류는 아니지만 약한 경고 메세지 ) 를 지워주는 역할 ✔ 리액트는 데이터 바인딩이 굉장히 쉽다 데이터의 상태를 변화시키고 싶을 때, useState를 사용해 복사해 온 다음에 변경 사항을 적용시킨다. 절대 !! 원본 데이터는 직접 변경시키지 않는다. 꼭 복사해서 들고 올 것. // 01 const changeName = () => articleNameChange(["백엔드개발자" ,"자바스크립트", "리액트"]) // 02 const changeName = () => { const newArr = [...articleName]; newArr[0] = "백엔드개발자"; articleNa.. 2021. 8. 25.
자바스크립트 프로그래머스 프린터 문제 풀이 📌 문제 ◾ 해설 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄.. 2021. 8. 24.
자바스크립트 배열 고차함수 forEach / map 📍 Array.prototype.forEach ( immutable △ ) 함수형 프로그래밍 은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. forEach 메서드는 for문을 대체할 수 있는 고차함수다. 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다. const number = [1, 2, 3]; const pows = []; numbers.forEach(item => pows.push(item ** 2)); console.log(pows); // [1, 4, 9]; 🔔 forEac.. 2021. 8. 23.
브라우저 렌더링 과정 && 각종 용어 정리 📌 브라우저 렌더링? 1. [Parsing] HTML 파일과 CSS 파일을 파싱해서 각각 Tree 를 만듦. 2. [Style] 두 Tree 를 결합해서 화면에 표현되는 Node 를 기준으로 Rendering Tree 를 만듦. 3. [Layout/Reflow] Rendering Tree 에서 각 Node 의 정확한 위치와 크기를 계산. = 레이아웃을 계산. 4. [Paint/Repaint] 계산된 값을 이용해 각 Node 를 화면 상의 실제 pixel 로 변환하고 여러 개의 Layer로 생성. 5. [Composite] Layer 들을 합성하여 실제 화면에 나타냄. 대부분의 프로그래밍 언어는 운영 체제operating system이나 가상 머신virtual machine 위에서 실행된다. 그러나 웹 애.. 2021. 8. 22.

티스토리툴바