행복한 시지프

시리즈 0. 우아한테크코스 회고 1. 우아한테크코스에서의 기술 성장 기록 2. 우아한테크코스에서의 자기 성장 기록 3. 우아한테크코스에서 후회되는 점 우아한테크코스 회고 우아한테크코스 4기 프론트엔드 과정이 끝났다. 2022월 2월 8일부터, 11월 25일까지 약 10개월의 과정이었다. 매일 아침 10시부터 최소 밤 10시까지 공부했다. 공부 과정에는 기술 공부, 프로젝트 개발, 애자일 공부, 글쓰기, 리더 공부, 면접 준비 등이 포함된다. 고등학교 3학년 이후로 이렇게 열심히 한 적은 처음이었다. 인생에 고3 때처럼 노력하는 시기가 또 와야 한다고 생각하고 있었는데, 그게 우아한테크코스 기간이었다. 고등학교 때 2년의 공부를 통해 이전에 상상할 수 없는 대학교를 간 것 처럼, 올해 1년간의 공부를 통해..

더보기 서언 React v18 부터 Suspense가 API call에 따른 Loading 상태를 표현할 수 있게 되었습니다. 그에 따라, react-query, swr 같은 data fetching library가 Suspense를 지원하고 있습니다. suspense 옵션만 true로 설정해주면, API 요청 훅이 알아서 내부 처리를 통해 Suspense를 동작시킵니다. 이로써 로딩을 선언적으로 보여줄 수 있게 되었고, ErrorBoundary 조합과 함께라면 컴포넌트는 Success 케이스만 표현하면 되었습니다. 이런 혁신에 대해서는 잘 인지하고 있었지만, Suspense의 위험성에 대해서는 인지하지 못 했습니다. 특히 저희 서비스는 잘못된 Suspense 사용으로 어플리케이션 로딩 성능 저하를 겪었..

서언 TypeScript에는 Function Overloading 기능이 있습니다. 이번에 Function Overloading의 강력함을 깨닫고, 이를 공유하고자 아티클을 씁니다. 함수 오버로드가 왜 필요한지 이해하고, useRef 예시와 저희 프로젝트에 적용해본 예시를 설명드리겠습니다. 타입스크립트에서 함수 오버로딩이 왜 필요한가? 자바스크립트는 인자의 개수 제한, 인자의 타입 제한이 없습니다. 코드 예시를 보겠습니다. function add(a, b, c) { if (b) { if (c) { return a + b + c; } return a + b; } return a; } console.log(add(1, 2, 3)); // 6 console.log(add(1, 2)); // 3 console...

서언 현재 꼭꼭 서비스를 운영하고 있습니다. 안정적인 서비스 운영, 보다 나은 유저 경험을 제공하기 위해 (1) 섬세하고, (2) 빈틈 없는 에러 처리가 필수라는 생각이 들었습니다. (1) 섬세하다는 것은 상황에 맞는 에러를 적절히 보여 준다는 것을 의미하고, (2) 빈틈 없다는 것은 모든 API 요청에 에러 케이스를 고려한다는 것을 의미합니다. 그러면 고민이 심화됩니다. (1) 에러를 어떤 기준으로 분류하여 처리할 수 있을까? (2) 모든 요청에 에러를 붙인다면, 반복을 줄일 수 없을까? 이를 고민하여 나름대로 에러를 분류해보았고, ErrorBoundary(에러 경계) 라는 도구를 활용해 선언적이고 추상화된 에러 처리를 시도해보았습니다. 본 글은 에러 처리 전략, ErrorBoundary를 다룹니다. ..

서언 Context API는 쓰는 사람에 따라서 다양한 방식으로 사용됩니다. 그 이유는 Context API에서 전역적인 상태를 선언할 수 있고, 동시에 컴포넌트도 반환 해줄 수 있기 때문입니다. Context API 사용 예시를 찾아보면, 대부분 상태를 전역적으로 제공하는 역할을 하고, children을 그대로 반환해주는 형태를 많이 볼 수 있습니다. 하지만 컴포넌트를 반환할 수 있다는 특징을 활용하면 Toast, Modal, Loading 같은 UI를 선언적으로 사용할 수 있지 않을까 고민하였습니다. 이번 글은 [꼭꼭 팀]이 Context API를 사용하여 상태를 가진 UI를(Toast) 선언적으로 보여주는 방법에 대해 설명드리고자 합니다. 먼저 명령적인 Toast 사용을 알아보고, 하나씩 개선해나가..

이번 글은 TypeScript와 styled-components나 emotion을 함께 사용할 때, theme의 타입을 추론하는 방법을 다룹니다. 그 방법은 간단하지만, 숨겨진 원리가 있습니다. 방법을 먼저 설명한 후, 원리를 설명하도록 하겠습니다. theme 타입 추론하기 emotion, styled-components를 사용하면 아래와 같이 theme을 선언하고, ThemeProvider에 theme을 props로 넣어줍니다. // index.tsx const theme = { primary_500: '#FF5622', primary_400: '#FF7020', primary_300: '#FF9620', primary_200: '#FFB25B', primary_100: '#FFC17B', }; roo..

서언 웹 생태계에서 JavaScript는 브라우저와 뗄 수 없는 관계입니다. JavaScript는 매번 새로운 버전을 출시합니다. 그러면 브라우저는 최신 문법을 이해할 수 없게 됩니다. 만일 브라우저가 빠르게 대응한다고 하더라도, 사용자가 최신 브라우저를 사용할 것이라는 보장이 없습니다. 그러므로 브라우저가 최신 문법을 이해하도록 만들기 위해서 개발자가 노력을 가해야 합니다. 이때 사용할 수 있는 카드가 Compile 입니다. Compile의 중요성은 널리 알려진 것 같습니다. 하지만 Compile만으로 해결할 수 없습니다. Compile 만큼 중요한 것이 Polyfill 입니다. 이 글은 Compile과 Polyfill의 차이점과 그 역할에 초점을 맞춥니다. 컴파일이란? ES6+ 자바스크립트 코드를 E..

React로 만든 웹 사이트를 AWS EC2로 배포하고, 가비아에서 구매한 도메인과 연결하는 방법을 다룹니다. 목차1. port 없애기 (3000 -> 80)2. AWS Route53 호스팅3. 가비아에서 Name Server 연결 1. port 없애기 (3000 -> 80)현재 인스턴스로 build 했다면 publicIp:3000 이 배포 url일 것입니다.하지만, Route 대상으로 :3000 같은 port 번호를 쓸 수 없습니다.그러므로, react app start 를 할 때 80번 또는  443번 port로 build 되게끔 해야 합니다.80번은 http 기본 port이고443번은 https 기본 port입니다. 즉, 어떤 http domain에 :80을 붙여서 접근하든, 떼서 접근하든 동일하..

react-app(web server)을 배포하기 위하여 vercel이나 netlify와 같은 무료 호스팅 툴을 이용하여 웹 사이트를 배포할 수도 있지만, 트래픽 제한이 있기 때문에 언젠가 AWS 클라우드를 빌려 배포해야할 순간이 올 것입니다. 클라우드 / http 에 대한 정보는 기술하지 않고, 배포 방법에 집중하여 기술하겠습니다.AWS에 문외한인 프론트엔드 개발자를 위해 씁니다. 전체적인 순서는 다음과 같습니다.(1편 - 웹 사이트 배포)1. AWS 가입2. 인스턴스 생성3. 인스턴스에 접근하여 AWS 컴퓨터 로컬 환경 조작4. build 후 웹 사이트 띄우기 (2편 - Custom 도메인과 연결 - with 가비아)1. port 없애기 (3000 -> 80)2. 가비아에서 Name Server 연결..

한 레포지터리에서 프론트엔드, 백엔드 폴더를 분리하여 공동 작업을 하고 있었다. 같은 기능을 동시에 개발하고 있어서, 백엔드 코드를 rebase 받아서 local에서 구동해보려고 했다. 그 과정에서 프/백 commit이 합쳐진 상태로 PR을 올리게 되었다. 즉, 1. 내가 작업하지 않은 커밋 또한 PR에 올라갔고, 2. 내가 백엔드 코드를 rebase한 시점 이후에 백엔드 코드가 수정되었을 경우, conflict가 예상되었다. 그러므로, 백엔드 commit history를 제거한 후, PR을 올리고자 했다. 그림으로 표현하면 다음과 같다. 아래처럼, 백엔드 코드가 사이에 끼어있어서, reset 할 수도 없는 상황이다. 위 상황을 아래와 같이 개선하고자 한다. 해결 방법 1. base target bran..

내가 정의한 절망의 계곡은, A라는 개념을 모르는데, A를 공부해도, A를 알 수 없는 상태를 말했다. A가 검색해도 나오지 않는다거나, 여러 개념이 얽혀있어서 읽어도 이해할 수 없었다. 크루들과 대화하면서 이를 극복할 수 있었다. 내가 정확히 무엇을 모르는지 메타인지 할 수 있었다. A를 이해하려면 사실 B, C, D를 이해해야 하는데, A만 주구장창 파고든다고 A를 이해할 수 없었던 것이다. B, C, D를 이해했다고 착각했던 것이다. 이에 대하여 다음에 길게 글을 쓰겠다. Plus 월화수목 11시까지, 목요일 10시반까지 공부했다. 가방을 우테코에 두고다녔다. 집갈때에는 공부에 대한 짐을 벗어던질 수 있어, 마음이 편안함 다음날 일찍 가게 됨. 씻고 바로 자게 됨. 근로 회의를 4번이나 했다. 목적..

Plus TypeScript 레벨 업 중.. 느껴진다! 이제 어느정도 잘 쓸 수 있는 것 같다. 크루들 너무 재밌다. 막 친해지는 단계라서 이야기하는 시간이 많아지고 있다 ㅋ.ㅋ 포코와 준과 conversation 140개를 나누었다. 포코가 코드 전반적으로 모두 봐주었다. lint, ts, 클린코드 등 너무 좋은 코멘트를 많이 받았다. 벽이 높아서 절망하기도 했지만... 많이 도움되고 성장할 수 있었다. 이번주는 집와서도 공부했다. 그래서 우테코에서의 시간을 조금 피곤하게 보내지 았나 싶다. 좋은지는 모르겠다. 그냥 아침에 할까 Storybook에 적응했다. 재미도 있고, 매우 유용하다고 느낀다. Minus 절망의 계곡에 빠진 것 같다. 좋은 코드가 무엇인지 어렴풋이 알겠지만, 그것을 구현하는 것은 너..

크루들과 나눈 우아한 대화 #1 아놀드, 병민, 앨버와 아주 재밌는 대화를 나누었고, 많이 배웠다. 대화의 시작은 이러했다. "Props로 item 정보가 담긴 객체와 아이템을 삭제하는 함수 (deleteItem)을 넘겨준다고 했을 때, useCallback과 memo로 초기화 하는 것이 의미가 있을까?" return ( itemList.map(item => ) ) 이 상황에서 하나의 item이 업데이트 되면, 모든 Item이 리렌더링 될 것이다. 내가 가진 의문은, 연관없는 Item 컴포넌트가 다시 그려질지언정, Item이 같은 것을 그리고 있다면 diff 알고리즘이 바뀌었다고 인식하지 않기 때문에, 리렌더링 하지 않을까? 하는 것이었다. 내가 잘못 알거나 / 얕게 알고있었던 것은 - 렌더링이란 (함수..

React 18(22.3.29)에서 Batching이 더욱 강화되었다. Batching은 React에서 굉장히 중요한 개념이며, 최적화에 크게 기여하고 있다. 하지만 생각보다 Batching은 초보 리액트 개발자에게 널리 알려지지는 않은 것같다. 이번 포스팅에서 Batching이란 무엇이며, Batching을 알고나면 어떤 이점을 얻을 수 있는지 다루고자 한다. 배칭(Batching)이란? batch는 일괄이라는 의미이다. React에서는 어떤 의미로 쓰일까? 사례를 통해 알아보자. 아래 코드에서 button을 누르면 콘솔에 무엇이 찍힐까? function App() { const [count, setCount] = useState(0); const handleClick = () => { setCount..

시간이 너무나 잘 간다. 레벨2를 시작한지 한달이 되었고, 방학까지 또 한달이 남았다. 우테코에서 리액트 미션을 수행하고 나면, 드라마틱하게 잘 해질 것이라고 생각했는데, 아직 드라마틱하지는 않다. 여전히 허겁지겁 배우는 것에 급급하다. redux 어질어질~.. 그래도 시야는 확실히 트고 있다. 응집도/비즈니스 로직-UI 분리/컴포넌트 재사용성/custom hook 재사용성 등 보지 못했던 것이 보이기 시작했다. 드라마틱하게 잘 해지기 위해서 어떤 것을 더 탐구해야할까? 드라마틱하게 잘 한다는 것은 뭘까? 잘 한다는 것이 무엇인지부터가 모호하다. 잘 하는분들의 코드를 보고, 지향점을 찾아보자. 계속 본인의 코드에 얽매여 있으면 안 된다. 다른 사람의 코드를 얕게 들여다보는 것으로는 탈피할 수 없다. 깊이..

이번주도 초집중 상태로 한 주를 보냈다. useReducer, useCallback, memo, ErrorBoundary, context API 등 새로 배우고 적용해본 것들이 많았다. 잘 흡수해냈다. 리액트 공부한지 이제 1년이 되었는데, 왜 진작에 몰랐을까. 공식문서를 안 읽고, 인강/블로그 등을 기준으로 공부해서 그런 것 같다. 개발은 곧 공식문서다! 요새 공식문서는 또 얼마나 잘 되어있냐... 기준은 공식문서로 잡고, 블로그는 참고용으로 써야한다. 개발 관련해서 고민도 많다. 이전에는 뭘 해야 레벨업을 할 수 있을까 감이 안 잡혔다. 무엇을 고민해야할 지 감이 안 잡혔다. 이제는 어떻게 레벨업 할 수 있을 지 감이 온다. 이대로만 하면 좋은 개발자가 될 것이라고 확신한다. Plus 정말 정말 바쁜..

함수형 컴포넌트는 이벤트 부착시점의 상태를 기억한다.함수형 컴포넌트와 클래스형 컴포넌트의 결정적인 차이를 중심으로 다룬다.문제 상황const [count, setCount] = useState(0);useEffect(() => { window.addEventListener('unload', handleUnload); }, []);const handleUnload = () => { localStorage.setItem("count", count);};return ( setCount(count + 1)}>+ )위와 같은 코드가 있다button을 클릭했을 때 count가 1씩 증가하고,화면을 닫을 때(unload), 로컬스토리지에서 count를 기억한다.button을 5회 누른 후, 화면을 ..

하루에 열시간 이상씩 개발하고 있다. 단순히 코드를 치는 것을 넘어서, 어떻게 짜면 더 가독성이 좋고, 성능이 좋고, 재사용성이 좋을까 고민하면서 개발하고 있다. 이전에는 크게 고민하지 않고, 돌아가는 코드를 짜는 데 신경을 썼다고 하면, 지금은 돌아가는 코드는 당연하고, 더 좋은 코드에 대해 고민하고 있다. 이렇게 일주일만 보냈는데도, 매우 성장했다고 느껴졌다. 레벨1이 깔끔한 코드에 대한 지식을 쌓고, 다양한 방법들을 깨달은 시간이었다면, 레벨2는 나만의 방식으로 깔끔한 코드를 만들어가는 시간인 것같다. 레벨2 이대로만 보내면 좋은 개발자가 되리라고 확신이 들었다. Plus 1. 수, 목, 금 8시 50분에 왔다. 일찍 와서 1시간 추가적인 공부 시간을 가지니 확실히 지식이 들어난다고 느낀다. 다음주..

오프라인 교육장에 가서 교육을 듣기 시작했다. 너무 즐겁고, 의미있는 한주였다. Plus 1. 오프라인 너무 좋았다. 노력하지 않아도 열심히 하게 되는 환경. 아침에 일어나서 잠실에 도착하는 행위, 밤까지 공부하다가 집가는 행위만 하면 된다. 그 안에 있는 일들은 그냥 굴러간다. 2. 레벨인터뷰 긴장되고, 크게 자신은 없었는데, 잘 했던 것 같다. 칭찬도 많이 받았다. 레벨인터뷰를 위한 모의 인터뷰를 해본 것도 좋았다. 즉흥으로 모았는데 성공적이었다. 3. 좋은 리더가 되는 것에 관심이 많다. 이것에 대하여 준과 면담을 했다. 망설이다가 그냥 메일을 보내고 면담 신청을 했다. 내가 리더로서 나아가고자 하는 것에 준이 응원해주셨고, 방향성을 얻게 되었다. 앞으로 리더 일지를 써야겠다. 4. 출근길, 퇴근길..

우아한테크코스 레벨 로그 1) 계산기 미션 E2E 테스트를 학습하였다. 사용자의 입장에서 전체 플로우를 테스트 하는 것이다. 그 툴로 Cypress 라이브러리를 사용하였다. 사용자 입장에서 UI와 상호작용하는 전체 과정을 테스트할 수 있었다. 2) 자동차 경주 미션 TDD를 시도해보았다. TDD는 테스트를 기반으로 기능을 정상적으로 구현하고, 리팩터링하는 과정을 통칭한다. TDD는 코드가 달성하고자 하는 목표를 명확히 정의하기 때문에, 코드가 방대해지지 않고 명확한 목적을 가진 코드를 작성할 수 있었다. 3) 로또 미션 Webpack을 학습했다. Webpack은 JS, CSS, HTML, 이미지 등의 리소스를 하나의 파일로 번들링해주는 툴이다. 웹 어플리케이션의 규모가 커지고, ES6부터 모듈을 지원하면..

우아한테크코스 Level1 (22.02.08~04.07) Keep 1. 리더 경험 주도적으로 우테코에 참여하였다. 리더로서 역할을 충실히 하였다. 자신감이 생겼다. 리더로서 발걸음의 시작. 스터디 2개를 열었고, 대부분의 상황에서 주도하려고 노력했다. 어떻게 하면 이 시간을 더 잘 보낼 수 있을까, 항상 고민했다. 확실히 지난 6개월 200명 집단을 이끌면서 많이 성장했다고 느낀다. 2. 무너지지 않고 걸어왔다. 새로운 집단에 들어오고, 새로운 교육 방식을 받아들이면서, 고민이 많았다. 항상 긍정적으로 생각하고, 해결방안에 대해 고민하며 잘 헤쳐나왔다. 이대로만 해도, 만족할 만한 개발 수준/인격적 수준을 이룰 수 있을 것 같다. 3. 감정 상한 것을 꺼내는 경험 나에게 4년정도 생각해온 묵은 문제가 있..

유틸리티 타입 명세를 살펴보면, 타입스크립트를 더 잘 이해할 수 있어서 유틸리티 타입을 분석하는 글을 쓰고자 한다. 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: '재택..

이번 자판기 미션 페어 프로그래밍 유의미하고 재밌었다. 새로운 시도를 많이 했다. 1. 패턴 없이 코딩하기 2. scss 3. TS 모델링 -> TDD 4. 챌린징한 기능에 도전하기 5. 페어 일일 회고 Plus 1. 패턴 없이 코딩하기 지금까지 나는 MVC나 누군가 짜놓은 컴포넌트 구조 처럼 이미 확장성이 있는 구조들을 써왔다.(React도 포함) 그래서 코드를 짜면서 내가 직접 확장성에 대응해야할 일이 별로 없었다. 그냥 패턴에 정해진 대로 짜면 그것이 확장성에 대응하는 것. 이번에는 패턴 없이 ui/domain 분리만을 주안점으로 두고 짜다보니, 계속하여 확장성에 대응해야했다. view가 2개가 되면, view의 depth가 생기면, view의 의존이 생기면, view/domain의 의존이 생기면 ..

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..

우선순위를 어떻게 해야할까 A. 중요하고 급한 일 B. 중요하지만 급하지 않은 일 (책, 운동, ...) C. 중요하지 않지만 급한 일 D. 중요하지 않고 급하지 않은 일 생각을 안 하고 살면 A -> C -> B -> D 내가 살아야할 방향 B -> A -> C -> D 중요하지만 급하지 않은 일에 꾸준히 시간을 할당하자. 그러기 위해서는 급한 일을 처리하고도 시간이 남을 만큼 시간을 부어야 한다. 시간을 많이 붓기 위해서, 아침 시간을 활용하고(100일 독서 습관), 처지기 않기 위해 노력하는(자주 카페에 가자) 등 여러 방식을 적용해보아야지. Plus 준과 포코와 면담을 하면서, 레벨1을 어떻게 보내야할까, 어떻게 공부해야할까 많이 이야기 나누고 생각했다. 결론은 자기 생각이 담긴 코드를 짜야한다는..

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주차 키워드 : 진정성 있는 회고, 몰입할 수밖에 없는 환경, 피드백 주기를 짧게 가져가기 굉장히 밀도 있는 한 주였다. 미션의 난이도가 올라감에 따라, 매일 10시간 가까이 코딩을 했다. 너무 좋은 경험이다. 밀도 있게 시간을 보내면서, 자연스럽게 성장하게 되는 시간. 내가 굳이 성장하려는 노력을 하지 않아도, 지나보니 성장해있는 그런 시간. 사람이 크게 성장하기 위해서는 이와 같은 시간을 겪어야 한다는 생각이 들었다. 그래서 우테코를 시작한 것이 매우 잘 했다고 느낀다. 위와 같은 시간이 자칫하면, 수동적이고 일률적인 시간이 될 수가 있는데, 우테코는 또 그렇지가 않다. 스스로 학습하게끔 환경을 알맞게 맞추어 준다. 누가 시키지도 않았는데 열심히 하게 된다. 점점 난이도가 어려워짐에 따라, 더욱 밀..

4주차 키워드 : 집중력, 스터디, 남의 코드 읽기, 불안할수록 열심히, 근본에 집중 불안함을 벗어나는 방법은 행동하는 것밖에 없다. 해야할 일이 많고, 머리가 복잡하고, 남들은 잘만 하는 것같을 때 혼란스럽고 생각만 많이 하게 된다. 그런데 생각을 파고 판다고 해서 문제가 해결되지는 않는다. 직면한 문제들을 하나하나 정복해나갈 때라야 안정을 취할 수 있다. 그리고 몰입하다 보면 불안하지 않다. 그냥 우직하게 열심히 하는 것밖에 없다. Keep 최근에 집중력이 떨어졌다고 느끼고 있다. 주변에 방해물이 많으니! 그래서 집중력을 높이기 위해 타이머를 활용하기 시작했다. 최소 50분은 집중하고 쉬어주려고 노력한다. 50분만 몰입해도 할 수 있는 것은 매우 많다. 몰입하는 것이 중요하다. 코드리뷰를 리뷰하는 스..

0. 서문 ES6 부터 JavaScript에서 class 문법을 지원하게 되었다. 그러면서 JavaScript로도 객체지향 프로그래밍을 하기 수월해졌다. (이전에는 생성자 함수와 prototype으로 구현하였다.) 그렇지만 여전히 Java와 같은 언어 만큼 객체지향을 지원한다고 할 수 없다. 이를테면, JavaScript에서는 추상 클래스와 추상 메소드를(abstract) 문법적으로 지원하지 않는다. 그럼에도 JavaScript 기본 문법을 활용하여 추상 클래스와 추상 메소드를 구현하는 방법을 알아보겠다. 1. 추상 클래스와 추상 메소드의 개념 먼저 추상 클래스와 추상 메소드의 개념에 대해 알아보자. 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를..

3주차 키워드 : 리팩터링 공부 시작, 오전 공부, comfort zone Keep 저번주에 학습해야할 리스트를 밀리지 말자고 다짐했다. 이번주에 학습할 것이 생기면 키워드로 옮겨적고 시간이 나면 바로 학습했다. 클로저, 은닉, jest, reduce,every,some, 웹팩, 디바운스 스로틀링, insertAdjacentHTML 등 우테코는 10시부터 6시까지 한다. 그러다보니 아침과 저녁시간이 비게되고 이를 잘 활용하고 싶었다. 그래서 우테코 크루와 10시 이전에 1시간 공부하기로 약속했다. 평일 오전 1시간을 공부로 채웠고, 상쾌한 아침을 시작했다. 확실히 오전이라 집중도 잘 되어 온전히 공부에 시간을 쏟을 수 있었다. 1시간밖에 안되지만, 매일 실천하다 보니 공부량이 늘어난 기분이 든다. 다음 ..