본문 바로가기

분류 전체보기

(69)
[주간회고] 우아한테크코스 Level2 5주차 - 절망의 계곡 Plus TypeScript 레벨 업 중.. 느껴진다! 이제 어느정도 잘 쓸 수 있는 것 같다. 크루들 너무 재밌다. 막 친해지는 단계라서 이야기하는 시간이 많아지고 있다 ㅋ.ㅋ 포코와 준과 conversation 140개를 나누었다. 포코가 코드 전반적으로 모두 봐주었다. lint, ts, 클린코드 등 너무 좋은 코멘트를 많이 받았다. 벽이 높아서 절망하기도 했지만... 많이 도움되고 성장할 수 있었다. 이번주는 집와서도 공부했다. 그래서 우테코에서의 시간을 조금 피곤하게 보내지 았나 싶다. 좋은지는 모르겠다. 그냥 아침에 할까 Storybook에 적응했다. 재미도 있고, 매우 유용하다고 느낀다. Minus 절망의 계곡에 빠진 것 같다. 좋은 코드가 무엇인지 어렴풋이 알겠지만, 그것을 구현하는 것은 너..
크루들과 나눈 우아한 대화 #1 (React rendering, commit phase, memo) 크루들과 나눈 우아한 대화 #1 아놀드, 병민, 앨버와 아주 재밌는 대화를 나누었고, 많이 배웠다. 대화의 시작은 이러했다. "Props로 item 정보가 담긴 객체와 아이템을 삭제하는 함수 (deleteItem)을 넘겨준다고 했을 때, useCallback과 memo로 초기화 하는 것이 의미가 있을까?" return ( itemList.map(item => ) ) 이 상황에서 하나의 item이 업데이트 되면, 모든 Item이 리렌더링 될 것이다. 내가 가진 의문은, 연관없는 Item 컴포넌트가 다시 그려질지언정, Item이 같은 것을 그리고 있다면 diff 알고리즘이 바뀌었다고 인식하지 않기 때문에, 리렌더링 하지 않을까? 하는 것이었다. 내가 잘못 알거나 / 얕게 알고있었던 것은 - 렌더링이란 (함수..
[React] Batching을 활용한 렌더링 최적화 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..
[주간회고] 우아한테크코스 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년정도 생각해온 묵은 문제가 있..