본문 바로가기

전체 글

(66)
[주간회고] 우아한테크코스 Level2 4주차 - 안전지대에서 탈피하기 시간이 너무나 잘 간다. 레벨2를 시작한지 한달이 되었고, 방학까지 또 한달이 남았다. 우테코에서 리액트 미션을 수행하고 나면, 드라마틱하게 잘 해질 것이라고 생각했는데, 아직 드라마틱하지는 않다. 여전히 허겁지겁 배우는 것에 급급하다. redux 어질어질~.. 그래도 시야는 확실히 트고 있다. 응집도/비즈니스 로직-UI 분리/컴포넌트 재사용성/custom hook 재사용성 등 보지 못했던 것이 보이기 시작했다. 드라마틱하게 잘 해지기 위해서 어떤 것을 더 탐구해야할까? 드라마틱하게 잘 한다는 것은 뭘까? 잘 한다는 것이 무엇인지부터가 모호하다. 잘 하는분들의 코드를 보고, 지향점을 찾아보자. 계속 본인의 코드에 얽매여 있으면 안 된다. 다른 사람의 코드를 얕게 들여다보는 것으로는 탈피할 수 없다. 깊이..
[주간회고] 우아한테크코스 Level2 3주차 - 초집중상태 이번주도 초집중 상태로 한 주를 보냈다. useReducer, useCallback, memo, ErrorBoundary, context API 등 새로 배우고 적용해본 것들이 많았다. 잘 흡수해냈다. 리액트 공부한지 이제 1년이 되었는데, 왜 진작에 몰랐을까. 공식문서를 안 읽고, 인강/블로그 등을 기준으로 공부해서 그런 것 같다. 개발은 곧 공식문서다! 요새 공식문서는 또 얼마나 잘 되어있냐... 기준은 공식문서로 잡고, 블로그는 참고용으로 써야한다. 개발 관련해서 고민도 많다. 이전에는 뭘 해야 레벨업을 할 수 있을까 감이 안 잡혔다. 무엇을 고민해야할 지 감이 안 잡혔다. 이제는 어떻게 레벨업 할 수 있을 지 감이 온다. 이대로만 하면 좋은 개발자가 될 것이라고 확신한다. Plus 정말 정말 바쁜..
[React] 함수형 컴포넌트는 왜 이벤트 부착 시점의 상태를 기억할까? 함수형 컴포넌트는 이벤트 부착시점의 상태를 기억한다. 함수형 컴포넌트와 클래스형 컴포넌트의 결정적인 차이를 중심으로 다룬다. 문제 상황 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회 누른 후, 화면을..
[주간회고] 우아한테크코스 Level2 2주차 - 폭발적인 성장 하루에 열시간 이상씩 개발하고 있다. 단순히 코드를 치는 것을 넘어서, 어떻게 짜면 더 가독성이 좋고, 성능이 좋고, 재사용성이 좋을까 고민하면서 개발하고 있다. 이전에는 크게 고민하지 않고, 돌아가는 코드를 짜는 데 신경을 썼다고 하면, 지금은 돌아가는 코드는 당연하고, 더 좋은 코드에 대해 고민하고 있다. 이렇게 일주일만 보냈는데도, 매우 성장했다고 느껴졌다. 레벨1이 깔끔한 코드에 대한 지식을 쌓고, 다양한 방법들을 깨달은 시간이었다면, 레벨2는 나만의 방식으로 깔끔한 코드를 만들어가는 시간인 것같다. 레벨2 이대로만 보내면 좋은 개발자가 되리라고 확신이 들었다. Plus 1. 수, 목, 금 8시 50분에 왔다. 일찍 와서 1시간 추가적인 공부 시간을 가지니 확실히 지식이 들어난다고 느낀다. 다음주..
[주간회고] 우아한테크코스 Level2 1주차 - 환경의 중요성 오프라인 교육장에 가서 교육을 듣기 시작했다. 너무 즐겁고, 의미있는 한주였다. Plus 1. 오프라인 너무 좋았다. 노력하지 않아도 열심히 하게 되는 환경. 아침에 일어나서 잠실에 도착하는 행위, 밤까지 공부하다가 집가는 행위만 하면 된다. 그 안에 있는 일들은 그냥 굴러간다. 2. 레벨인터뷰 긴장되고, 크게 자신은 없었는데, 잘 했던 것 같다. 칭찬도 많이 받았다. 레벨인터뷰를 위한 모의 인터뷰를 해본 것도 좋았다. 즉흥으로 모았는데 성공적이었다. 3. 좋은 리더가 되는 것에 관심이 많다. 이것에 대하여 준과 면담을 했다. 망설이다가 그냥 메일을 보내고 면담 신청을 했다. 내가 리더로서 나아가고자 하는 것에 준이 응원해주셨고, 방향성을 얻게 되었다. 앞으로 리더 일지를 써야겠다. 4. 출근길, 퇴근길..
[기술회고] 우아한테크코스 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..