전체보기

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

원티드 온보딩 챌린지를 참여하며 새로 알게 된 개념인 CCP에 대해 알아보았다.결국 프론트 엔드 개발을 하며 많은 시간을 할애하는 부분은 코드 구현이 아닌 계획과 설계 그리고 리펙터링인 것 같다. 독립적인 컴포넌트 작업으로 얻을 수 있는 여러 이점들이 React를 사용하는 이유라면 장점을 극대화하기 위해선 컴포넌트 하나하나 신중하게 생성해야 할 것이다. 바로 이 부분을 염두한 패턴이 CCP가 아닐까 싶다. https://patterns-dev-kr.github.io/design-patterns/compound-pattern/ Compound 패턴하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다 - …patterns-dev-kr.github.ioimport React from 'react'i..

선택 과제) 본인이 작성했던 코드 중에서 비즈니스 로직을 분류 해보고 해당 로직을 적절히 캡슐화 하며 느낀점 블로그에 정리하기 다음과 같은 순서로 코드를 정리해보세요. 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 기반의 비즈니스 로직과 주니어 개발자들이 가장 약한 컴포넌트 작성법을 배워 개발 생산성을 높이고자 했다. 직접 고민하는 시간이 바로 진정한 의미에서의 챌린지! 💪 지속 가능성을 위하여 절대로 재미 를 잊..

1. Math Math를 사용한 메서드중 많이 사용하는 것들 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math Math - JavaScript | MDN Math 는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. developer.mozilla.org Math.abs(x) 숫자의 절댓값을 반환합니다. Math.ceil(x) 인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다. (올림) Math.floor(x) 인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다. (버림) Math.round(x) 숫자에서 가장 가까운 정수를 반환합니다. (반올림) ..