개발환경을 만들어 준다. express를 설치하고 서버 포트를 지정.API 테스트 툴인 "Postman"을 통해 API서버가 잘 구동되는지 확인한다.2-1. postman에 가입 후, workspace에서 내 서버를 테스트해본다.뒤의 type을 "jeju"로 바꿔주면

통신규칙. 사용자가 서버에 접속할 때 어떤 방식으로 접속할지에 대한 부분.HTTP는 웹브라우저와 웹서버가 서로 데이터를 주고 받기 위해 만들어진 통신규칙.FTP라는 것을 쓴다면 FTP 라고 되어있을 것인터넷에 접속된 각각의 컴퓨터. 어떤 특정한 인터넷에 연결된 컴퓨터를

저번엔 GET요청을 하는 법을 포스팅했었다.이번에는 POST요청을 해본다.POST요청은 주로 글쓰기, 회원정보 입력 등에 사용한다.HTML 내 form태그 내부의 정보들을 서버로 보내려면?백엔드에서 action은 "데이터를 전송할 경로가 어디인지"method 는 "데이

앞서 했던 것은 텍스트를 전송했었는데(express 라이브러리 사용해서)HTML파일을 전송할 수도 있다.홈 접속시 HTML파일을 보내주고 싶다면이번엔 send가 아닌 sendFile 을 사용해준다. sendFile(__dirname + "HTML파일");

서버 껐다 켰다 하는 작업을 일일이 터미널에 적어주는게 귀찮으면을 설치해 자동으로 해줄 수 있다.

이렇게 하면 서버가 하나 만들어진다.그리고 터미널을 열어 node server.js 를 입력한다.브라우저를 열어 localhost:8080 에 접속하면 확인가능하다.URL을 입력해서 주소를 요청하는 것이 GET요청이라 했었다.네이버 쇼핑창을 가면 https:/

Ajax 요청은 "서버에게 요청을 하는데 새로고침 없이 이루어지는 것"이다.보통은 jQuery설치 후 ajax 요청을 많이 하는데리액트 환경에서는 fetch함수를 사용하거나, axios라이브러리를 많이 사용한다고 한다.서버는 간단하게 말하면 그냥 "누군가 요청하면 데이

이전에 UI 모달창 클릭할때마다 없애고 띄우고 했던 방법을 활용한다.alert, setAlert 라는 상태(UI가 보이고 안보이고)를 만들고 기본값을 true로 잡는다.삼항조건연산자 를 이용해 state가 true일땐 창을 보이게 하고, false이면 보이지 않는 조건

<Nav.Link> 안에 <Link> 쓰면 위와 같이 <a>태그 안에 <a>있을수 없다라고 하는 것 같은 워닝이 콘솔에 뜬다. 없애고 싶다면<Nav.Link as={Link} to="/"> Home </Nav.Link> 위와같이 Nav.

리액트에서 사용하는 덩어리, 컴포넌트는 lifecycle이라는 개념이 있다.탄생-변화-소멸, 즉 생성, 업데이트(state변경됐을때), 삭제이 과정을 거친다고 해서 이름이 저렇게 붙었나보다.그리고 공부하면서 몇번씩 들어본 Hook을 컴포넌트의 삶 중간에 걸어줄 수 있다

SASS는 CSS가 너무 길어졌을 때 변수, 함수, 반복문 등을 사용해서 보다 간결하게 코드를 작성할 수 있다. 변수사용, @import, nesting(셀렉터 안에 셀렉터 작성), extends문법, @mixin / @include문법 등이 있다.

우선 styled-components를 설치하기 위해선 터미널을 열고yarn add styled-components혹은npm install styled-components 입력 후사용하고 싶은 컴포넌트 최상단에 import 해준다.import styled from 's

css파일을 import해준다. import styles from "파일경로";적용 원하는 곳에 import해온 style을 넣어준다.style.클래스이름 형식으로 넣어준다!css를 적용해 이런식으로 적용이 잘 된다.

카카오, 네이버 등의 Open API에 가입해 개인API key를 발급받고,사용하고자하는 API를 선택한다.조코딩 유투브를 참고해 작성한 것으로, 코드작성은 jQuery로 이루어진다.구글에 jquery ajax를 검색해 EXAMPLE 에 있는 코드를 그대로 넣는다.카카

API란? (Application Programming Interface) 사용규칙을 제공하는 것. 클라이언트의 "요청"과 서버의 "응답"을 관리하기 위한 체계

ㄴㅇurl에 있는 값, 즉 변수를 반환해주는 함수React Router에 이 url이 변수를 받을거라고 말해준다.id 말고 아무 이름으로나 설정할 수 있다.중요한건

기존 배열에 함수를 넣어서 새로운 배열을 리턴할 수 있게 한다.기존 배열 안의 모든 item에 대해 실행된다.첫 번째 인자는 각 item의 value, 두 번째 인자는 각 item의 index이다.콘솔창에 "Warning: Each child in a list shou

리액트에선 JS에서 하듯 직접적으로 state를 수정해선 안된다.toDos의 배열을 수정해주고 싶다면와 같은 방법을 써야한다.에서6 이라는 값을 넣으려면,즉 6을 포함한 새로운 배열을 만들고 싶다면이 아닌방법을 써야하는 것이다.

useEffect를 이용해서 컴포넌트가 생성될때는 물론 파괴될 때도 무언가를 할 수 있다.이 함수를 통해 컴포넌트가 언제 create 그리고 destroy됐는지 알 수 있다.위 코드는 아래의 코드와 같은 이야기를 한다.Hello 컴포넌트가 생성될 때 hiFn 이 실행되

전체 코드 input창에 이벤트발생할때마다 API를 매번 새로 호출하고 있다. 매우 별로.검색을 예로 들면, console.log("SEARCH FOR", keyword);를 하면, 입력창이 변할때마다 인식하는건 좋은데,counter라는 state가 변할때도 검색이 되