본문 바로가기

전체 글

 (71)
[기술회고] 우아한테크코스 Level1 우아한테크코스 레벨 로그 1) 계산기 미션 E2E 테스트를 학습하였다. 사용자의 입장에서 전체 플로우를 테스트 하는 것이다. 그 툴로 Cypress 라이브러리를 사용하였다. 사용자 입장에서 UI와 상호작용하는 전체 과정을 테스트할 수 있었다. 2) 자동차 경주 미션 TDD를 시도해보았다. TDD는 테스트를 기반으로 기능을 정상적으로 구현하고, 리팩터링하는 과정을 통칭한다. TDD는 코드가 달성하고자 하는 목표를 명확히 정의하기 때문에, 코드가 방대해지지 않고 명확한 목적을 가진 코드를 작성할 수 있었다. 3) 로또 미션 Webpack을 학습했다. Webpack은 JS, CSS, HTML, 이미지 등의 리소스를 하나의 파일로 번들링해주는 툴이다. 웹 어플리케이션의 규모가 커지고, ES6부터 모듈을 지원하면..
[회고] 우아한테크코스 Level1 - 인격적으로 성장한 시간 우아한테크코스 Level1 (22.02.08~04.07) Keep 1. 리더 경험 주도적으로 우테코에 참여하였다. 리더로서 역할을 충실히 하였다. 자신감이 생겼다. 리더로서 발걸음의 시작. 스터디 2개를 열었고, 대부분의 상황에서 주도하려고 노력했다. 어떻게 하면 이 시간을 더 잘 보낼 수 있을까, 항상 고민했다. 확실히 지난 6개월 200명 집단을 이끌면서 많이 성장했다고 느낀다. 2. 무너지지 않고 걸어왔다. 새로운 집단에 들어오고, 새로운 교육 방식을 받아들이면서, 고민이 많았다. 항상 긍정적으로 생각하고, 해결방안에 대해 고민하며 잘 헤쳐나왔다. 이대로만 해도, 만족할 만한 개발 수준/인격적 수준을 이룰 수 있을 것 같다. 3. 감정 상한 것을 꺼내는 경험 나에게 4년정도 생각해온 묵은 문제가 있..
TypeScript 레벨업 하기(feat. Utility Type 분석) 유틸리티 타입 명세를 살펴보면, 타입스크립트를 더 잘 이해할 수 있어서 유틸리티 타입을 분석하는 글을 쓰고자 한다. 1. 유틸리티 타입이란? 타입스크립트는 타입 변환을 위한 유틸리티 타입을 제공한다. 이는 .ts 파일 어디서든 (전역으로) 사용 가능하다. 유틸리티 타입은 mapped type, Index type query operator(keyof), Indexed access operator(T[K]), Generic 등의 개념을 통해 정의되어 있다. 먼저 유틸리티 타입의 필요성을 느껴보자. interface AddressBook { name: string; phone: number; address: string; company: string; } const phoneBook = { name: '재택..
[주간회고] 우아한테크코스 7주차 - 확장성 좋은 패턴을 쓰기보다, 확장성에 직접 대응하기 이번 자판기 미션 페어 프로그래밍 유의미하고 재밌었다. 새로운 시도를 많이 했다. 1. 패턴 없이 코딩하기 2. scss 3. TS 모델링 -> TDD 4. 챌린징한 기능에 도전하기 5. 페어 일일 회고 Plus 1. 패턴 없이 코딩하기 지금까지 나는 MVC나 누군가 짜놓은 컴포넌트 구조 처럼 이미 확장성이 있는 구조들을 써왔다.(React도 포함) 그래서 코드를 짜면서 내가 직접 확장성에 대응해야할 일이 별로 없었다. 그냥 패턴에 정해진 대로 짜면 그것이 확장성에 대응하는 것. 이번에는 패턴 없이 ui/domain 분리만을 주안점으로 두고 짜다보니, 계속하여 확장성에 대응해야했다. view가 2개가 되면, view의 depth가 생기면, view의 의존이 생기면, view/domain의 의존이 생기면 ..
[Cypress] API Mocking 하기 Cypress로 테스트하다 보면, API를 Mocking하여 처리해야할 일이 생긴다. 다음과 같은 이유가 있다. 1. public api 를 이용할 때는 할당량이 있는 경우가 있어서, 테스트에 할당량을 낭비하지 않기 위해서 2. private api의 경우에도 서버 비용이 발생하기 때문에 Cypress는 공식 문서가 매우 잘 돼있기 때문에, 가급적 공식문서 읽기를 추천한다. API Mocking은 특히 intercept 개념을 읽으면 된다. https://docs.cypress.io/api/commands/intercept intercept | Cypress Documentation Spy and stub network requests and responses. Tip: We recommend you r..
[주간회고] 우아한테크코스 6주차 - 일의 우선순위 우선순위를 어떻게 해야할까 A. 중요하고 급한 일 B. 중요하지만 급하지 않은 일 (책, 운동, ...) C. 중요하지 않지만 급한 일 D. 중요하지 않고 급하지 않은 일 생각을 안 하고 살면 A -> C -> B -> D 내가 살아야할 방향 B -> A -> C -> D 중요하지만 급하지 않은 일에 꾸준히 시간을 할당하자. 그러기 위해서는 급한 일을 처리하고도 시간이 남을 만큼 시간을 부어야 한다. 시간을 많이 붓기 위해서, 아침 시간을 활용하고(100일 독서 습관), 처지기 않기 위해 노력하는(자주 카페에 가자) 등 여러 방식을 적용해보아야지. Plus 준과 포코와 면담을 하면서, 레벨1을 어떻게 보내야할까, 어떻게 공부해야할까 많이 이야기 나누고 생각했다. 결론은 자기 생각이 담긴 코드를 짜야한다는..
[JavaScript] 웹 컴포넌트에 Observer Pattern을 적용하여 상태관리하기 0. 서언 컴포넌트 구조는 황준일님의 를 참고했고, https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/ Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io Observer Pattern은 황준일님의 를 참고했습니다. https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-S..
[주간회고] 우아한테크코스 5주차 - 몰입할 수밖에 없는 환경의 중요성 5주차 키워드 : 진정성 있는 회고, 몰입할 수밖에 없는 환경, 피드백 주기를 짧게 가져가기 굉장히 밀도 있는 한 주였다. 미션의 난이도가 올라감에 따라, 매일 10시간 가까이 코딩을 했다. 너무 좋은 경험이다. 밀도 있게 시간을 보내면서, 자연스럽게 성장하게 되는 시간. 내가 굳이 성장하려는 노력을 하지 않아도, 지나보니 성장해있는 그런 시간. 사람이 크게 성장하기 위해서는 이와 같은 시간을 겪어야 한다는 생각이 들었다. 그래서 우테코를 시작한 것이 매우 잘 했다고 느낀다. 위와 같은 시간이 자칫하면, 수동적이고 일률적인 시간이 될 수가 있는데, 우테코는 또 그렇지가 않다. 스스로 학습하게끔 환경을 알맞게 맞추어 준다. 누가 시키지도 않았는데 열심히 하게 된다. 점점 난이도가 어려워짐에 따라, 더욱 밀..
[주간회고] 우아한테크코스 4주차 - 잘 쉬는 것 === 잘 공부하는 것 4주차 키워드 : 집중력, 스터디, 남의 코드 읽기, 불안할수록 열심히, 근본에 집중 불안함을 벗어나는 방법은 행동하는 것밖에 없다. 해야할 일이 많고, 머리가 복잡하고, 남들은 잘만 하는 것같을 때 혼란스럽고 생각만 많이 하게 된다. 그런데 생각을 파고 판다고 해서 문제가 해결되지는 않는다. 직면한 문제들을 하나하나 정복해나갈 때라야 안정을 취할 수 있다. 그리고 몰입하다 보면 불안하지 않다. 그냥 우직하게 열심히 하는 것밖에 없다. Keep 최근에 집중력이 떨어졌다고 느끼고 있다. 주변에 방해물이 많으니! 그래서 집중력을 높이기 위해 타이머를 활용하기 시작했다. 최소 50분은 집중하고 쉬어주려고 노력한다. 50분만 몰입해도 할 수 있는 것은 매우 많다. 몰입하는 것이 중요하다. 코드리뷰를 리뷰하는 스..
JavaScript로 추상 클래스, 추상 메소드를 구현하기 0. 서문 ES6 부터 JavaScript에서 class 문법을 지원하게 되었다. 그러면서 JavaScript로도 객체지향 프로그래밍을 하기 수월해졌다. (이전에는 생성자 함수와 prototype으로 구현하였다.) 그렇지만 여전히 Java와 같은 언어 만큼 객체지향을 지원한다고 할 수 없다. 이를테면, JavaScript에서는 추상 클래스와 추상 메소드를(abstract) 문법적으로 지원하지 않는다. 그럼에도 JavaScript 기본 문법을 활용하여 추상 클래스와 추상 메소드를 구현하는 방법을 알아보겠다. 1. 추상 클래스와 추상 메소드의 개념 먼저 추상 클래스와 추상 메소드의 개념에 대해 알아보자. 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를..

티스토리툴바