분류 전체보기
-
[1차 프로젝트] 상세페이지에 리뷰기능 추가하기프론트엔드 개발자가 될거야./react 2022. 7. 31. 23:12
https://www.le-jour.com/goods/goods_view.php?goodsNo=1000000035&mtn=23%5E%7C%5ELe+Jour+Set%5E%7C%5En# 르주르 베이비 세트 르주르 www.le-jour.com 클론코딩한 Magazine B의 상세페이지에는 리뷰기능이 없다. 그래서 이 사이트의 리뷰기능을 참고하여 Magazine B의 상세페이지에 리뷰기능을 추가구현하기로 했다. 이렇게 상세페이지 아래에 추가될 예정! 이었지만… 눈에 띄는 더 큰 별점이 있었으면 좋겠어서 이렇게 수정하기로 했다. 내가 디자인하고 내가 개발하는 거라 혼자 내린 결론이다. ㅎㅎ 어차피 back에게는 선택한 별점이 몇인지, 무슨 리뷰를 달았는지만 전달해주면 되기 때문이다. back과의 통신이 세 번 필..
-
[위코드 1차 프로젝트 회고(2)] 팀 프로젝트에 대한 회고회고록 2022. 7. 31. 19:13
https://jeongeuni.tistory.com/47 [위코드 1차 프로젝트 회고(1)] 기능 구현에 대한 회고 7월 18일 ~ 7월 29일 , 약 2주간 프론트 3명, 백엔드 2명으로 구성된 팀으로 Magazine B라는 웹사이트를 클론코딩하는 프로젝트를 진행했다. 팀명은 '매거진 KILL 🥷🏻' 로 매우 강력해보이는 팀명인데 jeongeuni.tistory.com 우리팀이 처음에 필수 구현 목표로 잡은 flow이다. 회원가입&로그인 페이지 -> 상품리스트 페이지 + 네브바 -> 상품상세 페이지 + 메인페이지(간단하게 Carousel만) -> 장바구니 페이지 -> 결제 페이지 메인 페이지가 매우 간단하여도 일단은 커머스 사이트로서의 구성을 갖춘 것이기에 Carousel 이외의 부분은 필수 구현 사..
-
[위코드 1차 프로젝트 회고(1)] 기능 구현에 대한 회고회고록 2022. 7. 31. 17:22
https://jeongeuni.tistory.com/48 [위코드 1차 프로젝트 회고(2)] 팀 프로젝트에 대한 회고 https://jeongeuni.tistory.com/47 [위코드 1차 프로젝트 회고(1)] 기능 구현에 대한 회고 7월 18일 ~ 7월 29일 , 약 2주간 프론트 3명, 백엔드 2명으로 구성된 팀으로 Magazine B라는 웹사이트를 클론코딩하는 프.. jeongeuni.tistory.com 7월 18일 ~ 7월 29일 , 약 2주간 프론트 3명, 백엔드 2명으로 구성된 팀으로 Magazine B라는 웹사이트를 클론코딩하는 프로젝트를 진행했다. 팀명은 '매거진 KILL 🥷🏻' 로 매우 강력해보이는 팀명인데 그만큼 열정을 담아 열심히 하자는 의미로 이렇게 지었다. 이 험한 세상..!..
-
RESTful API : path parameter, query parameter프론트엔드 개발자가 될거야./react 2022. 7. 24. 22:08
RESTful API란 무엇일까? api시스템을 구현하기 위한 아키텍쳐 중에 가장 널리 사용되는 형식으로 Representation State Transfer의 줄임말이다. 말 그대로 해석해보면 대표하고, 드러내고, 나타내는 느낌으로 딱 보자마자 무슨 말인지 알 수 있어야한다는 뜻이다. 다시 정리해보자면 웹상에서 사용되는 여러 리소스를 HTTP URL로 표현하고 그 리소스에 대한 행위를 HTTP Method로 정의하는 방식인데 RESTful API는 URL을 딱 보자마자 무엇을 의미하고 목적이 무엇인지 알 수 있다. 종류는 두가지 1. path parameter 상세페이지에 사용 2. query parameter 필터링, 오더링, 페이지네이션, 써치 상품리스트페이지에 사용 프로젝트를 하면서 사용해본 후기..
-
props 제대로 이해하기프론트엔드 개발자가 될거야./react 2022. 7. 24. 10:47
부모 요소 Parent 자식 요소 Chlid import React from "react"; import Child from "./Child"; const Parent = () => { const sayHello = () => { alert("안뇽~") } // 이렇게 주는 것 처럼 똑같이 key:value형태로! // string이외의 형태는 자바스크립트 형태로 보내줄 수 있어 html에서는 안되니까 return ( ); }; export default Parent; Props 자식요소에게 전달하기 - 이렇게 주는 것 처럼 똑같이 key:value형태로 전달해야한다. - html에서는 string만 되고 나머지는 안되니까 string이외의 형태는 {}안에 넣어 자바스크립트 형태로 보내줄 수 있다. im..
-
react 리팩토링프론트엔드 개발자가 될거야./react 2022. 7. 24. 10:16
멘토님에게 코드리뷰를 받아 리팩토링을 진행한 것에 대해 정리해보려고 한다. {prdDetailData.main_category_name} ISSUE NO.{prdDetailData.issue_number} {prdDetailData.title} ₩{prdDetailData.price},000 리팩토링이 필요한 부분 1. 상단에서 구조분해할당을 통해 prdDetailData로 매번 접근하는 것을 줄일 수 있다. 2. h4 태그를 사용하려면 순차적인 규칙에 따라 h1~h3까지 해당 페이지 내에서 사용되어야 한다. const Detail = ({ prdDetailData }) => { const { date, description, detail_img_url, isbn, issue_number, languag..
-
instagram 클론코딩 : westagram 총정리👩🏻💻프론트엔드 개발자가 될거야./react 2022. 7. 17. 12:26
instagram을 클론코딩하여 간단한 login페이지와 main페이지가 있는 westagram을 만들었다. 까먹을까봐 정리해두려고 한다! 1. vsc 구성 - .vscode에는 settings.json - public에는 mock data폴더, images폴더, index.html - src에는 components폴더, pages폴더, styles폴더, index.js, Router.js - index.js인데 Router를 index.html에 있는 root로 렌더하고 있다. 이렇게하면 SPA가 가능하다. - Router.js이다. 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주기위한 Router! 일단 react-router-dom을 다운받아야한다. npm install react-r..
-
Mock data프론트엔드 개발자가 될거야./react 2022. 7. 15. 17:24
데이터에는 기획에 따라 구분이 달라지기 때문에 정답은 없지만 두가지 종류가 있다. 1. 정적인 데이터 => 상수데이터로 관리 예를들어 footer처럼 잘 변하지 않는 데이터를 의미한다. 2. 동적인 데이터 => mock data로 관리 수시로, 시즌마다 바뀌는 데이터를 의미한다. 여기서는 동적인 데이터 mock data에 대해 다뤄보려고 한다. Mock data 동적인 데이터는 프론트에서 관리하지 않는다. 백엔드에게 받아와야한다. 그런데 백엔드가 항상 내가 원하는 시점에 API를 만들거라는 보장이 없다. 그래서 일단 백엔드와 통신하지 않아도 먼저 mock data를 구성해놓아야한다. 또한 후에 백엔드와 통신해서 API를 받을 것이니 백엔드와 이야기를 한 후 어떻게 mock data를 구성할지 정해야 한다..