[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 1주차 후기
서류접수 - 면접 - 교육 - 기업연계 팀 프로젝트 진행
과정을 거쳐 진행되는 스나이퍼팩토리 프로젝트 캠프.
7월 말에 접수하고 서류합격, 면접, 최종합격을 거쳐 24.08.19 첫 수업이 있었다.
월~금. 오전 9시부터 오후 6시까지 2주간 타입스크립트와 리액트 교육이 진행된다.
그리고 2주간의 교육을 마치면 본격적으로 프로젝트를 진행하게 된다고 한다.
1일차
오리엔테이션
오늘은 첫날이라 오전 9시부터 12시까지 오리엔테이션을 통해 전체 과정, 참여 기업, 팀배정, 출결, 수업 및 쉬는 시간 등 전체 과정에 대한 안내를 받았다.
이번 기수에 참여한 기업은 총 4곳(KT, 두꺼비세상, 테라파이, 펄핏)이었으며 각 기업별로 20분 정도씩 진행할 프로젝트에 대해 설명해 주셨다. 이 설명을 들은 후 수강생들은 구글폼으로 1순위 ~ 4순위까지 제출하고 이걸 가지고 팀이 배정된다고 한다.
수업 (Javascript, Typescipt)
수업은 유튜브 "수코딩(https://www.sucoding.kr)" 운영 중이신 김기수 강사님이 진행해 주시며, 아래 코드 이상으로 다양한 예제와 함께 설명해 주셨다.
사용 편집기 : vscode
- 사전에 설치 관련 안내 문자가 왔었다.
[자바스크립트]
- 교육과정에는 포함되어 있지 않으나, 타입스크립트 진행을 위해 필요한 주요 내용 몇 가지는 짚어 주셨다.
// var 사용 x - let 혹은 const 사용하기
const str = "start Project";
let num = 19;
// 함수 선언 - 화살표 함수 잘 알고 잘 쓰기!
function func1() {
console.log("함수 선언");
};
const func2 = function () {
console.log("익명 함수");
};
const arrowFunc = () => {
console.log("화살표 함수");
};
// 비구조화 할당
const [fruit1, fruit2, fruit1] = ["pear", "berry", "melon"];
// 객체 비구조화는 key값과 동일해야하며, 배열과 달리 순서는 상관없다
const {gender, userName} = { userName: "Yuri", gender: "female" }
// 얕은 복사 (shadow copy)
const arr1 = [1, 2, 3];
const arr2 = arr1;
// 깊은 복사
const arr3 = [...arr1]
// 병합
const numArr1 = [10, 20];
const numArr2 = [30, 40];
const newArr1 = [numArr1[0], numArr2[1], numArr2[0], numArr2[1]];
const newArr2 = [...numArr1, ...numArr2];
자바스크립트에 대해 간단한 리뷰 후 바로 타입스크립트 설치부터 수업이 진행되었다.
하루에 듣는 수업시간이 길다보니 후기로 한번에 다 적기 어려워 따로 정리하며 복습해보려고 한다.
1일차에는 타입스크립트 설치, 변수 선언에 관한 것들을 배웠다.
- 기본 변수 선언
- 함수 선언
- 연습1 ~ 2
- operator
- interface
2일차 수업 (Typescipt, React)
확실히 9시부터 6시까지 수업을 듣다보니 공부량이 어마어마하다.
- typescript
- interface 마무리
- type alias
- enum
- generic
- any
- 타입 가드
- 프론트엔드 면접 단골 질문 및 CS 지식
- npm, npx, yarn 이해하기
- react 사용 이유?
- 바벨(Babel)과 웹팩
- React
- 설치 방법
- 확장자 이해하기 (.js, .jsx, .tsx)
- 컴포넌트 작성 방법
- 인라인 스타일, 외부 스타일 적용 방법
오늘부터 이번주 금요일까지는 수업이 끝난 후 6시부터 30분간 zep을 통해 온오프라인 수강생들의 만남이 이루어졌다.
각 기업별로 모여 자기소개를 하는 시간을 가졌는데, 어색해서 쭈뼛거리다 흘려보낸 시간 때문인지 일부는 자기소개를 하지 못해 남은 사람은 내일 하기로 했다.
그리고 2일차 숙제!
노션에 각 수강생들이 적은 자기소개를 읽고 5명 이상에게 댓글 남기기였다.
댓글 달기 미션 하려다가 자기소개 작성이 뭐였는지 알게 된 나.. 실환가 🫢
3일차 수업 (React)
오늘 수업을 들으며 react의 css 스타일링에 관해 많이 배웠는데, 배우면서 예전에 회사 개발자 분이 했던 말이 생각났다.
재미삼아 그 분을 메인으로 vue를 사용해 회사 플랫폼 리뉴얼을 시도했었던 때였다. 많은 사람들이 react를 쓰는데 왜 vue를 선택했냐고 물었더니 "React는 커뮤니티가 좋은 만큼 선택지가 많아서 힘들어"라고 답변해 주셨었다.
그 때는 리액트를 지금보다도 더 모르던 때라 엥? 했는데 수업을 듣다보면 그 마음을 좀 알것도 같다.
가장 인기있는 것 부터 하나하나 해가면 된다고는 하지만 시작하는 입장에서는 막막할 수 밖에 없는 것 같다 :( ..
- React
- React css 스타일링 (인라인, 외부 스타일, css modules, css 라이브러리)
- 컴포넌트 생성
- 컴포넌트 이벤트 (자바스크립트와 유사)
- 컴포넌트 Props
그리고 오늘은 숙제가 있었다!
props와 친해지기 (?) .. 선생님이 주신 코드를 보며 props 활용에 익숙해져보고 제시된 html을 컴포넌트화 시키는 것이었다.
다양한 예제와 숙제가 확실히 이해하는데 많이 도움되고 있는 것을 느끼는 중이다 👍
4일차 수업 (React)
html, css 다룰 때와 비슷하게 생각해서 너무 단순하게 생각했던건지 수업을 들으면서 내 생각 이상으로 깊게 생각하고 대응해야 한다는 걸 느꼈다. 컴포넌트를 제작하고 사용하는 과정에서 다양한 속성을 지닌 태그들, 특히 form 관련 태그들은 익숙해지기 전까지 한 번 더 생각해 보고 고민해서 작업해야겠다.
- React
- children
- 조건부 렌더링
- 반복 렌더링
- 이미지 렌더링
오늘의 숙제는 수업시간 props, children 연습 겸 만든 input, 버튼 컴포넌트를 활용해 로그인 페이지를 구성해 보는 것이었다.
6. 5일차 수업 (React)
첫 주 마지막 수업날!
벌써 5일이나 지났다는게 믿기지 않는다. 그리고 다음주만 지나면 프로젝트 시작이라니 신기한 기분이다!!
다양한 예제와 함께 리액트 훅에 대해 배웠는데, 뭔가 갑자기 난이도가 급 올라간 느낌이었다.
연습이 많이 필요한 부분이어서인지 연습 문제도 많이 준비해 주시고 직접 풀어보는 시간도 꽤 있었는데, 생각보다 잘 안풀려서 답답한 기분도 들었지만 나름 재밌었다.
그리고 주말 동안 복습, 삭제된 이미지 복구 기능과 여행 사이트 관련 숙제를 하면서 이전 내용들 보다 더 많이 풀어보고 익혀야 되겠다 싶었다.
- React hooks
- useState
- useRef
오늘은 같은 기업 수강생들끼리 zep으로 모이는 마지막 날이었다. 우리는 희망 팀원 신청을 고려해 본인어필 및 추구하는 방향에 대해 얘기를 나눴다. 어떤 분들과 팀을 이루어 프로젝트를 진행하게될지 벌써 설레는 기분이다.
강사님이 수강생들이 조금이라도 더 쉽게 이해할 수 있도록 설명해주시고 예제, 숙제도 주셔서 수업을 따라가는 것이 생각만큼 힘들지는 않았다. 그리고 예제 푸는 동안도 계속 둘러보시면서 학생들 질문도 받아 주시고 어려워 하는 것 같으면 힌트도 주셔서 스스로 생각하고 만드는데 많은 도움이 됐다.
또, 수강생들끼리 좋은 관계 만들 수 있도록 수업시간 이상으로 운영진 분들이 노력해주셔서 한주간 재밌게 보낼 수 있었다.
퍼블 국비 외에 이런 활동을 처음 참여해봐서 걱정을 많이 했는데, 생각 이상으로 만족스러워서 신청하길 잘한것 같다.
본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.
#프론트엔드개발자양성과정 #개발자교육과정