원티드 온보딩 챌린지를 참여하며 새로 알게 된 개념인 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) 숫자에서 가장 가까운 정수를 반환합니다. (반올림) ..

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

function solution(n){ function DFS(L){ if(L==0) return; else{ console.log(L); DFS(L-1); } } DFS(n); } // 3 2 1 solution(3); function solution(n){ function DFS(L){ if(L==0) return; else{ DFS(L-1); console.log(L); } } DFS(n); } solution(3); // 1 2 3 위 두 함수의 결과가 다르게 나오는 것을 이해하기 위해 함수 스택 프레임을 알아보았다. 일반적으로 재귀 함수, 콜백 함수, 비동기 작업 시 발생하게 되는데 함수가 LIFO방식의 스택에 쌓이게 된다. 이때 지역 변수, 복귀 주소, 매개변수가 저장된다. 가장 마지막 함수까..

1. .unshift() 배열의 맨 앞에 요소를 추가할 때 .push()가 배열의 맨 뒤에 요소를 추가할 때 사용한다면 앞에 추가할 땐 unshift를 사용하면 된다. const array1 = [1, 2, 3]; console.log(array1.unshift(4, 5)); // Expected output: 5 console.log(array1); // Expected output: Array [4, 5, 1, 2, 3] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift Array.prototype.unshift() - JavaScript | MDN unshift() 메서드는 새로운 요소..