본문 바로가기

전체 글

 (64)
간단한 게시판 만들기 - 5 기본적인 서버 환경 세팅을 마쳤으니 이제 db를 연결해 볼 것이다. 이전에 이미 한번 정리했지만 작업 도중에도 계속 혼란스러웠기에 대략적으로 서버 구분을 하자면, 지금 만드는 server 폴더의 index파일은 8000번 포트에서 동작하며 db와의 연결을 통해 데이터를 읽거나 삽입하는 등의 역할을 한다. 또한 클라이언트(브라우저)로부터 간접적으로 데이터를 요청받고 결과를 전달해주는 중간 매개체와도 같은 역할을 한다. 그리고 이전에 만든 client 폴더의 파일들은 3000번 포트에서 동작하며 클라이언트로부터 직접적으로 요청을 받고 이전에 정리한 웹서버의 역할대로 정적인 컨텐츠를 제공한다. 또한 db와 관련된 데이터는 server/index.js로 전달하여 처리한다. (나름대로 정리하였으나 틀린 부분이 있..
[React] useEffect useEffect HookuseEffect는 react에서 제공하는 훅으로, react 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 훅이다. 다음과 같이 사용한다.import react, {useEffect} from "react";...useEffect(effect, deps); useEffect 사용에는 무엇을 수행할 것인지(effect)를 정의하는 것이 필요하고, 상황에 따라 dependency(deps)의 설정도 필요하다.effect는 필요할 때에만 실행되어야하기 때문에, dependency의 올바른 정의를 통해 불필요한 effect의 실행이나 무한루프의 문제를 방지할 수 있다.   > 랜더링이 될 때마다 실행되는 경우useEffect(()=>{ Axios.get('htt..
[Node] Axios Axios는 클라이언트 사이드와 서버 사이드의 통신을 위한 HTTP 비동기 통신 라이브러리이다. npm i axios 를 통해 설치할 수 있으며 import axios from 'axios'; import 문을 통해 세팅할 수 있다. 주로 사용하는 Method 1. GET - 입력한 url이 존재하는 자원에 요청을 보낸다. axios.get(url,[,config]) 예시) axios.get('http://localhost:8000/user/userinfo').then((response)=>{ let info = response.data; console.log(info); }) 2. POST - 새로운 리소스를 생성할 때 사용한다. axios.post("url",{ data객체 },[,config]) 3..

티스토리툴바