스타트업의 방식은 고유하다스타트업은 대기업의 작은 모형이 아니다.스타트업은 탐색(비즈니스 모델 검증)을 위한 임시적인 조직이다.성공과 실패를 모두 경험하면서 정말 중요한 것은 지루한 일임을 알게 되었다. 스타트업 성공은 좋은 유전자의 결과나 시기, 장소 때문이 아니었다. 올바른 프로세스를 따름으로 얻어지는 것이다. 따라서 배울 수 있는 것이고, 다르게 표현하자면 가르쳐줄 수 있다는 말이다. 당장의 작은 성공에 취하지 말고 기둥을 탄탄히 하라사업 성장할수록 고객이 ‘왜 자사의 제품 혹은 서비스를 쓰는지’ 알기가 더 어려워진다. 첫째는 제품에 핵심과 상관없는 기능들을 추가해 측정 변수가 복잡해졌기 때문이고, 둘째는 데이터를 열심히 분석하지 않아도 성장하니까 단편적인 해석에 만족하여 CEO가 게을러지기 때문이..
유저와 상호작용하는 웹페이지를 위해 반드시 알아야 하는 개념이 있다. 바로 이벤트이다. 화면 상의 요소를 클릭하거나, 스크롤을 하거나, 값을 입력하는 등의 상호작용은 모두 이벤트를 통해 처리된다. 프론트엔드에서 이벤트는 없어서는 안 될 필수적인 존재다. 그런데 이벤트를 공부하다 보면 이벤트의 동작 방식이 생각보다 복잡하다는 사실을 알 수 있다. 이벤트를 잘 다루기 위해서는 이벤트가 어떻게 동작하는지를 이해해야 한다. 이번 포스팅을 통해 이벤트의 동작 방식인 이벤트 전파 및 관련 개념들에 대해 정리하고자 한다. 목차는 다음과 같다. 1. 이벤트 전파 1-1. 이벤트 전파란 1-2. 이벤트 전파가 존재하는 이유 1-3. 이벤트 전파 막는 법 2. 캡처링 2-1. 캡처링이란 2-2. 활용 방법 2-3. 예시 ..
지난 2장 포스팅에 이어 3장을 정리한다.프론트엔드 관련해서 정리할 것도 밀렸는데, 객체지향 글을 쓰고 있으니 약간의 죄책감이 느껴진다.솔직히 이게 맞을까 하는 의구심도 들지만, 스터디에서 힘들게 배웠던 내용을 잊고 싶지 않아 정리하려 한다.그만큼 이 개념들이 내 코딩 스타일에 유의미한 변화를 줄 수 있을 것이라 믿고 있다.아무튼 본론으로 돌아와, 이번 장의 원제는 Employment이고 번역본 상으로는 직장생활이다. 저자가 매 챕터 이름에 의미를 부여하는 것 같은데, 이번 챕터 이름은 어떤 의미인지 도무지 모르겠다.추측은 일 잘하는 객체 만드는 법 정도가 아닐까 싶은데, 좀 억지 같다. 😅 이번 장의 목차는 다음과 같다.1. 5개 이하의 public 메서드만 노출하세요2. 정적 메서드를 사용하지 마세..
DOM은 프론트엔드 개발을 하다보면 자주 접할 수밖에 없는 개념이다. 화면을 동적으로 조작하기 위해서는 필수적으로 사용해야 하기 때문이다. 그런데 DOM API를 자주 사용하고 있으면서도, DOM이라는 게 무엇인지 구체적으로 와닿지 않는다. 또한 DOM과 함께 Node, Element라는 개념도 등장해 혼란을 가중시킨다. 이번 포스팅에서는 우리에게 가까운 듯 멀게 느껴지는 DOM, Node, Element의 개념을 명확히 정리하고자 한다. 목차는 다음과 같다. 1. DOM 1-1. 정의 1-2. DOM이 생긴 이유 1-3. DOM이 아닌 것 2. Node 2-1. 정의 2-2. 유형 3. Element 3-1. 정의 (웹 프론트엔드에서는 XML이 아닌 HTML을 주로 다루므로 아래에서 XML에 대한 언급..
리액트를 사용하면 컴포넌트가 상태 변화를 감지하도록 하기 위해 별도로 신경 쓸 필요가 없다. 리액트에서 제공하는 useState라는 편리한 도구가 있기 때문이다. setState로 상태를 원하는 대로 수정만 하면 컴포넌트가 변경 사항을 자동으로 *감지한다. *여기서 감지한다는 표현은, 상태 변화가 발생할 때 리렌더를 수행한다는 의미이다. 반면, 바닐라 JS로 SPA를 만들면 상태 변화를 UI에 반영하기 위해 일일이 처리해 주어야 한다. 상태가 변경되었을 때 해당 상태를 보여주고 있는 컴포넌트를 다시 렌더해 주어야 한다. 이 작업이 생각보다 골치 아프다. 안 그래도 이것저것 많은 책임을 맡고 있는 우리의 컴포넌트를 더 복잡하게 만든다. 더군다나, 만약 하나의 상태를 여러 곳에서 보여주고 있다면 로직의 복잡..
우아한테크코스 레벨 1 미션을 하며 바닐라 JS로 SPA 앱을 만들게 되었다. 동적 렌더를 하기 위해서는 JS를 통해 DOM Element를 추가해야 했다. 리액트만 사용했던 터라 JS로 DOM Element를 추가하는 방법에 대해 진지하게 고민해본 적은 없었다. 이번 기회에 학습해보니 DOM Element를 추가할 수 있는 방법에는 크게 두 가지가 있었다. 바로 createElement와 innerHTML이다. 둘은 결과물만 놓고 보았을 때는 유사하지만, 사용 방법이나 동작 방식, 그리고 그에 따른 장단점에 차이가 존재했다. 이번 포스팅을 통해 두 방식의 사용법에 대해 간단히 알아보고, 둘을 비교해보겠다. 목차는 다음과 같다. 1. 소개 1-1. createElement 1-2. innerHTML 2...
지난 1장 포스트에 이어 2장에 대한 정리를 하려고 한다. 이번 장의 원제는 'Education'이고, 번역본 상으로는 '학교생활'이다. 학교에 들어가 가장 중요하게 배우는 게 무엇인가? 바로 사회생활이다. 이번 장에서는 사회생활 잘하는 객체에 관한 내용을 다룬다. 소통에 용이한 객체를 만들기 위해 지켜야 할 원칙에는 무엇이 있는지 알아보자. 목차는 다음과 같다. 1. 가능하면 적게 캡슐화하세요 2. 최소한 뭔가는 캡슐화하세요 3. 항상 인터페이스를 사용하세요 4. 메서드 이름을 신중하게 선택하세요 5. 퍼블릭 상수를 사용하지 마세요 6. 불변 객체로 만드세요 7. 문서화 대신 테스트를 작성하세요 8. 모의 객체(Mock) 대신 페이크 객체(Fake)를 사용하세요 9. 인터페이스를 짧게 유지하고 스마트(..
유닛 테스트를 작성하다 보면, 내 코드가 테스트 불가능한(혹은 어려운) 경우가 있다. 이럴 때면 당혹감과 함께 여러가지 의문이 밀려든다. '왜 내 코드는 테스트하기 어려울까?' '어떻게 수정해야 테스트가 쉬워질까?' '근데 테스트를 위해 구현부를 수정하는 게 좋은 선택일까?' 이 의문들을 해소하고자 구글링을 해보았고 유명인사 향로님의 블로그에서 좋은 글들을 발견했다. 1. 테스트하기 좋은 코드 - 테스트하기 어려운 코드 2. 테스트하기 좋은 코드 - 제어할 수 없는 코드 개선 3. 테스트하기 좋은 코드 - 외부에 의존하는 코드 개선 위 글들을 나의 언어로 조금 더 간결하게 정리해보고자 한다. (참고로 여기서 다루는 테스트는 '유닛 테스트'이다) 목차는 다음과 같다. 1. 테스트하기 어려운 코드 2. 테스..
- Total
- Today
- Yesterday
- 우테코
- 프리코스
- SEO
- 프론트엔드
- 엘레강트 오브젝트
- 우테코 6기
- 컴포넌트
- 객체지향
- 우테코 프론트엔드
- 디자인 패턴
- 옵저버 패턴
- 브라우저
- 우아한테크코스
- 자소서
- next js seo
- 레벨 1
- dom
- 5월2주차
- 테스트코드
- observer
- next js
- 우아한테크코스 6기
- 레벨2
- testable
- 이벤트 전파
- 유닛테스트
- 조영호
- 회고
- 객체지향원칙
- 예고르
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |