2021.03.15 ~ 2021.04.07

🌱 프로젝트 기획

프론트앤드는 리액트, 백앤드는 루비온레일즈를 사용하여 상품리스트, 상세페이지, 찜리스트, 장바구니가 있는 쇼핑몰 웹앱 구현하기

🌈 Frontend 기술스택

React.js Framework7 Tailwind CSS

🌈 Backend 기술스택

RubyOnRails

📕 Frontend 기억하고 싶은 코드

//itemlist.jsx
 useEffect(() => {
    setCurrentPageNum(1);
    const fetchData = async () => {
      try {
        const res = await getItems({
          q: {
            category_id_eq: categoryID,
            price_lteq: priceMax,
            price_gteq: priceMin,
          },
          page: 1,
        });
        setItemList(res.data);
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, [categoryID, priceMin, priceMax]);

UseEffect는 categoryID가 바뀔때, 최소 가격, 최대 가격이 바뀔때를 계속 바라보고 있다가 만약 바뀔 경우 (사용자가 카테고리나 가격 range를 바꿀경우) page: 1로 백앤드에 요청한다. 만약 page: 1로 요청하지 않고 현재 페이지 상태로 요청을 보낸다면 1페이지에 해당하는 데이터가 오지 않고 다른페이지에 해당하는 데이터가 오게 되어서 에러가 난다.

📗 Backend 기억하고 싶은 코드

👍 모든 orders중에서 해당 유저에 해당하는 order만 찾기

all_orders = Order.where(user_id: user.id)

👍 찾은 orders중에서 status_id가 1인것을 찾기 (하나 밖에 없음)

 current_order = all_orders.find_by(status_id: 1)

👍 상품들중에서 프론트에서 보낸 아이템 ID로 상품 찾기

item = Item.find((line_item_params[:item_id]))

👻 구현한 기능/UI

• 메인페이지
• 상품리스트 - 카테고리/가격 필터링, 무한스크롤
• 상세페이지
• 찜리스트
• 장바구니
• 결제페이지
• 리뷰페이지
• 리뷰리스트

🍎 메인페이지

🍎 Nav Bar

🍎 상품리스트 - 카테고리/가격

🍎 상품리스트 - 무한스크롤

🍎 상품리스트 - 장바구니에 담기, 찜하기

🍎 상품상세페이지

🍎 찜리스트

🍎 장바구니

🍎 결제페이지

🍎 마이페이지

🍎 리뷰 쓰기

🍎 리뷰리스트

❣️ 최종후기

처음에는 백앤드를 하나도 모른채로 시작하게 되어서 부담도 많이 되고 과연 내가 이걸 할수있을까...? 라는 생각이 들었었지만 시간이 지나면 지날수록 백앤드를 이렇게 경험하는게 프론트앤드에게는 굉장히 소중한 경험이라는 것을 깨달았다. 백앤드를 공부하면서 프론트앤드에서 어떻게 데이터를 보내야하는지, 어떻게 받아야하는지, 어떻게 UI와 기능을 짜야 백앤드와 더 원활하게 소통하고 협업할수 있는지 알게되었다. 오히려 백앤드를 배우면서 프론트앤드쪽 지식이 더 느는 느낌 😅 비록 짧은 시간에 후다닥 배운 백앤드(...와 프론트앤드)여서 코드가 깔끔하지 못하고 데이터가 너저분하지만 그래도 어떻게 데이터를 정리해서 프론트에게 뿌려줄수 있다는것에 만족한다. 이번 기업협업을 통해 더 좋은 개발자가 되려면 프론트앤드에만 치우치지 않고 백앤드도 꾸준하게 공부해야 한다는것을 알게된 좋은 시간이였다.

이번 프로젝트를 하면서 웹앱의 특성상 history.push를 하면서 다른 페이지로 안넘어가고 탭을 이용해서 넘어가기 때문에 상품리스트에서 상품을 담고 장바구니 탭으로 넘어가면 바로 업데이트가 안되어있고 새로고침을 해야 장바구니가 업데이트되는 문제를 경험했다. 물론 f7router를 이용하여 강제 새로고침을 할수 있지만, 이런 경우에는 상태관리 라이브러리를 쓰는게 맞다는 조언에 따라 Recoil을 처음 쓰게 되었다.

👻 (아직 공식문서를 더 봐야하지만) 아주 간단하게 Recoil을 쓸수있는 방법! 👻

1. 먼저 src 폴더 밑에 state.js 파일을 만들고 여러 파일에서 상태관리를 해야하는 state를 정해준다. 밑의 경우에는 cartlist의 상태관리가 필요하기때문에 cartlistState를 선언해주었다. default에는 state의 초기값이 들어간다.

// state.js
import { atom } from "recoil";

export const cartlistState = atom({
  key: "cartlistState",
  default: [],
});

2. cartlist에 상태 변화가 일어나는 지점인 itemlist.jsx에서 밑과 같이 import 해준다.

   // itemlist.jsx
   import { useRecoilState } from "recoil";
   import {
   cartlistState,
   } from "../../src/state";

3. useState([])가 아닌 useRecoilState(cartlistState)를 사용한다. cartlistState는 cartlist의 초기값이며 state.js에서 []로 선언해주었었다.

// itemlist.jsx
const itemlist = () => {

  const [cartlist, setCartList] = useRecoilState(cartlistState);

4. 장바구니에 담기 버튼을 누를때마다 백앤드에게 아이템의 ID를 보내주고 새로운 장바구니 리스트를 다시 받을때 setCartList를 통해서 장바구니 리스트를 업데이트 시켜준다.

// itemlist.jsx
  const addToCart = (e) => {
    const data = {
      item_id: e.target.id,
    };
    axios({
      method: "post",
      url: "http://localhost:3000/line_items/newitem",
      headers: { Authorization: localStorage.getItem("practice_token") },
      data: data,
    }).then((res) => {
      setCartList(res.data);
    });
  };

}

5. 이제 실제 장바구니 js파일에서 똑같이 import해주고 useRecoilState로 상태관리를 하게 된다면 itemlist.jsx에서 바뀐 장바구니 리스트가 바로 바로 업데이트 되는것을 확인할수 있다!

// cartlist.jsx
import { useRecoilState } from "recoil";
import { cartlistState } from "../../src/state";

const cart = () => {
  const [cartlist, setCartlist] = useRecoilState(cartlistState);

}

6. 결과물 🌈

2020년에 소개된 Facebook에서 실험용으로 만든 React 상태 관리 라이브러리

만들어지게 된 배경 🎈

Recoil은 state를 업데이트할때 공통 부모로 상태를 계속 끌어올리면서 너무 큰 dom tree가 계속해서 re-render 되고 상태가 만들어지고 리덕스를 사용하는 유저들의 불만이 꾸준히 증가하면서 페이스북이 오직 리액트를 위한 API와 동작을 최대한 React스럽게 유지하고 개선하려고 발표한 라이브러리다.

Recoil을 만든 Dave McCabe가 한 말에 의하면

"Well, I know that on one tool we saw a 20x or so speedup compared to using Redux. This is because Redux is O(n) in that it has to ask each connected component whether it needs to re-render, whereas we can be O(1)." "글쎄요, 한 툴에서 Redux를 사용할 때보다 20배 정도 속도가 빨라진 것으로 알고 있습니다. 이는 Redux는 O(n)이기 때문에 연결된 각 구성 요소에 재렌더가 필요한지 물어봐야 하는 반면 우리는 (Recoil은) O(1)이기 때문이다.

Recoil이 O(1)이라는 말은 데이터가 저장되어 있는 atom을 수정할때 그 atom을 바라보는 컴포넌트들만

Atom이란 🎈

Atom은 어떤 컴포넌트에서도 사용하고 수정할수 있는 상태다. 만약 Atom이 업데이트 된다면 그 Atom을 바라보고 있는 컴포넌트들이 re-render 된다.

// 출처: Recoil 공식문서
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

Atom은 위와 같은 형태로 정의한다. key에는 다른 컴포넌트에서 사용할 state의 이름, default에는 state의 초기값을 설정한다.

UseRecoilState 🎈

이렇게 정의한 atom을 컴포넌트에서 사용할때는 설정해놓은 key값과 useRecoilState를 import 해와서 사용한다.

import { textState } from '/state.js'
import { useRecoilState } from "recoil";

// 출처: Recoil 공식문서
function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

참고: https://recoiljs.org/ https://velog.io/@wooder2050/%EB%A6%AC%EC%BD%94%EC%9D%BCRecoil%EB%8A%94-%EC%99%9C-%EB%A7%8C%EB%93%A0-%EA%B1%B4%EB%8D%B0 https://ui.toast.com/weekly-pick/ko_20200616 https://www.ridicorp.com/story/how-to-use-redux-in-ridi/

• Class는 객체다
• Instance는 객체다
• Class는 자신만의 메소드가 있으며 독립적이다. 인스턴스와 이런것들을 나누지 않는다.
• 함수를 선언할때는 def 함수명으로 선언한다

🍎 Class 메소드란

• 클래스에 정의된 메소드
• class로 시작하여 end로 끝난다
• 앞에 self를 붙여줄수 있다
• @@으로 시작하는 변수
• 인스턴스에 속해있는 기능이 아니라면 클래스를 사용한다

🍎 Instance란

• 특정 메모리에 할당된 객체
• 특정 인스턴스에서만 호출된다
• @으로 시작하는 변수
• @으로 시작하면 인스턴스 안에 있는 모든 함수에서 해당 변수를 호출할수 있다
• 인스턴스를 사용하려면 객체를 만든후 해당 객체에서 함수를 불러야한다
• 특정 인스턴스에 속해있는 기능은 인스턴스 메소드로 사용해야한다

참고 - https://medium.com/@lauren.kroner/ruby-class-vs-instance-methods-a5182ce7de49 https://culttt.com/2015/06/10/understanding-class-methods-verses-instance-methods-in-ruby/

rake db:migrate라는 명령어를 실행하면 schema.rb에 내가 만든 db 테이블들이 다음과 같이 migrate 된다.

create_table "items", force: :cascade do |t|
    t.string "name"
    t.text "description"
    t.string "image_url"
    t.integer "price"
    t.decimal "sale"
    t.integer "stock"
    t.bigint "category_id", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.index ["category_id"], name: "index_items_on_category_id"
  end

schema.rb를 확인해보면 현재 어떤 파일들까지 migrate 되었는지 확인할수 있다.

🍎 seeds.rb

이제 테이블들을 다 schema.rb 파일에 옮겼으니 데이터를 집어넣어야한다. 데이터는 seeds.rb로 집어넣을수도 있고 rails console에서 하나씩 넣을수 있지만 한꺼번에 여러 데이터를 넣을수 있는 seeds.rb로 초기 데이터를 집어 넣었다.

items = Item.create([{name: "Fried Chicken", description: "It is a fried chicken", stock:30, image_url: "https://images.unsplash.com/photo-1604422237312-37a96a84a4c6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80", price:30, sale:0.02, category: category.first} ])

🍎 프론트앤드에게 데이터 뿌리기

먼저 routes.rb에 resources :items를 입력한다.

-출처 https://guides.rubyonrails.org/routing.html

입력한다면 저절로 다음과 같은 path가 생성된다. Path가 생성된후 Items컨트롤러에 모든 아이템을 조건없이 뿌려주는 코드를 다음과 같이 작성한다.

class ItemsController < ApiController
    def index 
        render json: Item.all
    end
end

이제 이 주소를 Postman에 입력한다면

정상적으로 데이터를 보낼수있는게 확인이 되었다. 이제 이 데이터를 프론트에 뿌릴 준비가 다 되었으니 프론트쪽 UI 구현과 기능 구현을 시작한다 ....

이제 3개월차부턴 기업협업이 시작되었다. 나는 인썸니아라는 웹서비스 및 모바일앱 개발을 하는 스타트업 회사로 가게되었다. 인썸니아는 풀스택개발자들을 지향하고 개인프로젝트로 진행되기때문에 여기서 한달만 일해도 정말 많은것을 배울수 있을것 같았다.

🌈 프로젝트

인썸니아에서 우리에게 주어진 프로젝트는 4주동안 웹앱 쇼핑몰을 만드는것이다. 프로젝트는 개인 프로젝트이며 다음 기술스택을 사용하여 기획부터 백앤드, 프론트앤드부분까지 해야한다.

백앤드📕

• Ruby On Rails

프론트앤드📗

• React.js
• Framework 7
• Tailwind CSS

백앤드부분 같은 경우에는 사실 너무나도 생소한 Ruby라는 언어를 쓰는 Rails라는 풀스택 framework를 사용하게 되고, 프론트앤드부분 같은경우에는 이제는 많이 익숙해진 React.js를 사용하지만 Framework7이라는 웹앱을 만들어주는 library를 사용해야하고, 지금까지 SASS, Styled Components를 사용해왔던것과 달리 Tailwind CSS라는 inline styling처럼 생긴 스타일링을 해야해서 같은 React지만 조금 다를것 같았다 ㅋㅋ

또다시 내가 뭘 할수있는지도 모르던 1차 프로젝트 시작전의 마음으로 밤샘 공부를 .. 다짐하며 ... 기업협업 프로젝트를 시작했다.

💔 M1맥북에 Ruby/Rails 설치

우리는 기업협업 첫날전에 Ruby 2.6.5버전과 Rails 6버전을 설치해서 오라는 미션?을 받았는데 ... M1 노트북을 가지고 있는 나한테 새로운 프로그램을 설치하는건 진짜 ..... 하 .... 금요일밤부터 설치를 시도하기 시작해서 일요일 오후 3시쯤에 설치를 했다. 정말 stackoverflow에 올라온 모든 M1 설치 관련 포스트와 유튜브 영상을 다 본것 같다 ... 같은 M1인데 왜 저사람들은 되고 나는 안되는건지도 모르겠고 ... 설치가 되었는데 뭐때메 된건지도 모르겠다 ..... Ruby 2.7.2버전 설치를 성공했는데 또 2.6.5버전은 설치가 안되고 ... 멘붕의 연속 ... 🤯

책상에 굴러다니는 LG Gram에 우분투를 설치해서 Ruby와 Rails를 설치하는법을 검색까지 해봤다 ....

결국 일요일에 Ruby 2.6.5버전과 Rails 6버전 설치를 성공했지만 세상은 아직 M1을 받아드릴 준비가 안된것을 주말에 깨달아버렸,,,

🍎 DB 모델링

많이 허접하지만 .... 모델링부터 시작해보았다. 일단 한 사이클을 돌리는게 중요하다고 생각했기때문에 가장 기본적인 기능들만 구현했다.

** 회원가입/로그인 ▷ 상품리스트 ▷ 찜리스트 ▷ 장바구니 ▷ 결제 **

부수적인 옵션들을 거의 다 제거하고 카테고리와 주문 Status만 더 넣었을뿐인데도 머리가 복잡해졌다 ... 프론트쪽을 구현할때는 다른 요소들이 서로 어떤 연관성이 있는지 생각을 많이 할 필요가 없었는데 백앤드쪽에서는 많은 데이터를 효율적으로 관리를 해야하니 어떤 데이터가 어떤 데이터와 엮여있는지 생각하며 데이터베이스를 짰어야했다.

🎈 여기서 중요한 convention

• 테이블은 복수 (ex. items)
• Controller도 복수형태 (ex. items_controller.rb)
• Model은 단수여야한다. (ex. item.rb)

🍎 Migration

루비온레일즈에서 마이그레이션 파일을 만드는 방법은 다음과 같다. 만약 items 모델을 추가하려면,

rails generate model Item name:string description:text image_rl:string price:integer sale:decimal category:references

이런식으로 커맨드에 입력하고 실행한다. 그러면 app > db > migrate 폴더안에 다음과 같은 마이그레이션 파일과 모델 파일이 생성된다. Category 같은 경우에는 아이템과 1:n 관계기때문에 뒤에 데이터타입 대신 :references라고 지정해준다.

이렇게 모든 테이블들의 마이그레이션 파일과 모델 파일을 생성하고 나면 다음으로 해야할것은 테이블간의 관계들을 define 해주어야한다.

🍎 models

app > models 폴더안에는 rails generate model command를 실행할때 만들어진 모델 파일들이 있다. 만약 :references를 붙였다면 다음과 같이 저절로 belongs_to라는 관계가 정의가 되어 있다.

하지만 반대로 has_many에 대한 관계는 정의 되어있지 않기때문에 하나하나 파일을 수정해줘야한다.

이렇게 model 파일들을 하나하나 다 수정해주면 이제 db:migrate를 하면 된다. 여기서부턴 다음 포스트에 ...

useParams() 와 useLocation() 공식문서

클래스형에서는 match, location, history에 접근하려면 withRouter HOC로 감싸줘야했지만 useParams() hooks를 사용한다면 그럴 필요가 없었다.

마찬가지로 useLocation()이라는 hooks를 사용한다면 쉽게 location.search나, location.pathname에 접근할수 있다.

이번 프로젝트때 buy와 sell의 결제페이지를 컴포넌트 재사용을 활용해서 같은 js file로 만들었기때문에 모든 데이터 fetch와 렌더되는 내용들이 한 파일에서 일어났다. 그러므로 useParams와 useLocation을 이용하여 현재 어떤 페이지가 구현이 되야하는지를 함수들과 자식 컴포넌트들에게 전달했다.

예를들어, localhost:3000/order/sell 이라는 페이지에서 밑의 코드를 찍어본다면

useParam = useParams()
location = useLocation()
console.log(useParam)
console.log(location)

** useParam 🍎**

//Routes.js
  <Route exact path="/order/:id/" component={Payment} />

useParam 같은 경우 Routes에서 미리 지정을 해놓았었던 id가 나오고,

** location 🍎**

이렇게 localhost:3000 뒤에 어떤 pathname을 가지고 있는지가 뜬다.

이렇게 뜨는 정보들을 활용하여 order/뒤에 있는데 "buy"인지, "sell"인지를 감지하여 어떤 데이터를 fetch하고 컴포넌트들을 렌더 시킬지 조건을 걸었다. 또, 실제 데이터를 받아서 렌더할때는 url에 size=10 같은 query가 같이 오는데 location.search로 이 모든 query까지 받을수가 있다. 그렇게 해서 백앤드에게 해당 페이지의, 해당 상품의, 해당 size가 렌더되어야해~ 라고 fetch를 할때 밑의 코드처럼 useLocation()을 적극 활용했다.

 useEffect(() => {
    const sizeQuery = location.search;
    const pathnameQuery = location.pathname;
    if (useParam.id === "buy") {
      setIsBuy(0);
    } else {
      setIsBuy(1);
    }
    fetch(`${ORDERAPI}${pathnameQuery}${sizeQuery}`, {
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("Kakao_token"),
      },
    })

이번 2차 프로젝트때 처음으로 시도해본 카카오 소셜 로그인! 프론트앤드 <-> 백앤드 뿐만 아니라 카카오까지 연결을 시도를 해야하는거여서 낯설었지만 재밌었다 ㅋㅋ

먼저 카카오 developers을 통해 localhost:3000을 등록하고 JS Key를 발급 받는다.

발급 받은 JS Key를 index.html에 넣는다.

 <script>
      Kakao.init("발급받은키");
      console.log(Kakao.isInitialized());
 </script>

console.log를 보면 true라고 떠있다.

그런 다음에 해야할일은 로그인이 진행될 버튼에 함수를 작성하는 일이다.

먼저 첫 두줄은 카카오와 통신하는 과정이다. 버튼을 눌러 함수가 실행되면 먼저 카카오 로그인 모달이 뜬다. 모달에 아이디와 비밀번호를 입력하면 authObj라는 카카오에서 발행된 토큰이 포함된 객체가 나에게 다시 전달되는데 여기서 받은 access_token을 method: "POST"로 다시 백앤드에게 전달해줘야한다. 백앤드에게 access_token을 전달해주면 백앤드는 그 토큰을 가지고 카카오에게 authorization을 받고 다시 나에게 백앤드에서 발급하는 토큰을 발급해준다.

const loginWithKakao = () => {
    window.Kakao.Auth.login({
      success: function (authObj) {
        fetch(KAKAOAPI, {
          method: "POST",
          headers: {
            Authorization: authObj.access_token,
          },
        })
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
            localStorage.setItem("username", res.user_name);
            localStorage.setItem("Kakao_token", res.access_token);
            if (res.access_token) {
              alert("You are Logged In with Kakao!");
              history.push("/");
            } else alert("Failed to Log In");
          });
      },
      fail: function (err) {
        console.log("Error", err);
      },
    });
  };

사실 이렇게 써놓고 보면 그렇게 복잡한 과정은 아니지만 코드를 작성하기전에 소셜로그인을 할때 어떤식으로 서로 토큰을 주고 받는지 이해하는게 중요한것 같다. 나중에는 구글 로그인도 도전해볼수있기를...!

지난 3월 2일 화요일부터 3월 12일 금요일까지 진행했던 2차 프로젝트 - StockX 클론코딩이 무사히 끝났다. 이번에는 1차때 안썼던 함수형 hooks와 styled components를 쓰게 되어서 새로운 기능들로 구현해야하니깐 최대한 현실적으로 목표를 잡자! 라고 첫날부터 얘기를 했었던게 좋았던것 같다.

클론코딩하는 사이트 🌈

미국의 온라인 리세일 마켓 플랫폼인 StockX 가 당첨 되었다! 1차때와 비교해서 더 복잡해진 데이터와 고려해야하는 조건들이 훨씬 많아져서 첫날 이 사이트를 이해하는데도 시간이 오래 걸렸고 사이트를 하나하나 뜯어보면 볼수록 과연 이걸 11일만에 할수있을까? 라는 생각이 들었던것 같다.

ShockX 🌈

백앤드 네명, 프론트 세명으로 구성된 우리팀은 이번에는 최대한 새로운 기능들을 더 도전해보고 2주차때는 기업협업때문에 정신이 없을것 같아서 최대한 가지치기를 해서 필수적인것들만 구현하기로 했다.

프로젝트 기간

2021.03.02 ~ 2021.03.12 (총 11일)

프론트앤드 기술스택

• React
• React Router
• Styled Components
• Styled Reset
• Restful API
• react-ticker
• Highcharts

구현한 페이지

• *회원가입/로그인 페이지 (+카카오소셜 로그인) *🍎
• Navigation Bar 🍎
• *메인 페이지 (+검색 기능) *🍎
• 상품 리스트 페이지 (+필터링 기능)
• 상품 디테일 페이지
• Bid/Buy/결제 페이지 🍎
• Ask/Sell/결제 페이지 🍎
• 마이페이지 - 메뉴탭 🍎
• 마이페이지 - Portfolio
• *마이페이지 - Buying *🍎
• 마이페이지 - Selling🍎

내가 구현한 페이지 결과물

• *회원가입/로그인 페이지 (+카카오소셜 로그인) *

• *Navigation Bar && 메인 페이지 (+검색 기능) *

• Bid/Buy/결제 페이지

• Ask/Sell/결제 페이지

• *마이페이지 - Buying *

• *마이페이지 - Selling *

기억하고 싶은 코드 🌈

어떻게 하다보니 내가 맡은 페이지들은 모두 컴포넌트 재사용을 활용해서 비슷한 구조를 가진 두페이지를 한번에 만들수 있었다. 회원가입/로그인 같은 경우에도 account.js라는 최상위 부모에서 회원가입인지 로그인인지에 따라서 렌더하는 내용이 달라지도록 했고 Bid/Buy와 Ask/Sell하는 페이지들와 마이페이지 - Buying과 마이페이지 - selling도 각각 payment.js와 buyingselling이라는 파일에서 모두 시작된다.

가장 오랜시간 공을들였던 Big/Buy와 Ask/Sell은 현재 url이 /buy인지, /sell인지를 useParams()라는 hooks를 통해 감지하여 해당되는 데이터를 fetch해오고 필요한 데이터를 자식들에게 props로 넘겨주는 방식을 사용했다.

 let useParam = useParams();
 const history = useHistory();
 const location = useLocation();

  useEffect(() => {
    const sizeQuery = location.search;
    const pathnameQuery = location.pathname;
    if (useParam.id === "buy") {
      setIsBuy(0);
    } else {
      setIsBuy(1);
    }
    fetch(`${ORDERAPI}${pathnameQuery}${sizeQuery}`, {
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("Kakao_token"),
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setDetailData(data.data.product);
      });
  }, [useParam.id]);

또한 StockX 사이트의 경우 사고 파는것만 할수있는게 아니라 사기위해서 가격을 부르고 (bid), 팔기 위해서 가격을 부를수 있기 때문에 (ask) 현재 사용자가 bid을 하려고 하는지, buy를 하려고 하는지, ask를 하려고하는지, sell을 할려고하는지에 대해서 따로따로 렌더가 되었어야했기 때문에 확실히 1차때보다 구조가 더 복잡하다는걸 깨달았다. 결국 이 많은 정보들을 담기위해서 생성된 자식 components 파일들.... Payment 하나를 위해 14개의 자식 components 파일들이 필요했다.

한페이지에서 컴포넌트만 바꿔가며 데이터를 관리하기 때문에 수많은 자식들에게 props를 전달해야되기 때문에 최상위부모인 Payment.js는 props 파티가 열렸다....

<>
      <PaymentNav />
      <PaymentPage>
        <PaymentImage data={detailData} />
        <PaymentRight>
          {currentIdx === 0 && (
            <>
              <SizeContainer>
                <SizeText>U.S. Men's Size {detailData.size}</SizeText>
                <PenIcon
                  alt="Pen"
                  src={process.env.PUBLIC_URL + `/images/Payment/pen.svg`}
                />
              </SizeContainer>
              <PaymentDetail
                data={detailData}
                format={isBuy === 0 ? buyProps : sellProps}
                isBuy={isBuy}
                isPlace={isPlace}
                changeTabHandler={changeTabHandler}
                handleInputNum={handleInputNum}
                messageHandler={messageHandler}
                messageText={messageText}
                isShowAddFeeList={isShowAddFeeList}
                buyInput={buyInput}
                sellInput={sellInput}
                buyTotal={buyTotal}
                sellTotal={sellTotal}
                notAvailableProps={notAvailableProps}
              />
              {isPlace === 0 && (
                <Expiration
                  isBuy={isBuy}
                  expirationNum={expirationNum}
                  expirationHandler={expirationHandler}
                />
              )}
            </>
          )}
          {currentIdx === 1 && (
            <ShippingInfoPage
              data={billingProps}
              handleInputInfo={handleInputInfo}
              inputs={inputs}
            />
          )}
          {currentIdx === 2 && (
            <ReviewBilling
              data={detailData}
              buyTotalPrice={buyTotalPrice}
              sellTotalPrice={sellTotalPrice}
              expirationNum={expirationNum}
              buyInput={buyInput}
              sellInput={sellInput}
              isBuy={isBuy}
              isPlace={isPlace}
              name={name}
              phoneNumber={phoneNumber}
              address={address}
              city={city}
              state={state}
              country={country}
              zipCode={zipCode}
            />
          )}
        </PaymentRight>
      </PaymentPage>
      <PaymentFooter
        isBuy={isBuy}
        changeIdxHanlder={changeIdxHanlder}
        currentIdx={currentIdx}
        sumbitPaymentInfo={sumbitPaymentInfo}
      />
    </>

개인적인 프로젝트 후기 🌈

아쉬웠던점 👻

주말에 미리 예습을 해놨어서 그런지 styled components와 react hooks에 생각보다 빠르게 적응해서 계획했던것보다 훨씬 더 빠르게 페이지들이 완성되었다. 굳이 아쉬웠던점을 꼽자면 페이스조절을 못한탓에 2주차때는 너무 여유가 넘쳤었다 ... 또, 1차때 많은것들을 이미 만들어봐서 그런지 2차때는 뭔가 새로운걸 배운다라는 느낌을 카카오소셜로그인을 구현할때 빼고는 못느꼈던것 같다. 1차때도 메인, Nav bar, 결제페이지, 마이페이지를 만들어봤기 때문에 데이터가 조금 더 많고 구조가 조금 더 복잡했지만 결국은 똑같은걸 만드는 느낌이 들었다. 데이터 시각화나 query쪽으로 파고들었으면 더 유익했을것 같다.

좋았던점 👍

확실히 1차 프로젝트를 다들 경험해봐서 그런지 2차 프로젝트때는 어떤식으로 서로 소통하는게 효율적인지를 다 깨닫고 프론트앤드 vs 백앤드간의 소통이나 프론트앤드 vs 프론트앤드의 소통도 훨씬 잘되었던것 같다. 2차때도 좋은 팀원들을 만나서 정말 conflict 하나 없이 무난하게 잘 지나간것 같다.

최종 후기 🤖

첫 한달에 개념을 많이 배웠다면 두번째달에는 배운 개념을 응용하여 적용하는 훈련을 많이 한것 같다. 그냥 notion의 개념들을 달달 외우는것 보다 직접 코드를 쓰니깐 왜 이런 개념훈련들이 필요한지, 왜 코드카타를 꾸준히 해야하는지ㅋㅋ를 많이 깨달았던 1차,2차 프로젝트였다. 이제 기업협업을 나가서 지금까지 배운 개념들과 연습해온 코드들이 실무에선 어떻게 쓰일지 배우게 될텐데 많이 기대된다. 🙌

prices는 배열이며, 각 요소는 매일의 주식 가격입니다. 만약 한 번만 거래할 수 있다면 = 사고 팔 수 있다면, 제일 큰 이익은 얼마일까요?

Input: [7,1,5,3,6,4]
Output: 5

설명: 2일(가격=1)에 샀다가 5일(가격=6)에 사는 것이 6-1이라 제일 큰 수익 7-1=6 은 안 되는거 아시죠? 먼저 사야 팔 수 있습니다.

Input: [7,6,4,3,1]
Output: 0

설명: 여기서는 매일 가격이 낮아지기 때문에 거래가 없습니다. 그래서 0

첫접근

const maxProfit = prices => {
let profit = []
for(let i=0; i<prices.length;i++){
  for(let j=i+1; j<prices.length;j++){
    if(prices[j]>prices[i]){
      profit.push(prices[j]-prices[i])
    } else {profit.push(0)}
  }
} return profit.reduce(function(a,b){return Math.max(a,b)})
}

결과는 통과~~ 👻 먼저 profit이라는 빈배열을 만들고 for-loop을 두번 돌린다. i는 0부터 시작하지만 j는 i와 비교를 해야하기때문에 i+1부터 시작한다. 이렇게 돌아가는 for-loop에서 만약 prices[j]가 prices[i]보다 클 경우 prices[j]에서 prices[i]를 뺀후 그 숫자를 profit이라는 배열에 집어넣는다. 그렇지 않을 경우는 0을 profit에 넣는다. 그러고 나서 마지막에 profit이라는 배열안에 가장 큰 숫자를 반환한다.

양수 N을 이진법으로 바꿨을 때, 연속으로 이어지는 0 중에서 가장 큰 값을 return해 주세요.

• 이어지는 0은 1과 1사이에 있는 것을 의미합니다.
• 1과 1사이에 있는 0을 binary gap 이라고 하겠습니다.

input: 9
output: 2

설명: 9의 이진수는 1001 입니다. 1과 1사이에 있는 0은 2 이므로, 2를 return

첫 접근

const solution1 = N => {
  const arr = N.toString(2).split('1')
  const length = arr.map(str => str.length)
  return length.reduce(function(a,b){return Math.max(a,b)})
} 

결과: 응~ fail~ ㅋㅋㅋ 테스트문제 9개중에 7개 통과하고 2개를 fail 했다. 이유는 '32', '20'이라는 숫자가 들어갔을때

n.toString(2).split('1') // [ '', '', '', '', '0' ]
s.toString(2).split('1') // [ '', '0', '00' ]

여기서 다시보는 문제: 이어지는 0은 1과 1사이에 있는것을 의미합니다 조건을 걸어주지않았기 때문에 1과 1사이에 없는 0들의 숫자도 고려해버렸다,,, 다시 조건을 걸어주고 시도한다면

두번째 접근

const solution = N => {
  const arr = N.toString(2).split('1')
  arr.pop()
  arr.shift()
  if (arr.length > 0){
  const length = arr.map(str => str.length)
  return length.reduce(function(a,b){return Math.max(a,b)})
} else {return 0}}

통과!🙌 먼저 arr이라는 이진법으로 바꾸고 '1'로 split한 배열을 만들고, 맨앞과 맨뒤의 index에 있는 string을 없애고 만약 그래도 arr이라는 배열이 0보다 크다면 그 안에 있는 string중에 가장 큰 string의 숫자를 반환한다. 만약 arr이라는 배열이 0이라면, 0을 반환한다.

클론코딩하는 사이트 🌈

배달의민족에서 운영하는 배민문방구가 당첨 되었다! 깔끔한 UI와 심플한 기능이 돋보인는 배민문방구는 1차프로젝트로 하기 딱 적합한것 같다는 생각을 했다. 지금까지 배웠던것을 복습하고, 내가 원하는대로 더 응용해서 적용할수 있는 요소들이 많았던것이 좋았다.

200문방구 🌈

백앤드 세명, 프론트 세명으로 구성된 우리팀은 일주일차에 필수구현을 최대한 끝내고, 이주차에는 추가구현 및 필수구현 리팩토링을 위주로 진행하기로 결정했다. 프론트에서 구현한 UI와 기능들은 다음과 같다. (내가 구현한 페이지들은 🍎 표시를 해놨다)

프로젝트 기간

2021.02.15 ~ 2021.02.26 (총 12일)

프론트앤드 기술스택

• React
• React Router
• SASS
• Restful API
• React-slick / React-slick-Carousel
• React-datepicker
• React-daum-postcode

구현한 페이지

• 회원가입 페이지
• 로그인 페이지
• Navigation Bar🍎 (+동적 라우팅 기능)
• Footer🍎
• 메인 페이지🍎
• 상품 리스트 페이지 (+필터링 기능)
• 상품 디테일 페이지
• 장바구니 페이지🍎
• 결제 페이지🍎
• 마이페이지 - Nav Bar, 메뉴탭
• 마이페이지 - 메인🍎
• 마이페이지 - 주문목록🍎
• 마이페이지 - 리뷰 모달창

내가 구현한 페이지 결과물

(각 중요 페이지에 대해 쓴 후기를 제목에 링크 걸어둠!)

*- Navigation Bar *🍎

- 메인페이지🍎

*- 장바구니 * 🍎

*- 결제페이지 * 🍎

*- 마이페이지 * 🍎

기억하고 싶은 코드 🌈

가장 기억하고 싶은 코드는 무조건 장바구니의 체크박스 코드다. 진짜 가장 많은 시간을 투자했고 가장 많은 기능들이 들어가 있다고 생각한다. 장바구니 페이지를 구현하면서 내가 레벨업하는게 느껴졌다 🤩 내가 원하는 기능을 구현하기위해 구글링하고, 또 구글링하고, 다른 사람들에게 자문도 구하고, 또 구글링하고, 이것저것 다 시도해보고 결국 해내었을때 기분은 정말 너무 좋았다.

개인적인 프로젝트 후기 🌈

여러가지 복합적인 감정들이 들었던 프로젝트였던것 같다. 내가 무엇을 구현할수 있는지 전혀 모르는 상태에서 시작했고 어떤 conflict를 마주하게 될지 몰랐기때문에 초기 목표를 최대한 현실적이게 잡으려고 노력했다. 팀원 모두에게 첫 프로젝트이기 때문에 굳이 목표를 100으로 잡고 하나하나 제대로 짚지 않고 90까지 후다닥 성공 시키는것보다 목표를 50까지 잡고 80까지 깊이있게 성공시키는게 더 맞다고 생각했던것 같다. 결과적으로 말하자면 개인적인 목표를 80까지 잡았고 90정도까지 성공 시킨것 같아서 꽤 성공적인 프로젝트였다고 할수 있는것 같다.

이번 1차프로젝트를 통해 하나의 웹사이트가 구축이 될때 어떤 기능들이 어떤식으로 구현되는지 더 알게되었고 백앤드와 프론트앤드가 어떤식으로 조율하고 어떤식으로 소통해야하는지 알게되었다. 우리팀 같은경우에는 개인적으로 소통이 굉장히 잘된팀이라고 생각한다. 처음 팀이 만들어졌을때는 거의 대부분 인사말고는 말을 해볼 기회가 없었던,,,,분들이랑 팀을 하게되었지만 진짜 거의 2주동안 가족보다 더 많이 보고 그 누구보다도 같이 밥을 많이 먹어서 그런지 한 배를 탄 기분이 들었다 ㅋㅋ 그냥 이분들과 같이 팀을 하게 되면서 2021년 운을 다 쓴건가..?! 싶을 정도로 운이 좋았다 + 좋다 ~ 🥳 라는 생각을 더 했던것 같다. 2주동안 다 같이 배우는 입장이기때문에 정말 많은 얘기를 서로 거리낌없이 했던것 같고 그러면서 서로 배우는점이 많았을꺼라고 믿는다...!

아쉬웠던점 👻

개인적인 모토가 후회하지말자!여서 과거를 뒤돌아보면서 후회하며 스트레스받진 않지만 굳이 아쉬웠던점을 꼽고 나중에 이렇게하지 말아야지!라고 생각한것이 있다면 초기세팅을 꼼꼼히하지 않은것이 아쉬웠다. 우리팀은 초기세팅에서 eslintrc와 package-lock.json때문에 고생한 몇몇팀들중 하나였고, 결국 마지막까지 merge를 할때마다 문제가 발생했다 ... 다음번에 프로젝트를 할때는 팀원들과 함께 초기세팅을 더 꼼꼼히해서 .scss 같은 경우에도 SASS의 기능들을 더 많이 사용하면서 코드가 더 가독성이 좋고 간결하게 만들려고한다.

좋았던점 👍

우리팀 포함, 모든 팀의 프론트분들이 진짜 많이 힘들어했었다 ... 백앤드에 비해 숫자가 적은만큼 백앤드 팀원들이 구현해내는 데이터에 맞출려면 정말 각자 최소 1.5인분은 했어야해서 3시가 넘어가는 모각코에는 프론트분들만 남은날이 정말정말 많았고 날이 가면 갈수록 프론트분들이 너무 피곤해보였다 ... 그런데도 불구하고 각자 본인 프로젝트가 바쁜 와중에 내가 이팀 저팀 이것저것 물어보러 다니면 진짜 열심히 가르쳐주셔서 너무 고마웠다. 정말 내가 구현한 모든페이지에 각 팀의 프론트분들의 도움이 다 깃들어져있다 🙌 다 함께 배우러온 입장이니만큼 경쟁자로써 서로를 견제하는게 아니라 다른분들과 얘기하면서 하나라도 더 배우고 하나라도 더 지식을 나눔하려고 하는 동료들이 있다는게 너무 좋았던것 같다. 🙏

최종 후기 🤖

6주전에 위코드에 다니기전에는 진짜 코딩에 대해서 1도 ... 단 1도... 진짜 1도 모르던 내가 한사이트의 UI와 기능들을 구현할정도로 많이 성장했구나~를 체크할수 있었던 프로젝트였던것 같다. 마지막날전까지는 새벽 4시전에 잔적이 없었을정도로 과몰입,,을 하면서 미친듯이 달렸던것 같다... 지금까지 대학이나 회사의 많은 그룹 프로젝트들을 진행해왔지만 끝나고 이렇게 후련하고 아쉬움이 하나도 안남았던 프로젝트는 처음인것 같다 ㅋㅋ 프로젝트를 시작하기전에 같이 일하고 싶은 팀원, 같이 일하면 편한 팀원, 다가가기 편한 팀원이 되고싶어서 정말 많이 노력했는데 내 노력이 팀원분들에게 닿았길 바란다..ㅋㅋ 🙏 매일매일 열심히 해준 팀원들에게 너무 고맙고 다들 2차프로젝트때는 본인이 더더욱 만족할만한 결과물을 내길 바란다 ❣️

솔직히 마이페이지... 처음에는 정말 추가구현 of 추가구현이라고 생각했는데 하다보니 욕심나고 왠지 할수 있을것 같은 생각이 들고, 생각보다 필수구현이 일찍 끝나서 더 욕심내서 구현해보았다.

이백문방구의 마이페이지의 주문목록 페이지다. 위에 header와 옆에 메뉴탭 같은 경우에는 다른분이 UI와 기능을 구현해주시고 내가 한 부분은 저 주문목록/배송조회의 날짜를 고르는 부분부터 밑에 주문목록/배송조회 테이블이다.

장바구니에선 기능을 구현하는 함수를 짜는데 머리를 썼다면 여기서는 어떤 버튼과 텍스트에 어떤 조건을 줘야하는지를 정리를 했어야했다. 백앤드에서 넘어오는 각 상품의 현 상황 (status)는 다음과 같다.

주문상태 : [ '입금대기', '결제완료', '상품준비중', '배송중', '배송완료', ]

상품상태 : ['대기', '취소', '환불', '구매확정']

여기서 생각해야할 조건들은,

• 만약 상품이 구매확정이 안되어있다면 '취소', '환불'이 가능하다.
• 만약 상품이 구매확정이 안되어있다면 구매확정 버튼이 필요하다.
• 만약 구매확정 버튼을 누른다면 해당 상품에 대한 리뷰를 쓸수 있어야한다.
• 만약 구매확정 버튼을 누른다면 백앤드에게 해당 상품이 구매확정이 되었다고 알려줘야한다.
• '리뷰쓰기' 버튼을 누른다면 리뷰 모달창이 떠야하고, 리뷰를 등록을 한다면 백앤드에게 해당 상품의 리뷰가 등록 되었다고 내용을 함께 보내줘야한다.
• 만약 리뷰를 썼다면 '리뷰보기' 버튼이 생겨야한다.

이 모든것들을 정리해놓고 우리팀의 백앤드분들과 얘기해본 결과, 다음과 같이 데이터를 주고 받기로했다.

• 백앤드에서 초기에 넘어오는 데이터에는 isReview = false라는 값이 있다. (아직 리뷰가 안써졌다는 뜻)
• 구매확정이 된다면 해당 상품이 구매확정이 되었다고 productId와 orderId를 method: 'PATCH'로 body에 담아서 보내준다. 그러면 백앤드는 SUCCESS라는 메세지와 함께 구매확정으로 수정된 주문목록 배열을 다시 보내준다.
• 백앤드로부터 구매확정 status를 받는다면 프론트는 리뷰쓰기 버튼이 뜨게 한다.
• 리뷰쓰기 버튼을 누르면 모달창이 뜨고 리뷰쓰기 완료를 누른다면 별점, 제목, 내용, 해당 상품번호와 주문번호를 method:'POST'의 body에 담아서 보낸다. 내용을 받은 백앤드는 해당상품의 데이터를 isReview = true로 수정해서 다시 프론트에게 보내준다.
• 리뷰가 달린 상품들 (isReview = true 라면) 리뷰보기 버튼이 뜬다.

그렇게 모든 버튼과 텍스트에 조건부를 건 결과,

• 배송완료가 되었고, 구매확정은 안된 상태
• 배송완료가 되었고, 구매확정도 되었지만 리뷰는 안쓴 상태,
• 배송 완료, 구매확정 완료, 리뷰쓰기 클릭! (모달창 on! 모달창은 같은 프론트를 맡은 미경님이 만드셨다~!)
• 배송 완료, 구매확정 완료, 리뷰쓰기 완료라면

마이페이지 구현 후기 🐤

가장 백앤드와 소통이 많이 필요했던 페이지였다. 어떤걸 넘겨야할지, 어떻게 넘어올지에 대한 데이터의 구조에 대해서 많이 얘기하고 조율했던것 같다. 장바구니 페이지를 통해 기능에 대해서 많이 배웠다면 마이페이지를 통해 협업에 대해서 많이 배웠다. 🙉

개인적으로 이번 프로젝트를 진행하면서 가장 힘들었던 파트를 고르라면 장바구니였다. 생각보다 생각해야할게 너무 많았고 체크박스 구현을 얕봤다가 큰코 다쳤다...😭 이거 구현 안해본 사람은 모른다.. 체크박스가 진짜 생각보다 너무 복잡하다... 분명 내가 구현한게 가장 ideal한 방법은 아닌게 알지만 여기까지 오는것도 정말 어려웠다....

200문방구에서 만든 장바구니는 이렇게 생겼다.

장바구니를 만들때 구현하고 싶었던 기능들은 :

1) 장바구니에서 상품들의 수량을 바꿀수 있어야한다. 2) 몇개의, 혹은 전체 상품을 삭제 할수있어야한다 3) 선택된 상품만 주문 가능해야한다. 4) 전체 상품을 주문할수 있어야한다.

결국 모든 기능들을 구현했다 🙌 나중에 분명히 또 쓸 코드들이 많지만 이번 프로젝트를 하면서 가장 많은 시간을 할애했던 체크박스에 대해서 정리해보려고한다.

장바구니 체크박스에 onChange 이벤트 주기 🙌

각 장바구니 상품에는 하나의 체크박스가 있다. 이 체크박스에 중요한것은 지정된 id, onChange가 일어났을때 실행되는 함수, 그리고 checked라는 boolean값이다.

처음에는 이 boolean값을 state로 관리했다. 그리고 onChange 이벤트가 발동되면 setState를 통해 false -> true 로 바꾸려고 했다. 그랬더니 발생한일... 모든 체크박스가 같이 동기화 되어버린다. 물론 각각의 checkbox에 각자 다른 state를 지정해줘서 따로 관리한다면 상관없다. 하지만 누군가가 말씀하신대로 항상 1000개의 데이터가 넘어올수도 있다는 가정하에 각각의 state로 관리하지 못하기 때문에 state로 관리하는것은 적합하지 않다고 판단했다.

//CartItem.js 장바구니 아이템 한줄의 Component
<input
className="checkBoxinCartItem"
type="checkbox"
id={id}
onChange={this.props.onChecked}
checked={this.props.cartItem.value}
/>

처음에 백앤드에서 넘어오는 데이터에는 상품이름, 상품가격, 상품수량은 있지만 상품의 checked에 대한 값은 없다. 그러므로 onChange이벤트가 일어날때마다 handleChange (props는 onChecked)라는 함수를 통하여 checked에boolean값을 준다.

//Cart.js 장바구니의 최상위 부모 Component
  handleChange = e => {
    const id = e.target.id;
    this.setState(prevState => ({
      cartList: prevState.cartList.map(item =>
        item.productId === +id ? { ...item, value: e.target.checked } : item
      ),
    }));
  };

체크박스를 클릭할때마다 (onChange 이벤트가 일어날때마다) handleChange라는 함수는 checked의 값을 하나씩 준다. 이게 말로 하면 이해가 잘 안되지만 콘솔을 찍어보면 이해가 된다.

this.props.cartItem.value를 처음 페이지가 렌더 되었을때 콘솔에 찍어보면 undefined가 뜬다. 세번 뜨는 이유는 장바구니 아이템이 3개라서! 즉 처음에 checked = {this.props.cartItem.value}는 undefined라는 뜻이다. 허나 만약 onChange 이벤트, 즉 체크박스를 한번 클릭을 해보면,

상품 하나를 눌렀기때문에 하나만 true고 아직 onChange가 일어나지않은 나머지 상품 두개는 undefined가 뜬다. 만약 이 상품을 재클릭을 하여 체크를 없앤다면,

두둥! false 하나, undefined 둘! onChange가 일어나야만 handleChange라는 함수가 실행되면서 boolean 값을 할당 받는다.

체크박스에 대한 모든것들을 구현하기전에 먼저 이 handleChange라는 함수를 통해 value에 true or false를 주는게 먼저다.

전체선택, 전체해제 & 전체선택 후 하나를 해제했을때 전체선택 해제하기 구현하기 🙌

200문방구의 장바구니 같은 경우 전체선택, 전체해제가 가능한 체크박스가 테이블의 header에 있다.

이 테이블의 header에 해당하는 부분은 CartList.js라는 컴포넌트에 있다. 코드는 다음과 같다.

// CartList.js
 <input
 className="checkBoxInputInCartList"
type="checkbox"
onClick={handleAllChecked}
checked={cartList.every(item => item.value === true)}
/>

onClick이 일어날경우 handleAllChecked라는 함수가 발동된다. 이 함수는 다음과 같다.

//Cart.js
handleAllChecked = e => {
    let cartList = this.state.cartList;
    cartList.forEach(item => (item.value = e.target.checked));
    this.setState({ cartList });
  };

함수가 발동될경우, this.state.cartList에 있는 모든 아이템의 value에게 checked = true값을 준다.

그러므로 만약 전체선택이 되었을경우,

전체해제가 될 경우,

여기서 추가적으로 더 구현하고 싶었던 기능이 만약 전체 선택이 되었는데 하나가 해제되었을경우 전체 선택이 해제가 되게! 하고 싶어서 구글을 더 찾아봤다 ㅋㅋ 🧐 여러 고민과 멘토님들께 자문을 구한 결과,

//CartList.js 전체선택 체크박스
checked={cartList.every(item => item.value === true)

전체선택 체크박스의 checked의 값을 만약 모든 아이템이 true일경우만 true가 뜨게 하면 된다는 아주 간단한 코드로 구현할수있었다~ 🥳

선택된 상품만 삭제하기 🙌

//Cart.js
handleDelete = () => {
    const cartDelete = this.state.cartList.filter(item => item.value);
    const cartMap = cartDelete.map(item => item.cartId);
    const deleteUrl = cartMap
      .map(e => {
        return ['cartId', e];
      })
      .map(e => e.join('='))
      .join('&');

    fetch(`CARTAPI?${deleteUrl}`, {
      method: 'DELETE',
      headers: {
        Authorization: localStorage.getItem('accessToken'),
      },
    })
      .then(response => response.json())
      .then(res => {
        if (res.message === 'SUCCESS') {
          alert('선택 상품을 삭제 완료 하였습니다.');
        } else alert('선택 상품 삭제를 실패 하였습니다');
      });
    this.setState(prevState => ({
      cartList: prevState.cartList.filter(item => !item.value),
    }));
  };

처음에는 백앤드에게 body에 어떤 상품들이 삭제되는지 아이디를 담아서 보내주려고 했다. 심지어 이렇게 성공했다! 그러나 백앤드 멘토님의 리뷰에서 이렇게 하는것보다 delete 메소드를 통해 query string에 어떤 아이디가 지워지는지 알려주는게 맞다라고 하셔서 코드를 수정했다.

위의 코드를 설명하자면, 먼저 cartDelete라는 변수를 만들어서 장바구니에 있는 아이템들중에 선택된것만 필터를 한다. 그러고 cartMap이라는 변수로 선택된 아이템들의 아이디값만 뽑아낸다. [4, 5] 라는 숫자로만 이루어진 배열이 나온다. 이제 여기서 해야할것 ! 이 4와 5라는 숫자를 'cartId=4&cartId=5'라는 스트링으로 만들어서 fetch하는 API뒤에 붙여준다. 여기서 정말 코트카타를 해서 이걸 구현했어야했는데 팀에 코드카타의 신이 계셔서 한번에 해결해주셨다...! 아멘 🙏

이런식으로 백앤드에게 어떤 id를 가진 상품이 삭제되는지 알려주고 만약 SUCCESS가 뜬다면 선택상품을 삭제 완료했다는 알림이 뜨고 setState를 통해 프론트에서 알아서 그 선택 상품들을 지워버렸다. 백앤드에게 SUCCESS메세지와 함께 수정된 cartList를 받아와서 뿌리는 방법도 있었지만 이미 구현해놓은 코드들이 있어서 불필요 했다.

장바구니 구현 🙌

상품 수량 바꾸기

선택된 상품만 계산하기

선택된 상품 삭제하기

전체선택 및 전체선택해제 하기

장바구니 구현 후기 🙌

솔직히 메인을 구현할때는 뭔가를 배웠다 라는 느낌을 전혀 못받았는데 장바구니를 구현하면서 백앤드와 어떤식으로 소통을 해야하는지, 어떤식으로 코드를 짜야하는지, 그리고 체크박스를 어떻게 활용하는지에 대해서 너무 많이 배웠다. 특히, 체크박스에 대해서 알아보기 시작한게 금요일밤이였는데 그 다음주 화요일 새벽에 기나긴 투쟁 끝에 체크박스를 정복했다 ..... 구글에 있는 모든 관련 문서는 다 읽은것 같다... 가장 시간을 많이 투자한 페이지인만큼 가장 뿌듯한 페이지다 🥰

재귀를 사용하여 팩토리얼(factorial)을 구하는 함수를 구현해주세요. 팩토리얼이란 1에서부터 n까지의 정수를 모두 곱한것을 말합니다.

1! = 1
2! = 1 * 2
5! = 1 * 2 * 3 * 4 * 5

첫번째 접근

const factorial = n => {
  return n * factorial(n-1)
}

...로딩이 안된다...왜냐..! n이 끝나는 지점을 안정해줘서!

두번째 접근

const factorial = n => {
    if (n===0) return 1
  return n * factorial(n-1)
}

n=0이면 끝나~~ 라고 지정해줬더니 👍 성공 👍

주어진 숫자 배열에서, 0을 배열의 마지막쪽으로 이동시켜주세요. 원래 있던 숫자의 순서는 바꾸지 말아주세요.

(새로운 배열을 생성해서는 안 됩니다.)

Input: [0,1,0,3,12]
Output: [1,3,12,0,0]

첫 접근

const moveZeroes = nums => {
for (i=0; i<nums.length; i++) {
  if(nums[i]===0){
    nums.push(nums.splice(i, 1)[0])
  }
}
return nums}

응 안돼 ,,,, 돌아가,,,, 배열안에 0이 하나인경우는 가능하지만 0이 뜨는 순간 끝나버려서 0이 두개이상일 경우 for-loop이 안돈다......

두번째 접근

const moveZeroes = nums => {
newArr =[]
trashArr =[]
for(i=0; i<nums.length;i++) {
  if(nums[i] !== 0) {
    newArr.push(nums[i])
  } else (trashArr.push(nums[i]))
} 
for(i=0; i<trashArr.length;i++){
  newArr.push(0)
} 
return newArr
};

ㅎㅎ..누가봐도 메모리낭비 시간낭비 쓸데없이 긴 코드 ... 분명 더 짧게 할수 있는 방법이 있을텐데 일단 해봤다 ... 배열을 쭉 돌면서 0이면 trashArr에 넣고, 0이 아니면 newArr에 넣고 나중에 newArr에 trashArr.length만큼 0을 집어넣어버렸다..결과는 🙌 통과 🙌

암튼 통과하긴했는데 이건 아니다 싶어서 구글선생님에게 도움을 요청하여 다른 사람들의 접근 방식을 찾아보았다.

세번째 접근

const moveZeroes = nums => {
  for(i = nums.length-1; i >= 0; i--){
    if(nums[i]===0){
      nums.push(nums.splice(i, 1)[0]);
    }
  }
  return nums
};

하...뒤에서 부터 돌리면 되는구나.....i=0부터 돌려야한다는 편견을 아직도 버리지 못해서 여기까지 생각을 못했다....😭😭

메인을 맡으면서 자연스럽게 Nav Bar와 Footer까지 만들게 되었다. 사실 Nav Bar 같은 경우 아직 링크를 건게 아니기 때문에 기능 구현을 지금 당장 할수있는건 없었지만 도전해보고 싶었던 '스크롤을 내리면 위로 쭉 올라가는 nav bar'를 만들수있었다.

1) Nav Bar

🔎 실제 배민문방구 Nav Bar

처음에는 실제 저 로고를 감싸고 있는 div box를 줄여야하나 고민하던 찰나에 또 생각난 조건부렌더링...ㅋㅋㅋㅋ

this.state = {
      navScrolled: false
    };

일단 현재 navScrolled를 false로 지정해 놓았다.

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    this.setState({ navScrolled: window.pageYOffset > 200 });
  };

componentDidMount를 통해 윈도우에서 스크롤이 된다면~ handleScroll이라는 함수를 실행해! 라고 지정해 주었다. handleScroll은 만약 Y의 offset이 200이 넘는다면 navScrolled의 값을 true로 바꿔준다.

🌈 두개의 nav bar에 대한 코드 🌈

{!navScrolled && (
          <main className="mainNav">
        ///처음에 보여지는 큰 main Nav
          </main>
        )}
{navScrolled && (
          <div className="subNav">
          ///스크롤이 내려지면 보이는 sub Nav
          </div>
        )}

또건부 렌더링..을 통해 만약에 navScrolled = true일때 보여주는 nav bar와 navScrolled = false 일때 보여주는 nav bar를 다르게 했다.

그렇게해서 구현된 이백문방구의 nav bar ~~

hover효과가 없으면 아쉽기에... 원래 사이트에는 없는 hover 효과들을 추가해서 구현했다.

2) Footer

Footer에는 딱히 기능 구현을 하지 않았다. 링크는 걸어놨지만 굳이 따로 뭘 해야할 기능을 찾지 못했다.

*참고로 Nav와 Footer에 들어간 사진들은 갓성준님이 만들어주신 로고들을 사용했다👍 *

메인페이지 🍒

🔎 실제 메인페이지

배민문방구의 UI는 심플하고 화려한 hover효과 같은게 없었다.

1) 메인 슬라이더

항상 설치해서 쓰고 싶었던 react-slick을 이용하여 슬라이드를 구현했다.

많은 사람들이 이용하는 라이브러리인만큼 딱히 이해하기 어려운 부분은 없었다. 밑의 초기 세팅도 잘 정리되어 있어서 구현하기 편했던것 같다.

슬라이더 코드

render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 1000,
    };
    return (
      <div className="Slider">
        <Slider {...settings}>
          {this.state.sliderList.map((data, idx) => {
            return (
              <div className="sliderItem" key={idx}>
                <img alt={data.name} src={data.src} />
              </div>
            );
          })}
        </Slider>
      </div>
    );
  }

슬라이더에 있는 사진 같은 경우, 백엔드에서 굳이 보내줄 필요가 없는 데이터이기 때문에 직접 data.js파일을 만들어서 import해왔다.

2) 베스트상품, 신상품, 세일상품 리스트

배민문방구의 메인 페이지에는 크게 3개의 상품리스트를 보여주고 있다: 베스트, 신상, 세일. 심플하게 4개 혹은 8개씩 보여주는 상품리스트 3개가 구현해야 했다. Display: Grid를 사용하여 4개씩 정렬했다.

일단 처음에는 Best.js, Sale.js, New.js로 따로따로 파일 만들어서 import해왔다...그런데, 아무래도 헤더와 4개(혹은 8개) 상품리스트라는 형식이 반복되다보니 코드가 똑같았다..! 🤯 여기서 다시 짚고 넘어가는 컴포넌트의 뜻: 재사용 가능한 UI 단위. 즉 세개의 다른 파일들을 한파일로 합쳐서 재사용이 가능했다. 그래서 나온 코드:

🌈 각 상품 박스 하나에 대한 코드 🌈

render() {
    return (
      <div className="ProductBox">
        <div
          className="productImage"
          style={{
            backgroundImage: `url(${imgSrc})`,
          }}
        >
          <div className="labelContainer">
            {isBest && <span className="isBest"> BEST </span>}
            {isNew && <span className="isNew">NEW</span>}
            {isSale && <span className="isSale"> SALE </span>}
          </div>
          <div className="hoverContainer">
            <div onClick={this.goToMyPage} className="hoverHeart">
              <i className="far fa-heart" />
            </div>
            <div onClick={this.goToCart} className="hoverCart">
              <i className="fas fa-shopping-cart" />
            </div>
          </div>
        </div>
        {sale > 0 && <span className="sale"> {saleNumber}%</span>}
        <p>{name}</p>
        {saleNumToInt === 0 && <p className="price">{originalPrice}원</p>}
        {sale > 0 && (
          <div className="priceContainer">
            <p className="oldPrice"> {originalPrice}원 </p>
            <p className="salePrice">{finalPrice}원</p>
          </div>
        )}
      </div>
    );
  }
}

조건부렌더링을 통해서 넘어노는 세일을 하는 상품일 경우 (세일 숫자가 0이 아닌게 넘어올경우) Sale이라는 라벨을 붙여주고, Best일경우 베스트를 붙여주고 신상품일 경우 New라는 라벨을 붙여줬다. 여기서는 기억하고 싶은 코드라기보단...계산식들을 구현하는게 재밌었다. 처음에는 백앤드에서 만약 10%세일 상품이라면 세일 숫자 10과 원래 가격을 넘겨주고 10과 원래 가격으로 세일가격을 찾는 수학계산을 프론트에서 해서 화면에 보여줘야했는데 멘토님들과의 리뷰후, 10을 넘겨주지 않고 0.10 이라는 숫자를 넘겨준다고해서 다시 바꿨다. 이래서 끊임없는 소통이 중요해...

🌈 각 상품의 할인율, 원래가격, 세일가격 계산식 🌈

    const saleNumber = this.props.sale * 100;
    const originalPrice = Math.ceil(this.props.price).toLocaleString();
    const finalPrice = (
      Math.round((this.props.price * (1 - this.props.sale)) / 100) * 100
    ).toLocaleString();

프론트에서 보여줘야하는 숫자들은 10 이라는 숫자와 원래가격, 세일가격이다. 그래서 모든 숫자들을 형식에 맞게 수식을 돌리고 백단위로 반올림을 하여 toLocaleString()을 통해서 천단위로 콤마를 찍어줬다.

그렇게 구현된 메인의 상품리스트~

하나씩 살펴본다면,

만약 할인율이 있다면 상품이름 위에 할인율을 보여주는 조건부렌더링을 통해서 구현했다. 메인페이지를 만들었는데 상품리스트 페이지 연습까지 된것 같아서 좋았다.

• 2020년 2월에 나는 몇년간 미루던 이직준비를 열심히해서 다른주! 다른회사!로부터 인터뷰 제의를 받고 열심히 인터뷰 준비중이였다.
• 그러다가 3월에 미국내 코로나가 아주 심각해지면서 모든 회사의 채용절차가 STOP⛔ 인터뷰 3번 해놓고 마지막 현장 인터뷰만 남았는데 그건 보게 해주지,,,
• 끝나가는 20대 ... 점점 굳어지는게 느껴지는 뇌 (기억이 안나...암산이 안돼...) 이대로 가다간 도태각이다! 싶었고 지금 코로나 상황이 심각해서 가족과 떨어져 혼자 미국에 있는게 너무 불안하여 길고 길었던 미국생활을 정리하고 2020년 8월에 귀국했다.

코딩을 왜 ...? 👩‍💻

• 사실 처음에 배우려고했던 제일 큰 이유는 워라밸 ... 그리고 연봉 ...
• 분명 나랑 같은 연차인 친구들이 나의 2배이상을 벌고 나보다 워라밸이 좋다..? 한달에 한번 당일통보로 오대양을 건너갈수도 있는 장거리 출장도 없고 몇년동안 일하면서 아시아계나 여자를 본적이 한손에 꼽고 (여자화장실도 없던 축구장 몇백갠지 몇천개 크기라고 자랑하던 네덜란드에 있는 그 회사ㅋ 평생 기억한다,,) 학교 다닐때 미식축구 했을것만 같은 덩치 산만한 백인 남자들이 주도하는 직종도 아니고. 코로나가 터지기전에도 재택근무를 하다니 ... 너무 부러웠다 ...

왜 프론트엔드..? 🤖

• 솔직히 백엔드하면 대학원 옵션도 넓어지고 비싼 내 기계공학 학위도, 꾸역꾸역 쌓아온 몇년간의 경력도 인정 받는쪽으로 어떻게든 취직도 해볼수있을것 같은데 아무리 생각해도 나는 프론트엔드가 적성에 맞다. 정말 몇달동안 고민을 많이 했는데 지금은 내가 배우고 싶은것을 배우는게 맞다고 생각해서 프론트로 정해버렸다.
• 확실히 눈에 보이는게 너무 좋다. 바로바로 확인할수 있으니깐 답답하지도 않고 디테일에 민감하게 반응하는 내 뇌를 보니 이거다 싶다. 👀

현재 나의 상황 🙉

• 처음엔 걱정이 되면서도 기대가 되었다.
• 답은 있지만 여러갈래의 길이 존재하고 어떻게 구현할껀지 전체적으로 기획하고 실행하는게 내 적성에 딱 맞다. 거기에 논리력까지 필요하다니. "아 대학때 이거 전공할껄 ....🤦‍♀️"
• ㅇㅈ. 나는 다른 전공자들에 비해서 8년 늦었다. 그래서 그냥 그 사람들이 지금까지 해왔던것을 단기간내에 발끝정도라도 따라잡기 위해선 그 사람들 몇배의 노력을 해야한다고 생각한다.
• 고등학교입시, 대학교입시때도 이렇게 공부 안했는데 ... 지금이랑 그때랑 다른건 내 돈으로! 내가 하고싶어서! 배우는거라 그런가? 진짜 하루종일 매일 매일 공부중이다. 부트캠프를 시작한후에 밤에 잠잘때 '오늘 하루 허투루 보냈구나,,,'라는 생각을 한적이 단 한번도 없는것 같다.
• 나는 몇년간 일하면서 "빡세게(?)" 머리를 쓰면서 살았던적이 없으니 (맨날 캐드로 그림만 그리고 기계만 만졌어 ...) 공부머리도 한동안 쉬어서 컨디션이 좋은건지 머리가 나름 20대 초반처럼 돌아가는것 같다 😁

앞으로 두달 남았는데 ... 🏃‍♀️🏃‍♀️🏃‍♀️

• 지금까지 달려온것처럼 남은 두달도 달릴 예정... 진짜 고등학교때 이렇게 공부했으면 하버드 갔다 🤪

🤐원래 이런거 진짜 안쓰는데 ... 건망증이 심해지는 요즘... 미래의 내가 이걸 보고 웃으라고 씀.

자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.

제한사항

N의 범위 : 100,000,000 이하의 자연수

입출력 예

나의 풀이

function solution(n){

return n.toString().split("").reduce((prev, curr) => prev+parseInt(curr),0)

}

와~ 한줄만에 끝냈다~~🥳

다른 사람의 풀이를 보고 리뷰

n=123
n.toString().split("") // [ '1', '2', '3' ]
a = (n + "").split("") // [ '1', '2', '3' ]

처음 받은 n을 배열안에 각각의 string으로 만드는 두가지 방법! 두번째 방법 같은 경우는 꼭 변수 선언을 해줘야한다.