JH 개발 블로그

얼마 전 백엔드와 통신을 하던 중 이상한 일이 발생하였다. 사건을 설명하자면... 나와 백엔드 한 분은 장바구니 기능을 담당하고 있었는데 백엔드에서 보내온 데이터(장바구니에 담긴 상품 정보)를 받는 get 메서드, 내가 수량을 조절해서 그 데이터를 보내는 patch 메서드, 그리고 상품을 삭제할 때 보내는 delete 메서드... get 과 patch 메서드를 이용할 땐 데이터가 정상적으로 통신이 되었는데 이상하게 delete 에서만 문제가 발생되었다... 어떤 상황이냐면... 삭제 버튼을 누르면 백엔드쪽에서는 데이터가 성공적으로 삭제되었지만, 보여지는 쪽(프론트단)에서는 아무런 반응이 일어나지 않았다... 근데 새로고침하면 삭제 되있다... 이게 무슨 의미....????? 일단 확인해보니 delete ..

import React, { useState } from 'react'; import './Cart.scss'; import CartItem from '../CartItem/CartItem.js'; import '../CartItem/CartItem.scss'; const a = [{ item: 'egg' }, { item: 'egg' }, { item: 'egg' }, { item: 'egg' }]; // 불러올 데이터 function Cart({ closeCartMenu }) { const [userCart, setUserCart] = useState([]); const addUserCart = () => { setUserCart(a); }; return ( Cart List photo num pri..

상수데이터 export const RECOMMEND_DATA = [ { id: 1, userId: 'jihyun219', userName: 'jihyun', src: '/images/jihyunLee/profile.jpg', }, { id: 2, userId: 'jihyun123', userName: 'jihyun', src: '/images/jihyunLee/profile.jpg', }, { id: 3, userId: 'jiyoung999', userName: 'jihyun', src: '/images/jihyunLee/profile.jpg', }, ]; 상수데이터에서 [ ] 배열로 선언한 이유는 무엇일까? 바로 map 메서드를 사용하기 위해서이다. {RECOMMEND_DATA.map(story => ..

Hook 은 낚시바늘이라고 생각하면 된다. 컴포넌트는 등장 -> 업데이트(재렌더링) -> 퇴장 의 Lifecycle 을 거치는데 이때마다 훅을 걸어준다고 생각하면 쉽다. 예를 들어, 컴포넌트가 등장하기 전에 훅을 걸어서 "그 전에 이것 좀 해줘" 라고 할 수 있는 것이다. 또는 "퇴장 전에 이것 좀 해줘" 가 될 수 있다. 이것이 훅인데 다시 말해서, Hook 이란 컴포넌트의 LifeCycle 에 딴지를 거는 것이다. * Hook 으로 컴포넌트의 인생 중간중간에 뭔가 명령을 줄 수 있다. e.g.) 퇴장 전에 이것 좀 해주세요 클래스형 컴포넌트를 쓰고 있을 시절...에는 훅을 이렇게 쓸 수 있었다. ▼ class Detail2 extends React.Component { componentDidMount..

pull 하고 merge 하면 어떻게 바뀌어지는지 멘토님한테 물어보았다. 1. git pull 을 해줘서 로컬의 main 을 최신상태로 만들어줬다. 2. 로컬 main 의 브랜치인 jihyun 을 같이 업데이트 해주려면 git merge main 을 쳐야 한다. 3. 둘 다 최신상태로 바꿔주었다. function App(){ const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo === ""){ return; }..

function App() { let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']); let [따봉, 따봉변경] = useState(0); let [modal, modal변경] = useState(false); return ( 개발 Blog { 글제목.map(function(글){ return ( { 글 } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 16일 발행 ) }) } {modal변경(!modal)}}>열고닫기 { modal === true? : // 자식 컴포넌트 사용 null } ); } function Modal(){ return ( 제목 날짜 상세내용 ) } export default App; 이 코드는 Ap..

1. 조건문 쓰는 방법 JSX 에서 { } 안에 자바스크립트 코드를 쓸 수 있다. 하지만 if 문은 불가하다. if 문 대신 삼항연산자를 JSX 안의 { } 내에서 쓰기 가능하다. return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 { 1👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 // modal 창 1개 { 1👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 { modal===true ? // : null } ); } 마찬가지로 모달창이..

각 컴포넌트의 state 는 완전히 독립적이다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이다. 실제로 각각의 Hook 호출은 완전히 독립된 state 를 가진다. 그래서 심지어 한 컴포넌트 안에서는 같은 custom Hook 을 두 번 쓸 수도 있다. Hook 은 state 그 자체가 아니라 "상태 관련 로직을 재사용하는 방법"이다. Custom Hook 은 기능이라기보다는 컨벤션에 가깝다. 이름이 "use" 로 시작하고, 안에서 다른 Hook 을 호출한다면 그 함수를 custom Hook 이라고 부를 수 있다. useSomething 이라는 네이밍 컨벤션은 linter 플러그인이 Hook 을 인식하고 버그를 찾을 수 있게 한다. 폼 핸들링, 애니메이션, 선언적 구독, ..

원격 저장소에서 로컬 저장소로 소스를 가져오는 명령어 pull fetch fetch 와 pull 의 차이는 가져온 소스를 merge 하느냐 안하느냐의 차이 pull과 fetch의 차이는 무엇일까? git pull: git remote 명령을 통해 서로 연결된 원격 저장소의 최신 내용을 로컬 저장소로 가져오면서 병합한다. git push의 반대 성격이라 생각하면 된다. git fetch: 로컬 저장소와 원격 저장소의 변경 사항이 다를 때 이를 비교 대조하고 git merge 명령어와 함께 최신 데이터를 반영하거나 충돌 문제 등을 해결한다. 일반적으로 브랜치를 만들지 않고 혼자서만 작업하면서 Git과 Github를 사용한다면 pull과 fetch를 사용할 일이 거의 없을 것이다. 하지만 대체적으로 Git을 ..

SPA(Single Page Application) 페이지가 한개인 애플리케이션이다. 이전에 HTML, CSS, Javascript 를 배웠을 때는 페이지 수만큼 html 파일이 존재하였다. 반면, 리액트 프로젝트에서 .html 파일의 개수는 ? 1개이다. 한 개의 웹 페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? Routing 이다. 이것은 SPA 방식이다. Routing 라우팅이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어 있지 않는다. React-router (= 리액트 라우터)는 여러 페이지들을 연결시켜주는 역할을 한다. 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리이다. 라우터는 페이지들을 연결해주..