PROJECT 6

React | 당신의 내일의 책을 소개합니다, 내일배움공책 프로젝트 ✨

📋 Project Overview TomorrowsNotebook - Frontend Github TomorrowsNotebook - Backend Github 시연 영상 - 유튜브 프로젝트 소개 '밀리의 서재' 어플리케이션을 벤치마킹하여 전자책 구독 플랫폼 서비스를 구축했습니다. 애자일 방법론을 채택하여 연휴를 제외하고 총 2주 간 스프린트 방식으로 프로젝트를 진행했습니다. 사용자에게 편리하고 유용한 서비스를 제공할 수 있는 방법을 고민하고 실행에 옮기는 것을 기초 목적으로 삼았으며, 효율적인 아키텍처 구축을 위해 노력했습니다. 백엔드팀에서는 사용자 중심의 다양한 서비스를 제공하기 위해 효율적인 데이터 모델링 방안을 고민했습니다. 최적화된 데이터베이스 사용을 목적으로 장고 ORM을 사용하였고, AWS의..

PROJECT 2021.11.10

React | 혼자 놀기 좋아하는 이들을 위한 Dot Friends 프로젝트✨

📋 Project Overview Dot Friends - Frontend Github Dot Frineds - Backend Github 시연 영상 - 유튜브 프로젝트 소개 우리는 유명한 커머스 사이트 중에 하나인 라인프렌즈 샵의 클론 코딩을 하게 됐다. 라인프렌즈 샵은 2011년, 모바일 메신저 '라인' 의 스티커 캐릭터로 탄생한 라인프렌즈는 다양한 캐릭터와 아티스트와의 콜라보를 활발히 이어가고 있는 기업으로서 커머스 사이트의 구성과 기본 기능에 대해서 익히기에 적합하다는 생각이 들었다. 제작 기간 21.08.30 (월) ~ 21.09.10 (금) 기술 스택 ✨ 프론트엔드(3명) : 금보배, 박은정, 주철진 HTML/CSS JavaScript(ES6+) React SASS 🔥 백엔드(3명) : 서동규..

PROJECT 2021.11.10

React | [westagram] 인스타그램 클론 프로젝트 후기

📋 Project Overview 첫 React 프로젝트 JavaScript 를 통해서 구현했던 인스타그램을 다시 React 를 통해서 구현하는 프로젝트를 하게 됐다. 기존에 DOM 을 조작해서 넣었던 기능들을 state 와 props 를 이용해서 구현하려다 보니 어려운 점도 많았는데, 돌이켜보면 어째서 React 를 써야하는지 느끼게 된 프로젝트이기도 했다. 초면이었던 React 와 조금은 친해지게 된 위스타그램 에 대해 정리해본다. 제작 기간 2021.08.23 ~ 2021.08.26 사용 기술 - HTML / SASS - JavaScript(ES6 + ) - React 구현 사항 *Login : 아이디, 패스워드 유효성 검사 로직 * *Login : 백엔드 API를 통한 회원가입 & 로그인 구현 *..

PROJECT 2021.11.10

[Westagram] 인스타그램 클론 프로젝트

📋 프로젝트 소개 제작 기간 2021.08.09 ~ 2021.08.13 사용 기술 - HTML / CSS - JavaScript(ES6 + ) 구현 사항 *로그인 페이지 레이아웃 * 아이디, 패스워드 유효성 검사 로직 메인 페이지 레이아웃 피드 댓글 추가, 삭제 기능( + 좋아요 기능) 아이디 검색 자동완성 기능(with 영현님, 현재님) 프로필 메뉴 토글 기능 아이디 추천 부분 반응형 구현 구현 화면 로그인 페이지 댓글 좋아요, 삭제 기능 검색어 자동완성 기능 프로필 메뉴 토글 기능 👀 프로젝트 리뷰 칭찬해주고 싶은 점 멈추지 않고 끝까지 한 것! 이번 인스타그램 클론 코딩인 westagram 의 경우에 기본 미션 5개에 추가 구현사항 4개까지 총 9개의 미션이 있었다. 로그인 페이지의 경우 레이아웃,..

PROJECT 2021.11.10

간단한 자기소개 페이지 만들기(2) 리뷰

HTML과 CSS를 학습한 후에 진행했던 자기소개 페이지에 JavaScript를 사용해서 동적인 효과들을 추가해보기로 했다. 또, 아쉬움을 남겼던 반응형도 구현해 보자는 생각이 들었다. 그 결과는...?🤭 리팩토링 GO!! 님아 그 강을 건너지 마오... 호기롭게 자기소개 페이지에 동적인 효과를 넣겠다고 생각하던 한 편, 사전 스터디를 진행하는 분들도 함께 리팩토링을 진행하자는 이야기가 나왔다. 사실, 하나의 페이지로 제작했었기 때문에 크게 어렵지 않을 것 같아서 걱정도 하지 않았었다. 하지만......🤣 모바일 퍼스트 모바일 퍼스트 라는 말이 있다. 처음 웹을 구성하는 단계부터 모바일을 중심으로 구축하는 것을 말한다. 전부터 들었던 말이었지만 어째서 모바일 퍼스트를 강조하는지는 제대로 느끼지 못했다. ..

PROJECT 2021.11.09

간단한 자기소개 페이지 제작 리뷰

드디어 wecode의 사전스터디가 시작됐다. 첫 주차는 html과 css를 공부하도록 커리큘럼이 제공되고 있었다. 이전부터 공부를 해오기는 했지만 1주차 과제인 '자기소개 페이지'를 만들려고 하니까 머리가 아팠다. 역시, 눈으로 보고 배우는 것과 직접 A부터 Z까지 기획하고 만드는 것에는 차이가 컸다. 나름? 즐거웠던 자기소개페이지 만드는 과정을 리뷰해보려고 한다. "자기소개페이지" < - 제가 궁금하면 눌러보세요! 1. 기본적인 레이아웃 레이아웃을 고민하는게 정말 어려웠다. 특히 같은 사전 스터디 팀분들이나 타 기수분들의 페이지들을 보고 있자니 정말 꼼꼼하게 잘 만드셨다는게 느껴졌다. 여러 디자인을 제공하는 곳들도 봤지만 마음에 드는게 잘 보이지도 않았다. (인스타그램을 검색하니 제일 먼저 뜨는 아이유..

PROJECT 2021.11.09