Timeline

import { useRef, useState } from "react"; import "./styles.css"; export default function App() { const [image, setImage] = useState(null); const inputRef = useRef(null); const 이미지넣기 = () => { if (!inputRef.current) return; inputRef.current.click(); }; const 이미지변경됐을때_실제스테이트에_넣는함수 = ({ target: { files } }) => { setImage(files[0]); }; const 전송해보자 = () => { const formData = new FormData(); formData...

npm install react-slick --save 을 톻해 react slick library를 설치하여 캐러셀을 구현했습니다 아래 코드를 통해 캐러셀을 구현할 수 있습니다 import React, { Component } from "react"; import Slider from "react-slick"; export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( Single Item 1 2 3 4 5 6 ); } } Resources https://re..

1. KPT란? KPT 관점에서 회고해보았습니다 우선, KPT 관점이란 Keep, Problem, Try의 약자로 회고 내용을 3가지 관점으로 분류하여 회고를 진행하는 것입니다. 2. 나의 회고 확실히 프로젝트를 한번 해본 뒤라 프로젝트를 진행하는 것은 훨씬 수월한 것 같습니다 코딩하는 게 수월하다는 건 절대 아니죠,,,,❌ Keep : - 초기 세팅 때 코드 컨벤션이나 파일(이미지, mock data 등)을 어떻게 관리할지 딱 정해서 통일성 있는 코드를 작성할 수 있었습니다 - config 폴더나 mixin 등이 들어있는 styles 폴더도 처음부터 관리해서 편리했습니다 - 1차 프로젝트 경험을 바탕으로 통신 전부터 백과 프론트가 끊임없이 소통했습니다 -> 이걸 바탕으로 원활한 통신이 이루어지길 기대해..

컴포넌트에 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..