BO의 개발로그

날이 가면 갈수록 TIL 작성에 더 많은 시간이 걸리고 있다. 일단 내가 정리하면서 파보고 싶은 소재를 하나 정하는 데에도 시간이 걸리고, 소재가 결정된 뒤 해당 내용을 공부하고, 그 내용을 기승전결에 맞게 정리하여 글을 작성하는 데에 적지 않은 시간이 들게 되어 하루에 하나씩 글을 업로드해야 하는 상황에서 고민이 많은 요즘이다. 이게 바로 창작의 고통...? 그래도 이왕 쓰는 블로그 할 거면 제대로 작성하고 싶은 마음이지만 그렇게 되면 TIL로만 거의 3시간? 가까이 써야지나 겨우 내가 만족하는 수준의 글을 작성할 수 있고.. 그렇다고 3시간을 TIL에 투자하기엔 TIL 외에도 할 공부가 많다는 게... 문제다 ㅎㅎ.. 게다가 3시간 가까이 투자하고도 맘에 안 드는 퀄리티인 경우도 많다..😅 안 그래도..

오늘은 14주차 풀스택 과정의 주말 학습의 둘째 날! 도합 15시간에 가까운 압도적 분량에 정신이 혼미하지만... 그래도 뜬금없는 내용이 아니라 13주간 배웠던 개념들을 총망라해서 마카오 뱅크라는 하나의 웹 서비스를 만드는 거라 재밌게 보고 있다. (but 아직 다 못 봄..) 12~13주차 2주 간 React, 즉 프론트엔드에서 TDD하는 법을 배웠고, 백엔드 TDD에는 나름 익숙해졌지만 React로 TDD하는 것은 완전 처음인 데다가 그동안 구현부터 했던 버릇이 남아있어 테스트 코드 먼저 작성하는 것에 익숙해지는 데 조금 고생을 했다. 그러다 문득 과정 시작 전에 봤었던 홀맨님의 FEConf 2020 영상이 생각났고, 지금 시점에서 다시 본다면 지난번 봤을 때보다 느껴지는 게 다르지 않을까? 싶어 이..

이번 주 과제였던 뽀모도로 타이머의 오늘의 명언 기능을 구현하다가 public 폴더에 넣어 놓은 한글로 된 명언 목데이터를 불러오는 과정에서 json 파일을 계속 읽어 들이지 못해 우선 영어로 된 명언 API를 사용해 과제를 제출했다. 그리고 어제 주간 회고에 해당 내용에 대해서 언급했는데(위 사진), 코딩의 신 아샬님이 해결방법을 친히 알려주셨다!🥹 그간 로컬 json 파일을 못 불러온 적은 없었어서 혹시 Parcel을 사용하기 때문인가? 하는 추측을 하긴 했었는데 역시나! 알려주신 방법대로 parcel-reporter-static-files-copy(링크)를 설치하고, public이 아닌 static 폴더에 json 파일을 넣으면 해결된다! 덕분에 오늘의 명언이 영어 명언이 아닌 한글 명언을 불러올 ..

이번 주에는 코딩 과제 말고 연구글 과제도 주어졌다. 참고 문서를 바탕으로 브라우저 동작 원리에 대해 정리하기! 이건 한 1년 전에 한번 읽었었던 문서인데, 웹 개발자라면 무조건 알고 있어야 하는 지식이라고 생각된다. 실제로 면접 때 브라우저 동작 원리에 대해서 간단하게 설명해달라는 질문을 받은 적이 있었는데, 뭔가 둥둥 떠다니는 지식이 말로는 제대로 인출되지 않아 곤욕스러웠던 경험이 있다. 이 기회에 면접에서도 술술 대답할 수 있게 다시 제대로 정리해보자! 1. 브라우저란? 브라우저 또는 웹 브라우저는 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 그림, 멀티미디어 파일을 출력하는 월드 와이드 웹(WWW)을 기반으로 한 응용 소프트웨어를 말한다. 주요 웹 브라우저로는 파이어폭스(모질라), 크..

📝 TWIL(This Week I Learned) 작성 가이드 1) 이번 주 한 일, 느낀 점, 배운 점을 작성한다. (3Fs, 1~2번에 해당) 2) 앞으로 개선할 점 등 어떻게 하겠다는 실천계획을 구체적으로 작성한다. (Future Action Plan, 3번에 해당) 3) 다음 TIL을 작성할 때 FAP가 제대로 지켜졌는지 피드백을 작성한다. (4번에 해당) - 참고: 5Fs, 뒤돌아보다 1. Facts (사실, 객관) - React useStore로 상태 관리를 구현하였다. - 매일 TIL로 React에 개념 정리를 하였다. - 퀘스트 과제로 뽀모도로 타이머를 만들었다. 2. Feelings (느낌, 주관) & Findings (배운 점) 1) 상태 관리 이제 좀 알 거 같기도... 예전에 Rea..

11/17 TIL | React 성능 최적화 1탄. React.memo & React.PureComponent 오늘은 어제 수요 지식회에서 언급됐었던 React 성능 최적화에 대해 한번 정리해보려고 한다. 시작하기에 앞서, 사실 성능 최적화는 엄청나게 중요한 요소는 아니다. 물론 미리 해놓으면 언젠가 bohyunkang.tistory.com 어제 TIL에서 양이 많아져 2탄으로 쪼갠 React 성능 최적화하기! 바로 시작해보자👏 🥸 참조형 타입 주의하기 1탄에서 설명한 예제는 값이 바뀌었는데도 리렌더링하지 못한 경우였다면, 이번엔 값이 안 바뀌었는데 리렌더링하는 경우를 살펴보려고 한다. 1. props로 함수 전달 시 useCallback 사용하기 // Before // 자식 컴포넌트 Button.jsx..

오늘은 어제 수요 지식회에서 언급됐었던 React 성능 최적화에 대해 한번 정리해보려고 한다. 시작하기에 앞서, 사실 성능 최적화는 엄청나게 중요한 요소는 아니다. 물론 미리 해놓으면 언젠가는 좋겠지만! 그건 내가 만드는 서비스가 성능 최적화에 대해서 고민해야 할 정도로 잘 나갈 때 고려해야 하는 문제이다..! 최적화하기 위한 코드는 가독성이 좋지 않고 프로그램 복잡도가 높아져 유지 보수가 힘들어지는데, 일어나지도 않을 미래의 일을 생각하면서 코드의 본질을 놓치면 절대 안 된다는 것이다(열심히 차려놓은 잔칫집에 손님 한 명도 안 오면 어떡하냐며..😅). 더군다나 지금은 램이 128GB까지도 가능한 2022년! 성능 최적화를 고려할 정도로 컴퓨터 사양이 좋지 못한 시절이 결코 아니라는 거~! React에서..

이번 주에 React 상태 관리를 배우는 주간! useStore라는 Flux 패턴의 Store를 직접 만들어 사용하는 방식으로 강의가 진행되었는데, 이번 FEConf 2022에 홀맨님이 발표하신 useStore-ts의 개념을 가지고 강의에서는 조금 더 단순하게 제작을 하는 방식으로 진행되었다. 👇 FEConf 2022 홀맨님 세션에 대해서 기록했던 10월 8일의 TIL 보러 가기 10/8 TIL | 밀린 과제 처리! 그리고 useSyncExternalStore(feat. FEConf 2022) 오늘은 8주차 주말 학습의 첫날!이지만..ㅎㅎ 7주차 퀘스트 과제를 마무리하지 못해 과제를 하였다.😅 밀린 과제는 바로 로그인/회원가입 기능 구현인데, HTTPServer로 웹 서버를 띄우고 입력 값들 bohyun..