\(@^0^@)/

오늘 읽은 범위 : (this) p.65 ~ p.79 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미하고, this를 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 없거나 많지 않다. 하지만, 자바스크립트(JS) 에서의 this는 어디서든 사용할 수 있다. 함수와 객체(메서드)의 구분이 느슨한 JS에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다. 상황에 따라 달라지는 this JS에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. (실행 컨텍스트는 함수를 호출할 때 생성됨) 즉, this는 함수를 호출할 때 결정된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 1️⃣ 전역 공간에서의 th..

문제 정의 : 코딩애플 Ts 강의 import/export 파트 따라 하는데 발생. 내 기억으로는 내가 뭐 따로 세팅한거 없고 pure 환경이었던 걸로 기억한다. type만 따로 빼서 기존의 컴포넌트에 import 하려 했는데, export를 읽을 수 없다 함 문제 원인과 해결 방법 : 브라우저는 commonjs 모듈을 지원하지 않기 때문에, 컴파일 후 모듈을 번들링 하려면 일부 도구(웹팩, 롤업, 브라우저화)를 사용해야 한다. tsconfig.json 에서 모듈 옵션 을 제거하거나es2015 또는 esnext 로 설정하면 import 및 export 문은 원본 파일에 있는 그대로 유지된다. import { foo } from './bar.js'; export default class Baz {} 일부 ..

오늘 읽은 범위 : 5장. 형식 맞추기 (p. 96 ~116) 형식을 맞추는 목적 코드 형식은 의사소통의 일환이다, 의사소통은 전문 개발자의 일차적인 의무. 오랜 시간이 지나 원래 코드의 흔적을 더 이상 찾아보기 어려울 정도로 코드가 바뀌어도, 맨 처음 잡아놓은 구현 스타일과 가독성 수준은 유지보수 용이성과 확장성에 계속 영향을 미친다. 적절한 행 길이를 유지하라 일반적으로 큰 파일보다 작은 파일이 이해하기 쉽다. 신문 기사처럼 작성하라 : 아래로 내려갈수록 의도를 세세하게 묘사한다. 개념은 빈 행으로 분리하라 : 각 행은 수식이나 절을 나타내고, 일련의 행 묶음은 완결된 생각 하나를 표현한다. 생각 사이는 빈 행을 넣어 분리하는 것이 좋다. 빈 행은 새로운 개념을 시작..

오늘 읽은 범위 : (실행 컨텍스트) p.53 ~ p.64 스코프, 스코프 체인, outerEnvironmentReference 스코프(scope) : 식별자에 대한 유효 범위 ES5까지의 JS는 전역 공간을 제외하면 오직 함수에 의해서만 스코프가 생성됐음. (var) 스코프 수준(level) : 함수 스코프(Function Scope) : var , 함수 외부에서 함수 내부의 변수에 접근 불가 블록 스코프(Block Scope) : let, const , 블록 외부에서 블록 내부의 변수에 접근 불가 스코프 종류(Function Level Scope) : 전역 스코프(Global Scope) : 어떤 경계 A의 외부에서 선언한 변수는 A의 외부뿐 아니라 A의 내부에서도 ..

오늘 읽은 범위 : 4장. 주석 (p. 68 ~) 우리는 코드로 의도를 표현하지 못해, 실패를 만회하기 위해 주석을 사용한다. 주석을 달 때마다 자신에게 표현력이 없다는 사실을 푸념해야 마땅하다. 코드는 변화하고 진화한다. 불행하게도 주석이 언제나 코드를 따라가지는 않는다. 아니, 따라가지 못한다. 주석이 코드에서 분리되어 점점 더 부정확한 고아로 변하는 사례가 너무도 흔하다. 부정확한 주석은 아예 없는 주석보다 훨씬 더 나쁘다. 부정확한 주석은 결코 이뤄지지 않을 기대를 심어준다. 코드만이 정확한 정보를 제공하는 유일한 출처이다. 주석은 나쁜 코드를 보완하지 못한다. 표현력이 풍부하고 깔끔하며 주석이 거의 없는 코드가, 복잡하고 어수선하며 주석이 많이 달린 코드보다 훨..

오늘 읽은 범위 : (실행 컨텍스트) p.36 ~ p.53 실행 컨텍스트 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 스택 (stack) : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조 큐 (queue) : 양쪽이 모두 열려있는 파이프, 보통 한쪽은 입력만 다른 한쪽은 출력만을 담당. 실행 방법 : 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 call stack에 쌓아 올렸다가 실행. 구성 방법 : 함수를 실행하는 것 (자동으로 생성되는 전역 공간과 eval 제외) 1. JS 파일이 실행되는 순간 전역 컨텍스트가 활성화되어 콜 스택에 담김. 2. outer 함수를 호출하는 순간 해당 함수의 환경 정보..

프리온보딩 코스를 하는 동안 너무 바빠서 노개북을 참여하지 못하고 한달이 넘는 시간이 지났다ㅠ 지금이라도 진짜 꾸준히 해보자! 오늘 읽은 범위 : 3장. 함수 (p. 40 ~) 어떤 프로그램이든 가장 기본적인 단위가 함수다. 작게 만들어라! if 문/ else 문/ while 문 등에 들어가는 블록은 한 줄이어야 한다. 중첩 구조가 생길만큼 함수가 커져서는 안 된다는 뜻. 그러므로 함수에서 들여쓰기 수준은 1단이나 2단을 넘어서면 안 된다. 한 가지만 해라! 함수는 한 가지를 해야 한다. 그 한 가지를 잘 해야 한다. 그 한 가지만을 해야 한다. 함수 당 추상화 수준은 하나로! 함수가 확실히 '한 가지' 작업만 하려면 함수 내 모든 문장의 추상화 수준이 동일해야 한다. 코드는 위에서 아래로 이야기처럼 읽..

[ 코어 자바스크립트 DAY 2 ] 오늘 읽은 범위 : (데이터 타입) p.20 ~ p.35 참조형 데이터의 '가변'은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립. 데이터 자체를 변경하고자 하면 (새로운 데이터를 할당하고자 하면) 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다. 불변성을 확보할 수 있는 경우 : 1. 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 2. 자동으로 새로운 객체를 만드는 도구를 활용 3. 불변성을 확보할 필요가 있을 경우에는 불변 객체로 취급, 그렇지 않은 경우네는 기존 방식대로 사용. 불변 객체가 필요한 경우 : 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우. 얕은 복사(s..

이번 과제는 주어진 마크업과 API를 활용해서 기능들을 추가하는 프로젝트였고, ts를 적용하였다. ✨ 이번 과제를 하며 좋았던 부분, 뿌듯했던 부분들은 과제의 주어진 기능들을 주어진 기간 내에 팀원들과 모두 구현해냈다는 것이 만족스러웠고 클린 코드, 재사용성 여러 군데에서 공통으로 쓰이는 Type과 재사용이 가능한 utils 함수를 따로 빼서, 해당 컴포넌트에는 정말 필요한 코드만 남도록 클린 코드, 재사용을 위해 팀원분들과 회의하고 소통하며 진행하여 만족하는 결과물이 탄생했다. Github PR 활용 어떤 기능을 구현하였는지 상세하게 적어서 PR 하면 해당 코드를 팀원 모두 살펴보고, 코드 리뷰를 함으로써 조금 더 나은 코드를 작성하지 않았나 싶다. 추가 구현 기능 마지막으로 기업에는 구현하라고 되어있..

window인 나만 계속 prettier 에러가 났다. eslintrc에 아래의 조건을 추가해주니 error가 안남. 메모해두었다가 다음에도 난다면 또 적용해보자! "prettier/prettier": [ "error", { "endOfLine": "auto" } ], // .eslintrc 에 추가해보자. { "env": { "browser": true, "es2021": true }, "extends": ["plugin:react/recommended", "plugin:prettier/recommended"], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 1..