처음에는 아래부분을 전부 슬라이드 마다 하나씩 타이틀 이미지등을 줘서 코드를 썼는데 생각 해보니까 모든것이 반복 되고 있고 하드코딩 그자체여서 왜 map메서드를 쓸 생각을 못했는지 의문이었다. 값으로 들어갈 부분들을 따로 백엔드에서 받아올 필요는 없을 것 같아서 moc

아직까지 엄청나게 편하다는 느낌을 받지 못했지만 조금 적응 된 것 같다!props로 값을 받아오거나 할 수 있지만 아직 그렇게까지 활용은 하지 못했고 이번 프로젝트때는 공통된 색깔을 theme을 활용한게 전부이다! 다음에는 조금더 다양하게 적용 해볼 수 있으면 좋겠다

2차 프로젝트는 식물을 사고파는 커머스 사이트 겸 커뮤니티 사이트인 싱그러운집을 클론코딩하게 되었다.링크텍스트 파트: 네브,메인,푸터,로그인 제한된 시간에 1차 프로젝트보다 더 시간이 없었기에 원본 사이트에서 많은 부분이 삭제되었고 결국엔 커뮤니티사이트를 구현

Git rebase란?두 개의 공통 base를 가진 branch에서 한개 branch의 base를 다른 최신 branch의 커밋으로 base를 옮기는 작업. 베이스를 다시 설정하는 작업을 뜻한다.rebase 순서새로한 작업을 모두 마치고git checkout main

링크텍스트 현재 프로젝트의 원본 사이트의 슬라이더가 위의 슬라이더와 비슷해서 활용 해 보았다. 우선 설치를 해주어야 한다. 그리고 공식 페이지에 있는 코드를 복사해서 붙여넣기 해주었다. 원래는 위와 같은 코드였는데 styledComponent를 쓰기위해서 아래

많은 로그인 api가 있지만 카카오가 제일 문서 정리가 잘 되어 있다고 해서 이번 프로젝트에는 카카오 로그인 rest api를 이용하게 되었다. 일단 전체적인 흐름을 정리하자면1.프론트엔드에서 사용자에게 로그인/동의 확인을 받은후 카카오로 인가코드를 요청2.카카오에서

백엔드에서 데이터를 받아올때는

npm install styled-componentsimport styled from "styled-components";Button // 1New Button // 2// App.jsimport React, { useState } from 'react';impor

처음에는 지금까지 배웠던 기능들을 활 요하면 될 것 같아서 간단할 것 같다고 생각했던 부분들이 백엔드와의 통신에 대한 개념이 없는 상태에서 적용하려고 했더니 프로젝트 후반부로 갈수록 수정할 부분이 많이 생겨서 조급 졌던 점이 많이 아쉬웠다.setCards 부분에 들어오

동적 라우팅 라우트 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는것 path parameter url경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter라고 한다. } /> 라우터에는 위와 같이 정의한다.

업로드중..카드를 hover하면 반투명한 배경이 이미지 앞으로 뒤에있는 이미지는 크기가 약간 커지는 효과가 원본 사이트에 있어서 구현 해보려고 했다.hover처음에는 해당 이미지에 직접 hover를 줬는데 전혀 먹히지 않았는데 카드를 감싸고 있는 부모 컨테이너에 효과

썸네일에 있는 장바구니 아이콘을 누르면 데이터베이스로 제품id와 수량을 DB로 넘겨서 사이드에 있는 마이페이지로 장바구니에 담은 상품 정보가 담기게 된다.아직은 로그인과 연동이 되지 않아서 토큰값을 상단에 먼저 넣어 주었다.(실제 화면은 현재 볼 수가 없는 상태여서 사

몬스터 과제를 하면서 필터메서드 활용법을 확실히 익힐 수 있었다const monsterList = monsters.filter(monster) => { return const lowerName = monster.name.toLowerCa

데이터에는 정적인 데이터와 동적인 데이터가 있다.동적인데이터: 백앤드로부터 받아야 하며, 지속적으로 변경되는 데이터를 뜻한다 (댓글 등)정적인데이터: 상수데이터라고도 하며, 변하지 않는 데이터를 뜻한다 (footer 등)mock data란?샘플 데이터, 실제로 api에

useEffect React는 props,state를 재료로 jsx문법을 통해 화면에 ui를 그려내는 라이브러리이다.ui를 그려낼시 props,state 외에도 데이터를 받아오거나 DOM에 직접 접근하여 기능을 구현해야 하는 경우가 있는데, 이럴 경우를 side ef

States state let[글제목, 글제목변경] = useState([”a”, “b”, “c”]); let copy = 글제목 copy[0] = “A”; 글제목변경(copy); state 변경 함수 → 내용이 같으면 바꾸지 않는다 → array가 담긴

git이란?\-> 공식 명칭은 분산 버전 관리 시스템(vsc)로 프로젝트 파일의 변경 사항을 추적하는 시스템을 말 한다.\->장점: 여러 사람이 함께 작업하고 프로젝트 단위로 협업을 할 때 파일을 효율 적으로 관리 할 수 있다.repositories\-> Git을 관리

routing이란?다른경로(url주소)에 따라 다른 view를 보여주눈 것React-router는 리액트 라우팅 기능을 위해 가장 많이 사용되는 라이브러리React는 따로 가지고 있지 않다(그래서 라이브러리로 구분된다)SPA가 무엇인지 설명할 수 있다.페이지가 한개인

jsx란js의 확장 문법이다 (웹 브라우저는 읽을 수 없다)js파일이 jsx코드를 포함하고 있으면 파일을 컴파일 해 주어야 한다.js의 요소들처럼 다루어 진다표현식const h1 = Hello world; →html 혹은 js 처럼 보이지만 js 파일 안에서 작동하는

짝수인지 판별하는 함수 isEven을 작성 주세요나머지 값을 가지고 판단하면 된다.! getPrefix 함수를 작성하세요.문자열이 주어졌을때, -를 기준으로 앞에 있는 문자열을 반환하세요.getFind 함수를 작성하세요.문자와 문자열이 주어졌을때, getFind 함수