에이미의 성장기록

1. 리팩터링 원칙 1-1) 리팩터링의 정의 리팩터링(하다): [동사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. 리팩터링: [명사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 겉보기 동작을 유지한다 = 성능, 기능, 버그까지 그대로 있어야 한다. 1-2) 리팩터링 목적 소프트웨어 설계가 좋아진다 → 처음부터 완벽한 설계는 없다! 소프트웨어를 이해하기 쉬어진다. 버그를 쉽게 찾을 수 있다. 프로그래밍 속도를 높일 수 있다. 1-3) 리팩터링의 시점 비슷한 일을 세번째 하게 되면 (3의 법칙) 하지 말아야 할 때? → 지저분해도 굳이 할 필요 없다면 하지 않는다. 2. 코드에서 나..

4.1 기본 표현식 상수, 리터럴 값, 일부 키워드, 변수 참조 4.2 객체와 배열 초기화 표현식 그 값이 새로 생성된 객체나 배열인 표현식. 객체 리터럴 혹은 배열 리터럴이라고 부른다 4.3 함수 정의 표현식 함수 리터럴 4.4 프로퍼티 접근 표현식 점 표기법, 대괄호 표기법 점 표기법은 접근하고자 하는 이름이 유효한 식별자이고, 그 이름을 알고 있을때만 사용 프로퍼티 이름에 스페이스나 구두점, 숫자인 경우, 변수일 때에는 대괄호 표기법을 써야한다. expression.identifier expression[expression] 조건부 프로퍼티 접근(옵셔널 체이닝) → undefined, null 일때 종료(undefined로 평가) ⇒ TypeError 방지 4.5 호출 표현식 함수나 메서드를 호출하..

자료구조에 대해 공부해보고자 한다. 솔직히 제일 먼저 개념을 정확히 짚고 넘어갔어야 했는데 실무 하려면 꼭 알아야하는 중요 개념!!! 🙂 Object(객체) mdn문서 일단 mdn을 읽고 시작 자바스크립트에서 원시 타입을 제외한 모든 데이터 타입은 객체이다. 객체는 여러가지 값 혹은 함수도 가능하다. 객체가 보유한 값을 "프로퍼티"라고 하며, 객체가 보유한 함수는 "메서드"라고 한다. key, value 구조의 자료구조이다. 객체의 프로퍼티와 메서드들은 "키값"으로 구분된다. 🌼 객체의 생성 1) 객체 리터럴 let obj = {key:value, key2: value2, ...} 변수처럼 객체를 생성하는 방식으로 중괄호 {} 안에 key:value를 쉼표로 구분 2) 생성자 함수 new 연산자를 통해 ..

한번에 여러 개의(5개) 서버 요청을 하고, 모든 요청에 대한 응답을 다 받았을 때, 그 때 화면을 렌더링 하려면 어떻게 해야하냐는 처리에 대답을 하지 못했다. 끙... state를 요청 갯수만큼 만든다고 했는데 정말 비효율적인 대답이었다. (대답하고 속으로 매우 좌절함) 그리고 버스타고 가는 도중 자바스크립트 스터디원 중 한 분이 단톡방에서 promise.all 메서드에 대해서 얘기했는데, 순간 그 질문이 떠올랐다. 유레카! ! ! 아 맞다 프로미스 올..... 그래.... 드림코딩 엘리 인강 들으면서 배웠었지! 비동기의 병렬처리! 대답 못했으면 제대로 모르는 것이므로, 다음번에는 잘 대답하기 위해 오늘의 공부는 promise.all() 로 정했다(. ❛ ᴗ ❛.) promise.all() Promis..

자바스크립트의 메모리 힙이나 콜스택 등의 용어와 작동원리를 공부해봐야지 하다가 날 잡고 한번 유튜브 보고 공부해야겠다 생각이 들어서, 유튜브 보면서 그림으로 이해하니 좀 잘 되었다. 우리밋 님의 유튜브를 보면서 공부했다. 간단한 예제를 보면서 보니까 이해가 좀 쉽긴한데, 태스큐외에도 마이크로태스크 큐, 잡 큐 등이 더 있다고 한다. 더 딥하게 공부해봐야 할 것 같다. 자바스크립트 엔진 구조 자바스크립트의 엔진은 Memory Heap과 Call Stack으로 구성되어 있다. 가장 유명한 것은 구글의 V8 엔진 자바스크립트는 단일 스레드 프로그래밍 언어 , 즉 Call Stack이 하나라는 뜻, 따라서 여러 작업을 여러개로 분산하지 않고 하나씩 하나씩 처리한다. - 메모리힙: 메모리 할당이 일어나는 곳 ( ..

1. 프로토타입의 개념 - 자바스크립트는 프로토타입 기반 언어다. 클래스 기반 언어에서는 "상속"을 사용하지만, 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 1.1 constructor, prototype, instance var instance = new Constructor(); 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데, 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다. ⭐ proto..

클로저(1) 개념 및 원리 게시글 보러가기 클로저(2) 활용 게시글 보러가기 3. 부분적용함수(Partial application) 부분적용함수(Partially applied function)란 n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억시켰다가, 나중에 (n-m)개의 인자를 넘기면 비로소 원래 함수의 실행결과를 얻을 수 있게끔 하는 함수 ⭐ 여러개의 인자를 전달할 수 있고, 실행 결과를 재실행할 때 원본 함수가 무조건 실행된다. 🌞 부분적용함수를 왜 쓸까? -> 미리 일부 인자를 넘겨두어 기억하게끔하고 추후 필요한 시점에 기억했던 인자들까지 함께 실행하고 싶을 때 3-1) 부분적용함수 예제_1번 - bind 메서드를 통해 this와 함수에 미리 넘길 인수를 일부 지정해서 새로운 함수를 만..

문제 2번 길이가 서로 다른 A, B, C 세 개의 막대 길이가 주어지면 이 세 막대로 삼각형을 만들 수 있으면 “YES"를 출력하고, 만들 수 없으면 ”NO"를 출력한다. 🍄 입력설명 첫 번째 줄에 100이하의 서로 다른 A, B, C 막대의 길이가 주어진다. 🍄 출력설명 첫 번째 줄에 “YES", "NO"를 출력한다. 🍄 입력예제 1 6 7 11 🍄 출력예제 1 YES 🍄 입력예제 2 13 33 17 🍄 출력예제 2 NO 두 변의 길이의 합은 나머지 한 변보다 항상 크다는 것을 알면 풀 수 있다! 정답 코드 function solution(a, b, c) { let answer = "YES", max; let sum = a + b + c; //합을 구해서 나머지 두 변의 길이 합을 구해줄 것 if (..

문제 1번 세 수 중 최솟값 100이하의 자연수 A, B, C를 입력받아 세 수 중 가장 작은 값을 출력하는 프로그램을 작성하세요. (정렬을 사용하면 안됩니다) 🍄 입력설명 첫 번째 줄에 100이하의 세 자연수가 입력된다. 🍄 출력설명 첫 번째 줄에 가장 작은 수를 출력한다. 🍄 입력예제 6 5 11 🍄 출력예제 5 정답 코드 function solution(a, b, c) { let answer; if (a < b) answer = a; else answer = b; if (c < answer) answer = c; return answer; } console.log(solution(6, 5, 11)); //5 출력

1. 클로저의 의미 및 원리 이해 MDN에서 정의하는 클로저는 "클로저는 함수와 그 함수가 선언될 당시의 Lexical Environment의 상호관계에 따른 현상" 어떤 함수 A에서 선언한 변수 a를 참조하는 내부변수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 1) let 선언 변수는 호이스팅 되므로 렉시컬 환경에는 올라가지만 초기화는 되지 않는다. 2) 함수선언은 바로 초기화됨 3) let amy에서(1번째 줄) 할당이 안되어있기 때문에 undefined임 4) amy = 29 로 할당됨 5) plusAge(1)에서 새로운 렉시컬 환경이 생성된다. 현재 내부 렉시컬 환경은 외부 렉시컬 환경을 참조한다. (내부 렉시컬 환경에서 amy를 찾을 수 없어 ..