💡 원티드 프리온보딩 챌린지 💡

[Week 2-1] 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다. 들어가기 전에 PWA가 무엇인지 간단하게 정리하자면 Progressive Web Apps PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. 앱스토어 혹은 구글플레이에서 설치 가능한 앱을 웹 기술로 구현했다고 생각하면 쉽다. https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames 프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN 이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다. developer.mo..

2월 챌린지에선 상황에 맞는 프론트엔드 개발 전략에 관한 주제로 진행된다고 한다. React의 장점인 SPA, 렌더링이 서버측과 클라이언트 측 어디에서 되는지에 따른 SSR, CSR과 웹 앱/네이티브 앱의 장점을 모두 활용한 PWA가 있다. 그 중 첫 번째 주제로 SPA에 대해 알아보는 시간이 되었다. [Week 1-1] SPA의 원리를 배우고, 사용자 경험을 향상하는 방법을 탐구합니다. 1-1) SPA의 기본적인 이해 SPA(Single Page Application) 웹 페이지가 하나의 애플리케이션으로 페이지의 리로드/리렌더링 없이 필요한 부분만 빠르게 업데이트하여 좋은 UX를 제공할 수 있다. SPA - 페이지 전환 없이 동적 컨텐츠 업데이트 - CSR - 초기 로딩 시간 길어짐 - 전통적인 SEO..

[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..

[Week 1-2] 테스트코드를 활용한 효율적인 리팩토링 2-1) 무엇을 테스트할 것인가? 오늘 챌린지에선 리펙터링시 테스트 코드를 활용할 것을 소개하고 있다. 개념으로만 테스트 주도 개발(TDD)이 중요하다고만 알고 있었는데 특히 프론트 엔드에서 무엇을 고려하여 진행해야 하는지 알 수 있었다. UI 테스트는 진행하지 않는다. 테스트를 계획할 때 무엇을 테스트 할 것인지 명확하게 파악을 해야 하는데 UI 테스트는 중요하지 않다. 컴포넌트 렌더링 순서를 확인하거나, 태그와 요소들의 간격 등은 굳이 테스트할 필요가 없다. 요구사항의 "사용자 시나리오"에 집중해야 한다. UI, Style 부분보다 "기능"에 더 중점을 두고 테스트를 해야한다. 회원가입 form에서 input이 제대로 되는지, 혹은 필수 항목들..

[Week 1-1] 전역변수를 설정하는 기준과 방법 -챌린지 강병진 멘토님- https://github.com/jasonkang14 jasonkang14 - Overview I believe software engineers can change the world. jasonkang14 has 47 repositories available. Follow their code on GitHub. github.com 1-1) 지역변수와 전역변수 비교 - 지역 변수 (Local Variable) 함수 내부에서 선언된 변수 지역 변수는 해당 함수 내부에서만 접근할 수 있으며, 함수가 종료되면 메모리에서 사라진다. 다른 함수에서는 같은 이름의 지역 변수를 사용해도 각각 독립된 메모리 공간을 가지므로, 서로 영향을 미..

선택 과제) 본인이 작성했던 코드 중에서 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..