개발 알다가도 모르겠네요

네 번째 프리코스 과제는 우테코 제공 라이브러리를 활용해서 다리를 끝까지 건너가는 게임을 구현하는 것이었다. 3주차 공통 피드백을 참고해 이번 과제에 반영하고자 했다. 예외 처리 예외 상황을 고려해 프로그래밍하는 습관을 들이고자 했다. 예외에 대한 상황을 최대한 쪼개서 각각 예외 처리하는 방식이었다. 예외 처리해야 할 상황을 하나하나 생각하는 것이 어려웠지만, 이때 테스트 케이스를 작성해서 제가 생각한 대로 예외 처리가 되는지 살폈다. 성공하는 테스트 케이스뿐만 아니라 예외 상황에서의 테스트 케이스를 작성해서 구현하는 것 또한 중요하다는 것을 깨달았다. 더욱 깔끔한 코드 지난 주 차 까지는 각 메서드의 코드 라인이 15줄로 제한되었지만, 이번 주는 10줄로 제한되면서 자연스레 메서드를 더욱 세부적으로 나..

세번째 프리코스 과제는 지난 주와 비슷하게 우테코에서 제공하는 라이브러리를 활용하여 로또게임을 구현하는 과제였다. 2주 차 공통 피드백과 피어리뷰를 참고해서 3주차 코딩 방식에 적용하고자 노력했다. README.md 작성법 공통 피드백에서 언급된 ‘죽은 문서가 아닌 살아있는 문서를 만들 것’ 이라는 피드백이 인상 깊었다. 처음부터 모든 구현 기능 목록을 완벽하게 작성하기보다는 기능을 구현해나가면서 문서를 업데이트하는 것이 중요하다는 것을 깨달았다. 특히 예외 처리의 경우, 공통 피드백에 언급된 것처럼 기능을 구현해나가면서 유동적으로 추가&수정해 나가도록 노력했다. 지난 주차까지는 기능 목록에 메서드 설계방식을 상세하게 작성했다. 이번 주에는 너무 세세한 부분까지 정리하는 것이 아니라 시야를 넓혀 전체의 ..

두 번째 프리코스 과제는 우테코에서 제공하는 라이브러리를 활용하여 구현하는 과제로 1주차보다는 구현하는데 시간이 좀 더 걸렸다. 피어리뷰를 통해 1주차 과제 구현과 코딩 방식에 대한 피드백을 받았고, 2주차 과제에서는 피드백을 의식하면서 코드를 작성하려고 노력했다. 구현하면서 크게 세 가지 토픽에서 깨달은 점이 있다. 코딩 스타일 indent depth를 최대 2까지만 허용하는 요구사항이 있었기에 eslint를 적용하여 depth를 넘기지 않도록 강제하였다. Airbnb Style Guide로 코딩 스타일을 설정하여 형식과 규칙에 어긋나거나 가독성이 떨어지는 코드를 효율적으로 바꿀 수 있었다. 또한 prettier를 통해 들여쓰기나 따옴표, 세미콜론 등의 스타일을 강제하여 코딩 스타일을 일관되게 유지하고..

프리코스 첫 주 과제는 기존에 많이 접했던 코딩테스트 유형의 문제들이었기에 풀이 자체는 그렇게 어렵지는 않았다. 하지만 기존에는 신중하게 생각하지 않았던 개발 내외적인 부분들이 많았기에, 이를 하나하나 보완해나가는 것에 중점을 두었다. 이 과정에서 대표적으로 세 가지 토픽에서 깨달은 점이 있었다. Javascript Syntax 기존에 자바스크립트를 접했기 때문에 기본 문법은 숙지한 상태였지만 includes, flat, from, spread, reduce, forEach, map과 같이 숙달되지 않은 문법들이 많았기에 최대한 적용하여 숙련도를 높이고자 노력했다. 세부적으로는 splice와 slice의 차이점을 파악하였고, Map과 Object의 장단점을 파악해서 상황에 맞게 적용하는 법을 학습했다. ..

특정 패턴과 일치하는 문자열을 검색, 추출, 치환할 수 있는 기능 정규 표현식 생성 정규 표현식 리터럴과 RegExp 생성자 함수를 사용하는 방법 2가지가 존재 일반적으로 정규 표현식 리터럴을 사용한다. 정규 표현식 리터럴은 패턴과 플래그로 구성 RegExp 메서드 RegExp.prototype.exec 메서드 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환 매칭 결과가 없는 경우 null 반환 g 플래그를 지정해도 첫 번째 매칭 결과만 반환하므로 주의 필요 const target = "Is this all there is?"; const regExp = /is/; console.log(regExp.exec(target)); // [ 'is', index: 5, in..

ES6 이후 에는 함수를 사용 목적에 따라 명확히 세 가지 종류로 구분 ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 ES6 이후 , 메서드는 메서드 축약 표현으로 정의된 함수만을 의미 const obj = { x: 1, // foo는 ES6 기준, 메서드다. foo() { return this.x; }, // bar는 ES6 기준, 메서드가 아니다. bar: function () { return this.x; }, }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 ES6 메서드 는 인스턴스를 생성할 수 없는 non-const..

암묵적 전역 다음은 use strict 모드를 반영하지 않았을 경우, 우리가 아는 일반적인 자바스크립트 작동 방식. → 암묵적 전역 현상 이는, 개발자의 의도와는 상관없는 다양한 오류를 발생시키는 원인이 될 가능성이 큼. 따라서, 반드시 ES6 에 도입된 const, let 키워드를 사용하여 변수를 선언한 다음 사용하는 것이 일반적 function foo() { x = 10; } foo(); console.log(x); // 10 /* - foo 함수가 실행 - foo 함수 내부에서 x를 선언한 것은 없기 때문에, 스코프 체인에 의해 변수 x를 검색한다. - 전역 스코프까지와 왔지만, x는 존재하지 않는다. -> 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. - 생성된 전역 객..

this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있음. this 는 자바스크립트 엔진에 의해 암묵적으로 생성. [ 💡 this 바인딩 ] + 바인딩(binding) : 식별자와 값을 연결하는 과정 + this 바인딩 : this와 this가 가리킬 객체를 바인딩하는 것 객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체. // 객체 리터럴 const circle = { radius: 5, getDiameter() { // 여기서 this 는 메서드를 호출한 객체 return 2 * this.radius; }, };..

자바스크립트 객체는 크게, 3가지 객체로 분류됨. 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체를 의미, 애플리케이션 전역에 공통 기능을 제공, 전역 객체의 프로퍼티로 제공되므로 별도의 선언 없이 전역 변수처럼 언제나 참조가능 호스트 객체 : ECMAScript 사양에 정의되어 있지는 않지만, 브라우저 환경 or Node.js 환경에서 추가로 제공하는 객체를 의미 사용자 정의 객체 : 사용자가 직접 정의한 객체를 의미 표준 빌트인 객체 표준 빌트인 객체는 인스턴스를 생성할 수 있는 생성자 함수 객체. 자바스크립트는 Object, String, Number, Boolean, Symbol, Array, Map/Set, Function 등 40여 개의 표준 빌트인 객체를 제공 프로토타입 메서드와..

객체지향 프로그래밍 객체(object)의 집합 으로 프로그램을 표현하는 것. 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 반영한 것 추상화 추상화(abstraction) : 객체의 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내여 표현하는 것 객체에는 크게 2가지 요소로 구성 상태를 나타내는 프로퍼티 상태를 조작하는 행동을 표현하는 메서드 // person 이라는 객체 // "name(이름)", "address(주소)"라는 속성(property)으로 표현하도록 가정 const person = { name: "WI", address: "Incheon", }; // circle 이라는 객체 const circle = { // 원의 반지름 프로퍼티(상태) radius: 5, // 원의 지름을 구..