시럽로그

1차 프로젝트를 진행하면서 AWS배포 전까지 수시로 바뀌는 IP주소를 패치 주소가 들어가는 곳마다 변경해야 하는 게 번거로웠는데 이걸 한 번에 관리할 수 있는 방법이 있었다. ㄴㅇㄱ 📍 src/Components/Config/Config.js const BASE_URL = 'http://10.58.0.00:8000'; const API = { signUp: `${BASE_URL}/users/signup`, login: `${BASE_URL}/users/login`, categories: `${BASE_URL}/categories`, products: `${BASE_URL}/products`, cart: `${BASE_URL}/cart`, orders: `${BASE_URL}/orders`, }; expo..

2차 프로젝트에서 내가 맡은 페이지는 메인, 리스트, 예약 목록, 예약 상세 페이지였다. 1차 프로젝트에서 장바구니 페이지 구현에 너무 많은 시간과 공을 쏟았는데, 한 페이지만 구현했다는 게 한이 맺혀서 이번엔 질보단 양으로(?) 욕심을 좀 내보았다. 위앤비 Flow 카카오 로그인 ▶️ 메인 페이지 (카테고리의 탭메뉴화, 카드 컴포넌트에 swiper slider 사용) ▶️ 필터 (가격 그래프를 드래그해서 가격 범위 설정 가능, 옵션 선택에 따라 실시간 숙소 개수 표시) ▶️ 리스트 페이지 (카드 컴포넌트의 재사용, 페이지네이션, Google Map API) ▶️ 상세페이지 (datepicker, 예약 기능, Google Map API) ▶️ 예약 목록 페이지 (token으로 예약정보 받아오기) ▶️ 예..

✅ 시연연상 : https://youtu.be/btDS154C5yg ✅ aws 배포한 사이트 : (배포 예정) 개요 - 에어비앤비 웹사이트를 클론코딩하는 프로젝트 - 프로젝트 기간 : 2022. 08. 01 ~ 2022. 08. 12 (약 2주) - 참여인원 : FE 4명, BE 3명 협업툴 Trello - 2차 프로젝트 역시 트렐로에 정리해서 한눈에 볼 수 있도록 했다. - 매일 아침 회의록에 어제 작업한 내역/오늘 할 일/블로커(막혔던 부분)을 미리 작성하고 10분 내외로 팀원들과 진행상황에 대해 공유했다. Slack - 슬랙은 업그레이드 옵션을 결제하지 않으면 이전 대화내역이 사라지는데, 📌고정글로 해놓으면 무조건 사라지지 않고 남는 줄 알고 저장해야 하는 걸 간과했다. 그런데 이미지 파일은 모두 ..

내가 만들려고 했던 컴포넌트에 슬라이드 기능이 있어 회사에서 일하면서 밥 먹듯 썼던 스와이프 슬라이드를 써보려했다. 그런데 react로 쓰는 건 또 새로워서 기록으로 남겨보고자 한다. 아래는 내가 구현할 슬라이드! 기존에 알고 있던 자바스크립트로 구현하는 스와이프 슬라이드는 이러하다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Slide 1 Slide 2 Slide 3 ... 슬라이드를 감싸주는 wrapper가 필요하고, 페이지네이션이나 네..

이전에 스크롤탑 버튼을 구현하며 유사한 기능을 포스팅했지만 이제 스타일 컴포넌트를 곁들인... 에어비앤비의 경우 스크롤하면 nav 아래 카테고리 바가 border-bottom이 생기며 그림자 지는 것을 확인할 수 있다. import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import variables from '../../styles/variables'; const MainCategory = () => { const [scrollY, setScrollY] = useState(0); const isStyleActive = scrollY > 30; const stickyCate = () => { ..

🗨️ 프로젝트를 진행할 때마다 초기세팅을 진행하는 데도 매번 헷갈려서 이 참에 블로그에 한 번 정리해보기로 한다. 📍CRA 초기 세팅 ✔️ CRA 설치 // 원하는 directory 이동 후 CRA 프로젝트를 설치 해주세요. $ npx create-react-app project ✔️ React Router 설치 $ npm install react-router-dom --save ✔️ Sass 설치 npm install sass --save ✔️ .eslintcache 파일 .gitignore에 추가 // .gitignore .eslintcache ✔️ CRA 폴더 및 파일 구성 ⚠️ 로컬에서 폴더만 생성하고 빈 폴더로 두고 PR을 올릴 경우 폴더가 GitHub에 올라가지 않는다. 반드시 폴더 안에 아무..

오설록 클론코딩 프로젝트에서 내가 맡은 페이지는 [장바구니]였다. 커머스 사이트에서 제일 어렵다는 장바구니 페이지인데, 현업에서 근무하면서 메인, 상품목록, 상품상세 페이지를 만질 일이 많았기에 안해본 걸 하면 좋지 않을까? 하고 선택한 것이었다. 리액트로 내가 퍼블리싱만 했던 페이지를 구현하는 건 또 다른 일이란 걸 나중이 되어서야 깨달았다. 어떻게 구현했는지는 이전 포스팅에 썼기 때문에 프로젝트를 진행하며 느꼈던 부분에 대해 회고하고자 한다. 우선 이전에 잘 와닿지 않았던 리액트를 조금은 알 것 같았다. 이전에 현업에서 근무하면서 제이쿼리를 많이 썼는데, 리액트에선 DOM에 직접적으로 접근해서 사용하지 않는다는 부분이 어렵게 느껴졌다. 좋았던 점 - 팀 분위기 우선... 너무 좋은 사람들만 모여있었고..

✅ 시연연상 : https://youtu.be/grWXHlKwkyY ✅ aws 배포한 사이트 : http://1st-loctea.s3-website.ap-northeast-2.amazonaws.com/ 개요 - 오설록 커머스 웹사이트를 클론코딩하는 프로젝트 - 프로젝트 기간 : 2022. 07. 18 ~ 2022. 07. 29 (약 2주) - 참여인원 : FE 4명, BE 3명 협업툴 Trello - 중간발표를 보았을 때 Notion을 활용해서 진행과정, 회의록 등을 정리하는 팀들이 많은 걸 보았는데 우리는 Notion에 익숙한 팀원이 없어 잘 다루지 못하는 툴을 사용하느니 한눈에 볼 수 있도록 트렐로에 정리해놓기로 했다. - 매일 아침 회의록에 어제 작업한 내역/오늘 할 일/블로커(막혔던 부분)을 미리..

장바구니 페이지를 구현하며 가장 어려웠던 부분이다. 체크한 상품을 인식해야 가격을 측정하고 합산하고, 삭제를 하는 등의 뒷 작업을 진행할 수 있어서 '이 상품을 선택했다고 컴퓨터한테 어떻게 인식시키지?'가 관건이었다. 처음엔 백엔드분들께 isChecked라는 키를 boolean 값으로 전달해달라고 요청드렸다. 그런데 백엔드 멘토님이 상품을 선택할 때마다 서버와 통신하는 건 비효율적이라며 받아들여지지 않았고...(너무 맞는 말) 프론트단에서 isChecked라는 키를 넣을 수 있도록 state를 추가하는 방법도 있지만, 선택한 상품 리스트 자체를 state로 관리하는 로직을 짜게 되었다. const [selectedList, setSelectedList] = useState([]); //선택한 상품아이디를..

이전에 포스팅에서 아래와 같은 코드를 작성했었는데 // 부드러운 스크롤 const goTop = () => { window.scrollTo({ top: 0, left: 0, behavior: 'smooth', }); }; // 스크롤 시 나타나는 버튼 const fadeBtn = () => { if ( document.body.scrollTop > 200 || document.documentElement.scrollTop > 200 ) { document.getElementsByClassName('btnForUp')[0].style.right = '0'; } else { document.getElementsByClassName('btnForUp')[0].style.right = '-50px'; } }; ..