콘요맘떼 개발일지

TIL (Today I Learned) 2022.03.04 오늘 읽은 범위 7장. 오류 처리 책에서 기억하고 싶은 내용을 써보세요. try 블록에서 무슨 일이 생기든지 catch 블록은 프로그램 상태를 일관성 있게 유지해야 한다. (p.132) 모든 예외를 잡아야하는 아주 중요한 라이브러리가 아니라면 확인된 예외는 코드의 유지보수성이나 캡슐화의 측면에서 효율적이지 못하다. (p.134) 예외를 던질 때는 실패한 연산, 유형 등의 정보를 함께 첨부한다. 그러면 훨씬 수월하게 오류의 원인과 위치를 찾을 수 있다. (p.135) 오류를 분류할 때에는 오류 자체의 유형보다는 오류에 대응하는 방식으로 분류하는 것이 좋다. (p.135) 클래스를 만들거나 객체를 조작하여 특수 사례를 처리하면 (특수 사례패턴, Sp..

ES6 ES6은 ECMA라는 국제 기구에서 만든 표준 문서인 ECMAScript의 6번째 개정판에 있는 표준 스펙을 말한다. 그렇다면 ES6가 현재 가장 최신 버전의 자바스크립트인가? 그렇지는 않다. 2015년부터 새로운 ES 표준 버전이 공개되고 있다. 그럼에도 불구하고 ES6가 항상 주목받는 이유는 ES5까지 자바스크립트가 가지고 있던 많은 문제점들을 개선했기 때문이다. 그렇기 때문에 React. Vue 등 대부분의 라이브러리들도 ES6를 기준으로 개발 환경을 세팅하고 있다. 이번 포스트에서는 ES6에서 등장한 주요 변경점들에 대해서 알아볼 것이다. 1. let / const 기존에는 var만을 사용하여 변수를 사용하였지만 ES6부터는 값의 변경 가능 여부를 기준으로 let과 const를 활용하기 시..

기본적으로 node resolver는 파일의 확장자를 적어주지 않더라도 파일을 import할 수 있다. 그러나 eslint에서는 import/extensions 룰에 의해 확장자를 명시하지 않고 파일을 가져오는 행위를 금지하고 있다. 이미지 파일 등의 asset을 가져올 때에는 확장자를 명시하는 것이 필요하겠지만 js 파일들을 import할 때에는 이러한 규칙이 개인적으로 많이 번거롭게 느껴진다. 이럴 때에는 다음과 같이 eslintrc.js 파일을 수정하여 해결할 수 있다.

Could not find a declaration file for module 'react/jsx-runtime'. '.../node_modules/react/jsx-runtime.js' implicitly has an 'any' type. 와 같은 에러 발생시 yarn add @types/react -D 혹은 npm i --save-dev @types/react 를 통해 해결 가능.

콘솔 (Console) 자바스크립트를 공부해본 사람이라면 모두 console.log( )를 통해 콘솔에 무언가를 출력해본 경험이 있을 것이다. console은 디버깅 콘솔에 접근할 수 있는 여러 가지 메소드를 제공하는 객체이다. (사실 나는 이 부분을 몰랐다. 생각해보니 자바스크립트는 객체 투성이고 console에는 여러가지 메소드들이 있는데 왜 당연히 객체일 것이라고 생각을 못 했는지 모르겠다.) console이 제공하는 메소드는 정말 많지만 우리는 보통 console.log( )만을 사용한다. 그렇기 때문에 console의 메소드 중 우리가 추가로 활용할 만한 것들에 대해서 알아보도록 하자. 레벨에 따른 로그 출력 표현하고자 하는 정보의 타입에 따라 다른 출력 함수를 활용할 수 있다. 개발자에게 제공..

리액트에서 컴포넌트의 state를 제대로 갱신하기 위해서 주의해야 할 점을 간략히 정리해보겠다. 1. state 직접 수정하지 않기 컴포넌트의 state를 변경하고 싶으면 setState( ) 메소드를 활용해야 한다. 그냥 state에 값을 대입하는 경우 값의 갱신은 이루어질 수 있더라도 컴포넌트가 리렌더링되어야 한다는 사실을 알지 못하기 때문이다. (state에 직접 값을 대입하는 경우는 클래스 컴포넌트의 constructor( ) 메소드 내부 말고는 없다.) 2. state의 갱신은 원하는대로 이루어지지 않을 수 있다. 컴포넌트의 state 혹은 props는 비동기적으로 업데이트될 수 있다. 그렇기 때문에 state나 props에 의존하여 새로운 state를 지정해줄 때에는 주의가 필요하다. 이럴 때..

평가 전략 (Evaluation Strategy) 프로그래밍 언어에서 함수 호출 argument의 순서 혹은 함수에 어떤 값을 전달시킬지 등을 결정하는 것을 말한다. 보다 간단하게 표현하면 함수에 값을 넘겨줬을 때 함수가 어떻게 실행될 것인가를 다룬다고 생각하면 될 것이다. 우리가 'call by ~~'라고 표현하는 것들이 바로 평가 전략이라고 볼 수 있다. Call by Value parameter의 값이 복사되어 argument로 넘어가는 방식을 말한다. 전달된 것은 복사된 값이기 때문에 함수 내부에서 해당 값을 어떻게 변경해도 원본에는 영향이 가지 않는다. Call by Reference parameter로 reference(참조 주소, 메모리 주소)를 넘겨주는 방식을 말한다. reference 값..

가비지 컬렉션 (Garbage Collection) 프로그래밍 언어와 무관하게 메모리는 다음과 같은 생명주기를 공통적으로 가진다. 1) 필요한 메모리를 할당한다. 2) 할당된 메모리를 사용한다. (읽기, 쓰기) 3) 해당 메모리가 필요 없어지면 메모리를 해체한다. 개발자가 메모리의 해체 시기를 직접 결정해야 하는 로우레벨 언어(ex. C, C++)와 달리 자바스크립트는 가비지 컬렉션이라는 자동 메모리 관리 형식을 활용한다. 참고로 가비지 컬렉션은 필요 없어진 메모리만을 해제하지만 필요 없어진 메모리들이 모두 해체되는 것은 아니다. (그렇기 때문에 근사적 작업이라고 볼 수 있다.) 가장 대표적인 가비지 컬렉션 알고리즘에는 크게 두 가지 종류가 있다. 1. 참조-세기 (reference-counting) 다..

TIL (Today I Learned) 2022.03.01 오늘 읽은 범위 6장. 객체와 자료 구조 책에서 기억하고 싶은 내용을 써보세요. 변수를 private으로 선언하고 get, set 함수를 제공한다고 그 내부 구현이 감춰지는 것은 아니다. 내부 구현을 감추기 위해서는 추상 인터페이스를 만들어줘야 한다. (p.118) 자료 구조를 사용하는 절차적인 코드는 기존 자료 구조를 변경하지 않으면서 새 함수를 추가하기 쉽다. 반면 객체 지향 코드는 기존 함수를 변경하지 않으면서 새 클래스를 추가하기 쉽다. (p.122) 객체는 자료를 숨기고 함수를 공개한다. 하지만 자료구조는 내부 구조를 당연히 노출하므로 디미터 법칙이 적용되지 않는다. (p.123) 디미터 법칙 : 모듈은 자신이 조작하는 객체의 속사정을 ..

TIL (Today I Learned) 2022.02.28 오늘 읽은 범위 5장. 형식 맞추기 책에서 기억하고 싶은 내용을 써보세요. 코드가 바뀌어도 맨 처음 잡아놓은 구현 스타일과 가독성 수준은 유지보수 용이성과 확장성에 계속 영향ㅇ르 미친다. 원래 코드는 사라질지라도 개발자의 스타일과 규율은 사라지지 않는다. (p.96) 파일을 잘 쪼개자. 일반적으로 작은 파일이 큰 파일보다 이해하기 쉽다. (p.97) 소스코드는 신문 기사처럼 초반에는 전체적인 그림을 보여주어야 한다. 첫 부분에는 고차원 개념과 알고리즘을 설명하고 아래로 내려갈수록 그 의도를 세세하게 묘사하자. (p.98) import문, 각 함수 사이 등 서로 다른 개념 사이에는 빈 행을 위치시켜서 개념을 분리시켜주자. (p.98) 서로 밀접한 ..