본문 바로가기

전체 글89

2차 팀프로젝트 회고록 플로리다(Florida)✨ 1. 프로젝트 소개 플로리다 (Florida) 2차 프로젝트는 다들 난이도가 어느 정도 있는 사이트를 조사해왔다. 기능은 이커머스와 비슷하고 음악재생을 한다는 메리트에 나는 Vibe를 조사했고 다른 팀원도 Flo 사이트를 조사해왔다. Vibe가 좀더 많은 추천을 받았지만 2주라는 기간 내에 UI까지 완벽하게 만들 것을 생각하면 Flo가 좀 더 적합하다고 생각했기 때문에 플로를 선택했다. 진행 기간 2022.09.19 ~ 2022.09.30 (12일) 팀원 구성 프런트엔드 4명 (최승철/김진영/김충만/임지영) 백엔드 2명 (이신희/김교은) 기술 스택 프론트엔드 HTML/CSS JavaScript React Styled Component Vite 백엔드 Node.js ... 소통 Slack Notion Ze.. 2022. 10. 11.
React : 특정 url에만 컴포넌트 보여주는 방법 이번에 맡은 기능은 이전에 만들어두었던 메뉴에서 전체를 클릭했을때 MD's Pick 슬라이드가 나오도록 하는 거였다. 전체 선택시 MD's Pick이 나온다. 그외 메뉴를 누르면 상품만 나온다. 조금의 삽질이 있었지만 useParams 를 이용해 쉽게 구현할수 있었다. 아래는 내가 짜놓은 코드이다. {params.category === '전체' && } 먼저 내가 부분적으로 보여주고 싶은 부분을 컴포넌트로 만들고 useParam 를 이용해 params 값이 '전체'일때 Md's Pick 컴포넌트를 보여주게 설정했다. 2022. 10. 11.
React : 아이템 카테고리 메뉴 만들기 오늘은 내가 1차프로젝트를 하면서 구현한 Nav바에대해서 정리해보려고한다. 1. 카테고리별 버튼을 만들어둔다. 2. 버튼을 클릭했을때 해당 카테고리 URL로 이동한다. 3. 해당 URL로 이동되었을때 해당 카테고리 btn이 선택되게한다. ✅ 전체코드 더보기 전체코드 Item.jsx {/* 제품분류 [HOME > 대분류 > 소분류] */} HOME SHOES {category} {/* 제품 카테고리 (SHOES MAN WOMAN ..) */} {category} {/* 카테고리별 이동 링크 */} {['전체', '러닝화', '워킹화', '트레킹화', '스니커즈', '샌들', '아동화', '기타'].map(cate => { return ( {cate} ); })} 1. 카테고리별 버튼을 만들어둔다. {/* .. 2022. 10. 11.
React : useEffect사용법과 LifeCycle이란? 컴포넌트의 Lifecycle 이란 컴포넌트의 인생주기와도 같다. Q. 그게 무슨소리임...? 페이지에 불러와질때 (mount) 페이지에 이미지/숫자/텍스트등 변경이 될때 (update) 페이지에서 벗어날때 (unmount) 를 말한다. 우리는 이걸 알아야지 useEffect를 좀더 깊이있게 사용할수 있을꺼라고 나는 생각한다. Q. 그전에 useEffect가 정확히 무슨 역활을 하는Hook인데? useEffect는 mount / update / unmount 될때 코드를 실행시켜주는 Hook이다. Q. 그래서 왜 쓰는데? useEffect는 HTML이 모두 랜더링 된 이후에 실행된다. Q. 어쩌라고 그게 뭐 어쨌는데 자바스크립트 동작순서는 위에서부터 아래로 내려오면서 하나하나 코드를 읽어간다. 근데 만약 .. 2022. 9. 14.
React : URL에 따라 상품상세정보 보여주는 방법 (useParams 사용) 상품상세정보를 만들려고하면 우리는 고객이 해당 주소를 검색하거나 혹은 해당 상품을 눌렀을때 해당 제품이 보여지게 해야한다. 먼저 머릿속으로 정리를 해본다. 1. 상품데이터를 API로 받을때 id값을 같이받는다. 2. URL파라미터 문법을 사용해 페이지를 여러개 만들수 있게 만들어둔다. 3. 상품 컴포넌트 안에 데이터를 가져오는 배열 index에 해당 아이템의 id 값을 넣어준다. 추가 조건 + 상품 id 와 동일한 URL을 적었을때 해당 상품을 보여주게 한다. 1. 상품데이터를 API로 받을때 id값을 같이받는다. 우리는 마지막에 저 id의 숫자를 URL에 입력했을때 해당 상품이 뜨게 할것이다. 2. URL파라미터 문법을 사용해 페이지를 여러개 만들수 있게 만들어둔다. path='/detail/:id' .. 2022. 9. 13.
React : 페이지안에 페이지를 만들어주는 Nested Routes /Item/man 으로 접속하면 남성상품을 보여주고 /Item/woman 으로 접속하면 여성상품을 보여주고싶을때는 어떻게 할까? // 남성상품 컴포넌트 2022. 9. 13.
React : 없는페이지에 접속했을때 404페이지 만들기. 유저가 만약 이상한 경로로 접속했을때 "없는 페이지입니다" 혹은 "잘못된 경로입니다" 같은 페이지를 보여주고싶을때는 path 에다가 경로를 *로 지정해주면된다. ⬇️ 코드 ⬇️ 결과화면 2022. 9. 13.
React : 프로젝트 시작하는 방법 리액트 프로젝트를 시작할때 프로젝트를 생성하는 방법은 먼저 폴더를 생성후 폴더를 우클릭>서비스>폴더에서 새로운 터미널 열기를 눌러준다. 터미널창에 ⬇️ 아래와 같이 입력해준다. npx create-react-app 폴더명 입력할때는 한글로 작성하면 안되고 영어로 작성을 해주어야 한다. 입력을 하고 엔터를 눌러주면 설치가 진행되고 설치가 완료되면 아래와같은 화면이 뜬다. ⬇️ ⬇️ 해당 폴더에 내가 지정한 폴더명으로 폴더가 만들어지고 안으로 들어가보면 이렇게 파일이 세팅되어있다. 이제 vscode로 폴더를 열어주고 터미널 창에 아래와 같이 작성해주면 웹페이지에 프로젝트가 실행된다 npm start 위에처럼 뜨면 성공! 이제 프로젝트를 시작하면된다. 2022. 9. 13.
부트캠프(저스트코드)를 다니면서 느낀점 그리고 달라진 점 글쓴이는 앞서 말했듯이 국비 2달을 다니고 부트캠프를 알아봤다. 국비는 프론트엔드 개발자보단 퍼블리셔 및 인터랙티브 기술에 좀 더 치우쳐져 있는 느낌이었다. 나름 개인 프로젝트도 진행했고 기획부터 디자인까지 해봤으니 좀 더 자신만만했다. ??? : 다 잦밥이쥬~? 다 죽었쥬~? 1. 사전 스터디 난 국비를 다니면서도 자바스크립트부터 막혀서 따라 치는 수준으로 겨우겨우 수업을 따라갔다. 그래서 이번 기회에 자바스크립트를 좀 더 집중적으로 파야겠다 생각이 들어 자바스크립트 위주로 공부를 진행했다. 간단한 미션이 있지만 그 미션은 절대로 쉬운 미션이 아니라고 말하고 싶다. 말로는 간단한 게임 만드는 미션이라고는 하는데 누구 기준에서 간단하다고 적은 건지 사실 모르겠다.. ??? : Hoxy.. 내가 잦밥이었던.. 2022. 9. 11.
1차 팀프로젝트 회고록 프로스펙스(Prospecs)✨ 2주가 어떻게 지나갔는지 기억이 안날정도로 빨리 지나갔다.. 다행히도 서로 의견존중해가면서 진행했기에 트러블없이 좋게좋게 프로젝트가 마무리되었다. 1. 프로젝트 소개 프로스펙스 (Prospecs) 우리팀은 1차프로젝트로 프로스펙스 사이트를 큰론하기로했다. 1차프로젝트를 이커머스로 해보는것이 기본적인 로그인/회원가입/장바구니 기능이 있기도하고 홈페이지 또한 인터렉티브한 애니메이션이 들어가있어서 좀더 우리팀의 마음을 흔들어 놓은거 같다. 진행기간 2022.08.29 ~ 2022.09.07 (10일) 팀원구성 프론트엔드3명 백엔드2명 기술스택 프론트엔드 HTML/CSS JavaScript React Styled Component Vite 백엔드 Node.js ... 소통 Slack Notion Zep 구현기능.. 2022. 9. 10.
React : Props(프롭스) 정리 Props란? - Props는 Properties의 줄임말이다. - 부모 컴포넌트가 자식컴포넌트에게 전달해주는 값이다. - 리액트에서 props를 값을 읽기 위해서만 사용한다. 값을 변경하려면 오류가 발생한다. 1. 기본적인 문법 부모 컴포넌트 import 자손컴포넌트명 from '자손컴포넌트경로'; function 부모컴포넌트(){ return( ); } - 이떄 자손컴포넌트를 불어오는 부모컴포넌트가 자손컴포넌트태그에 주는 속성명의 값을 props라고 한다. 자손 컴포넌트 import React from 'react'; function 자손컴포넌트(props){ return( {props.속성명} ) } export default 자손컴포넌트 - 이때 속성명은 부모가 자손태그에 내려준 속성명이다 기본예.. 2022. 8. 19.
React : JSX 문법 정리 JSX란 ? - Javascrpt XML의 약자이다. - 리액트에서 UI를 표현할 때 쓰는 문법이다. - 자바스크립트의 확장문법 XML과 매우 비슷하게 생겼다. - 브라우저에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환해준다. - HTML코드와 비슷하게 작성하기 떄문에 쉽고 익숙하다. - 컴포넌트들도 HTML태그 쓰듯이 작성해 활용도가 높다. JSX문법 1. 태그는 최상위 태그로 감싸주어야 한다. - JSX문법은 요소를 반드시 하나이 요소로 묶어주어야 한다. 태그로 감싸주기 import React from 'react'; const App = () => { return ( Hello! React! ); }; export default App; div로 크게 묶는 것도 한가지 방법.. 2022. 8. 19.

티스토리툴바