** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다. 프로젝트를 시작하기 앞서 주어진 요구사항에 맞게 기본 프로젝트를 세팅해야 했다.진행해야 하는 것은 다음과 같았다. 프로젝트 환경 세팅개발 컨벤션 정하기스타일링 방법 선택 등 사용할 기술 스택 정하기타겟 환경 정하기 프로젝트 환경 세팅가장 먼저, 프로젝트 환경 세팅에서는 기존에 Vite나 CRA를 주로 사용했던 것과 달리, 이번에는 Webpack을 기반으로 React와 TypeScript 환경을 세팅하기로 결정했다. Webpack은 자바스크립트 모듈을 번들링 하는 도구로, 다양한 로더와 플러그인을 사용해 코드 최적화와 빌드 환경을 구성할 수 있다. webpack을 선택한 이유는, 물론 요구사항이기도 했지만, Webpack이 모듈 번들러로서..

문제 링크 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 해석문제는 벽에 페인트를 다시 칠해야 하는 구역들이 주어졌을 때, 최소한의 횟수로 페인트칠을 하는 방법을 찾는 것이다.벽의 길이는 `n` 미터이며, 각 구역은 1미터씩 나누어져 있고, 롤러의 길이는 `m` 미터이다.페인트칠을 할 수 있는 최소 횟수를 구해야 한다. 접근 방법1. 페인트칠이 필요한 구역 파악하기: 주어진 `section` 배열은 페인트칠이 필요한 구역의 번호를 담고 있다. 이 배열의 각 요소는 구역 번호를 나타낸다.  2. 롤러의 범위 확인:롤러는 한 번에 연속된 `m`미터를 칠할 ..

디자인을 처음 접하는 개발자들에게 이 글을 바칩니다. 근데 사실 본인도 디자이너는 아니고 그냥 UI/UX에 관심 있는 개발자이기 때문에 디자인 처음하는 개발자만 보시길~ ❌ 디자이너들은 출입금지입니다… ❌   이 글은 개발자인 우리가 울며 겨자 먹기로 디자인을 해야 할 때 도움이 될 만한 팁들로 채워져 있습니다. 아마 읽고 있는 당신도 디자이너 없이 프로젝트를 시작해서 개발자인데도 디자인을 해야 하는 상황일 겁니다.디자인에 대해 아무것도 모르지만, 이 가이드를 따라 하면  야 너두 디자인할 수 있어…~~~!  🍀  먼저 프로젝트 디자인을 진행하는 일반적인 과정은 다음과 같습니다. 1. IA(정보 구조) 작성하기2. 레퍼런스 찾기3. 와이어프레임 작성하기4. 디자인 시스템 설정하기5. GUI(그래픽 사용..

** 이 글은 레벨 3 시작 1주차 진행 과정 중 작성한 글입니다. ((아직도 1주차임))  우테코에서는 프론트엔드, 백엔드, 안드로이드 트랙만 있기 때문에 기획자나 디자이너가 따로 없다.그 말인즉, 팀을 이루는 프론트와 백엔드 개발자들이 기획부터 디자인, 그리고 개발까지 모두 맡아야 한다는 뜻이다. 사실 기획 부분은 크게 부담스럽지 않았다. 비즈니스 모델을 고려하지 않고, 사용자에게 필요한 아이디어를 중심으로 기획할 수 있다고 생각했기 때문이다. 팀 프로젝트에서는 수익보다는 사용자 경험과 아이디어의 가치가 더 중요하다고 느끼기 때문이다. 하지만 디자인은 전혀 다른 이야기였다.여러 팀 프로젝트를 거치면서, 디자인의 퀄리티가 프로젝트 전체의 퀄리티에 얼마나 큰 영향을 미치는지 이해하고 있었다. 특히, 같은..

** 이 글은 레벨 3 시작 1주차 진행 과정 중 작성한 글입니다.  팀 프로젝트 시작 전..우테코 레벨 3에서는 내가 직접 기획하고 개발하며 협업하는 팀 프로젝트를 진행한다.그래서 방학 기간 동안 어떤 프로젝트를 하고 싶은지, 어떤 기능을 구현해보고 싶은지 고민하며 시간을 보냈다. 내가 떠올린 프로젝트 아이디어는 현재 우리 팀이 진행 중인 자취방 체크리스트 서비스와 아직 공개되지 않은 기타1 프로젝트였다. 그리고 구현해보고 싶은 기능으로는 웹 푸시 알림, 애니메이션 효과, 결제 시스템이 있었다. 방학 동안 나는 다양한 아이디어를 떠올리며 아이디어 수첩에 정리했다.((여담이지만, 이렇게 모은 아이디어들을 나는 ‘아이디어 쿠키’라고 부르며, 기회가 될 때마다 하나씩 실현해 나가고 있다.))    이전에 자..

요호~!! 벌써 레벨 2 수료~!! 한지 사실 2주가 되어간다.. 남은 휴가는 4일뿐,, ㅜㅜ휴가 더 줘. 한 주만 더 줘!   아무튼 방학도 지나가니 적어보는 레벨 2 생활기이다. 레벨 2 상반기 생활기는 여기에~!  우테코는 현재 가틱폰 중독..점점 모두들 데일리 미팅을 빙자한 게임판을 벌리고 있다. 한 팀은 테트리스, 어떤 팀은 그림 그리기.. 이게 맞나;; 모르겠다~ 이게 소확행이지 뭐 하하    그리고 진정한 소확행 맛있는 거 먹기아무래도 점심 먹으려고 출근하는게 분명함    먹었으니 열심히 공부해보자 이번 3번째 미션은 장바구니 미션이었는데 정말 재밌었다. 지금까지 한 미션들 중에 가장 재미있던 미션 이번 미션은 완전 TDD 적으로 해보려고 일부러 노력했다.초반엔 힘들지 않을까 했는데 이게 웬..

1. 문제 분석  문제 설명각 사진마다 포함된 인물의 그리움 점수를 합산하여 사진의 추억 점수를 계산합니다. 사진별로 포함된 인물과 각 인물의 그리움 점수가 주어지며, 각 사진의 추억 점수를 계산하여 배열에 담아 반환합니다.제약사항name의 길이와 yearning의 길이는 같고, 3 이상 100 이하photo의 길이는 3 이상 100 이하이며, photo[i]의 길이는 3 이상 100 이하 2. 해결 방법 1. 각 사진을 순회하며 사진의 추억 점수를 계산한다. (reduce 메서드 사용) 2. 하나의 사진에 포함된 인물들을 순회하며 추억 점수를 계산한다.  (reduce 메서드 사용) 3. 사진에 있는 인물이 그리움 목록에 있는지 찾는다 (findIndex 사용)4. 그리움 목록에 있다면 3번에서 찾은 ..

벌써 레벨 2 마지막 미션이다. 시간이 참 빨리 지나갔다. 이번 상품 목록의 📍 학습 목표는step1✔️ MSW를 사용하여 API 요청을 모킹 하고 개발한다.✔️ 비동기 작업(API 요청)의 상태를 관리하고, 비동기 요청 상태에 따라 적절한 UI를 보여줄 수 있다.✔️ RTL을 사용하여 비동기 작업에 대한 테스트를 작성할 수 있다.step2✔️ React Query를 사용하여 서버 상태를 관리할 수 있다.🛍️✔️ API 연동 과정에서 발생하는 다양한 에러 상황에 대응하고 사용자에게 피드백을 제공할 수 있다. 이번 미션에서 나는 무얼 배우고, 어떤 것에 집중해서 작업해 보았을까?   🔎 MSW 사용하여 테스트 코드 작성하기 이번 미션을 통해 MSW라는 걸 배우게 되었다. MSW란?MSW(Mock Se..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제 분석 문제 설명 로봇 강아지가 주어진 명령에 따라 직사각형 공원에서 산책을 합니다. 공원은 'O' (이동 가능), 'X' (장애물), 'S' (시작 지점)으로 구성된 격자 형태입니다. 로봇 강아지는 주어진 명령을 순서대로 수행하며, 각 명령은 방향 ('N', 'S', 'E', 'W')과 거리로 구성됩니다. 명령을 수행하기 전에, 로봇 강아지는 다음을 확인합니다:이동하려는 방향이 공원을 벗어나는지.이동 경로에 장애물이 있는지.이 두 조건 중 하나라도 충족하면 해당 명령은 무시되고, 다음 명령으로 넘어갑니..