제이의 콘솔로그

프로젝트를 진행하면서 꽤 긴 시간을 사용했던 드래그 슬라이드에 대해서 정리해보고자 한다. 배워가는 단계에서 작성한 코드이기 때문에 구현에 초점을 맞췄다는 점을 짚고 넘어갔으면 한다. 드래그 슬라이드 위의 모습처럼 마우스를 통해 드래그를 했을 때 좌우로 움직이는 슬라이드이다. 단순히 onDrag 이벤트를 사용하면 되는 것이 아닌가 싶을 수 있지만 drag 이벤트를 사용하는 경우에 잔상이 생겨서 원하는 결과물과는 달랐다. onDrag 이벤트를 사용하면서 잔상을 없애는 방법을 여러가지 찾아봤지만 드래그를 제한하는 방법들이 대부분이었다. 그래서 아예 방향을 틀어서 mouse 관련 이벤트를 통해서 이를 구현했다. 1. 마우스 클릭 관련 이벤트 const handleScroll = (e, scroll) => { s..

1. 객체로 컴포넌트 활용하기 React를 사용하여 프로젝트를 진행하면서 많은 고민이 되는 부분 중에 하나는 바로 어떤 값을 state 로 설정하여야 하는지에 대한 고민일 것이다. 만약 한 페이지 내에서 사용하는 모달창이 5개가 있고 이를 boolean 값을 통해 관리한다면 5개의 비슷한 state 가지고 있어야한다. 이는 매우 낭비라는 생각이 들었기 때문에 이를 개선해보고 싶었다. 어떤 방법이 좋을까? 먼저, 어떤 값을 이용하면 5개의 상태값을 하나로 줄일 수 있을 지 고민했다. 이는 간단했는데, 바로 boolean 값이 아닌 설명하는 내용을 통해서 관리하면 되는 문제였다. 예를 들어 삭제 관련된 Modal 의 경우에는 delete 등의 이름을 부여했다. 그렇다면 이제 삼항연산자 등을 이용해서 이름에 ..

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

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

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

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

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

🗒 위코드에서의 한 달 📲 첫 백엔드와의 통신!! 4주차가 되면서 처음으로 백엔드와 통신을 해볼 수 있는 기회가 생겼다. 바로 회원가입 - 로그인 실습이었다. 그 동안 프론트는 화면을 그리고 Mock data 를 이용한 실습정도만 진행을 해봤고 백엔드는 API를 만들기는 했지만 화면으로 볼 기회는 없었는데 드디어 해 볼 수 있었다. 이 과정에서 얻은 깨달음도 있었는데, 그건 key 값의 경우에 많은 소통이 필요하다는 점이었다. 만약, 프론트엔드와 백엔드가 key에 대해 소통이 없다면 무수한 400 에러 를 만나게 될 것이다. 그 다음에 땀을 흘리며 잠시만요!? 를 외치겠지... 👊 리액트 개발자가 되기를 마음 먹으면서, 특히 프론트엔드 개발자가 되기로 결심하면서 자주 들었던 라이브러리가 리액트 였다. 위..

🐣 새로운 시작 위코드 3주차가 시작되면 프론트엔드의 경우에는 리액트라는 라이브러리를 접하게 된다. 결국에는 JavaScript 라고는 하지만 UI를 위해 만들어진 리액트는 기존의 방식과 매우 달랐고 새로운 시작을 하는 것 같은 기분이 들었다. 게다가 node- Sass 를 배우기도 하고 기존에 바닐라 자바스크립트를 통해서 만들었던 위스타그램 을 리액트로 변환하면서 미션을 수행하다 보니 많은 인풋에 정신 없이 흘러간 것 같다. ⛈ 시작부터 어두운 기운이... 리액트 기초 세션을 듣고 기존에 제작했던 위스타그램 을 2개의 큰 컴포넌트로 나눠 리액트에서 실행해보라는 미션이 주어졌다. 단순히 기존의 로그인 페이지와 메인 페이지의 html와 css 코드를 가져와서 실행하면 되는 것이었다. 쉬운 미션이구나 생각했..