💡 원티드 프리온보딩 챌린지 💡/PRE-ONBOARDING_FE (12월)

[Week 2-1] 백엔드 코드를 수정할 수 없을 때 프론트엔드가 할 수 있는 최적화 방법 3-1) 성능 측정 툴 소개 및 사용법 웹 애플리케이션의 성능을 측정하고 분석하는 데 사용할 수 있는 툴에 대해 알아보았다. 애플리케이션의 로딩 속도, 실행 시간, UX 등 다양한 측면에서 성능을 평가하고, 이를 통해 성능 저하의 원인을 찾아 개선할 수 있도록 도와준다. Lighthouse Lighthouse - 웹 성능을 분석하는 오픈 소스 - 주요 기능 1) 성능 분석 2) 접근성 검사 3) SEO 평가 4) PWA 기준 평가 https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ko Lighthouse Li..

선택 과제) 본인이 작성했던 코드 중에서 SOLID 원칙과 IoC를 적용할만한 부분을 찾아보고 개선한 뒤 느낀 점 블로그에 정리하기 지난 과제에서 비즈니스 로직을 분리하면서 어떠한 ‘답답함’을 느끼셨을 수 있다고 말씀드렸습니다. 이번 강의에서 학습한 SOLID와 IoC의 개념을 가지고 코드를 개선해 보세요. SOLID 원칙과 CCP 적용을 위해 전에 만들었던 작은 프로젝트를 리펙터링했다. 비교적 상하위 컴포넌트 구분이 쉬워 적절해 보였다. https://github.com/yeonhub/PP-doosan_bears GitHub - yeonhub/PP-doosan_bears: [개인 프로젝트] 두산 베어스 선수 정보 [개인 프로젝트] 두산 베어스 선수 정보. Contribute to yeonhub/PP-d..

[Week 2-2] Logic First, React Later 4-1) ‘React 다운 코드’ 다시 생각하기 이번 챌린지에서 배운 내용들을 생각해 보자. [1차] - 데이터 / 액션 / 계산 구분 및 분리 [2차] - 비즈니스 로직 / UI 로직 구분 및 분리 [3차] - SOLID 원칙과 React 컴포넌트 패턴 공통적으로 챌린지의 주제처럼 비즈니스 로직을 이해하고 추상화 원칙에 따라 좋은 컴포넌트 작성을 통해 개발 생산성을 높이려고 노력을 해왔다. React는 렌더러입니다. 화면을 그리는 역할에 집중하도록 하는 것이 좋습니다. 이제 다시 원점으로 돌아와 React에 대해 다시 한번 고민해 보면 무엇을 잘하고 어떤 일을 맡겼을 때 원하는 대로 결과물을 만들 수 있는지 알고 있어야 한다. 그래서 DE..

[Week 2-1] SOLID한 컴포넌트 만들기 3-1) 내 손에 익은 공구상자 일을 하거나 취미 활동을 할 때 직접 사용해 보면서 익숙하게 사용하는 것들이 있다. 유일한 도구라 사용하는 것 일수도 있고, 쓰다 보니 만족하여 계속 사용하는 것 일수도 있다. 여기서 중요한 점은 내 공구상자가 남들보다 크고 비싼 공구들이 잔뜩 들어있다고 무조건 좋은 것은 아니다. 달랑 볼펜 하나로 훌륭한 그림을 그릴 수 있듯이 그 도구를 얼마나 이해하고 잘 활용할 수 있는지에 달려있다. 개발자도 마찬가지이다 라이브러리/프레임워크 수십개를 안다는 것과 제대로 사용할 줄 안다는 것은 큰 차이이기 때문 이러한 이유로 오늘 챌린지에선 Context API와 Class를 예시로 들었다. https://ko.legacy.reactjs..

선택 과제) 본인이 작성했던 코드 중에서 비즈니스 로직을 분류 해보고 해당 로직을 적절히 캡슐화 하며 느낀점 블로그에 정리하기 다음과 같은 순서로 코드를 정리해보세요. 1. 본인이 작성한 코드에서 비즈니스 로직을 표시해 보세요. 2. 비즈니스 로직에 해당하는 코드들을 오늘 수업에서 다룬 개념들을 활용하여 UI 로직으로부터 격리해 보세요. 3. 개선 전과 후에 어떤 차이가 있었는지 설명을 덧붙여보세요. 비즈니스 로직과 UI 로직 분리 과제의 대상은 JavaScript를 배우고 처음 작업한 작은 토이프로젝트로 선정했다. React를 사용한 것이 아니라 Vanilla.js로 구현했기 때문에 함수들을 살펴보기 좋기 때문이다. https://github.com/yeonhub/PP-shopping-basket Gi..

[Week 1-2] 비즈니스 로직을 제압하는 개발자가 퇴근을 한다 2-1) 지옥으로 가는 길은 "프론트에서 해드릴게요"로 포장되어 있다 “지옥으로 가는 길은 선의로 포장되어 있다” - 서양 속담 프론트 엔드 개발자라면 클릭을 하지 않을 수 없는 소제목이었다. 프론트에서 해드릴게요? 협업에 관한 이야기인가 워크에씩에 관한 이야기인가? 위의 한 문장을 단 하나의 상황으로 완벽히 이해시켜 주셨다. FE : BE님 상품 목록 조회 API는 언제까지 가능하세요? BE : 아.. 이게 처음 해보는 거라 시간이 좀... FE : 음 그럼 다른 거 먼저 하시고 해당 부분은 프론트에서 할게요. BE : 앗 감사합니다 ㅎㅎ 사실 처음 예시를 들어주셨을 때 뭐가 문제인지 크게 느껴지지 않았다. 그동..

선택 과제) 본인이 작성했던 코드 중에서 데이터 / 계산 / 액션을 분리해 보고 느낀 점 블로그에 정리하기 다음과 같은 순서로 코드를 정리해보세요. 복잡하다고 생각하는 컴포넌트나 함수에서 데이터 / 계산 / 액션을 표시해 보세요. 계산 로직에 해당하는 코드들을 컴포넌트 바깥으로 분리해 보세요. 이 과정에서 새롭게 생성되는 함수에는 적절한 이름을 붙이고, 인자로 전달되지 않던 암묵적 의존성은 파라미터로 받도록 함수를 수정해 보세요. 개선 전과 후에 어떤 차이가 있었는지 설명을 덧붙여보세요. 1차 과제의 대상을 가장 최근의 개인프로젝트 오늘하날로 정했다. https://github.com/yeonhub/PP-todays_hanal GitHub - yeonhub/PP-todays_hanal: [개인 프로젝트]..

[Week 1-1] 컴포넌트가 복잡해지는 원인에 대해 고찰해 보기 1-1) 챌린지 메이커 / 코스 커리큘럼 소개 -챌린지 오종택 멘토님- https://github.com/saengmotmi saengmotmi - Overview 꿀잼주의자. saengmotmi has 39 repositories available. Follow their code on GitHub. github.com 아직 일을 시작하지 않은 예비 개발자의 입장에서 실무에 도움이 될 활동을 하고자 원티드 프리온보딩을 참여했다. Reat 기반의 비즈니스 로직과 주니어 개발자들이 가장 약한 컴포넌트 작성법을 배워 개발 생산성을 높이고자 했다. 직접 고민하는 시간이 바로 진정한 의미에서의 챌린지! 💪 지속 가능성을 위하여 절대로 재미 를 잊..

사전 과제 (실전 스킬: 비즈니스 로직 완전 정복 with React) 이번 챌린지의 사전 과제는 '글쓰기'입니다. 그동안 개발을 하며 어떤 로직들이 가장 나를 힘들게 했는지 자랑해 주세요. React 컴포넌트여도 좋고, 그 외의 로직이어도 좋습니다. 개발 프로젝트 전반에 대한 얘기도 좋습니다. 공유해 주신 에피소드(썰)들 함께 이야기하며 위로를 받기도, 다른 사람들의 분투기를 보며 새로운 인사이트를 얻을 수도 있었으면 좋겠어요. 이 과정에서 자연스럽게 내가 겪었던 어려움들에 대한 회고가 이뤄질 것으로 기대하고 있어요. 이 점들을 잘 기억해두셨다가 수업 중간중간 공유해 주시면 강의에도, 여러분 자신에게도 도움이 많이 될 거예요. 수업에서 다루기 적합한 포스팅으로 판단될 경우 작성하신 분의 동의를 먼저 구..