❓ JavaScript Koans란 Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 합니다. JavaScript Koans는 부트캠프에서 하게 된 자바스크립트를 전체적으로 공부하고 되돌아보며 문제를 푸는 시스템입니다. 🙁 하면서 헷갈렸던 부분 Object.assign const obj = { mastermind: "Joker", henchwoman: "Harley", relations: ["Anarky", "Duela Dent", "Lucy"], twins: { "Jared Leto": "Suicide Squad", "Joaquin Phoenix": "Joker", "Heath Ledger": "The Dark Knight", "Jack Ni..
⚙️ 기능 기본적인 사칙연산 기능 계산 버튼 누르지 않고 연산자 버튼만 눌러서 계속 계산 초기화 기능 🥲 어려웠던 점 처음엔 계산기의 가장 기본적인 기능을 구현하는 것이라고 생각해서 금방 할 수 있을 것 같다고 생각했습니다. 그런데 그 생각은 너무나도 오만한 생각이었습니다... 코드를 작성하고 호기롭게 테스트를 해보았지만 나오는 결과는 빨간 물결의 향연이었습니다. 엄청 많은 오류들과 싸웠는데 그 중 몇 가지를 소개해보겠습니다. 1. 연산자를 연속으로 다르게 눌렀을 때 처음 눌렀던 연산자로 고정이 되는 오류 if (previousKey === "operator") { operatorForAdvanced = buttonContent; return; } 이 경우도 생각을 꽤 해서 풀었는데 사실 결과는 간단하였..
❓ 고려한 점 먼저 계산기를 크게 3가지 영역으로 나누었습니다. 닫기, 최소화, 최대화 버튼 영역 계산되는 숫자가 보일 영역 숫자와 기호 버튼들 영역 이 3가지 영역을 display: flex를 사용하고 direction을 column으로 변경해 세로 축으로 정렬되게 했습니다. 그리고 flex: grow로 일정 비율로 나누어지게 설정했습니다. 숫자와 계산 기호 영역도 flex: grow를 사용하여 일정 비율로 나누어지게 설정했습니다. 또한 hover와 active를 활용하여 hover일 경우 색이 변하고, 누르면 누른 효과가 나오게 설정했습니다. 기본 box-shadow: 2px 2px 6px #3c3c3dc0; :active box-shadow: 1px 1px 2px #4d515988; position..
23.02.13 오늘은 드디어 프론트엔드 부트캠프의 시작이었다. 합격 소식을 듣고부터 기대감 70 두려움 30인 상태로 기다려왔는데 막상 시작해보니 체계적인 시스템과 친절한 크루분들 덕분에 두려움은 많이 줄어들었다 😃 역시 첫날이니만큼 오늘의 일정은 OT였다. 캠프를 진행하면서 사용할 여러 학습 툴들의 설정과 사용 방법과 메타인지, 페어 프로그래밍 등의 학습 방법들, 코드스테이츠가 제공하는 여러 혜택들의 설명을 들으며 시간을 보냈다. 라이브 세션 중 숙제 하나를 내주셨는데, 이미 노션에도 작성했지만, 블로그에도 한번 더 작성해서 나의 마음에 새겨야 겠다. 나의 목표 2023년이 끝나기 전에 취업하기 지속적으로 성장하는 개발자 되기 같이 일하면 든든한 개발자 되기 목표를 이루기 위해 부트캠프에서 꼭 얻고 ..
🧐 객체 지향 프로그래밍이란 객체들의 유기적인 협력과 결합으로 파악하고자 하는 컴퓨터 프로그래밍의 패러다임입니다. 객체 지향 프로그래밍에서는 데이터와 해당 데이터를 처리하는 메서드를 하나의 객체로 묶어서 관리합니다. 이러한 객체들은 서로 상호작용을 하고, 이 객체들이 모여서 시스템을 구성합니다. 또한 객체들은 다형성, 캡슐화, 상속 등의 개념을 활용해서 유연하고 확장성 있는 프로그래밍을 가능하게 합니다. 👍 장점 반복적인 코드를 최소화하여 재사용성이 좋습니다. 코드의 변경을 최소화하고, 유지보수를 하기 좋습니다. 직관적인 코드를 작성하기 좋습니다. 👾 객체 지향 프로그래밍의 4가지 특징 추상화 추상화는 내부 구현은 복잡하게 되어 있는데, 겉으로 볼 때는 간단해 보이게 한다는 것입니다. 우리가 많이 사용하..
📌 프로토타입 객체 프로토타입 객체는 객체 간 상속을 구현하기 위해 사용됩니다. 프로토타입은 어떤 객체의 상위 객체의 역할을 하며, 다른 객체에게 공유 프로퍼티(메서드도)를 제공할 수 있습니다. 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가집니다. 슬롯의 값은 프로토타입의 참조입니다. 객체가 생성될 때, 객체 생성 방식에 따라 프로토타입이 결정되어 [[Prototype]] 에 저장됩니다. 모든 객체는 하나의 프로토타입을 갖고, 모든 프로토타입은 생성자 함수와 연결되어 있습니다. 📌 __proto__ 접근자 프로퍼티 모든 객체는 __proto__ 접근자 프로퍼티로 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있습니다. Object.prototype의 접근자 프로퍼티인 __pro..
📌 클래스란? 자바스크립트에서 클래스는 함수의 한 종류입니다. 따라서 값으로 사용할 수 있는 일급 객체입니다. 일급 객체의 특징 무명의 리터럴로 생성 가능 (런타임에 생성 가능) 변수나 자료구조에 저장 가능 함수의 매개변수에게 전달 가능 함수의 반환값으로 사용 가능 기본 문법 class Person { constructor(name, age) { // 생성자 // 인스턴스 생성 및 초기화 this.name = name; this.age = age; } introduce() { // 프로토타입 메서드 console.log(`Hello, My name is ${this.name}`); } static sayHi() { // 정적 console.log('hi'); } } const jack = new Pers..
클로저 란? 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다. ➡️ 함수와 함수가 정의된 위치의 변수와의 관계를 유지하는 것 함수가 실행될 때, 그 함수의 어휘적 환경이 생성됩니다. 이 어휘적 환경에는 함수 내부에서 사용하는 변수와 해당 변수들의 상위 스코프에 위치한 변수들이 포함됩니다. 해당 함수가 반환될 때, 해당 함수와 그 함수가 선언된 어휘적 환경을 담고 있는 클로저가 생성됩니다. 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(어휘적 환경)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수입니다. function outer() { var x = 1; function inner() {..
