PUNCO

이번글은 별로 어려운게 없다 그냥 axios 를 사용해 서버로 요청만 하면된다. 그래서 간단히 쓸 예정이다. 근데 궁금한게 수정할때는 put, 삭제할때는 delete로 요청하는데 그냥 post로 쓰면 안되냐는 것이다... 그래도 put delete 를 사용해서 해보자 링크를 걸어주자. key는 link 태그에 다시 걸었다. 제목을 클릭했을 때 각 포스트의 id를 받기 위해 app.js 를 수정했다. url의 id param 값은 props.match 로 받았다. axios.get 요청으로 각 post의 데이터를 받아왔다. 서버쪽 이제 글수정 버튼과 글 삭제 버튼을 구현해보자 이제 눌렀을 때 history.push 로 해당하는 페이지로 가게해주자 history 객체를 사용해 이동하게 하였다. update ..

axios 를 사용해 글을 작성하고 읽기,삭제, 수정하는 기능을 만들어보자 입력한 값을 저장하기 위해 useState 함수를 사용할 것이다. useState 는 컴포넌트에서 상태를 관리 할 수 있게 해준다. *컴포넌트 : 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈 useState 는 기본값을 파라미터로 넣어서 호출하는데 나는 객체를 넣었다. useState 함수를 호출하게 되면 배열이 반환되는데 , 첫번째원소는 현재상태, 두번째 원소는 Setter 함수이다. *Setter 함수 : 변수에 값을 집어넣는 함수 반환된 배열을 추출하기 위해 배열 비구조화 할당을 사용하였다. *비구조화 할당이: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 사용자가 입력..

프론트 틀을 구현해 봐야겠다. 먼저 CRUD만 구현하려고 한다. 메인 페이지에는 작성한 글 목록과 글 작성 버튼을 구현하고 글 페이지 에서는 수정과 삭제 버튼을 구현 할 것이다. 컴포넌트 폴더를 만들어 주고 그안에 작성할 페이지 별로 파일을 만들었다. JS안에서 CSS를 적용하기 위해 styled-components 라이브러리를, 라우팅을 위해 react-router-dom 라이브러리를 설치했다. 라우터 적용을 위해 index.js 에서 BrowserRouter 라는 컴포넌트를 사용한다. *import 할때 중괄호에 관하여 : export 할 때 default로 선언된 내용은 중괄호 없이 받을 수 있으며 변수명이 달라도 된다. 그러나 default로 선언되지 않은 것들은 중괄호 안에서 무조건 보내진 변수..

공부겸 개인 블로그를 만들어 보려고 한다 먼저 npx create-react-app 를 입력해 리액트 프로젝트를 만든다. *npx : 일회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지 *CRA : 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해주는 도구이자 명령어 프로젝트가 만들어 지면 왼쪽 사진과 같이 여러 파일들이 생성된다. *favicon : 페이지 아이콘 이미지 파일 *index.html : 가상 Dom 이 들어가기 위한 html 파일 *manifest.json : 웹 앱 매니페스트는 사용자가 앱을 볼 것으로 예상되는 영역(예: 휴대기기 홈 화면)에 웹 앱이나 사이트를 나타내는 방식을 개발자가 제어하고, 사용자가 시작할 수 있는 항목..