모임 일정 관리 서비스 프로젝트를 진행하면서 겪었던 어려움, 고민 과정을 기록하고자 한다. 깃허브 주소: https://github.com/prgrms-web-devcourse/Team-5YES-WuMo-FE 배포 주소: https://5yes-wumo.vercel.app/ (회고 주소 추가 예정) 프로젝트를 진행하면서 댓글을 생성/수정에서 이미지 업로드 기능을 구현해야 했다. 이미지를 서버에 등록하는 api와 댓글 생성 api가 나뉘어 있어서 댓글을 작성할 때 글과 이미지를 선택해서 댓글 생성 버튼 클릭 하면 이미지 등록 api 호출 -> 이미지 url 반환 -> 반환된 이미지 url로 댓글 생성 api 호출 이런 순서로 진행되어야 했기 때문에 이미지 등록 api가 완료될 때까지 기다린 후에 댓글 ap..
함수의 리턴 값은 언제나 하나! 리액트에서 정의한 함수의 return 내에는 오직 하나의 최상위 태그만 존재해야 한다. export default function Test (){ return( Hello, world! React ) } 그래서 이렇게 의미가 없는 로 감싸는 경우가 많다. 하지만 로 감싸면 태그 자체는 사용하지 않지만 DOM에는 div가 적용된다. 따라서 이럴 때 사용할 수 있는 것이 Fragment이다. Fragment 사용하기 import React, { Fragment } from 'react'; export default function Test (){ return( Hello, world! React ) } 이렇게 가 아닌 를 사용하는 경우 DOM에 영향을 미치지 않는다! 그리고 ..
코딩앙마님의 강의를 보고 작성한 글입니다. https://www.youtube.com/watch?v=ymmiuSl1t5k&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=16 PUT 현재 단어를 완료했다는 의미로 체크를 하면 회색으로 표시되도록 하였는데 아직 새로고침을 하거나 나갔다 들어오면 초기값으로 변경되어 있다. 그래서 저장되어 있는 데이터의 isDone 상태를 바꾸기 위해 PUT 메소드를 사용할 것이다. Word 컴포넌트의 toggleDone 함수를 수정해보자. //Word.js function toggleDone(){ fetch(`http://localhost:3001/words/${word.id}`, { method : 'PUT', headers : { 'co..
코딩앙마님의 리액트 강의를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=DuJC2ATdGtw&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=8 create-react-app 기본 폴더 설명 node_modules 폴더는 이 프로젝트를 실행할 때 사용되는 dependencies 모듈들이 모여있는 것이다. 여기에 설치되어 있는 내용들은 package.json 파일에 기록되어 있다. 이 폴더가 없으면 프로젝트를 진행할 수 없는데, 폴더가 없는 경우 npm install을 하면 그대로 다시 설치할 수 있다. 그래서 이 폴더는 내용도 많고 무겁기 때문에 깃에 올리지 않는다. 하지만 package.json에 내용이 기록되어 있기 때문에 다른 ..
props, state, event 3개가 서로 상호작용하며 애플리케이션의 역동성을 만든다. !목표! WEB을 누르면 welcome 메시지가, 각 목차를 누르면 그에 해당하는 내용이 뜨도록 만들 것이다. 그래서 우리는 각 링크에 이벤트를 만들 것이다. 그 이벤트를 클릭하면 App 컴포넌트의 state가 바뀌고 그 바뀐 state가 Content 컴포넌트에 동적으로 전달되도록 하는 것이 목표! 코드 변경 전 전체 코드↓ 더보기 https://github.com/YJZero/React/tree/main/components state 설정하기 지금 보고 있는 페이지가 welcome 페이지인지 read(읽기) 페이지인지 구분하기 위해 mode를 추가한다. 그리고 mode가 welcome일 때 content 영역..
생활코딩 이고잉 님의 리액트 강의를 부스트코스를 통해서 수강하고 있다. 웹 프론트엔드 시작하기 (리액트&리덕스) > 오리엔테이션 : 부스트코스 (boostcourse.org) component란 리액트에서 사용자 정의 태그를 작성하는 것을 component 라고 한다. 이렇게 component를 사용할 경우 가독성이 좋아진다. 재사용성이 좋아진다. 유지보수하기 좋다. 가독성의 경우, 복잡한 코드를 따로 component로 저장하고 실제 코드에선 component만 작성하면 되기 때문에 훨씬 좋다. 재사용성의 경우, component를 한번 정의해두면 다른 사이트에서도 사용할 수 있기 때문에 좋다. 유지보수의 경우, 만약 component에 오류가 있어서 변경할 경우 그 component..
