리액트7 버튼에 따라 다른 UI 구현하기 클론코딩을 했던 배민문방구 사이트에서는 상품정보, 기본정보, 상품후기 버튼 클릭 시 다른 ui를 보여주고 있었다. 우리 사이트의 유저가 사용하기에도 적절하다고 생각되어 그대로 진행을 하자고 기획을 했다. 객체로 값 관리하기 상품정보는 first, 기본정보는 second, 상품후기는 third로 키값을 지정해주고 value 부분에는 각각에 해당하는 ui를 넣어주었다. 지금 생각해보니 first, second, third로 변수를 지정하기보다 각각에 맞는 변수 이름을 지어주는것이 더 좋았을 것 같다. value에는 코드가 길어질 경우 컴포넌트로 분리해서 넣어주었다. const MAPPING_OBJ = { First: , Second: , Third: 앗!! 후기가 없어요 ㅠㅠ, }; useState로 변경되.. 2023. 8. 10. hover 시 이미지 및 글자 색 바뀌도록 구현하기 우리 사이트에서 유일한 재사용 컴포넌트가 아래에 적어내려갈 상품 미리보기 컴포넌트이다. 메인과 상품 리스트 그리고 상품 상세페이지에 들어갈 컴포넌트이기 때문에미리 분리 작업을 했었다. 그리고 제일 먼저 작업을 해 main으로 merge해 이후 작업에서 바로 쓸 수 있도록 활용했다. 처음 시작을 할때엔 hover 시 이미지가 바뀌는 것이니까 css의 hover 속성을 이용해서 해보려고 했으나 바뀌어야하는 이미지가 db에서 받아와야하는 데이터라서 할 수 없었다. 다른 방법을 찾은 결과 event 중 mouseOver 와 mouseOut이 있었다. 그래서 이번엔 event를 사용해 이미지를 바꿔주는 작업을 해보려고 한다. 만약 styled-components를 사용한다면 js 파일에 css를 적을 수 있기때문.. 2023. 8. 9. 전체동의, 부분동의가 있는 Sign Up 구현하기-1 모티브로 삼았던 페이지의 회원가입이 두 페이지로 나눠져있어 우리도 동일하게 진행을 하기로 했다. 회원가입도 금방하겠지라고 생각을 했었는데 약관동의가.. 엄청나게 큰 산이었다. 하나의 state로 관리를 하지만 체크박스 하나하나가 따로 작동을 해야하고 전체동의 체크박스를 누르면 또 같이 연동되어 움직어야하는 부분이 너무 어렵게 느껴졌었다ㅜㅜ 그래서 멘토님의 말씀대로 손코딩을 하면서 진행해보았다. 최종적으로 첫번째 페이지에서 내가 구현해야하는 내용을 글로 적어보자면 아래와 같다. 1. 전체동의 체크박스 클릭 시 모든 체크박스가 체크 될 것 2. 하나라도 해제하면 전체동의 체크박스가 해제 될 것 3. 필수 체크박스만 체크하더라도 버튼이 활성화 될 것 일단 먼저 state로 체크박스를 관리해준다. 계산된 속성명.. 2023. 7. 11. 간단하게 Sign In 구현하기 로그인 페이지로 생애 첫 프로젝트를 시작했다. 로그인 페이지는 기존에 하던것과 다른 부분이 GET 요청 뿐이라서 어려움없이 진행할 수 있었던 것 같다. 기획 단계에서 로그인 페이지에 아이디 저장을 하자고 해서 localstorage를 이용해 아이디를 저장해두고 그 값을 defalut value로 불러와 구현을 하였다. 하지만 실제 프로젝트에는 제외하게 된 이유가 2가지가 있다. 첫번째는 추가로 defalut value에 있는 값과 한 글자라도 바뀌게 되면 아이디저장 체크박스가 해제되도록 하고 싶었는데 구현하기가 너무 까다로웠다. 두번째로는 defalut value로 관리를 하다보니 백엔드에게 데이터를 보낼때 인식을 못해서 값이 안 가는것이었다. 두번째 이유로 결국 아이디저장을 추후에 구현하는 것으로 했고.. 2023. 7. 11. 1차 프로젝트 회고록 & 위코드 5주차 1. About team Seoulminer - mining codes 개발기간: 2023.06.23 ~ 2023.07.07 깃헙 링크 : FrontEnd, BackEnd Clone Coding project - 배민문방구 웹 개발의 첫 걸음을 뗀 seoulminers는 사람들이 가장 일상적으로 영위하는 행동 중 하나인 상거래를 웹페이지로 구현해 보기로 했다. 그러던 중 우리의 눈에 발견된 우아한형제들의 우아한 브랜드, 배민문방구 우리에게 주어진 시간은 단 2주. 2번만의 스프린트 안에 최대한 클론 할 수 있는 범위 내에서 우당탕탕 이나마 굴러가는 프로덕트를 만들어 내야 한다. 우리가 구현해야 할 행위 - 전자상거래 인터넷이 우리 생활에 보급된 이래, 사람들이 현실세계에서 영위하는 행동들 중 많은 수가 .. 2023. 7. 10. addEventListenser 총정리 자바스크립트는 동적인 언어이기때문에 이를 잘 활용하기 위해서는 내 기준 event 메소드를 쓰는 것이 중요한 것 같다. 다른 문법들을 같이 섞어 써야하지만 addEventListenser 메소드로 사용자의 행동을 이끌어줄 수 있기 때문이라고 생각한다. 그래서 오늘은 자바스크립트의 addEventListenser를 샅샅히 살펴보려고 한다. 먼저 addEventListenser의 구조는 아래와 같다. DOM의 타겟.addEventListenser(event타입, 실행될 함수, 옵션) 하지만 우리는 리액트를 사용하고 있고 그런 경우 더 쉽게 이벤트를 적용할 수 있다. 중괄호 안에는 콜백함수도 들어갈 수 있고 함수를 따로 넣어줄 수도 있는데 함수명만 넣어주는 경우 별도의 따옴표 없이 함수명만 넣어주면 된다. a.. 2023. 6. 25. 이전 1 2 다음
