본문 바로가기

분류 전체보기

상태관리(Stage Management)와 옵저버패턴(Observer Pattern) 자동차경주 미션에서 아쉽게도 반영하지 못한 것이 있었다. isGameOver, isPopupShowing 과 같이 게임의 '상태'를 관리해서 View가 모델의 상태 변화를 '감지'하도록 하는 것이다. 갈피를 잡지 못한 나를 위해 리뷰어님은 '옵저버 패턴'이라는 키워드로 공부해 볼 것을 추천해주셨다. 이 기회에 상태관리와 자바스크립트에서의 상태관리 방법에 대해 정리해보자. 상태관리는 어떻게 하는걸까 '상태(State)'는 변화하기 때문에 관리의 대상이 되는 모든 데이터 값을 말한다. 거꾸로 말하면, 변하지 않는 값은 관리할 필요가 없고 이는 상태가 아니다. 상태를 관리하는 것을 '상태관리(State Management)'라고 한다. 말은 쉽지만 상태관리는 어렵다. 왜 어려울까? 상태는 실시간으로, 또 비동.. 더보기
[테코톡 요약] 우아한테크코스 3기 레벨1 테코톡 모아보기 오늘 오후에는 우아한테크코스 3기 첫 테코톡이 있었다. 👏👏👏 크루들이 공유해준 발표 내용을 간단하게 요약해보자. + 2021. 04. 12. '[테코톡 요약] 시리즈'는 시청 상황 등에 따라 일정하게 작성하기 어려워, 레벨 별로 하나의 게시글로 묶어서 간단하게 정리하기로 했다. 이 글에는 레벨 1 기간 동안 총 7회에 걸쳐 크루들이 발표해주신 내용들을 담았다. 1. DOM/BOM 🎤 곤이 웹은 HTML(뼈대), CSS(옷), JS(기능)으로 구성된다. DOM은 텍스트 파일로 이루어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것이다. DOM 덕분에 JavaScript는 확장자가 다른 HTML과 CSS파일의 내용을 읽고 수정할 수 있다. 노드 객체의 계층적인 구조로 이루어진다. 노드에는 총 12가지.. 더보기
JavaScript - 연대별로 보는 자바스크립트 변천사 선호도 1위, 사용률 1위에 빛나는 자바스크립트가 프로그래밍 언어로서 어떻게 발전해왔는지 연대별로 간단하게 알아보자. 1990년대 1995년, 자바스크립트 개발 1996년, 넷스케이프 내비게이터2에 탑재 모카(Mocha), 라이브스크립트를 거쳐 자바스크립트 로 부르게 되었다. J스크립트와 함께 파편화되면서 발생한 크로스 브라우징 이슈를 해결하기 위해 넷스케이프는 에크마 인터내셔널에 표준화를 요청했다. 1997년, ECMAScript1 발표 ECMAScript는 자바스크립트의 표준사양이다. 브라우저에 내장되는 자바스크립트 엔진은 이 ECMAScript 사양을 준수해서 만들어진다. 1998년, ES2 발표, DOM 레벨1 발표 ECMAScript2가 발표되었고, W3C에서도 DOM 레벨1을 발표했다. DOM.. 더보기
JavaScript - 값(value), 식(expression), 문(statement) 코치님(포코)의 추천키워드, 값 식 문. 많이 들어봤고 알고있다고 생각했지만 막상 설명하려고 하면 어려운 개념이다. 값, 식, 문의 기초개념을 정확히 이해하고 더 나은 코드를 작성해보자. 값 Value a value is the representation of some entity that can be manipulated by a program. '값'이란 프로그램이 조작할 수 있는 어떤 표현이다. '값'은 문자열, 문자, 숫자 처럼 어떤 데이터 형식도 가질 수 있다. '값'을 L-Value와 R-Value로 나누기도 한다. 대입연산자 (=)를 기준으로 왼쪽에 있는 L-Value, 오른쪽에 있는 R-Value로 나누는 것이다. L-Value는 메모리 주소을 가지고 있어 식별자를 통해 프로그래밍으로 컨트.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 자동차경주 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 ODK미디어의 @ysm0622 님께 리뷰를 받았다. 내 미숙한 코드를 꼼꼼하게 보시고 피드백해주셔서 코드를 개선하는데 많은 도움을 받았다. 미션 1단계 피드백 👉 PR 바로가기 1. Model-View 각각의 클래스로 분리 $cars 와 같이 직접 DOM을 다루고 직접 접근해서 data 값을 변경하기보다는 Model과 View를 분리하자. 그리고 Model과 View를 분리하는게 왜 중요한지 고민해보자. getWinners()에서도 DOM에 직접 접근하는 부분과 maxScore인 car들을 뽑아내는 로직을 분리할 수 있다. 이렇게 하면 테스트에서 똑같은 로직을 다시 작성하는 일도 없앨 수 있다. 2. 변수명을 더 명확하게 'NAME_BLANK' 보다는 '.. 더보기
Javascript - 'this' 키워드로 객체에 접근하기 this 키워드 this는 객체의 프로퍼티나 메서드를 참조, 변경할 수 있도록 해주는 자기참조변수(self-referencing variable)이다. 생성자 함수로 인스턴스를 생성하려면, 먼저 생성자 함수를 정의해두고, new 연산자와 함께 생성자 함수를 호출해야 한다. 그런데 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 전이라, 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 이 때 this를 사용하면 '미래'에 생성되는 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this 바인딩이란, this라는 식별자와 this가 가리킬 객체를 '연결'하는 과정을 의미한다. this 바인딩, 즉 this가 가리키는 값은 함수 '호출 시점'에 함수를 어떻게 호출하는지에 따라 동적으로.. 더보기
Git - 자주 사용하는 명령어 모음 우아한테크코스 과정을 진행하면서 자주 사용하는 git 명령어를 정리해보자. 과거의 커밋 메세지 변경하기 PR 메세지를 작성하기 전 git log를 보며 조금 더 커밋메세지를 자세하게 변경하고 싶을 때 사용한다. git rebase -i HEAD~3 // 변경하고자 하는 커밋이 몇 번째 전 커밋인지 HEAD~숫자로 표현 // 'pick'을 'edit'로 변경 후 저장 (:wq + enter) git commit --amend // 내용 수정 후 저장 (:wq + enter) git rebase --continue 단, 변경하려는 커밋을 이미 push하고 나서 이 방법을 사용하면 conflict가 발생할 수 있고 PR에도 중복되어 들어가게 된다. 이미 커밋을 했는데 add 하고 싶은 파일이 있다면 아래 방법.. 더보기
[번역] 성급한 추상화에 관하여 - AHA Programming (Kent C. Dodds) 번역 안내 이 글은 원본 영상을 @ysm0622 님의 추천으로 알게된 후, 발표자 Kent C. Dodds 님의 허락을 받고 번역하였습니다. AHA Programming 오늘은 당신이 이미 알고 있는 DRY 프로그래밍 원칙, WET 프로그래밍 원칙은 제쳐두고 AHA 프로그래밍에 대해서 얘기해보려고 합니다. 주) DRY: Don't Repeat Yourself WET: Write Everything Twice AHA: Avoid Hasty Abastraction 우리는 추상화(Abstractions)가 어떻게 시작되고 어떻게 끝나는지 라이프사이클을 살펴보고, 추상화를 신중하게 하는 것이 왜 중요한지에 대해 생각해볼 것입니다. 만들어진 예시이지만 그래도 충분히 공감하실 수 있을 거라 생각됩니다. 또, San.. 더보기

티스토리툴바