본문 바로가기

전체 글122

여러개의 모달을 하나의 state로 관리하기 이번 프로젝트는 main에서 바로 리스트 노출이 되기 때문에 여러 모달을 한번에 관리해주어야했다. 더군다나 여태까지 작업할 땐 파일 한개에 모달이 한개여서 1모달 1state라 문제 없이 잘 작동하였는데, 여러 모달에 state는 하나라 한개를 누르면 다같이 모달이 열리는 것이다. 마치 왼쪽의 사진처럼 말이다. 그래서 하나의 state로 여러 모달을 관리하는 방법을 아래에 기술하도록 하겠다. useState 선언 및 함수 만들기 먼저 모달을 열고 닫을 수 있도록 isOpen이라는 boolean 값을 가진 state를 선언해준다. 이때 우리는 단순히 boolean으로 적었지만 앞으로 isOpen은 {id: boolean}처럼 생긴 객체로 관리될 것이다. const [isOpen, setIsOpen] = u.. 2023. 8. 16.
[기업협업] 2주차 회고록 벌써 2주차라니! 이 기업에 2주를 출근하면서 느낀 점이 분위기가 참 좋다는 것이었다. 사실 전적직장을 그만둘 때에 팀원들이 너무 좋았고 혹 다른 직장을 가게된다면 이렇게 좋은 사람들을 또 만날 수 있을까에 대한 막연한 두려움 때문에 그만두는걸 한참을 고민했었다. 고작 2주이지만 이 기업내의 분위기가 너무 좋아서 다른 회사를 가게 되더라도 또 좋은 사람들을 만날 수 있을거라는 희망이 생겼다. 특히 염색을 하고 왔더니 알아봐주시고 새로운 기획이 배포가 되면 다같이 응원해주면서 사기를 증진시켜주는 것도 좋게 느껴졌다. 팀뿐만 아니라 전체적인 기업 분위기가 좋아서 어쩌면 힘든 일들도 좋게 기억될 수 있겠다는 생각이 들었다. 1주차에도 새로 알게 된 것들이 정말 많았지만 2주차에도 새로 알게된 것이 정말 많다... 2023. 8. 14.
[기업협업] 1주차 회고록 개발자로서의 첫 기업 경혐을 시작하며 사회생활을 한번도 안해본건 아니지만 개발자로서의 사회는 또 처음이라서 긴장도 걱정도 많이 했다. 걱정과는 다르게 팀장님께서도 자주 들여봐주시고 챙겨주셔서 배울 것들이 되게 많았다. 궁금한게 있을 때쯤 와주셔서 먼저 물어봐주시고 챙겨봐주셨다. 사실 기업협업을 나간다고 했을 때 그저 회사 코드를 볼 수만있어도 성공이다 라고 생각을 했었는데 일까지 주셔서 너무 좋았다. 우리가 짠 코드는 감자일거고 잘못 만져서 문제가 생길 수도 있지만 그럼에도 불구하고 경험해보라고 일을 준다는게 감사했다. 그 감사함에 보답하기 위해 최대한 열심히 잘해봐야지 라고 생각을 하고 작업을 했지만 생각보다 순탄하게 흘러가지만은 않았다.. 학원에서 프로젝트를 하면서 매일 stend up meeting.. 2023. 8. 14.
쿼리스트링과 useParams 사용해 원하는 정보만 받아오기 현재 상품의 카테고리에 맞는 추천 상품 리스트 노출하기 상품 리스트를 불러올 때도 쿼리스트링을 이용했지만 그땐 path를 하드코딩으로 입력했었다. 이번에는 쿼리스트링을 변수로 처리해보았다. 전체를 다 쿼리스트링을 이용할 수도 있지만 이번에는 무조건 카테고리값만 가져올 것이고 카테고리의 id 값만 변경되기 때문에 좀 더 수월하게 작업할 수 있었다. 먼저 데이터를 받아올 usState를 선언한다. 그리고 useEffect 안에 fetch 함수를 호출한다. 이때 api의 end point는 products/list 까지이고 물음표 이후로는 쿼리스트링이다. 백엔드에서 보내준 쿼리스트링 중 이번에 사용할 것은 세가지다. 데이터를 몇번째부터 불러올지 결정하는 offset, 몇개까지 노출할지 결정하는 limit, 마.. 2023. 8. 11.
버튼에 따라 다른 UI 구현하기 클론코딩을 했던 배민문방구 사이트에서는 상품정보, 기본정보, 상품후기 버튼 클릭 시 다른 ui를 보여주고 있었다. 우리 사이트의 유저가 사용하기에도 적절하다고 생각되어 그대로 진행을 하자고 기획을 했다. 객체로 값 관리하기 상품정보는 first, 기본정보는 second, 상품후기는 third로 키값을 지정해주고 value 부분에는 각각에 해당하는 ui를 넣어주었다. 지금 생각해보니 first, second, third로 변수를 지정하기보다 각각에 맞는 변수 이름을 지어주는것이 더 좋았을 것 같다. value에는 코드가 길어질 경우 컴포넌트로 분리해서 넣어주었다. const MAPPING_OBJ = { First: , Second: , Third: 앗!! 후기가 없어요 ㅠㅠ, }; useState로 변경되.. 2023. 8. 10.
장바구니에 아이템 추가하고 결제하기까지 우리 사이트의 결제 로직은 '장바구니에서 결제로 가기'와 '상세페이지에서 바로구매를 통해 결제로 가기' 두가지가 있었다. 이번에는 '장바구니에서 결제로 가기'에 대해 이야기 해보려고 한다. 바로구매 버튼을 통해 결제로 가는 내용은 이글을 클릭하면 확인할 수 있다. 장바구니와 연결된 백엔드 api에 post 요청 보내기 유저가 수량과 가격을 확인 후 장바구니 버튼 클릭 시 백엔드에게 post요청을 보낼 수 있는 함수를 onclick을 사용해 연결해주었다. 먼저 버튼에 onclick을 통해 goToCart라는 함수를 연결해주었다. goToCart()} > 장바구니 그리고 goToCart함수 안에 fetch 함수를 호출해주었다. 백엔드쪽에서 header에 token값을 보내달라고 요청했기때문에 넣어주었고 bo.. 2023. 8. 10.

티스토리툴바