Betsy
192
2019-08-17 22:28:01 작성 2019-08-18 12:36:39 수정됨
15
3551

신입인데 이정도 프로젝트면 매력적으로보일까요...?


안녕하세요. 취직으로 고민이 많은 신입 취준생인데, 그동안 진행했던 솔로 프로젝트가 적당히 완성 윤곽이 보여서 이에 대해 피드백을 받아보고싶어 글을 써봅니다!


작성 글 목록을 보시면 알겠지만, 올해들어서면서 프론트엔드 웹개발로 진로를 정하고 차근차근 배워서 

최근에 리액트를 사용하여 약 2달간 솔로 프로젝트를 진행했습니다. (14년전 쯔음에 나모 웹에디터로 html 끄적인 경험은 있습니다.)


초기 목표는 서비스가 가능한 웹사이트 수준까지였지만, 플젝을 진행하면서 '서비스가 가능한 웹사이트 레벨' 수준이 얼마나 까마득히 높은지, 신입이 그런 레벨을 흉내내기위해서는 얼마나 많은 노력이 필요한지 알게 되었습니다.


프로젝트 주소는 https://memoiz.net 입니다.

들어가셔서 Let's study 탭은 꼭 문장 담아서 체험해보세요!!

* Fullscreen 웹브라우저 또는 모바일 환경을 권장합니다.



ㅇ 기획 의도는 영어 스피킹/악센트를 중점으로 연습할 수 있는 플랫폼(또는 저만의 사이트)을 만들고 싶었고


ㅇ 아키텍쳐 구성은 다음과 같습니다.


 * React(Hooks) + ContextAPI + HOC

 * Amazon S3 + CloudFront + Route53

 * Amazon EC2 + Nginx(HTTPS 적용) + Node.js(Express.js)

 * Amazon RDS(MySQL)


ㅇ 각 분야별로 어필하고 싶은 부분 혹은 공부/경험하였던 부분은 다음과 같습니다.


1. 디자인

 - 심플함, 모던함을 최우선으로 디자인, 메인 컬러는 Deepskyblue, Aliceblue

 - 재생목록 & 좋아요 기능이나 학습 시 유튜브를 사용하는 듯한 느낌이 들게끔 노력


2. 프론트엔드

 - 리액트를 활용한 SPA 구현

 - Hooks 만을 사용하여 모든 컴포넌트가 this를 사용하지않는 함수로 구성

 - 모바일 뷰를 고려한 페이지 구성

 - 인피니트 스크롤 구현 및 레이지로딩과 스켈레톤 적용

 - 구글과 애플의 autoplay 정책에 대해서 공부

 - js의 객체와 배열등의 Prototype과 관련된 심화 부분 공부

 - 쿠키를 이용한 데이터 관리

 - Polyfill 을 이용한 브라우저 호환성에 대해서 공부

 - 위지윅 에디터 사용 및 적용


3. 백엔드

 - jwt 토큰 인증 구현, SPA에서 새로고침 시 토큰을 이용한 로그인 유지, 로그인이 필요한 페이지 인터셉터

 - (당연한) 비밀번호 SHA 암호화

 - Google oAuth 적용

 - S3 서버에 프로필 사진 혹은 게시판 이용 시 이미지 업로드 및 불러오기

 - 정규표현식 활용

 - 최대한 Restful API 구현

 - SSL이 적용된 HTTPS 구현

 - Nginx 웹서버 구성 및 Express.js로의 리버스 프록시


4. 아키텍쳐

 - S3 정적 웹사이트 호스팅 및 파일 업로드 관리 등의 이용

 - CloudFront 의 CDN 개념

 - Route 53 을 이용한 도메인 개념, 서브 도메인 활용

 - EC2 인스턴스 생성 및 SSH 활용


5. DB

 - Cascading 을 고려한 테이블간의 외래키 설정

 - 다중(최대 4중) 서브쿼리를 이용한 복잡한 쿼리 작성

 - 학습한 점수에 따른 랭킹 쿼리, 재생목록에 담긴 컨텐츠 순서 편집 등을 위한 장문의 쿼리 구성


ㅇ 기타

 - 어려웠던 점으로써는 리액트 위지윅에디터 관련해서 이것저것 써보면서 고생하다가 Quill 에디터가 그나마 마음에 들어 적용하였고 유튜브처럼 재생목록이 있을때 재생목록 안에있는 콘텐츠들의 순서를 저장하고 재생하는 유저 커스터마이징 순서 기능 구현에 상당한 시간이 소요되었습니다.

 - 코딩 경험이 잘 없다보니 변수형 타입을 지정해주는게 왜 중요한지 몰랐습니다만 '123'이 int 인지 string 인지 구분못하는 자바스크립트 에러에 한번 데이고 나서 강타입 언어가 왜 각광받는지 알게되었습니다.

 - 차후 이메일 서버를 활용한 회원가입 이메일 검증 및 비밀번호 초기화기능, 다중언어 페이지도 추가할 예정입니다.



실제론 코드도 엉망이고 오류도 많고 아직 디자인 완성 안된 페이지들도 있습니다만 최대한 어필하고자 있어보이게 썼습니다.


okky를 포함해서 신입인데도 불구하고 수많은 고수님들 보면서 자극도 많이 받았고 그분들께 비하면 아직 많이 부족하지만 저도 그런 레벨이 될 수 있게끔 더욱 노력할 계획입니다. 감사합니다.


10
8
  • 댓글 15

  • 베어민
    188
    2019-08-17 22:34:46
    신경많이쓰신거같네요 혹시 깃허브에서 소드도 볼수있나요?ㅎㅎ
    0
  • 답정너심판자
    993
    2019-08-17 23:01:54

    좋습니다.

    잘하셨어용!!

    0
  • 김성민
    430
    2019-08-17 23:12:33 작성 2019-08-17 23:12:53 수정됨

    소스코드 분석 해보고 싶어요


    github 에서 소스 볼 수 있나요?

    0
  • baltasar
    6k
    2019-08-18 00:33:29 작성 2019-08-18 00:33:49 수정됨

    프로젝트 상세내역이 뭔지는 별로 궁금하지 않고,

    초급이 기본적인 페이지 만들 정도면 월급 180에 초급으로 고용해서 월320~380에 대기업으로 팔아먹을 수 있으니 회사 입장에서는 매력적이겠네요.

    0
  • Betsy
    192
    2019-08-18 01:21:58

    베어민, 김성민 // 아직 완전히 정리해서 완성한버전이 아니라 아직 컴포넌트 분리가 덜 되있고 css도 막 엉망으로 섞여있어서 깃헙에 올려서 다른사람들에게 보여줄 정도는 아닌것 같습니다 ㅠㅠ 

    답정너심판자, baltasa // 감사합니다 ㅋㅋ

    0
  • pooq
    3k
    2019-08-18 01:30:31

    2년차라고해도 믿을만큼 실력이 뛰어나시네요.

    0
  • 1q2w3e4r5t6y7u
    2
    2019-08-18 08:23:08 작성 2019-08-18 08:36:18 수정됨

    https://open.kakao.com/o/saqYFUAb


    혹시 지원해보실 생각 있으신지 여쭤보고 싶습니다

    React 프론트 엔드 개발자를 찾고 있습니다 신입 3500+


    0
  • Betsy
    192
    2019-08-18 13:02:36

    pooq // 와우 최고의 칭찬 감사합니다!! 

    1q2w3e4r5t6y7u // 음...연락드려보겠습니다!


    ps. 왜 아무도 회원가입해서 유저 기능들은 테스트 해보지않는거지... 하면서 로그를 살펴보다가 회원가입 프로세스에서 에러가 있던걸 확인했습니다. ㅠ 현재 수정된 상태입니다. 죄송합니다 ㅠㅠ!


    0
  • rama
    142
    2019-08-18 13:42:54

    일단 신입으로써는 굉장하다는 말씀을 드립니다.

    어 음.. 근데 경험상 신입의 포폴은 제대로 살펴보지 않더라고요 ㅠ 사이트 들어가서 겉모양만 보는 정도고, 클릭도 많아야 한 두번.. ㅎㅎ

    그래서 포폴을 작성하실 때 면접관이 되도록 한 눈에 파악이 가능하도록, 그리고 눈길을 확 끌도록 작성하시면 좋습니다. 이미지든, 이벤트든, 짧은 문장이든.

    이미지나 다이어그램 + 짧은 문장으로 프로젝트 개요와 스펙을 일목요연하게 보여주는게 가장 좋은듯 해요.

    적으신 기술셋을 보면, 리액트, oAuth, jwt, restful, aws s3 ec2 등등 상당히 세심히 공부하셨단 인상이 들어서 좋은것 같아요. 다만 한국시장은 전자정부 및 스프링이 많아서 nodejs 로는 취업의 풀이 상대적으로 적을 수 있겠고요.

    모두 감안하시고 공부하셨을 테니, 자신을 잘 어필해서 최소 연봉 3천 이상 좋은 직장에 첫 취업 하시길 바랍니다.

    0
  • pandoraOpen
    12
    2019-08-18 17:23:33

    와~ 저도 아직 초보 단계의 개발자로서 보기에도 엄청 깊게 많은 부분을 공부하신 것 같습니다. 시간이 얼마나 들었나요? 

    0
  • meaway
    180
    2019-08-19 17:28:08
    독학으로 만드신건가요? 혹시 제작기간 이외에 공부기간은 어느정도 걸리셨어요?
    0
  • 메시리
    519
    2019-08-23 09:08:00

    개인적인 질문이지만 ec2 배포에 대해서 질문 가능할까요??


    0
  • TPA누누
    81
    2019-08-23 20:43:08

    안녕하세요. 프로젝트 잘봤습니다. 굉장히 깔끔한 UI가 인상적이네요.

    저도 취업 준비중인 개발자로서 몇가지 여쭙고 싶습니다.


    실제로 서비스를 배포할때 aws, ms, gcp 등의 free tier로 배포하신건지요? 아니면 유료 서비스를 결제하신건지 궁금합니다.


    + 도메인 살때 싸게 살 수 있는 팁 좀 알려주시면 감사하겠습니다.

    0
  • Betsy
    192
    2019-08-23 21:38:14

    rama // 상세한 피드백과 조언 정말 감사드립니다!!!

    pandoraOpen , meaway // 네 모든 과정 독학이며 웹개발 진로 잡은 뒤로 약 7~8개월이 지난 것 같아요.

    메시리 // 어떤 질문일까요..??

    TPA누누 // 네 aws free tier 사용 중 입니다! 도메인은 Amazon route53에서 구입하였습니다. cloudfront와도 연동이 잘 되어있어 AWS 쓸거면 Route53에서 구입하는게 맞는 것 같아요

    0
  • 메시리
    519
    2019-08-24 12:29:13

    혹시 배포하실 때 직접 폴더를 리눅스 상에서 만들고  jsp만들어서 돌리면 jsp가 열리는데

    War파일을 올리먄 war 폴더에 접근을 멋해서 404가 뜨는데 경험하신 적 있으세요??

    War파일 생성 시 context root는 /로 했듀요

    리눅스 텀캣 server.xml에 contextpath도 추가를 했더든요


    또한 url이 어떻게 들어왔늠지 로그를 확인해서 해결하먄 될 것 같은데 어디서 보시는지 아시나요??

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.