프론트엔드 개발자가 될거야./react
-
[위코드 2차 프로젝트] 제주패스 클론코딩 : menu Tap 구현하기프론트엔드 개발자가 될거야./react 2022. 8. 7. 10:50
이번 2차 프로젝트로 제주패스를 클론 코딩한다. 나는 꽤 중요한 모달 부분을 맡았다! 이 모달에서 도착지, 출발지, 탑승일(캘린더 라이브러리), 인원 및 좌석등급을 선택해줘야 하기 때문이다. 중요한 부분을 맡았으니 열심히 책임감을 가지고 해보려고 한다. 모달에는 tap 기능이 참 많다. 첫번째로 위의 사진처럼 항공, 자동차, 숙박, 맛집, 카페의 menu tap이 있다. 비행기를 누르면 항공에 대한 탭이 나오고 자동차를 누르면 자동차에 대한 탭, 숙박을 누르면 숙박에 대한 탭 ... 탭 지옥(?)이다. 두번째로는 위에서 볼 수 있듯이 항공에 대한 탭에 또 탭 기능이 있다. 도착을 선택했을 때, 출발을 선택했을 때, 탑승일을 선택했을 때, 인원 및 좌석등급을 선택했을 때의 레이아웃이 모두 다르다.. 레이아..
-
[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과의 통신이 세 번 필..
-
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를 구성할지 정해야 한다..
-
useEffect와 side Effect프론트엔드 개발자가 될거야./react 2022. 7. 13. 22:50
react Hook 중에 하나인 useEffect. useEffect는 무엇일까? useEffect를 알기 전에 먼저 side Effect를 알아야 한다. side Effect side Effect는 우리말로 부작용, 부수효과로 해석된다. 근본적인 역할 대신에 부수적인 효과가 있거나 특정 목적 대신에 다른 행위가 발생할 때 부작용이 있다. 부수효과가 있다.라고 말할 수 있다. 이 개념을 React에 적용해보자. React의 함수 컴포넌트 자체는 input(인자)로 state, props를 받아 output으로 UI를 그려내는 것이다. 그런데 UI를 그려내지 않고 그 이외의 행위를 하면 side Effect가 일어났다고 할 수 있다. let count = 0 function greetWithSideEffe..