클론 인스타그램 ( 진행중 )

저장소 - https://github.com/Imdonguk/clone-instagram

프로젝트 설명

     유명 SNS 인스타그램을 직접 구현한 웹페이지

프로젝트 특징

Frontend

• React를 이용한 SPA(Single Page Application) 구현
• 상태 관리 라이브러리인 Redux와 Redux-Saga
• SSR (Server Side Rendering)에 대한 이해
• Styled-Components를 사용해서 컴포넌트 스타일 구현
  
• 검색엔진 최적화
• AWS EC2를 통한 Front-end Server 배포

Backend

• 리소스를 제공해주는 API서버
• AWS EC2를 통한 Back-end Server 배포 
• AWS EC2서버에 디비 설치(mysql)
  
• Sequelize라이브러리 사용
• AWS S3에 이미지파일 저장
• Sharp를 사용해서 이미지 리사이징

• 웹서비스의 프로젝트 구조
• 프론트엔드와 백엔드 서비스를 모두 경험
• React, Redux, Redux-Saga, React-Hooks에 대한 이해
  
• React와 함께 쓰는 Next JS에 대한 이해 및 Server Side Rendering에 대한 이해
• 렌더링 최적화
  
• 데이터베이스 모델설계
• 쿠키와 세션을 이용한 로그인 경험

클론 배달의민족반찬

데모 - https://imdonguk.github.io/javascript-food/

저장소 - https://github.com/Imdonguk/javascript-food

프로젝트리뷰링크

코드리뷰링크

프로젝트 설명

     JS , HTML, CSS 만을 사용해서 배민찬사이트 클론하기

     슬라이드 , tabUI, 페이지 상하단 이동버튼, 검색어자동완성, 최근검색어 기능을 가진 웹 UI

프로젝트 특징

• 프레임워크나 라이브러리 없이 vanilla JS만 사용
  
• 클래스단위로 모듈 분리
• 리소스가 다르고 같은 UI 재사용
• ES6문법 적극사용 ( promise, fetch, async & await )
• localstorage를 이용한 캐시기능
• throttling과 debounce 함수를 사용해서 불필요한 동작 줄이기

• 이벤트 핸들링 ( Click, Key, Scroll, bubbling/capturing, delegation 등)
• 비동기 통신 ( ajax, fetch, axios )
• 웹 애니메이션 ( setInterval, setTimeout, requestAnimationFrame, css - transition ) 
• OOP Javascript ( prototype property, private / public pattern )
• Throttling과 Debouncing 함수를 만들어서 Scroll이벤트와 웹 애니메이션 컨트롤

웹자판기

json-parser

저장소 - https://github.com/Imdonguk/javascript-json

프로젝트리뷰

코드리뷰

프로젝트 설명

     프로젝트 설명 JSON형태의 문자열을 분석해서 그 결과를 분석 프로그램

     ex )

     var str = "{ 'codesquad' : 'is GOOD' }"; 

     var result = JSONParser(str);

     console.log(JSON.stringify(result, null, 2));

     {

         type : 'object',

         key : 'codesquad',

         value : 'is GOOD',

         child : []

     }  // 출력

프로젝트 특징

• 문자열을 토큰단위로 분석
• 객체 안에 객체가 있는 것처럼 다중 중첩일 때도 분석