개인프로젝트/CHAM

[CHAM] 하위 컴포넌트에서 값 받아오기, 주기

하위 컴포넌트에서 set함수를 받아 부모 컴포넌트의 state값을 변경해주려고 한다. redux를 이용하면 너무 양이 많아질것 같고 props로 넘기기엔 부모와 자식간의 사이에 컴포넌트들이 많았다. 그래서 좀더 효율적인 방법이 없을까 고민하다가 useContext라는 훅을 찾아냈다. 1. useContext useContext는 부모에서 하위컴포넌트로 값을 전달할 수 있다. 기존 props와 다른 점은 중간다리 역할이 없어도 멀리 있는 하위 컴포넌트에 곧바로 전달할수 있다는 점이었다. 이를 사용하면 redux관리, props관리도 쉬울것 같아서 useContext를 쓰기로 생각했다. 2. useContext 사용법 (1) : useContext로 데이터 보내기 useContext에서 전달하는 값은 '객체..

[CHAM] image 올리기

백엔드에서 multer를 이용해서 이미지를 저장후 프론트에서 불러오려고 했다. 하지만 react에서 상대경로로 backend 폴더의 이미지 경로를 불러오지 못했다. react에서는 public폴더를 제외하고 src폴더 외부의 파일을 불러오지 못한다는것을 검색하며 알아냈다. 그래서 multer의 저장장소를 front의 public 폴더에 저장했다. 그렇게 src="절대경로" 로 불러 왔는데 어딘 되고 어딘 안나와서 구글링을 했다. 그 결과 절대경로 앞에 "/" 를 붙여줘서 public 폴더라는 표시를 해줘야 했다. 이미지 경로를 불러오는 걸 구글링하며 이미지 src를 불러오는 방법이 4가지가 있다는 것을 알게되었다. 1. public 폴더에 저장후 절대경로 public 폴더에 imgs폴더를 만들어 이미지들..

[CHAM] 드래그 슬라이드 만들기

처음엔 그냥 swiper에서 긁어올까 생각도 했지만 나중엔 긁어다 쓰더라도 한번은 직접 만들어보고자 직접 만들었다. 슬라이드 또한 재사용성이 가능하도록 슬라이드와 내용물을 따로 컴포넌트화 시켰다. 드래그 단계화 드래그를 하는데 우선 3가지 단계로 나누었다. 1 : MouseDown 2 : MouseMove 3 : MouseUp 1. MouseDown index와 left는 state값으로 관리하여 값이 바뀔때마다 rerender 시켜주었다. 먼저 MouseDown으로 드래그를 시작한다는 것을 표시했다. MouseUp을 했을때 transition을 주고 싶어서 MouseDown과 MouseUp의 transition속성을 따로 관리했다. const [index, setIndex] = useState(0); ..

[CHAM] label 위치 옮기기

1. 회원가입 모달창 회원가입 모달창에서 나는 기존 방식을 벗어나 좌우로 한칸씩 넘기는 UI를 만들기로 했다. 이때 해당 입력하는 Input의 위치를 알려주는 레이블을 만들었다. 1) 레이블 만들기 레이블의 색깔을 넣어주기 위해 index를 state로 만들어 관리했고 화살표 버튼을 누를때마다 조절해줬다. 그 레이블이 index가 x일때 초록색으로 바뀌게 코드를 짰다. 2) 리팩터링 7개를 늘어놓은게 너무 길어보였고 보기 싫었다. 그래서 map을 통해 반복하여 만들기로 했다. {new Array(8).fill(0).map((v, idx) => ( ))} 그래서 위와 같이 코드를 간단하게 줄였다. 나중에 알게된 사실이지만 styled-component에 props를 넘겨 삼항연산자로 처리할수 있었다.

[CHAM] style.display 적용이 안됨

react에서는 기존 js처럼 style.display가 안먹었다. 다른 방법을 찾다가 삼항연산자를 이용하여 display를 조절하기로 했다. 이런식으로 style을 조절했다.

[CHAM] 모달창 만들기

라우팅을 많이 쓰지 않고 버튼들과 모달창을 컨셉으로 홈페이지를 만들려고 했다. 그렇기 때문에 이 홈페이지에서 모달창이 차지하는 비중은 클것이라고 생각했고 컴포넌트화에 신경썼다. 모달만들기 컴포넌트화를 위해서는 코드를 작성하기전 구조를 먼저 파악하고 어떤식으로 구성을 할지 미리 생각해야했다. 이 부분을 생각하면서 처음에는 정말 힘들었지만 구조가 이해될수록 할만 하다는 생각이 들었다. 그렇게 모달을 만드는 순서를 3가지로 정리했다. 1. 모달창을 띄우는 버튼 생성 2. 버튼의 텍스트를 받는 곳 3. 텍스트에 따라 다른 컴포넌트 모달을 띄운다. 1. 모달창을 띄우는 버튼 Modal_btn.js import React, { useState } from "react"; import Modal from "./Mod..