24년 08월 19일부터 프로젝트 캠프 : React 과정에 2기로 합류하게 되었습니다. 항상 팀 프로젝트에 대한 경험이나 그에 대한 만족스러운 결과물이 부족하다고 생각하여, 어느 방식으로든 팀 프로젝트를 해야겠다는 생각이 있었습니다.
가장 최근에 진행했던 팀 프로젝트가 FE개발자를 준비하며 경험한 유일한 팀 프로젝트인데, React와 JS를 얕게 공부하고 프로젝트를 진행하게 되니 답답하고 아쉬운 상황을 반복하여 경험했던 것 같습니다.
이런 부족했던 부분들이나 실수를 개선하여 한번 더 팀 프로젝트를 진행하고 싶었고, 완성도 있는 결과물에 대한 필요성을 느끼던 중 프로젝트 캠프 모집 공고를 보았고 합류를 결정하게 되었습니다.
이전에 부족했던 점을 개선하더라도 완벽하지는 않겠지만, 이번 과정을 통해 성장할 수 있는 기회가 있으면 좋겠습니다.
# 1 . 프로젝트 캠프 1주차 요일별 일정 및 회고
프로젝트 캠프 : React 2기 과정의 일정은 총 6주입니다. 2주 동안은 React와 Typescript에 대한 강의가 진행되며 이를 통해 학습하게 됩니다. 4주 동안은 사전에 선정된 기업에서 제공하는 프로젝트를 진행하게 됩니다.
1주 차에는 필수 Javscript문법을 가볍게 학습하는 것을 시작으로 Typescript 기초문법, React의 사전지식, 컴포넌트, 기본문법, hook에 대해 학습 및 실습을 진행하였습니다. React는 이전에도 학습하였지만 이전에 React를 학습했을때는 Javscript를 다뤘었습니다. 이번에는 Typescript와 같이 학습하다보니 모르는 부분이 꽤 있어 생각보다 정신없이 정리했던 것 같습니다.
그날 학습한 내용들을 그날 복습하지만 한 두 번으로는 완벽하게 정리하기 힘들어 보여서 주말에도 좀 더 정리하며 학습할 예정입니다.
월요일.
첫날 오전에는 프로젝트 캠프의 OT와 기업 프로젝트 설명회를 진행하였습니다. 프로젝트 캠프에 대한 전반적인 진행방식 및 일정에 대한 설명을 들었고 프로젝트는 어떻게 진행되는지 어떤 주제인지 요구사항은 무엇인지에 대해 알아볼 수 있었습니다. 기업이 주도하는 프로젝트에 참여한다는 것은 쉽게 경험해 볼 수 없는 부분이라 기대하고 있는 부분 중 하나입니다. 프로젝트 및 협업에 대한 경험, 그로 인해 얻게 될 완성도 있는 결과물이 이번 프로젝트에서 설정한 제 개인적인 목표입니다. 6주라는 기간 내에 들인 시간보다 많은 것을 얻어갈 수 있으면 좋겠다고 생각하였습니다.
오후에는 예비군 훈련이 있어서 강의를 수강하지 못했습니다. 아쉬웠지만 강의자료와 진도를 파악한 뒤 개인적으로 공부하여 진도를 맞췄습니다. 자바스크립트 필수 문법들과 타입스크립트의 기본타입, 함수타입, 타입 연산자, 인터페이스 등 생각보다 진도를 많이 나가서 유튜브나 인터넷강의를 참고하여 최대한 진도를 맞췄습니다. 확실히 풀타임인 데다 2주라는 짧은 기간에 많은 내용을 다뤄야 하고 실습도 해야 하니 진도가 빠른 것을 느꼈습니다. 예상은 했지만 자바스크립트나 타입스크립트, React에 대해 아무것도 모르고 들었다면.. 생각보다 고생했을 것 같습니다.
화요일.
오프라인 풀타임으로 강의를 온전히 참여한 첫날입니다. 강의장은 마곡역에서 도보로 4분 정도 소요되는 위치였습니다. 오프라인 참여자들은 오프라인으로 강사님께서 마이크로 진행하시는 강의를 수강할 수 있었고 온라인 참여자들은 ZEP을 통해 강의에 참여하였습니다.
온/오프라인 강의 수강방식에는 장단점이 있지만 오프라인 강의 환경은 크게 나쁘지 않아 강의를 수강하는 데에 집중할 수 있었습니다. 오프라인 강의장 모습
8시 50분쯤 도착했을 때, 앞자리는 이미 많이 앉아 계셔서 뒷자리에서 수강했는데 모니터가 있었고 잘 보여서 크게 문제없이 수강하였습니다.
1일 차 학습했던 타입스크립트 인터페이스에 이어.. 타입별칭, enum, 제네릭, any, 타입가드를 학습하였고 React의 npm과 yarn, 보일러플레이트, 사용이유, React의 확장자, null 보장연산자, React.fragment ( <></>), 컴포넌트 함수 이름규칙, 스타일링 방법 등에 대해 학습하고 실습하는 시간을 가졌습니다. 아예 처음 보는 내용은 없어서 크게 뒤처지지 않고 따라갈 수 있었습니다. 중간에 실습시간도 충분히 주셔서 학습한 내용을 적용해 볼 수 있어서 더 좋았습니다.
강의시작 전에 1일 차에 과제가 있었는지 풀이를 해주셨습니다. 과제를 수행하지는 못했지만 어떤 과제였는지는 작성하려고합니다.
Q1. 문장에서 가장 긴 단어를 반환하는 함수
const getLongString = (str: string) => {
return str.split(" ").sort((a, b) => b.length - a.length)[0]
// 공백을 기준으로 split
// b의 길이 - a의 길이 ( = 내림차순 ) 로 sort => 단어가 긴 것 부터 정렬
// [0] 첫번째 요소가 가징 긴 단어, 이를 리턴
}
Q1. 암스트롱 수 구하기
/*
100부터 999까지 암스트롱 수를 구하세요
&암스트롱 수란?
암스트롱의 수는 세 자리의 정수 중에서 각 자리의 수를 세 제곱한 수의 합과 자신이 같은 수를 말합니다.
예를 들어 153 = 1 + 125 + 27 입니다.
이와 같은 수를 암스트롱의 수라고 말합니다.
*/
const isArmstrongNumber = (num: number): boolean => {
// num이 153 이라고 가정
// num을 적절한 형태로 바꿔주는 코드
const digits = num
.toString() // 문자열로 변환
.split('') // 각 문자를 배열에 할당 ( ['1','5','3'] )
.map(Number) // 배열내의 요소를 Number타입으로 변환 ( [1, 5, 3] )
// .reduce( (acc,cur) => acc+cur, initialValue )
const sumOfCubedDigits = digits.reduce((acc, cur)=>
// pow메서드의 두번째 매개변수를 n으로 지정시 n제곱으로 계산할 수 있다.
// 아래 코드에서는 cur을 세제곱하여 acc에 더했다.
acc + Math.pow(cur, 3)
, 0)
// acc: 0 ( 초기값 )
// acc: 1 ( 첫번째 순회 )
// acc: 126 ( 두번째 순회 )
// acc: 153 ( 세번째 순회 )
return sumOfCubedDigits === num;
}
// 100 ~ 999의 범위 내에서 암스트롱 수를 구하는 코드
const printArmstrongNumbers = (): void => {
for(let i=100; i<=999; i++){
if(isArmstrongNumber(i)){
console.log(i)
}
}
};
수요일.
3일 차에는 본격적으로 스타일링과 리액트 컴포넌트 및 데이터 전달에 대해 학습하였습니다. 이전에 다루지 않았던 tailwind를 좀 더 확실하게 학습할 수 있는 시간이었습니다. 추가로 이미 알고 있던 다른 스타일링 방식도 복습해 볼 수 있었습니다.
스타일링에 이어 리액트를 학습하였습니다. 컴포넌트로 쪼개서 재사용성이 높은 코드를 작성하는 방법에 대해 학습하였습니다. 그리고 이전에 많이 어려워했던 컴포넌트 간 데이터나 함수를 전달하는 방법에 대해서도 학습하였습니다. 개념이 이해는 되지만 이해한 개념을 코드에 적용하려고 하면 항상 고장 나는 것 같습니다. 강의 이후에도 더 복습해서 부족한 부분을 채우는 시간을 가졌습니다. 앞으로도 이렇게 부족한 부분들이 있을 텐데 미루지 않아야 큰 탈이 없을 것 같습니다.
3일 차에는 과제가 있었습니다. 새로 알게 된 stackblitz.com에서 진행하였습니다. codesandbox나 codepen같이 웹에서 개발을 할 수 있는 사이트인데, 알고 있던 사이트 보다 훨씬 좋았고 많은 것이 가능했습니다. 과제내용은 금일 학습한 props에 대해 복습한 흔적을 제출하기 그리고 심플한 개인 프로필 카드가 출력되는 예제 코드를 활용하여 해당 코드를 재사용성이 높은 컴포넌트로 동작할 수 있도록 코드를 수정 및 작성하는 것 이렇게 두 가지였습니다.
Javscript로 했다면 좀 더 수월하게 했을 것 같은데 Typescript여서 당황했던 부분이 조금 있었습니다. 아직 익숙지 않아서 실수가 잦은데 다른 개념과 헷갈리지 않을 정도로 복습이 필요해 보였습니다.
4일 차에는 오전에는 3일 차 과제를 다뤄주셨고 제 코드와 비교하면서 개선해야 할 점을 정리하였습니다. 4일 차 강의는 아직도 어려운 children props에 대해 학습하였고 이후에는 조건부 렌더링, 반복 렌더링, 이미지 렌더링 등 실제로 배운 내용은 이전보다 적었지만 실습시간을 많이 가져서 여러 예제코드를 직접 보고 작성해 보며 익숙해지는 시간을 가졌습니다. 확실히 눈을 보고만 있는 것보다 직접 만들어봐야 이해도 빠르고 집중도 더 잘 되는 것 같습니다.
이전에 경험했던 미니 프로젝트에서 게시글을 출력하는 기능을 구현할 때 잘 모르고 썼었던 조건부 렌더링, 반복 렌더링을 학습하고 실습할 수 있어서 좋았습니다. 추가로 이미지를 렌더링 하는 것은 처음이 아니었지만 제대로 알지 못한 상태로 기능을 구현했었는데 이번기회에 확실히 학습할 수 있어서 다행이라고 생각합니다. 실습시간을 충분히 주셔서 좀 더 여유 있게 생각하며 코드를 작성할 수 있었던 것 같습니다.
4일 차에도 과제가 있었습니다. Button, Input, CheckBox 컴포넌트를 만들고 이를 여러 번 사용하며 로그인 컴포넌트를 만드는 것이었습니다. 컴포넌트를 재사용이 가능하게 만들고 필요한 부분에 가져다 쓴다는 점에 집중하여 과제를 수행하였습니다. 디자인은 figma로 제공해 주셨는데 최대한 예제 디자인과 유사하게 만들기 위해 tailwind 속성을 살펴보는 시간도 가질 수 있었습니다. tailwind도 잘 모르고 shadcn을 다루다가 데였었는데 tailwind 문법에 빨리 익숙해져서 나중에는 shadcn도 다시 다뤄봐야겠다는 생각이 들었습니다.
금요일.
1주 차 마지막날인 5일 차에는 리액트 훅에 대해 학습하였습니다. useState, useRef에 대해 학습하였는데 학습한 내용은 적었지만 실습이 많았습니다. 실습들은 이전에 학습했던 내용을 이해해야 할 수 있는 실습들이었습니다.
첫 번째 실습은 켜진 램프, 꺼진 램프 이미지와 조건부렌더링을 활용하여 이미지를 클릭하면 이미지 간 전환이 되도록 구현하는 실습이었습니다. useState, 조건부/이미지 렌더링, onClick 등의 내용을 활용하여 실습을 수행했습니다.
두 번째 실습은 input창에 색상이름이나 헥사코드를 입력하면 사각형 영역에 색상이 입력된 색상으로 변하는 실습이었습니다. tailwind로 부여한 스타일 값에 리터럴 방식으로 바꾸는 방식을 시도하였으나 강사님이 따로 언급해 주실 만큼 많이 하는 실수였습니다. 배경색을 지정하는 속성과 값은 tailwind로 스타일링하지 않고 style태그를 활용하여 적용하는 방식으로 문제를 해결할 수 있었습니다. style태그로 적용되는 color값은 useState를 통해 상태관리 되도록 했으며, 이전에 만들어뒀던 useInput 컴포넌트를 활용하여 해결할 수 있었습니다.
세 번째 실습은 이전에 로그인 컴포넌트를 했던 실습을 좀 더 디벨롭한 실습이었는데 input창과 checkbox가 모두 값이 채워져야 login버튼이 눌리도록 하는 실습이었습니다. 마찬가지로 useState와 핸들러 함수를 정의하여 해결할 수 있었습니다만 중간에 놓쳐서 좀 더 공부해봐야 할 것 같습니다.
# 2 . 프로젝트 캠프 1주차 후기
온라인에서 얻을 수 없는 오프라인의 장점이 있어서 더 좋았던 것 같습니다. 몸이 움직이니 확실히 현장감도 있고 집중도 잘 되는 것을 느꼈습니다.
짧은 기간에 많은 내용을 학습한다는 점은 이미 알고 있었고 이전에 방심하다가 그렇게 데였던적도 있어서 사실 걱정을 많이 하였습니다. 추가로 프로젝트 캠프에 합류하기 이전에 4~5시에 자던 버릇이 결국 고쳐지지 않아서 수면 패턴이 망가진 상태라 정신없는 한 주를 보낸 것 같습니다.
2주 차가 직무교육 마지막 주차가 될 텐데 좀 더 노력하고 집중해서 놓치는 부분 없이 정리할 생각이고, 이를 프로젝트에 적용하여 완성도를 높이는 기회로 연결될 수 있었으면 좋겠습니다.
# 3. 마치며
회고 이렇게 적는 거 아닌 거 같은데 모르겠습니다. WIL이라고 해서 주말에 적고 있는데 일기장이 되고 있습니다. 그래도 쓰는 버릇을 들여놔야 실력이 늘 것 같아 좋은 경험이라고 생각합니다.
2주 차에는 이렇게 일기장 같은 회고를 남기기보다는 강의를 들으며 중요하다고 생각했던 부분이나 유용한 정보 및 코드를 메인으로 다룰 것이며, 그에 대한 생각과 부족했던 점 개선할 점 등을 서브로 다룰 생각입니다.
결국 흔적을 남겨놔야 나중에 또 찾아서 공부할 수 있으니 기술블로그같이 눈에 잘 보이는 곳에 기록을 남기는 건 좋은 것 같습니다.
본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.
