재요피디아

코드트리 한 달 사용 후기

재요 — Thu, 29 Feb 2024 20:10:54 +0900

코드트리

코드트리라는 사이트가 있다. 코드트리는 코딩테스트를 준비하는 학생, 취준생, 이직자를 위한 학습 커리큘럼 및 실력진단 서비스를 제공하는 코딩 테스트 학습 플랫폼이며 오늘은 이 코드트리 사이트를 사용하는 법과 한 달 가까이 사용하며 느낀 점에 대해 말해보려 한다.

실력진단

사이트를 처음 방문하는 사용자라면 이 사이트는 무엇이며 어떤 것부터 시작해야 할지 막막할 수 있다. 그럴 땐, 백문이 불여일견. 실력진단 버튼을 클릭하면 진행되는 과정을 통해 이 사이트는 어떤 사이트며 무엇을 해야 할지 스스로 알 수 있다.

실력진단 버튼을 누르면 시작할 수 있다.

실력진단 버튼을 누르면 시작하기 전에 효과적인 학습 플랜을 제공할 수 있도록 사용자의 코딩 테스트 응시 경험, 준비 중인 코딩 테스트 유무, 상황 파악을 위한 선택지를 제공함을 통해 물어보며 목표 기업의 코딩 테스트를 통과하기 위한 추천 학습 플랜을 제공한다. 필자는 코딩 테스트를 응시해 본 적 없고, 준비 중인 코딩 테스트 또한 없으며 목표 기업은 있지만 준비는 아직이에요라고 하니 다음과 같은 플랜을 추천받았다.

위 이미지에서 진단 평가 시작을 누르면 20분 동안 사용자의 코딩 테스트 실력을 확인하기 위한 테스트가 진행되며 테스트가 끝난 이후에는 학습 수준 점수, 어떤 부분을 보완해야 하는지, it 기업 코딩 테스트 문제 해결을 위한 학습 시나리오 또한 제공해 준다. 다음엔 무엇을 해야 할까? 보완해야 하는 부분부터 학습을 시작하면 된다! 흐름에 따라 어디서부터 시작하면 되는지 친절하게 학습해야 하는 부분의 페이지로 이동시켜 준다. 이제 학습하며 느낀 점에 대해 얘기해보려 한다.

친절한 개념 설명과 예제

옛날 고등학생 시절 수학 문제집을 푸는 느낌처럼 개념을 공부하고 그 개념을 바탕으로 문제를 풀었던 경험과 상당히 유사했다. 아래 이미지처럼 DFS를 공부한다고 하면 먼저, DFS 개념에 대해 읽어보고 다 읽었으면 오른쪽 문제를 바탕으로 제대로 읽고 이해했는지 확인할 수 있다. 제대로 읽고 이해하는지 확인하는 과정은 아래처럼 객관식 문제도 있지만 객관식 문제에서 끝났으면 코딩 테스트를 공부하는 것이 아닌, 그냥 개념을 공부하는 것이었을 거다. 당연히 실제 코딩 테스트 문제처럼 코드로 작성하며 풀어보는 문제도 있다.

커리큘럼에 따라 자연스럽게 배울 수 있는 자료구조와 알고리즘

제일 좋았다고 생각하는 부분이다. 예전 코딩 테스트의 존재를 처음 알게 되어 그리디, DFS, BFS와 같은 생소한 용어들을 듣고 배워서 문제를 풀 때는 코딩 테스트에서 이런 문제가 나왔다! 그러면 이렇게 풀어야 해! 배우는 느낌이었다. 이번 코드트리에서 공부하면서 트리, 재귀함수와 같은 개념을 배울 때 아무 생각 없이 지나갔었는데 이때 배운 개념이 내가 전에 들었던 DFS랑 연계될 때는 아! 이게 이렇게 연결되는 개념이었구나! 스스로 깨달을 수 있어서 너무 좋았다. 마치 큰 문제에 대한 답을 얻기 위해 동일한 문제이지만 더 작은 문제를 해결한 뒤, 그 결과들을 이용해 큰 문제를 비교적 간단하게 해결하는 기법인 동적계획법처럼 트리, 스택, 재귀와 같은 작은 문제를 해결한 걸 바탕으로 DFS라는 큰 문제를 간단하게 해결할 수 있는 것이었다. 이렇게 자료구조와 알고리즘을 자연스럽게 배울 수 있어서 좋았다.

꾸준히 공부할 수 있도록 도와주는 장치

매일 공부하는 습관. 이 습관이 정말 어렵다는 건 모두가 알고 있는 자명한 사실이다. 코드트리를 사용하면서 커리큘럼 다음 두 번째로 좋았다고 생각하는 부분은 공부를 포기하지 않도록 꾸준히 공부할 수 있도록 도와주는 장치가 많다는 점이다. 여러 가지 장치가 존재하는데, 우선 사용자가 원하는 학습 목표를 설정할 수 있다.

필자는 실력이 열심히 해야 하는 수준이라 열심히로 설정했다.

학습 목표를 달성하면 연속 학습 일수를 채울 수 있는데, 이게 하루, 이틀 점점 쌓이다 보니 작성하는 날짜 기준 25일째 연속 학습 진행 중이며 코드트리를 손에 놓을 수 없는 요소가 되어버렸고 목표를 얼른 달성하기 위해 12시가 지나면 바로 공부하는 나를 볼 수 있게 되었다.

매일 매일 공부할 수 밖에 없게 만든다.

마치며

유료 서비스지만 일부 서비스는 무료로 사용할 수 있으며 코딩 테스트를 체계적으로 공부하고 싶으며 비용을 지불할 용의가 있는 사람에겐 추천할만한 좋은 선택지가 될 수 있을 것 같다.

[유데미(Udemy)] JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정 후기

재요 — Fri, 9 Feb 2024 21:39:57 +0900

안녕하세요. 오늘 유데미 강의 중 하나인 [한글자막] JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정(강의 링크 - https://www.udemy.com/course/javascript-zw/)에 대한 강의 후기를 작성하려 합니다.

[한글자막] JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정

유데미(Udemy)

강의에 대해 얘기하기 전에 먼저, 유데미라는 강의 사이트에 대해 소개하자면 유데미는 전 세계적으로 유명한 온라인 교육 플랫폼 중 하나이며 개발자들은 공부할 때 자연스럽게 접할 수 있는 플랫폼이기 때문에 개발 관련 강의 사이트라 생각할 수 있지만 비즈니스, 디자인, 마케팅등 개발에만 국한되지 않고 여러 분야의 강의 또한 수강할 수 있다.

JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정

위 강의에 대한 설명으로 '기초부터 시작하여 JS 전문가 수준까지 담은 최신 JavaScript 강의! 한 강의로 해결하는 JavaScript 웹 개발 완벽 가이드'라는 내용이 있다. 사실 SNS나 여러 매체에 있는 광고에서 강의 광고를 접하게 된다면 같은 문구를 작성하자고 약속한 것처럼 'OO! 이 강의 하나로 끝낼 수 있다!'라는 문구를 쉽게 볼 수 있다. 하나같이 비슷한 문구와 속는 셈 치고 강의 결제 후 수강해도 끝낼 순 없었다. 하지만 유데미의 [한글자막] JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정은 이야기가 좀 달랐다. 뭐~ 그냥 JavaScript가 어떻게 탄생하게 됐는지부터 대해 객체 같은 개념에 대해 간단히 소개하겠지~라는 생각으로 시작했지만 섹션(주제별로 분류하지만 객체나 배열 같은 자료형은 하나의 주제로 분류된다)만 36개, 강의는 총 616개. 와 이게 강의 시간이 얼마나 되지?라는 궁금증으로 계산해 보니 총 51시간 51분이나 되는 어마어마한 분량을 자랑한다. 그리고, 강의를 만들었다고 끝이 아닌 업데이트가 필요한 부분은 지속적으로 업데이트된다. 이렇게 섹션도 많고 강의도 많다 보니 만약 JavaScript를 처음 공부하는 개발자라면 1번 강의부터 시작해 모두 들어도 되지만 JavaScript를 이미 공부한 경험이 있는 개발자라면 공부하고 싶은 섹션을 선택해 해당 섹션 중간부터 시작하면 된다. 아니면 이러한 방법도 있다. 해당 강좌 강의에는 중간중간 퀴즈가 존재하는데 강의를 듣지 않고 먼저 퀴즈를 풀어보며 만약 퀴즈를 다 맞혔다면 해당 강의 부분은 넘어가도 되고 한 문제나 문제를 풀어보며 틀린 문제가 있거나 본인이 생각하기에 부족하다고 느끼는 개념이라면 그 개념부터 강의를 들으면 된다. 필자도 해당 방법을 사용했다.

모든 강의를 다 듣지 않고 자기가 부족한 개념만 공부하면 된다

이 강의는 장점만 있나? 물론, 아쉬운 점도 있다.

JavaScript를 자세하게 공부할 수 있다는 점은 엄청난 장점이지만 아쉬운 점도 있다. 해당 강의는 영어에 한국어 자막이라는 점이다. 사실, 1인치 되는 벽을 넘으면 훨씬 더 많은 영화를 즐길 수 있다고 봉준호 감독님이 말씀하셨지만 자신의 모국어로 듣는 강의와 모국어가 아닌 다른 언어에 자막으로 볼 때 한 번에 바로 이해되지 않는 부분들이 비교적 더 많이 존재해서 1배속으로 수강함에도 불구하고 가끔씩 10초 전으로 돌아가게 된다. 좋은 강의이지만 이 부분이 아쉬운 점이었다.

JavaScript

JavaScript는 JavaScript라고 이름이 불리게 된 계기부터 재밌다. 강의에서도 나오지만 JavaScript의 본명은 원래 LiveScript였는데 당시 Java가 유행하고 있어서 그 유행에 편승하고자 JavaScript라고 개명했기 때문이다. 하지만 JavaScript는 Java와 연관이 하나도 없다. 문법도, 사용법도 다르다. 이런 엉뚱함도 있지만 변수 타입을 미리 선언하지 않아도 되기 때문에 때론 독이 될 때도 있지만 유연한 코드 작성을 도와주는 동적 언어이며 공부할 때 별도의 IDE가 없어도 Chrome 같은 브라우저 하나만 있으면 될 정도로 가볍고 빠른 실행이 가능해서 좋다.

해당 콘텐츠는 유데미로부터 강의 쿠폰을 제공받아 작성되었습니다.

패스트캠퍼스 챌린지 최종 미션 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online 강의 후기, 패스트캠퍼스 챌린지 최종 후기

재요 — Tue, 22 Mar 2022 09:35:11 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

최종 후기

50일의 대장정이 끝나고 이제 "한 번에 끝내는 React의 모든 것 초격차 패키지 Online 강의"에 대한 최종 후기를 남기려 한다.

1일 차로 돌아가 이 강의를 선택하게 된 계기를 다시 돌아보는 시간을 먼저 가져보자. React로 무엇을 만들 수 있는가? 그 무엇은 어떻게 만들어야 하는가?라는 질문에 대한 대답을 얻고 싶은 것이 이 강의를 구매하게 된 가장 큰 계기였다. 50일을 지나 돌아보면 무엇을 만들어야 할지에 대한 대답은 얻을 수 없었다. 다만, 대답할 수 없다고 해서 강의가 별로였다라거나 강의가 도움이 안된다라는 이야기가 절대 아니다. 대답할 수 없는 이유는 만들고 싶다고 생각하는 모든 것을 React로 만들 수 있기 때문이다. 만들고 싶은 것을 만들면서 겪게 되는 기술적, 실력 문제가 아닌 이상 상상하는 무엇이든 구현해낼 수 있는 것이다. 그렇기에 무엇을 만들 수 있다고 특정 지을 수 없을 정도로 원하는 것들을 만들 수 있기 때문에 이건 해결된 문제이다. 다음으로, 어떻게 만들어야 하는가라는 질문에 대한 대답은 더욱 쉽게 얻을 수 있다. 한 번에 끝내는 React의 모든 것 초격차 패키지 Online 강의의 가장 큰 메리트가 이 질문에 대한 대답으로 나올 수 있는데 이 강의는 React를 처음 접해보는 사람부터 어느 정도 React를 알고 있는 사람이라도 접해 본 경험이 없을 수 있었던 React의 기초 개념과 심화 개념, React와 같이 사용하면 좋은 수많은 라이브러리들(스타일링, UI, 데이터 모킹, 상태관리, 데이터페칭, GraphQL, Next.js), React 실무 기능, 클론 코딩, 트러블 슈팅, 여기에 TypeScript에 대한 개념과 실제 예시 작성까지 다루기 때문에 무엇을 어떻게 만들까에 대한 고민은 이 강의를 통해 배운 수많은 개념을 바탕으로 필요에 따라 상황에 알맞게 사용하여 만들면 된다.

지금부터는 파트별로 무엇을 배우며 무엇을 느꼈는지 기술하고자 한다.

Part 1. React 기초에서는 말 그대로 React 기초에 대해서 공부한다. 만약, 한 번에 끝내는 React의 모든 것 초격차 패키지 Online 강의 구매를 고민하는 독자이거나 구매를 하고 아직 수강을 시작하지 않은 독자라면, HTML과 JavaScript 공부를 미리 하고 듣는 것이 HTML과 JavaScript를 모르고 들을 때와 흡수하는 내용이 다를 수 있다고 생각하기 때문에 HTML과 JavaScript 선행 학습한 다음에 수강하는 것을 추천한다. Ch 01. React 맛보기 챕터에서는 React의 기본적인 개념들을 하나하나 살펴보면서 진행한다. 필자는 예전부터 인터넷 강의 듣는 것을 좋아해서 React 관련 유, 무료 강의들을 많이 들었었는데 확실히 다른 강의들보다 다루는 개념들이 많았고 개념들에 대해 자세하게 다룬다는 인상을 받았다. 그리고, 기본적인 개념들이라고 가볍게 넘어가기 보다는 이 개념들을 바탕으로 응용하며 이용하는 것이기 때문에 Ch 01. React 맛보기 챕터도 집중하면서 듣는 것을 추천한다. 이런 개념들은 나중에 만들고자 하는 것을 어떻게 만들까 고민할 때 기초를 다시 차근차근 밟아보길 원한다면 다시 참고해도 좋은 강의들인 것 같았다. Ch 02. React 공식문서로 디테일잡기(초급) 챕터에서는 React의 개념들 중 주요 핵심 개념들에 대해 공부하는 시간을 가진다. Ch 01. React 맛보기 챕터에서 배운 내용들을 바탕으로 주요 핵심 개념들을 이 챕터에서 한번 더 다루기 때문에 반복 숙달할 수 있어서 더욱 쉽게 몰입할 수 있었고 복습으로 인해 React 개념 관련 기억도 확실히 더 오래 갈 수 있을 것 같다는 느낌을 받아 강의 구성과 배치가 치밀해서 좋다라는 생각을 했다. Ch 03. React 공식문서로 디테일잡기(고급) 챕터에서는 Ch 01. React 맛보기 챕터와 Ch 02. React 공식문서로 디테일잡기(초급) 챕터에서 보다 더 심화된 내용을 공부한다. React 공식문서로 디테일잡기(고급) 챕터의 시작은 React 버전 16.8부터 React 요소로 추가된 Hook에 대해 배운다. React Hook의 도입으로 기존에 Class를 바탕으로 작성했던 코드들을 Class가 아닌 Function으로 작성할 수 있게 되었으며 Function으로 코드를 작성하면 쓸 수 없었던 Class의 기능들을 완벽하게 호환하였기 때문에 React의 질이 한층 더 올라가는 계기가 되었다. 이 다음으로 Composition, HOC, Memoization, Context, Portal, Render Props, PropTypes, Reconciliation과 같은 개념에 대해 다루는데 이러한 개념들은 React를 사용하면서 계속해서 숙지해야 하는 개념이라고 느껴서 강의를 듣고난 이후에도 자주자주 다시 듣는 편이다.

Part 2. React 라이브러리에서는 React로 원하는 서비스를 만들 때 같이 곁들이기에 유용한 라이브러리들을 소개한다. 라이브러리가 정말 많기 때문에 그 분류 또한 다양하다. 스타일링 라이브러리, UI 라이브러리, 데이터 모킹 라이브러리, 상태관리 라이브러리, 데이터 패칭 라이브러리, GraphQL, Next.js 정말 라이브러리 종합선물세트를 받는 느낌이였다. 이 파트에서는 여러 라이브러리들을 배워보며 앞서 얘기한 것처럼 내가 원하는 서비스를 만들 때 어떤 라이브러리를 사용하면 좋을 것 같겠다라는 느낌도 가져갈 수 있는 점이 좋았다. 이 강의를 듣기 전에 React에 대한 공부를 좀 해보고 유명한 라이브러리들은 어느정도 알고 있는 상태였었지만 이 파트를 통해 라이브러리는 내가 알고 있는 것보다 더 다양하며 꼭 유명하고 사람들이 많이 사용하는 라이브러리만이 좋은게 아니였구나, 장단점이 제각각 다 있는거였구나라는 생각을 하게 되어 라이브러리에 대해 갖고 있었던 기존 생각들이 바뀌게 되는 계기가 되었다. 이 생각을 하게 된 주요 계기가 상태관리 라이브러리에 Redux와 MobX 강의였다. Redux와 MobX 강의를 듣기 전에는 Redux가 제일 유명하기 때문에 가장 좋은 줄 알고 있었다. 하지만, Redux의 구조인 Flux를 바탕으로 Redux의 여러 요소들을 하나하나 이해하며 사용해야 했기에 처음 배울 때 쉽지 않았었다. 배울 때도 쉽지 않은데 왜 인기가 많을까라는 고민도 결국 제일 좋으니까 인기가 많겠지라며 단순히 넘어갔었던 경험이 있었다. 물론, 배우고 나서부터는 Redux가 제일 좋을 수도 있지만 배우는 과정이 쉽지 않기 때문에 어려움을 겪은 적이 있었는데 강의를 통해 MobX라는 존재를 처음 알게 되었고, 배우는 과정도 Redux보다 쉬웠으며 Redux가 갖지 못한 MobX만의 장점도 있기에 라이브러리에 대해서 다시 생각해보는 시간을 갖게 되었다.

Part 3. React 실무 기능 파트가 1일 차에서 다뤘듯이 이 강의를 선택한 이유이자 가장 기대를 많이 했던 파트였는데 실망이 매우 컸다. 사실 왜 파트 제목이 실무 기능인지 모르겠다라는 생각에서부터 기인한다. Ch 01. 가장 보통의 UI는 우리가 웹 페이지를 이용하면서 한 번쯤 볼법한 인피니티 스크롤, 모달 창과 같은 UI들에 대해 배워보는 시간을 갖는다. 배워보는 것만으로 끝이였다. 이 UI들이 실무에서는 어떻게 쓰이는지, 실무에서 잘 쓰려면 어떻게 공부해야 하며 어떻게 응용해야 하는 지에 대한 내용은 없다. Ch 02. recoil을 이용해 To-do-list 만들기, Ch 03. react-query를 이용해 포켓몬 도감 만들기도 Part 2. React 라이브러리에서 배웠던 상태관리 라이브러리인 recoil, 데이터 패칭 라이브러리인 react-query를 예제와 함께 좀 더 다루는 것일 뿐 실무와 연관된 내용을 담고 있다고 생각한 부분이 단 한 곳도 존재하지 않았다. 마지막으로 Ch 04. react hook form을 이용하여 복잡한 폼 다루기 또한 회원가입과 같이 복잡한 폼을 심도 있게 다루는 것이 아닌 그저 react-hook-form을 배워본다는 성향이 더 컸다. 그래서, 모든 파트들 중 제일 아쉬웠고 실망감이 컸다.

Part 4. 클론 코딩 파트는 먼저 Part 6. TypeScript Essentials를 수강하고 나서 듣거나 TypeScript에 대한 공부를 먼저 선행하는 것을 추천한다. 왜냐하면, 왓챠피디아, 카카오톡 클론 코딩을 다 JavaScript가 아닌 TypeScript로 진행하기 때문이다. 그리고 가장 아쉬웠던 점은 클론 코딩 파트는 말그대로 진짜 클론 코딩만 진행한다. 클론 코딩을 진행하면서 설명과 함께 강의를 진행하는 것도 아니고 그저 강의하시는 분이 작성하는 코드를 따라작성하는 것이 해당 파트의 전부다. 왓챠피디아 클론 코딩은 별도의 서버가 있는 것이 아닌 오픈 api인 tmdb api를 사용해서 그렇다고 하더라도 카카오톡 클론 코딩에서는 서버를 클론 코딩을 통해 직접 구성해보는 내용이 있지만 프론트엔드가 서버와 어떻게 통신하면 좋은지, 프론트엔드가 백엔드와 협업할 때 어떻게 해야 하며, 어떤 태도를 가지면 좋은지에 대한 내용이 전무하다. 이 파트를 수강하며 느낀 점은 React와 TypeScript를 이용하여 무엇인가를 만든다고 할 때, styled-component라는 스타일링 라이브러리를 곁들어 서비스를 예쁘게 만드는 것을 배우는 시간이였던 것 같다.

Part 5. 트러블 슈팅 파트는 Part 1. React 기초 Ch 03. React 공식문서로 디테일잡기(고급)에서 더 나아가 심화적인 내용을 다룬다는 인상을 받은 파트였다. Ch 02. Class Component to Functional Componenet에서는 클래스 컴포넌트의 한계와 그 한계에 대한 해결책으로 나온 Functional Component에 대해 집중적으로 다루는 시간을 가지며 Ch 03. Re-introduction of React Hooks는 Functional Component에 한계로 나온 Hook에 대해 집중적으로 다루는 시간, Ch 04. Render Optimization은 React의 렌더링 과정을 공부한 뒤 렌더링 최적화를 집중적으로 다루고, Ch 05. Deep-dive into Redux Middleware은 Redux를 Redux 하나만 사용했을 때 생기는 한계를 Middleware를 통해 그 한계를 극복하는 법을 배우는 시간을 가진다. 이 파트는 React를 어느정도 알고 있는 사람이더라고 하더라도 알차게 배울 수 있는 내용들이 포함된 파트였다.

Part 6. TypeScript Essentials 파트는 TypeScript에 대해 배우는 파트이다.

Part 7. React로 나의 책장 만들기(TypeScript) 파트는 Part 4. 클론 코딩 파트처럼 React와 TypeScript를 이용하여 나의 책장 만들기 서비스를 클론 코딩해보는 파트이다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC

패스트캠퍼스 챌린지 50일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

재요 — Mon, 14 Mar 2022 09:11:41 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

50일차

50일차에는 Part 2. React 라이브러리 Ch 05. 상태관리 라이브러리 챕터에서 07. 중간 복습 강의 내용에 대해 기록하려 한다.

이번 중간 복습에서는 Ch 04. 데이터 모킹 라이브러리 챕터에서 배웠던 Mock Service Worker 강의와 Ch 05. 상태관리 라이브러리 챕터에서 배웠던 Redux, MobX 강의를 복습하는 시간을 가진다. MSW에서 데이터를 직접 mocking을 모킹해보고 Brower를 통해서 Browser의 Service Worker를 활용해서 msw의 데이터를 네트워크 단에서 하이재킹하여 우리가 원하는 mocking된 데이터를 받을 수 있도록 하는 법을 배웠다. 다음으로 Redux는 기존에 상태 관리를 해당 컴포넌트에서만 할 수 있었던 지역 상태 관리의 한계를 전역으로 끌어올릴 수 있게 해 준 라이브러리였다. Redux는 데이터는 한 방향으로만 흐른다는 Flux 구조를 가지고 있으며 store, reducer, action과 같은 요소들이 Redux의 구성 요소였다. 마지막으로 MobX는 Boilerplate가 없어서 간단하다는 장점을 가지고 있으며 Observable과 Observer라는 개념을 이용하여 반응형 프로그래밍을 지원한다.

라이브러리를 고르는 기준은 npm trends를 이용하여 사용자 수의 추세를 기준으로 고를 수도 있으며 단점, 장점을 기준으로도 고를 수 있다. 예를 들어, Redux는 Boilerplate가 많은게 단점 MobX는 간편한게 장점일 수도 있지만 반대로 생각할 수도 있기 때문에 필요에 따라 단점과 장점을 대조해가며 고를 수도 있다.

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC

패스트캠퍼스 챌린지 49일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

재요 — Sun, 13 Mar 2022 12:45:09 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

49일차

49일차에는 Part 2. React 라이브러리 Ch 04. 데이터 모킹 라이브러리 챕터에서 01. Mock Service Worker 1 강의와 02. Mock Service Worker 2 강의 내용에 대해 기록하려 한다.

데이터 모킹 라이브러리라는 단어에서 모킹(Mocking)이란 모의 데이터라는 의미를 가진 Mock을 만들어 활용하는 방식을 의미한다. 프론트엔드와 백엔드가 협업하는 프로젝트가 있다고 가정할 때, 통상적으로는 data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 하지만, 백엔드에서 아직 준비하지 못해 서버가 없는 경우, api 요청으로 내려올 데이터를 프론트엔드에서 모킹하거나 서버의 역할을 해주는 무언가를 구해야하는 과정이 필요하다. 이때 MSW(Mock Service Worker)라는 api를 모킹하는 라이브러리를 이용하여 네트워크 요청을 가로채는 역할을 할 Service Worker API를 활용하기 때문에 서버가 있는 것처럼 동일한 애플리케이션 동작을 만들 수 있다. 브라우저 환경에서 Mock Service Worker는 Request Handler에 정의된 Fetch 이벤트를 Service Worker에 등록하고 Service Worker는 Server로의 요청이 발생하면 HTTP Method, URL등에 기반하여 요청을 가로채 Mock Servicer Worker에 전달하여 handler에 정의된 모의 응답을 받는다.

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC

패스트캠퍼스 챌린지 48일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

재요 — Sat, 12 Mar 2022 10:59:02 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

48일차

48일차에는 Part 2. React 라이브러리 Ch 05. 상태관리 라이브러리 챕터에서 01. MobX 1, 02. MobX 2, 03. MobX 3 강의 내용에 대해 기록하려 한다.

MobX는 앞서 기술했던 Redux 라이브러리와 같은 상태관리 라이브러리이며 객체지향의 성격을 띄며 컴포넌트와 상태를 연결했던 Redux와 다르게 번잡한 보일러 플레이트 코드들을 데코레이터를 제공함으로써 간단하게 해결된다. MobX에서 Observable이라는 개념이 존재하는데, Observable은 MobX에서 렌더링 대상이되는 상태를 뜻하며 Observable 데코레이터로 지정한 상태는 관찰 대상으로 지정되어 그 상태값이 변경될 때마다 리렌더링 된다. MobX의 장점을 나열하면 다음과 같다.

1. 객체지향적

상태관리 라이브러리들 중 객체지향의 성격을 갖는 라이브러리이며 ES6에 추가된 Class가 이름만 Class가 아닌 객체지향적으로 코드를 작성할 것을 권고한다.

2. 불변성 유지를 위한 노력이 필요하지 않다.

상태의 불변성을 유지하기 위해 별도의 코드나 Immutable.js같은 라이브러리를 사용할 필요가 없다. 불변성을 유지하면서 상태를 변경하는 코드는 객체의 Depth가 깊어지게 되면 코드의 가독성이 떨어지는 문제가 발생하게 되는데 MobX가 아닌 Redux를 사용하게 되면 여러가지 설정이 필요하고 라이브러리가 추가적으로 필요하기 때문에 MobX가 이러한 면에서 장점을 갖게 된다.

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC

패스트캠퍼스 챌린지 47일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

재요 — Fri, 11 Mar 2022 10:57:40 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

47일차

47일차에는 Part 2. React 라이브러리 Ch 05. 상태관리 라이브러리 챕터에서 01. Redux 1, 02. Redux 2, 03. Redux 3 강의 내용에 대해 기록하려 한다.

Redux는 상태관리 라이브러리이며, Redux의 세 가지 원칙은 다음과 같다.

1. Single source of the truth

2. State is read-only

3. Changes are made with pure functions

Redux에는 store, action, reducer라는 세 가지 주요 개념이 있다.

store: store는 상태가 관리되는 오직 하나의 공간이다. React 컴포넌트와는 별개로 store라는 별도의 공간을 통해 그 store 안에서 앱에 필요한 상태를 담는다.

action: action은 앱에서 store에 담을 데이터를 말하며 JavaScript 객체 형식으로 되어있다.

reducer: action을 store에 바로 전달하는 것이 아닌 action을 reducer에 먼저 전달해야 한다. reducer가 action을 보고 store의 상태를 업데이트하는 것이다.

과정을 간단히 설명하면 다음과 같다.

1. action 객체가 dispatch() 메소드에 전달된다.

2. dispatch(action 객체)를 통해 reducer를 호출한다.

3. reducer는 새로운 store를 생성한다.

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC

패스트캠퍼스 챌린지 46일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

재요 — Thu, 10 Mar 2022 10:56:18 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

46일차

46일차에는 Part 2. React 라이브러리 Ch 01. 라이브러리 기초 챕터에서 01. 라이브러리란 강의 내용에 대해 기록하려 한다.

Part 2. React 라이브러리 Ch 01. 라이브러리 기초 챕터에서 01. 라이브러리란 강의에서는 라이브러리의 개념이 무엇인지 다시 한번 복습하는 시간을 가지고 라이브러리의 종류와 라이브러리를 어떻게 다루어야 할 지에 대해 공부하는 시간을 갖는다. 먼저, 라이브러리는 Part 1. React 기초 Ch 01. React 맛보기 01. 강사 및 강의소개에서 개념을 다룬 적이 있다. 라이브러리는 개발 편의를 위한 도구의 모음이다. 그에 반해 프레임워크는 기반 구조까지 잡혀있는 것을 말하며 React를 라이브러리로 봐야 하나 프레임워크로 봐야 하나 헷갈릴 수 있는데 React는 라이브러리이다. JSX, 컴포넌트 상태 관리, 렌더링 최적화와 같은 도구들의 모음이기 때문이다. 라이브러리의 적용 과정은 무엇이 필요하면, 필요한 것을 검색하고, 찾은 것에 대한 사용법을 파악한 다음 적용을 하는 것이 순서이다. 여기서 필요는 특정 기능이 필요하거나, 더 나은 기능이 필요할 때이다. 그 필요 그대로를 github, 프론트엔드 커뮤니티등에서 검색하고, 공식 문서나 github를 통해 사용법을 파악하며 POC, 프로젝트 일부, 프로젝트 전체에 적용을 하면 된다. 그리고 해당 챕터에서 통해 라이브러리의 사용법을 익히기 보다 라이브러리를 찾고 / 적용하는 과정을 익혀 혼자 할 수 있는 힘을 길러야 한다는 것을 명심해야겠다.

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC

패스트캠퍼스 챌린지 45일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

재요 — Wed, 9 Mar 2022 16:33:28 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

45일차

45일차에는 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 19. 마무리 강의 내용에 대해 기록하려 한다.

Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 19. 마무리 강의에서는 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 그동안 배운 내용을 정리하는 시간을 가지고 추가로 React로 사고하기 개념에 대해 공부한다. 그동안 배운 내용은 기록했으니 이번 글에는 React로 사고하기 개념에 대해 정리하려 한다. React로 사고하기는 5단계에 걸쳐 이루어진다.

1단계: UI를 컴포넌트 계층 구조로 나누기

첫 번째로 해야 할 일은 모든 컴포넌트와 주변에 박스를 그리고 그 각각에 이름을 붙이는 것이다. 어떤 것이 컴포넌트가 되어야 할지 아는 방법은 새로운 함수나 객체를 만들 때처럼 만들면 된다. 하나의 컴포넌트는 한 가지 일을 하는 게 이상적이라는 원칙을 지키면 된다.

2단계: React로 정적인 버전 만들기

컴포넌트 계층구조를 만들고 난 뒤 앱을 실제로 구현해보는 시간에서 먼저 데이터 모델을 가지고 UI를 렌더링은 되지만 아무 동작도 없는 버전을 만들어본다. 이런 과정을 경험하는 이유는 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 상호작용을 만드는 것은 생각은 많이 해야 하지만 타이핑은 적게 필요로 하기 때문이다. 이때 정적 버전을 만들기 위해 state를 사용하면 안 된다. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용한다.

3단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기

UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야 한다. React는 이를 state를 통해 변경한다. 애플리케이션을 올바르게 만들기 위해 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 한다. 여기서 핵심은 중복배제 원칙이다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들을 필요에 따라 그때그때 계산되도록 만든다.4단계: State가 어디에 있어야 할지 찾기 React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따르기 때문에 어떤 컴포넌트가 state를 가져야 하는지 바로 결정하기 어려울 수 있다. 먼저, 애플리케이션이 가지는 각각의 state에 대해서1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.2. 공통 소유 컴포넌트를 찾는다(계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트 상위에 있는 하나의 컴포넌트).3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.4. state를 소유할 적절한 컴포넌트를 찾지 못했다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 소유 컴포넌트의 상위 계층에 추가한다.5단계: 역방향 데이터 흐름을 추가하기 React는 전통적인 양방향 데이터 바인딩과 비교하면 더 많은 타이핑을 필요로 하지만 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와준다.

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC

패스트캠퍼스 챌린지 44일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

재요 — Tue, 8 Mar 2022 16:33:06 +0900

수강 인증샷

패스트캠퍼스 챌린지란?

패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

44일차

44일차에는 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 16. Reconciliation 2 강의 내용에 대해 기록하려 한다.

Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 16. Reconciliation 2 강의에서는 Virtual DOM과 React의 설계 원칙에 대하여 공부한다.

Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다. 이 과정을 앞선 게시글에서 설명한 Reconciliation이다. 이러한 접근 방식이 React의 선언적 API를 가능케 했으며, React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 한다.

React의 설계 원칙에서는 React가 무엇을 하며 무엇을 하지 않는지, React의 개발 철학은 무엇인지에 대해 다룬다. 먼저, React의 핵심 기능은 컴포넌트의 합성이다. 컴포넌트는 서로 다른 사람들에 의해 작성되지만 잘 동작해야 한다. 일반적으로 React는 사용자 영역에서 구현할 수 있는 기능을 추가하지 않는다. 불필요한 라이브러리 코드로 개발자의 앱을 거대하게 만들고 싶지는 않으나 예외는 있다. React가 로컬 state나 생명주기 메서드를 지원하지 않았다면 사람들은 사용자 정의 추상화를 만들게 될 것이다. 여러 개의 추상화가 충돌하는 경우 React는 어느 한쪽의 특성을 강요하거나 이용할 수는 없다. 그것은 최소 공통분모로 작용해야 한다.

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC