yeeendy

객체 지향 프로그래밍(Object-Oriented Programming, OOP) 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 여러 독립적인 부품들의 조합, 즉 객체들의 유기적인 협력과 결합으로 파악하고자 하는 컴퓨터 프로그래밍의 패러다임 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작 프로그램 설계 철학 OOP의 모든 것은 "객체"로 그룹화 OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있음 캡슐화(Encapsulation) 데이터와 기능을 하나의 단위로 묶는 것 ✔︎ 데이터(속성)와 기능(메서드)을 따로 정의하..

클래스 값처럼 사용할 수 있는 일급 객체 특징 ✔︎ 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다 ✔︎ 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. ✔︎ 함수의 매개변수에게 전달할 수 있다. ✔︎ 함수의 반환값으로 사용할 수 있다. 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다. //클래스 선언문 class Person{ //생성자 constructor(name){ this.name = name; // name 프로퍼티는 public하다 } //프로토타입 메서드 sayHi(){ console.log(`Hi! My name is ${this.name}`); } //정적 메서드 static sayHello..

filter 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환 원본 배열은 변경되지 않는다 const numbers = [1, 2, 3, 4, 5]; const odds = numbers.filter(item => item % 2); //홀수냐 //2로 나눈 나머지를 반환 console.log(odds); // [1, 3, 5] 자신을 호출한 배열에서 필터링 조건을 만족하는 특정 요소만 추출하여 새로운 배열을 만들고 싶을 때 사용 filter 메서드의 콜백 함수는 filter 메서드를 호출한 배열의 요소값과 인덱스, filter 메서드를 호출한 배열 자체, 즉 this를 순차적으로 전달받을 수 있다. 다..

코드스테이츠 수업 21일 차! 어느덧 한 달이 지나고 섹션2에 들어왔는데 어제 한 달 회고하면서 굳건히 다졌던 마음이 하루만에 무너질 뻔했다. 너무 어려웠다🫠 어제 다잡았던 마음을 벌써 까먹지 않기 위해 다시 회상해보자. 다른 분들의 열정 가득한 회고를 보니 무너졌던 멘탈에 아주 큰 동기부여가 됐다. 모두가 열심히 하고 있고 스스로와 싸우며 이겨내려 노력하고 있었다. 뒤쳐지지 않게 공부하자. 개념이 바로바로 인지가 안 되는 것 같으니 블로깅 하면서 다시 복습해야겠다. 될 때까지 가보자고 학습목표 일급 객체(first-class citizen)의 3가지 특징을 설명할 수 있다. 고차 함수(higher-order function)에 대해 설명할 수 있다. 고차 함수를 자바스크립트로 작성할 수 있다. 일급 객..

조금 더 보기 쉽게 정리하자 간략한 한 줄로 설명할 것 일반적으로 JavaScript를 불러오기 위해 요소를 요소가 끝나기 직전에 배치합니다. 이유가 무엇인가요? HTML이 다 파싱되고 난 후에 자바스크립트를 적용하기 위해서입니다. HTML이 다 불러와지지 않고, 자바스크립트를 실행하기 시작하면 자바스크립트 프로그램에서 의도했던 바와 다르게 DOM에서 원하는 HTML 요소를 불러오지 못할 수 있습니다. 이를 방지하기 위해서 자바스크립트를 불러오기 위한 요소는 요소가 끝나기 직전에 작성합니다. 스코프에 대해서 설명해주세요 스코프는 변수 접근 규칙에 따른 유효 범위를 의미합니다. 스코프에는 몇 가지 중요한 규칙이 있습니다. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만, 반대는 불가능하고, 중첩이 가능..

컴포넌트 하나의 기능 구현을 위한 여러 종류의 코드 묶음 디자이너나 PM에게는 “하나의 역할을 하기 위해 모은 디자인 요소”가 UI 컴포넌트 “하나의 역할을 하기 위해 모인 무언가의 집합” 아고라스테이츠의 컴포넌트 분류 각각의 Discussion을 묶은 컨테이너인 Discussions가 하나의 컴포넌트 Discussions 내부에 있는 각각의 Discussion들 또한 하나의 컴포넌트 Discussion 만들기 목업 만들기 class명은 각 요소의 역할과 기능이 표현되도록 작성하는 것이 좋음 디스커션 나열하기 하드코딩(비효율적) 반복문 사용(DOM을 활용하여 조작) 완성작 배포 링크 https://yeeendy.github.io/fe-sprint-my-agora-states/ My Agora States..

코드스테이츠수업 18일차! git에 대해 간단 정리해보자 Git Repository 파일이나 폴더를 저장해두는 곳 버전 관리가 가능한 파일 저장소 Remote Repository ->원격 온라인 서버 상의 저장소 ->여러 사람이 함께 공유 가능 Local Repository ->내 컴퓨터의 저장소 ->내 개인 전용 저장소 파일의 변화를 기록하는 절차 git init ->코드를 저장할 디렉토리를 만들고 해당 디렉토리에 로컬 Git Repository를 생성 git add ->코드를 작성하고 저장하는 공간 ->작업 공간(workspace)의 파일 및 디렉토리를 git의 관리하에 있는 상태로 올릴 수 있음 ->staging area git commit ->local Git repository에 내 코드를 기록..

참조 deepdive DOM(Document Object Model) ✔️HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다 트리 자료구조(tree data structure) ✔️노드들의 계층 구조 ✔️부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현 ✔️비선형 자료구조 : 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조 (ex. 트리, 그래프) 선형 자료구조 : 하나의 자료 뒤에 하나의 자료만 존재하는 자료구조(ex. 배열, 스택, 큐, 링크드 리스트, 해시 테이블) ✔️하나의 최상위 노드에서 시작 -> 루트 노드 -> 부모 노드X ✔️리프 노드 : 자식 노드가 없는 노드 중요한 노트 타입 4가지 ✔️..

코드스테이츠 수업 16일차! DOM에 대해 정리해보자 학습목표 DOM의 개념을 이해한다. DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다. HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다. DOM(Document Object Model) HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 간단히 DOM으로 HTML을 조작 할 수 있다 HTML에 JavaScript 적용하기 적용하기 위해서는 태그를 이용 요소는 등장과 동시에 실행 적용하는 2가지 방법 -> 안에 삽입 -> 요소가 끝나기 전에 삽입 와 맨 아래 작성하는 것의 가장 큰 차이는 - HTML 요소를 다 읽고 JavaScrip..

과제를 풀면서 몰랐던 부분 오답노트를 작성해보자 02_Types-part1.js expect(123 - '1').to.equal(122); expect(1 + true).to.equal(2); 답을보고 당황스러웠다 왜 숫자 123 에서 문자열 1 을 뺐는데 122가 나왔지? 왜 숫자 1 에 true를 더했는데 2가 나왔지???????????? +연산을 제외하고 문자열을 숫자로 취급 연산에서의 true값은 1, false 값은 0 04_Scope.js expect(typeof funcDeclared).to.equal('function'); //호이스팅O expect(typeof funcExpressed).to.equal('string'); //호이스팅X 호이스팅은 변수 및 함수 선언이 코드 내에서 선언된 ..