프론트엔드 개발자와 React를 이용한 개발 및 배포 실무 경험하기

2차 앵콜

현직자와 함께하는 웹개발직무 5주 인턴

직접 경험하는 것보다 잘 이해할 수 있는 방법은 없습니다.

'직무부트캠프: 5주 인턴’에 참여하면 어려운 인턴 지원 프로세스 없이 5주간 현직자와 제대로 웹개발 직무 경험을 만들 수 있습니다.

멘티님도 할 수 있어요.

현직자의 진짜 실무를 멘토의 도움을 받아 수행합니다.
업무에 대한 1:1 피드백과 코칭이 매주 제공됩니다.
5주간 3회의 세션을 가지게 되며, 학업/현업과 병행 가능합니다.

웹개발 3~5년차 현직자 테일러 멘토입니다.

저와 함께 5주 동안 웹개발 실무를 체험하시겠어요?

안녕하세요, 현재 국내 보안회사에 재직 중인 프론트엔드 개발자 테일러라고 합니다.

간략하게 하는 업무를 소개해 드리자면 클라우드 플랫폼에서의 React 기반 웹 인터페이스(콘솔) 개발과, 모든 웹앱에서 공통으로 사용할 수 있는 디자인 시스템(UI 컴포넌트)을 개발하고 있습니다.

프론트엔드 직무를 결정하게 된 계기

프론트엔드 영역의 매력 때문인데, 개발 영역 중에서는 사용자와 가장 맞닿아 있으면서 피드백도 가장 빠르게 수용할 수 있다는 점 등 이러한 이유가 가장 큰 결정 계기라고 볼 수 있겠네요. 이전에 풀스택 개발자로 일할 때도 항상 느꼈지만, 확실히 백엔드 영역은 회사의 비즈니스적인 로직에 집중을 많이 한다고 하면 프론트엔드 같은 경우 사용자의 경험에 좀 더 포커스를 맞춰서 개발하는 경향이 보였습니다. 이러한 특징 때문인지 사용자 경험의 수준과 웹 애플리케이션의 인터페이스가 비례하는 관계로 발전한다는 것이 눈에 보이더라고요. 그래서 확실히 시대적인 트렌드도 빠르게 캐치할 수 있다는 점, 이것도 어떻게 보면 큰 매력인 것 같습니다.

구직자 시절에 어려웠던 점

저 같은 경우 독학으로 개발 공부를 했다 보니 도움을 구할 곳이 없어 오직 구글링(구글 포털 검색)과 책을 통해 필요한 지식과 기술들을 습득했었습니다. 그러다 보니 당연히 남들보다 더 많은 시행착오를 겪을 수밖에 없었고, 정해진 가이드라인 자체가 없다 보니 많이 헤매기도 했습니다.

하지만 오히려 이런 경험들이 쌓이다 보니 정보를 찾을 때 내가 원하는 정보를 빠르고 정확하게 찾을 수 있게 되었고, 어떻게 보면 이런 노하우를 가장 먼저 습득했다면 구직의 기간이 짧아지지 않았을까 생각이 듭니다.

프론트엔드 직무부트캠프를 통해 얻을 수 있는 것

아마 이 부분이 제일 궁금하실 것 같은데, 간단합니다. 여러분들이 신입으로 들어갔을 때 당황하지 않고 회사가 진행해 오던 개발 업무에 자연스럽게 녹아들어 갈 수 있게 하는 것이 가장 큰 목표입니다. 이를 위해 현업에서 요구하는 프론트엔드 개발자로서의 스킬, 그리고 이를 뒷받침하는 주요 지식 및 개념들을 익히실 수 있습니다.

그리고 이렇게 습득한 스킬과 지식을 React 기반의 단위 기능 개발부터 시작해서, 소규모 프로젝트까지 진행할 예정입니다.

이런 고민을 가진 분들에게
직무부트캠프를 추천합니다.

인턴 경험을 쌓고 싶은데
직무경험이 없어요.

면접에서 대답할
직무경험이 없어요.

자소서에 작성할
직무경험이 없어요.

직무부트캠프는
실제 취업에 도움이 됩니다.

직무부트캠프에서 했던 경험과 배웠던 직무 전문 단어를 면접에서 활용하였더니 면접관들이 흥미를 보였고, 결국 최종 합격했어요.

직부캠 수료생

남00님

수료증을 토대로 이력서에 직무 관련 경험으로 작성했고 임원 면접시 경험에 대한 질문에 직무 관련한 관심이 많다는 것으로 어필 했고, 좋은 평가를 받을 수 있었어요.

직부캠 수료생

강00님

3~5년차 현직자

테일러

인증멘토

현) 국내 중견 개발사

웹 프론트엔드 개발
관리자 플랫폼 개발
사내 백오피스 개발
공용 디자인 시스템 개발

현) IT 교육플랫폼 프로젝트 코칭

프론트엔드 부트캠프 프로젝트 코칭
수강생 프로젝트 교육 코칭, 코드 리뷰

전) 국내 라이프스타일 스타트업

웹 풀 스택 개발
백오피스 및 애널리틱스 사이트 개발
모바일 서비스 내부 API 서버 개발
모바일 전용 웹 뷰 개발

전) 국내 여성 소비재 스타트업

웹 풀스택 개발
모바일 웹앱 개발(관리자, 사용자)
백오피스 툴 및 웹 크롤러 개발

프론트엔드 개발자와 React를 이용한 개발 및 배포 실무 경험하기

주제로 5주 동안 실무자가 될 수 있게 도와드리겠습니다.

웹개발 인턴이 되어 2~3년 차 실무자가 실제로 수행하는 업무를 부여받게 됩니다.

개발팀장

웹개발팀

담당자

홍길동

중요도

높음

마감일

2025.12.08

[1차]

자, 실제 프로젝트에 들어가기 전 팀에 적응하기 위한 온보딩 기간입니다. 코드에디터는 Microsoft의 VSCode를 사용합니다. 그리고 대부분의 프로젝트를 React 기반으로 진행하기때문에 CRA를 실행할 수 있는 환경을 만들어주세요. 추가적으로 테스트를 위해 CRA로 간단한 레이아웃을 만들어주고, 해당 소스코드들을 Github로 업로드 해주세요.

[2차]

온보딩 기간 중 React의 기본적인 역량을 체크하기 위해 팀원들에게 소개할 간단한 자기소개 페이지를 만들어 봅시다.

[3차]

자 이제 온보딩 기간은 끝났고, 자체 신규 플랫폼의 프론트 개발을 시작합니다. 전체 기능 중 회원가입, 로그인, 그리고 로그인이 성공적으로 완료되면 메인 페이지로 갈 수 있도록 3개의 페이지를 개발해야됩니다. 관련 기능의 API서버는 이미 백엔드팀에서 만들어 둔 상태입니다.

[4차]

출시된 서비스의 일시 장애로 사용자들의 컴플레인이 지속적으로 들어오고 있는 상황입니다. 이에 대응하기 위한 QnA 사이트를 개발해주세요.

1주차 (Live 세션)

부트캠프 방향 설명, 개발 환경 셋업, 기본 레이아웃 구조 생성

1차 과제 - CRA를 통한 기본 레이아웃 구현

자, 실제 프로젝트에 들어가기 전 팀에 적응하기 위한 온보딩 기간입니다. 웹 관련 코드들을 작성하기 위해 우리는 라이선스 비용이 없는 Microsoft의 VSCode를 사용합니다. 그리고 대부분의 프로젝트를 React 기반으로 진행하기때문에 CRA를 실행할 수 있는 환경을 만들어주세요. 추가적으로 테스트를 위해 CRA로 간단한 레이아웃을 만들어주고, 해당 소스코드들을 Github로 업로드 해주세요.

2주차

React LifeCycle의 이해, HTML Event, Props/State 활용, UI 렌더링

2차 과제 - 자기소개 페이지 개발

온보딩 기간 중 React의 기본적인 역량을 체크하기 위해 팀원들에게 소개할 간단한 자기소개 페이지를 만들어 봅시다.

헤더 영역에서 세개의 탭 메뉴(Home, Skill, Contact) 가 존재해야 합니다.
헤더 탭 메뉴를 누를때마다 메뉴에 맞는 컨텐츠만 보이도록 해야합니다.

3주차 (Live 강의 및 발표)

react-router-dom를 통한 페이지 분기처리, 사용자 인증 처리, 공통 컴포넌트 활용

3차 과제 - 회원가입 ~ 로그인 ~ 메인 페이지 개발

HTTP통신은 axios 라이브러리를 통해 진행. (* 백엔드 서버는 OpenAPI 형태로 멘토쪽에서 제공)
로그인 완료 시에 백엔드로부터 전달받은 토큰은 브라우저 LocalStorage에 저장.
메인 페이지에서 토큰이 없는 상태에서 새로고침하는 경우, 로그인 페이지로 Redirect.

4주차

React 커스텀 훅을 통한 UI 개발, 웹 어플리케이션 배포

4차 과제 - QnA사이트 개발

출시된 서비스의 일시 장애로 사용자들의 컴플레인이 지속적으로 들어오고 있는 상황입니다. 이에 대응하기 위한 QnA 사이트를 개발해주세요.

사용자의 컴플레인 데이터(No, 컴플레인 제목, 생성일, 답변여부)를 테이블 형태로 볼 수 있는 페이지가 필요합니다.

(* 백엔드 서버는 OpenAPI 형태로 멘토쪽에서 제공)

해당 테이블은 페이지네이션이 적용되어 1페이지당 10개의 Row를 보여줍니다.
테이블의 Row를 클릭한 경우, 컴플레인의 자세한 데이터(No, 컴플레인 제목, 컴플레인 내용, 생성일, 답변 내용)를 보여줄 수 있는 페이지로 이동합니다.
여기서 컴플레인 답변 내용이 없는 경우 작성하고, [저장] 할 수 있어야 합니다.

5주차 (Live 강의 및 발표)

React Context-API 적용, Docker를 이용한 배포, 코드 리팩토링

이 업무를 선정한 이유를
알려드릴게요!

현재 프론트엔드 시장은 'React' 프레임워크를 활용하는 케이스가 대부분입니다. 이에 따라 React의 기술적인 활용도와 그리고 이를 가능케 하는 개념들을 충분히 인지하고 있어야 실제 현업의 업무에 적응이 가능할 것입니다.

이러한 관점에서 볼 때 프론트엔드의 주요 역할 중, 사용자에게 직관적인 화면을 구성할 수 있도록 인터페이스를 적절하게 개발하는 것도 중요하지만 이와 맞먹을 정도로 중요한 것이 바로 각 UI에 주입할 데이터에 대한 상태관리입니다.

여러 가지 상황을 생각해서 React에서 제공하는 많은 방법 중, 어떤 방법으로 상태관리를 하는 것이 효율적일지 생각을 해볼 수 있는 시간을 가지고 실제 기능 개발에 이를 적용할 것입니다.

그리고 실제 현업에서는 대부분의 데이터는 백엔드 API 서버를 호출하여 나오는 결괏값에 의존하기 때문에, API 서버 호출에 대한 결괏값을 상태로 저장하여 관리하는 방법도 알아볼 것입니다.(* 제가 이미 만들어둔 자체 API 서버가 있기 때문에, 여러분들은 백엔드를 직접 만들지 않고도 테스트가 가능합니다.)

결론적으로 이번 캠프를 통해서 각 기술과 개념을 작은 단위의 기능 구현을 통해 경험하고, 과제를 통해 해당 기능들이 모인 페이지 단위의 웹앱을 개발할 수 있도록 하는 것이 가장 큰 목표입니다.

상세한 스케줄을 설명드리겠습니다.

3회의 강의와 4회의 업무를 통해
현업자 수준의 직무 이해도를 얻게됩니다.

캠프 시작일

1주차

온라인 세션

8월 13일(일) 02:00~04:00

현직자 직무 에센스 강의 및 Q&A

⋅ 직무 입문 방법
⋅ 직무담당자가 실제로 하는 일
⋅ 직무담당자로 일하는 장, 단점과 요구 역량
⋅ 주차 별 프로젝트 소개 및 선정 이유

8월 18일(금) 14:59까지

업무

CRA를 통한 기본 레이아웃 구현

입사 후 온보딩 과정 중에 앞으로 진행하게 될 프로젝트들에 대한 내용들을 숙지하면서, 개발 관련 사항들을 미리 로컬 PC에 셋업하는 과정입니다. 그리고 해당 사항들이 제대로 적용되었는 지 테스트해주세요.

CRA 기반에서 자유로운 형식으로 레이아웃을 만들어주세요.

* 소스코드 포함된 Github 레포지터리 주소 제출

2주차

서면 피드백

8월 21일(월) 14:59까지

리드멘토 개별 리뷰 및 1차 업무 피드백

8월 25일(금) 14:59까지

업무

자기소개 페이지 개발

온보딩 기간 중 React의 기본적인 역량을 체크하기 위해 팀원들에게 소개할 간단한 자기소개 페이지를 만들어 봅시다.

헤더 영역에서 세개의 탭 메뉴(Home, Skill, Contact) 가 존재해야 합니다.
헤더 탭 메뉴를 누를때마다 메뉴에 맞는 컨텐츠만 보이도록 해야합니다.

* 소스코드 포함된 Github 레포지터리 주소 제출

3주차

온라인 세션

8월 27일(일) 02:00~04:00

업무 발표 및 리드멘토 2차 업무 피드백

*참여자가 2명 이하인 경우, 3/5주차 캠프 시간은 1시간으로 조정 운영됩니다.

9월 1일(금) 14:59까지

업무

회원가입 -> 로그인 -> 메인 페이지 개발

자 이제 온보딩 기간은 끝났고, 자체 신규 플랫폼의 프론트 개발을 시작합니다. 전체 기능 중 회원가입, 로그인, 그리고 로그인이 성공적으로 완료되면 메인 페이지로 갈 수 있도록 하는 3개의 페이지를 개발해야 됩니다. 관련 기능의 API서버는 이미 백엔드팀에서 만들어 둔 상태입니다.

HTTP통신은 axios 라이브러리를 통해 진행. (* 백엔드 서버는 OpenAPI 형태로 멘토쪽에서 제공)
로그인 완료 시에 백엔드로부터 전달받은 토큰은 브라우저 LocalStorage에 저장.
메인 페이지에서 토큰이 없는 상태에서 새로고침하는 경우, 로그인 페이지로 Redirect.

* 소스코드 포함된 Github 레포지터리 주소 제출

4주차

서면 피드백

9월 4일(월) 14:59까지

리드멘토 개별 리뷰 및 3차 업무 피드백

9월 8일(금) 14:59까지

업무

QnA사이트 개발

출시된 서비스의 일시 장애로 사용자들의 컴플레인이 지속적으로 들어오고 있는 상황입니다. 이에 대응하기 위한 QnA 사이트를 개발해주세요.

사용자의 컴플레인 데이터(No, 컴플레인 제목, 생성일, 답변여부)를 테이블 형태로 볼 수 있는 페이지가 필요합니다. (* 백엔드 서버는 OpenAPI 형태로 멘토쪽에서 제공)
해당 테이블은 페이지네이션이 적용되어 1페이지당 10개의 Row를 보여줍니다.
테이블의 Row를 클릭한 경우, 컴플레인의 자세한 데이터(No, 컴플레인 제목, 컴플레인 내용, 생성일, 답변 내용)를 보여줄 수 있는 페이지로 이동합니다.
여기서 컴플레인 답변 내용이 없는 경우 작성하고, [저장] 할 수 있어야 합니다.

* 소스코드 포함된 Github 레포지터리 주소 제출

5주차

온라인 세션

9월 10일(일) 02:00~04:00

업무 발표 및 리드멘토 4차 업무 피드백

*참여자가 2명 이하인 경우, 3/5주차 캠프 시간은 1시간으로 조정 운영됩니다.