Timeline

컴포넌트에 styled-components로 style 주는 법 blocker: Link 컴포넌트에 styled-components로 style 주려고 하니 문제가 있었습니다 다른 html 태그와 달리 Link는 컴포넌트였기 때문에 같은 방법으로 적용해줄 수 없었습니다 그래서 우선 해당 페이지의 Devtools(command+option+i)를 열어 elements tab을 확인해보니, Link가 a 태그로 표시되어 있었습니다 그래서 styled-components를 사용할때는 a태그로만 사용가능한건가 생각하고 a 태그로 바꿔주니, 당연하게도 의 to로 페이지 이동하는 부분을 사용할 수 없었습니다 해결방법: 제가 만들고 있는 페이지 외부로 이동하는 것이 아니라 꼭 Link 태그를 써야했고 여기서 멘토님의..

내가 짠 코드 const [isSame, setIsSame] = useState(false); const onChangePasswd = () => { if (passwd === passwdCheck) { setIsSame(true); } else { setIsSame(false); } }; 문제점 passwd와 passwdCheck를 동일하게 입력해도 isSame은 false가 나왔고, passwdCheck에 값을 하나 더 입력해줘야 true가 나왔다 실제로, passwd:aaa, passwdCheck:aaaa를 입력해야 true가 나왔다 위의 과정은 console.log로 passwd, passwdCheck, passwd === passwdCheck, isSame을 모두 확인해본 뒤 알게되었다(cons..

0. aws란? 아마존에서 제공하는 클라우드 서비스입니다 클라우드 서비스이기 떄문에 사용자는 직접 물리적인 서버 장비를 구입하거나 설치할 필요없이 원격으로 사용할 수 있습니다 1. regions, edge location이란? regions : 전 세계 데이터 센터를 클러스터링하는 기준이 되는 물리적 위치입니다 사용자와 리전이 가까울 수록 네트워크 지연을 최소화할 수 있습니다 edge location : aws의 cdn(content delivery network) 서비스인 cloudFront의 캐싱 콘텐츠가 위치하는 곳입니다 cdn 엣지가 사용자 근처에 있을수록 더 빨리 전달받을 수 있어 리전과 별도로 더 많은 도시 곳곳에 분포되어 있습니다 캐싱이란? 기본 데이터 저장소 앞에 데이터 복사본을 저장합니다..

0. 프로젝트 소개 스포츠 용품을 판매하고 도전이라는 가치를 전달하는 온라인 커머스 플랫폼 나이키 모티브 코딩 프로젝트입니다. 나이키는 웹페이지에서 회원가입 시 얻을 수 있는 혜택을 강조하고 간편한 회원가입 절차를 통해 회원가입을 유도하고 있습니다. 이를 위해 배송이 중요한 사이트이나 회원가입시 주소를 입력받지 않고 결제 시 정확한 주소를 입력하게 합니다. 또한 주문 시에 회원인 경우 무료 배송임을 강조하여 회원이 얻을 수 있는 혜택을 강조합니다. 개발기간 : 2023.02.06 - 2023.02.17 (약 2주) frontend github : https://github.com/wecode-bootcamp-korea/42-1st-Naweki-frontend backend github : https://..

회원가입과 비슷한 기능으로 여러 input 값을 useState()를 통해 전달했습니다 아래 링크에서 구현된 모습을 확인할 수 있습니다 https://user-images.githubusercontent.com/84219519/219610213-39078ab4-bb1c-4031-82e1-8b6da556143b.gif import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './ShippingOptionInput.scss'; const ShippingOptionInput = () => { const [toShippingOption, setToShippingOption] = useState(f..

나이키 웹 페이지를 모티브로 프로젝트를 진행하며 제품 전체 리스트 페이지에서 필터링과 페이지네이션 기능을 구현했습니다 아래 링크에서 어떻게 동작하는지 확인할 수 있습니다 https://user-images.githubusercontent.com/84219519/219604155-77b27b5b-8df3-42df-b837-babef7e08f93.gif js 파일 import React, { useEffect, useState } from 'react'; import { useLocation, useSearchParams } from 'react-router-dom'; import Aside from './Aside/Aside'; import Banner from './Banner/Banner'; impor..

구현할 메뉴의 예시입니다 위에 7가지 메뉴가 적혀있는 부분을 menu로, menubox에 mouseenter 시 드롭다운되는 메뉴를 newmenubox로 칭하겠습니다 JSX 부분 menu.js import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import { MENU_DATA } from '../data/menuData'; import NewMenuBox from '../NewMenuBox/NewMenuBox'; import OtherMenuBox from '../OtherMenuBox/OtherMenuBox'; import './Menu.scss'; const Menu = () => { const [isSh..

배경화면 위에 글씨가 있는 상황에서 배경화면은 투명하게 하고 글씨는 그 위로 보이도록 하겠습니다 html은 아래와 같습니다 index.html Hello 이제 css 설정을 해보겠습니다 -position을 이용해 배경화면과 글씨의 위치를 조정해줍니다 -가상선택자 ::after을 이용해 배경화면의 가상요소를 생성하여 여기에 배경 이미지와 투명도를 지정해줍니다 -z-index 설정으로 가상요소를 원본의 뒤로 밀어줍니다 style.css .container { width: 100%; height: 100%; text-align: center; position: relative; z-index: 1; } .container::after { width: 100%; height: 100%; content: ""; ..

위코드의 첫 번째 프로젝트로 나이키 모티브 코딩을 하게 되었습니다 https://www.nike.com/kr Nike. Just Do It. 나이키의 모든 것, 나이키 공식 온라인스토어 www.nike.com 저는 nav, 제품리스트 페이지, 결제 페이지를 맡아 구현 중입니다 어려움이 많은데,,,, 어려웠던 기능들은 차차 정리해보겠습니다 1. nav 컴포넌트 -mouseenter 시 드롭다운 메뉴 보여주기 -검색어 filter 기능 2. 제품리스트 페이지 -필터 기능 - 제품리스트 페이지 레이아웃 3. 결제 페이지 -비회원 진입 시 보여주는 컴포넌트 -버튼 클릭 시 컴포넌트 바꿔주기

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 아직 정리 중인 개념입니다 1. async/await이란? async는 비동기라는 의미로 async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다 useEffect(() => { (async () => { const res = await fetch( `api 주소` ); const data = await res.json(); })(); }, []); 함수안에 비동기적으로 실행 될 부분은 await 붙어 있는 코드입니다. await은 무엇으로 부터 기다리다라는 뜻을 가지고 있습니다. await은 그 뒤에코드를 실행하고, 그코드가 리턴하는 객체를 기다려 줍니다. 그리고 객체가 fullfiield 상태가 되면 그 작업 성공 결과를 추출해서..