[취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 2편(공부 방법 / 포트폴리오 / 이력서 / 면접 )

[취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 2편(공부 방법 / 이력서 / 면접 / 멘탈 관리)

 

[취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 2편(공부 방법 / 포트폴리오 / 이력서 / 면접 )

 
 
 

1. 서론

 
 
지난번 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 1편에 이어서 2편을 열심히 쪄왔다.
사실 더 일찍 오고싶었으나 너무 바빴다 ㅠㅠㅠ.. 이 이상 늦으면 아예 업로드 자체를 못할 것 같아서 주말에 후다닥 작성🥹
 

혹시나 1편 강의 추천을 안 보신 분들은 아래 링크로 들어가서 보시면 됩니다!
 

 
https://heeeming.tistory.com/entry/%EC%B7%A8%EC%97%85%ED%9B%84%EA%B8%B0-%EB%B9%84%EC%A0%84%EA%B3%B5%EC%9E%90-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EB%8F%85%ED%95%99%EC%9C%BC%EB%A1%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%A4%80%EB%B9%84-1%ED%8E%B8-%EA%B0%95%EC%9D%98-%EC%B6%94%EC%B2%9C

[취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 1편 (강의 추천)

 

 
 
내가 했던 공부 방법을 설명하기 전 나의 개발 베이스(CS/기술)와 내 공부 성향을 미리 말하자면 나는 비전공자여서 현재도 CS에 대한 지식은 미천하다.
 
그리고 웹퍼블리셔로 일을 했었기 때문에 HTML / CSS / Jquery 정도만 할 줄 알았고 그 외 Javascript와 React.js, TypeScript에 대한 이해와 경험은 전무후무했으며
 
나의 개발 공부 성향은 문법을 얕고 빠르게 배워 일단 적용해 본다!이니 참고하시길 바란다.
 
 

 

 

---

 

 

 
 
2. 내가 했던 프론트엔드 개발 공부 방법
 

 

리액트를 공부하려면 자바스크립트를 잘 알아야 한다.라는 말들을 정말 많이 들어왔다.
그래서 자바스크립트 ‘문법’ 공부만 하고 또 했다.
문법이 익숙치 않으면 리액트 코드를 짤 수도, 볼 수도 없을 거야,,!라는 생각 때문에
 
마치 문제집을 사 놓고 기초 단원만 보고 또 보는 것처럼 그런 식으로 공부를 했었더랬다.
 


그래서 버린 시간이 최소 6개월 이상은 될 것 같다. (이 시간은 아직도 아까우잉 훌쩍.)
 
 


만약 "퍼블리셔 신입으로 돌아가면 어떻게 공부할 거야?"라고 누군가 묻는다면

나는 자바스크립트 변수, 화살표 함수, 비구조화할당, 조건문, async-await, 객체와 배열(주요 메서드만)
기본 문법만 후다닥 보고 리액트 강의를 들을 것이다!라고 답변할 것 같다.

 


맞다. 이렇게 공부하면 깊이 있는 코딩을 하기 힘들 것이다. 실행 순서나 논리를 모르기 때문에 많은 문제를 직면하기도 할 것이다.

하지만 그럼에도 이렇게 공부했던 이유는
 

 
 

나는 지금 연구원처럼 이 언어를 연구하고 파헤치는 사람이 아니기 때문에,
마치 어린이가 말을 배우듯 빠른 인풋 아웃풋을 통해서 기초적인 코드를 보는 눈과 사고력을 키우는 것이 1차적 목표였기 때문이다.

 
 
아마 개발을 처음 하는 모든 사람이 한 번쯤 생각하는 것이 
 
 

문법을 배우긴 했는데 어떻게 사용할지 모르겠어. 

 
일 것이다.
 
나 또한 저런 생각을 갖고 공부하면서 수많은 벽에 부딪혔기 때문에 여러 공부 방법을 시도해 본 결과
나한테 가장 잘 맞았던 방법은 빠르고 가볍게 문법을 훑고 만들면서 이해하는 방법을 통해 사용법을 익히는 것이었다.

(취업 후에는 Deep Dive 책으로 기본기 다지고 있습니다 ~_~ㅎ)

 



그래서 자바스크립트는 제이쿼리를 제외한 vanilla javascript 영역만 빠르고 깊지 않게 공부했다.

그 이후 마찬가지로 리액트도 Portal / Context / Redux / Memo / Reducer 등 최적화나 상태관리 영역처럼 조금 어려운 부분도 아주 가볍게 공부한 뒤에 강의에서 배운 내용을 토대로 토이프로젝트를 들어갔고 프로젝트를 통해서 문법을 눈에 익히고 이해되지 않던 개념을 실제로 적용해 보면서 원리를 깨달을 수 있었다.
 
 


어떤 공부를 하던지 자신에게 가장 잘 맞는 공부법을 찾는 게 가장 중요하듯 나에게 맞았던 공부 방법을 좀 더 설명하자면
 
1. 초보자 수준의 기초 강의를 통해 문법을 빠르게 가볍게 훑는다.

• 스트레스 X
• 공부는 즐겁게
• 대신 중요한 개념은 주의 깊게 볼 것
• 모두 외울 필요 X
• 이런 게 있구나 정도로 공부

 
 
 
2. 간단한 실습을 할 수 있는 강의를 통해 배운 문법의 활용도를 익힌다.

• 이때 깊게 이해하란 뜻 X
• 이렇게 사용하는 거구나~ 하고 이해하고 넘어가기
• 간단한 실습 강의를 따라 치는 과정을 통해 코드를 보는 눈을 키우기 위함이며
• '어떻게 만드는지 몰라'의 단계를 조금이나마 벗어나기 위한 단계임

 
 
 
3. 2번 과정을 통해 익힌 문법의 활용도를 '토대로' 나만의 토이프로젝트 진행

• 절대 클론 X
• 똑같이 만들면 이해할 수 없음 > 그건 그냥 타자연습임.
• 내가 얼마나 이해하고 활용할 수 있는지는 토이프로젝트를 통해 알기 위한 단계임(중요!)
• 하지만 아직은 스스로 기능을 구현할 능력이 부족하기 때문에 반드시 강의에서 실습한 내용을 '토대로' 조금 활용/확장하여 프로젝트 진행할 것
• 예시) input onChange 이벤트로 e.target.value를 얻어오는 방법을 배우거나 실습했다면, 해당 방법을 통해 value값을 받아와서 화면에 뿌려주는 끝말잇기 게임을 만든다던지
• 아주 작고 작은 수준의 토이프로젝트로 해볼 것. 

 
 
4. 토이프로젝트를 진행 한 뒤 어려웠던 개념 / 깨달은 것들을 정리할 것 (문법도 마찬가지)

• 사람은 망각의 동물! 잠깐 이해했다고 그냥 지나치면 나중에 기억나지 않음
• 내가 10년 뒤에 다시 봐도 이해할 수 있도록 '내 눈높이'에 맞는 수준으로 쉽고 간결하게 정리
• 모든 것을 남에게 보여주려고 강박처럼 정리할 필요 X 반드시 내게 꼭 필요한 것들을 정리하자.
• 개인적으로 노션으로 정리하는 것이 좀 더 효율이 좋았다.

 
 

티스토리 블로그에 정리한 문법 개념들

 
 
 

요즘에는 노션에 정리 중입니다.

 

 

 
 
 

 

---

 

 

 

 

 
3. 포트폴리오 준비 
 

위처럼 공부했으니 포트폴리오는 어떻게 준비해야 할까?
아는 부분 내에서, 경험한 것 내에서 최대한 활용하여 확장시키며 포폴을 준비하는 것이 중요하다.
원대하고 완벽한 포트폴리오를 만들기 위해서 많은 래퍼런스를 찾다 보면 어느새 절망감에 휩싸였다. 실력 좋은 아는 것이 많은 개발자가 하늘의 별처럼 많아 보였기 때문이다.

그들의 오랫동안 쌓아온 능력과 경험의 깊이를 속성으로 공부한 내가 당장 따라갈 수 있을 리 만무했다.
어떻게 구현하는지도 몰랐기 때문에
최대한 내가 경험해 본 문법 내에서, 구현해 본 기능 내에서 포트폴리오를 구상하면서 조금씩 살을 붙였다.

그리고 다양한 기능을 구현하는 것도 중요하지만!
결국 프론트엔드 개발자는 사용자가 보는 화면을 짜는 사람이기 때문에

• 작은 단위의 컴포넌트를 만들어 재사용성을 신경 쓰고
• 요소를 하드코딩보단 반복되는 것들은 반복문으로 생성
• 깔끔한 디자인
• 알맞은 컬러 배치
• 4배수 혹은 8배수 디자인시스템
• 깨지지 않는 반응형 대응

 

위와 같이 프론트의 ‘기본기’에 신경 쓰면서 포트폴리오를 구상했다.
 
예비 프론트엔드 개발자인데 반응형 대응이 시원찮고 디자인이 엉망이라면 아무리 좋은 기술을 썼다한들 내가 어떤 기술을 사용해서 만들었는지 인사담당자가 확인하기도 전에 내 능력에 대해서 이미 신뢰도를 잃을 것이라 판단했기 때문이다.
 
나는 내 실력이 내카라쿠배당토를 갈 정도로 뛰어나다거나, 많은 프로젝트 경험이 있지 않다는 것을 잘 알고 있었기에
그렇기 때문에 내가 보여줄 수 있는 최대한을 부풀리지 않고 솔직하게 내 능력선에서 보여주려고 노력했던 것 같다.
(이것은 취준생 개개인의 생각 / 인사담당자마다 다를 수 있으니 참고하세요.)
 
 
만약 로컬스토리지를 사용하는 법을 배우고, e.target.value, onChange 이벤트를 다루는 방법을 배웠다면
해당 기술들을 활용한 노트앱 래퍼런스를 서칭 한 다음에 혼자서 구현해 보려 노력했고
 
 
axios를 사용하는 법을 배웠다면 목데이터를 깃허브에 올린 뒤 포트폴리오에 받아온 뒤 Fetching 하여 동적으로 컴포넌트를 생성하는 방법 등을 고민하였다.
 
 
그리고 반드시 프로젝트를 진행하면서 어려웠던 점은 따로 메모해 뒀고 그걸 어떻게 해결했는지도 별도로 체크해 두었다가
프로젝트 제작 의도와 사용기술, 발생한 문제, 해결방법, 깨달은 것들 등을 프로젝트 회고록으로 무조건 작성하였다.
이렇게 하면 추후에 면접 보러 갈 때에도 정말 큰 도움이 되었었다.
 
 
 
 
 
❤️ 노트앱 프로젝트 회고록 링크
https://heeeming.tistory.com/entry/React-Toy-Project-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%86%A0%EC%9D%B4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%85%B8%ED%8A%B8%EC%95%B1Note-App-%EB%A7%8C%EB%93%A4%EA%B8%B0
 
 
 

[React Toy Project] 리액트 토이프로젝트 노트앱(Note App) 만들기

 
 
 
❤️ 포트폴리오 회고록 링크
https://heeeming.tistory.com/entry/Portfolio-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94%EC%9D%98-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-VScode-Style
 

[Portfolio] 웹퍼블리셔의 리액트(React.js) 기반 포트폴리오 (VScode Style) 만들기

 
 
 
❤️ 저의 포트폴리오 사이트는 요기 😎
https://heeaepark.github.io/

Hee-ae Park | VScode style portfolio

 
 
 
 
 

---

 
 
 
 
 

 
4. 이력서 / 경력기술서 준비
 

이력서/경력 기술서/프로젝트 기술서는 각종 구인구직 플랫폼에서 제공하는 이력서 폼을 토대로 작성했고
그 외 인사담당자들이 좀 더 깔끔하게 볼 수 있도록 노션에도 추가적으로 작업했다.
 
사실 이력서/경력 기술서/프로젝트 기술서는 기준이 개개인마다 다르고, 인사담당자가 얻고자 하는 정보의 기준도 다 다르기 때문에
정답은 없다.
 
 
나처럼 개인프로젝트만 해본 사람이 아닌 팀프로젝트 경험이 있거나 경력자들이라면 
 
 
어떤 기술을 '경험'해봤는지 장황하게 적는 것보단 어떤 고민을 하며 프로젝트를 진행했고 어떻게 타인과 소통했는지.
그리고 최적화 상태를 고민해 봤는지 등 경험보단 가시화할 수 있는 수치를 직관적으로 나타내 주는 것이 가장 좋다
 
하지만 그 당시에는 나는 그 부분에 대해서 잘 몰랐고 경험도 부족했기에 어떤 기술들을 써봤는지 솔직하게 나열하는 대신 절대 절대 부풀리지 않았다. 
생각보다 인사담당자들이 내 능력을 과하게 부풀리는 것에 대해 매우 부정적이란 것을 알고 있었기 때문이다.
 
예) 내가 입사하고 보니 비전공자 국비지원 출신 6개월 수료 개발자가 풀스택 개발자라고 이력서를 넣는 것에 대해 매우 부정적이었다.
 
 

4-1. 구인구직 플랫폼 이력서 / 경력 기술서 / 프로젝트 기술서

그래서 구인구직 플랫폼에서 경력기술서를 적을 때에는 나의 업무 성과와 프로젝트 경험, 사용기술 등을 간략하게 적었고
프로젝트 기술서에는 기여도 / 사용기술 / 깃허브 링크 / 프로젝트 배포 링크를 기재 한 뒤 구현한 주요 기능과 사용 기술을 좀 더 서술하여 적었다.
 
 

이력서에 기재한 간단한 경력기술서 일부

이력서에 기재한 기업 프로젝트 기술서 일부

 

이력서에 기재한 개인 프로젝트 기술서 일부

 
 
 
 

4-2. 노션에 공개한 이력서 / 경력 기술서 / 기술 및 역량
 
 

1. 이력서
반면에 노션에는 '나'라는 사람 자체를 인사담당자들에게 솔직하게 보여주기 위해 노력했다.
왜냐하면 내가 생각하기에 인사담당자들은
신입의 '능력' 기대치는 높지 않고 이 사람이 우리 회사의 '핏(Fit)'과 일치하는지 매우 궁금하리라 생각했기 때문이다.
 
 
이 사람이 어떤 성향인지, 동료들과 어떻게 협업하는지, 빠르고 쉽게 적응하고 발전 가능성이 있는지 자기소개서나 이력서에서 미처 보여줄 수 없는 '사람' 그 자체를 알고 싶기에 면접을 보는 것이라 여겼기에
 
 
내 노션페이지를 보고 나란 사람을 빠르게 이해하고 서로 이해관계가 맞는 기업에서 컨텍이 오길 바랐기 때문에 '개발자' 그리고 '동료'인 나란 사람을 매우 솔직하게 적었다.
 

노션에 공개한 이력서 페이지

 
 
 
 
2-2. 경력기술서
경력 기술서는 업무 성과/기여도/구현 의도를 적었고 작업한 페이지 이미지만을 일부 공개했다.(코드 공개는 불법이기 때문에 ㅠ)

노션에 공개한 경력기술서

노션에 공개한 기업 경력기술서

 
 

노션에 공개한 프로젝트 데모

 
 
2-3. 기술 및 역량
 
기술 및 역량은 앞서 말한 듯 절대!! 부풀리지 않았다.
나는 '뭐든 잘해요' 보다 내가 이해하고 있는 내용을 솔직하게 기재하고 못하는 것들을 솔직하게 이야기했다.
잘 알고 활용해보고 있는 기술들을 나열했고 잘 알지 못하고 배우고 있는 기술은 하나로 묶어서 간결하게 기재했다.
그리고 내가 얼마나 개발을 지향하고 좋아하는지 그리고 어떤 개발자가 되길 원하는지도 간단하게 설명했다.
 

노션에 정리한 기술 및 역량

기술에 대한 경험을 솔직하게 적고 이해하지 못하는 부분도 정직하게 적었다.

그 외 사용할 수 있는 디자인 툴과 협업 툴 경험도 적었다.

 
 
 
 
 

---

 
 
 
 
 

5. 구직활동 및 면접 그리고 면접 질문들

면접 준비 전 웹퍼블리셔 면접을 볼 때 준비했던 것을 기본적으로 한 번 더 훑었고 리액트 관련 기술에 대해 조금 더 공부했다.
마운트 / 언마운트가 무엇인지SPA이 무엇인지 등을 공부했고 가기 전에는 항상 프로젝트 회고록을 최소 열 번씩은 보고 갔다.
내가 만든 프로젝트를 인사담당자들이 보고서 관련 질문을 할 텐데, 대답할 수 없으면 광탈할 것만 같았기 때문이다.
 
그리고 나는 컴퓨터사이언스(CS) 지식과 코딩테스트 준비는 전혀 하지 못했기 때문에 언감생심 프론트엔드 개발자 포지션에는 지원도 하지 않았다. 🥹
 
 
어떻게 보면 내 한계를 내가 정한 것일 수도 있고 
어떻게 보면 주제 파악이 빨랐던 것일 수도 있다.

 
 
그래서 나는 공고를 찾아볼 때 퍼블리셔 키워드와 React 키워드 두 개를 항상 함께 넣어 검색했다.
내가 원했던 포지션은 개블리셔이자, React 환경에서 일할 수 있는 웹퍼블리셔 포지션이었다.
 
그 당시 내가 스크랩했던 공고들은 모두 웹퍼블리셔 공고이되 React / Vue / Angular 우대사항이 있는 공고였다.
 
 
프론트엔드 개발자로 지원하지 않았던 이유는 아래와 같았다.
 

1. 코테 준비가 되어있지 않았기 때문에
2. 스스로가 아직 많이 부족하다 느꼈기 때문에
3. 일단 React 환경에서 개블리셔로 일해보며 프론트엔드 개발자의 업무 플로우를 경험하고 소스코드 분석을 해보고 싶어서.
4. 개발을 좋아하지만 진짜 개발자가 되는 것의 무게는 달랐기 때문에 개블리셔 포지션으로 간접체험 해보고 싶어서.
5. 국비지원/부트캠프 출신 신입개발자들의 프로젝트에 비해 백엔드와의 협업 프로젝트가 없어서.

 
매분기 매년 각종 국비지원/부트캠프 출신의 능력 짱짱한 신입개발자들이 쏟아져 나오는데 거기에 비빌만한 포폴이 준비되어있지 않아서
많이 의기소침해져 있었기 때문에 개블리셔로 조급하게 생각하지 말고 천천히 업무의 스펙트럼을 넓히자는 생각으로
리액트 퍼블리셔 포지션을 목표로 삼고 구직활동을 했었다.
 
 
내가 기억하는 자주 나왔던 면접 질문의 경우 기술적인 질문은 많지 않았고
 

• 퇴사 사유(면접 본 기업 전부 물어보심)
• 프로젝트 설명
• 포트폴리오를 VSCode 스타일로 기획한 이유
• 개발 공부 혹은 프로젝트를 하면서 힘들었던 점
• 요즘 관심 있는 기술은?
• 취미나 스트레스 해소 방법(인성 체크를 위한 질문)
• 성격의 장단점
• 협업하면서 가장 힘들었던 점 등
• 어떤 기술 등을 활용하여 프로젝트를 해봤는지?

위와 같은 것들을 주로 물어봤다.
아마 리액트 환경 퍼블리셔 포지션(개블리셔)으로 지원했기도 했고 나는 퍼블리셔로서는 3년차여서 그런지 기술적인 질문보다는
인성적인 부분, 프로젝트 경험에 대해서 많이 물어보았고 이직/퇴사 사유에 대해서 가장 궁금해하셨다.
 
아마 신입 프론트엔드 공고 / 코테를 보는 기업의 경우 좀 더 기술적인 질문들이 많으리라 생각한다.
 
 
 
 
 

---

 
 
 
 
 

마지막으로

 
솔직히 나는 공고가 올라온 지 엄청 오래되었거나, 미열람 기업을 제외하면
이력서 열람 기업 중 90% 정도는 면접제의가 왔다...(감삼다!)
 
내 포트폴리오만 보고서 캐나다 본사 외국계 회사에서도 국내 신규 사업 확장으로 면접 제의를 주셨으나 집에서 멀어서 갈 수가 없었고(편도 2시간 이상...) 아기 유니콘 기업에서도 면접 제의가 왔었다.
어떤 두 기업은 내가 거절했음에도 삼고초려까지 해주셨으나 너무나 소기업이라 거절했다. (더 이상 정리해고 당하고 싶지 않았어요 ㅠㅠ..)
그래서 IT기업 채용시장이 빙하기라는 말이 나왔음에도 일주일에 면접을 세네 개씩 혹은 하루에 두 개도 보았고 일부 몇몇 기업은 면접자리에서 바로 채용을 원한다는 말도 해주셨었다.
 
 
 
아마 내 기술이 뛰어났기보다는 프로젝트 회고록을 통해 성장 가능성을 많이 보셨던 것 같았다.
 
많은 인사담당자들이 내 포트폴리오와 프로젝트 회고록을 보고선
 
 
- VSCode를 연줄 알았다. 왜 이렇게 구현했는가?
- 프로젝트 회고록을 보고서 성장가능성을 보았다. 
- 포트폴리오와 회고록을 보고 직원들끼리 포트폴리오의 정석이라 박수를 쳤다.라시며 과한 평을 주셨었다.
 
 
나는 저 위 두 질문을 들을 때마다 포트폴리오와 이력서, 블로그 등에 자신의 색깔을 정확하게 담고 각인시키는 것이 매우 중요하구나
나란 사람을 부풀리지 않고 솔직하게 사전에 드러냄으로써 기업이 나를 보는 벽을 허물었구나라고 느꼈다.
 
그 덕에 많은 기업 인사담당자들을 만날 수 있었고 많은 기회를 얻을 수 있었다.
분명히 내가 거절한 기업들 중에 현재 내가 다니는 기업보다 더욱 성장할 수 있는 가능성을 지닌 기업도 있을 것이지만
나는 현재 너무 좋은 사수님과 동료들을 만나 프론트엔드 개발자로서 '성장'하고 있다는 것을 생생하게 느끼며 일하고 있다.
 
책임감은 무겁지만 출근하는 것이 즐겁고, 이슈와 문제를 해결할 때의 기쁨을 느낄 수 있어서 행복하기도 하고
꿈에 그리던 프론트엔드 개발자의 길을 조금 더 빨리 좋은 동료분들과 함께 걸을 수 있어서 좋다.
 
 
이 글을 쓰게 된 이유도 혹시나 나와 같은 고민을 하는 퍼블리셔 동료분들이 있다면, 혹은 비전공자여서 개발자 준비가 막막하거나 절망적인 분들이 계시다면 비싼 학원을 다니지 않아도, 부트캠프에 다니지 않아도 좋은 기회를 얼마든지 잡을 수 있다는 가능성을 보여드리고 싶어서였다.
 
나는 그 당시에도 지금도 현실적이었기 때문에 네카라쿠배당토 같은 대기업은 바라지도 않았기에 취업문이 좀 더 열려있던 것도 사실이었을 것이고 운이 따라줬을 수도 있다.
 
하지만 기회가 오거나 운이 따라주는 상황에 내가 적절한 상태로 준비되어있지 않다면 그것이 기회인지도, 운인지도 모르고 지나갈 거라고 생각한다. 그래서 내가 그러했듯 지금 당장은 도전하기 어려우신 분들이나, 신입 프론트엔드 개발자를 준비하시는 분들이 지금은 비록 어려운 상황이고 모르는 것이 많아 걱정이 되더라도 당장의 조급함을 버리고 차근히 준비하다 보면 좋은 기회들이 다가올 것이라는 생각이 든다!
아자아자! 파이팅 입니다요!! 😎 
 
질문은 언제나 대환영입니다.❤️