RestAPI REST API의 탄생 REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다. REST 구성 쉽게 말해 REST API는 다음의 구성으로 이루어져있다. 자원(RESOURCE) - URI 행위(Verb) - HTTP 메소드 표현(Representations) REST 의 특징 Uniform (유니폼 인터페이스) Uniform Interface는 URI로 지정한 리..
주요 HTTP 통신방법 왜 React에서 주로 Axios를 이용해 통신하는지, HTTP 통신을 가능하게 하는 Ajax와 Fetch와 비교해보자. Ajax Ajax는 Asynchronous JavaScript And XML의 약자로, 말 그대로 자바스크립트에서 비동기적 통신을 가능하게 한다. 순수 Ajax는 XMLHttpRequest()생성자를 통해 자바스크립트에서 구현될 수 있지만 JQuery를 통해 Ajax를 보다 쉽게 쓸 수 있기 때문에 주로 JQuery와 함께 쓰인다. 그러나 Promise 기반이 아니고 JQuery를 사용하지 않으면 쉽게 구현하기 어렵다는 단점이 있다. React에서 promise가 async, await과 사용될 때 그 장점을 생각해보면 Ajax는 매력적이지 않다. Fetch F..
포스트 클릭 시 글번호로 찾아 해당 페이지로 이동 기능 글을 누르면 해당 글의 페이지로 이동되는 기능을 추가했다. 일단 글을 누르면 서버로 글의 번호를 보내고 const Post = ({ post, userName, postDate, postId }) => { const navigate = useNavigate(); const onPostHandler = () => { axios .get(`api/posts/${postId[0]}`, { withCredentials: true }) .then((res) => { console.log(res.data); navigate(`/posts/${res.data}`); }) .catch((err) => console.log(err)); }; return ( 글내용:..
랜딩페이지 레이아웃 설정 메인 랜딩페이지를 그냥 기본적인 구조로 만들었다. NavBar: 로고와 로그인/로그아웃/내정보 기능 Write: 바로 글 작성 할 수 있는 공간 TopPosts: 좋아요를 많이 받은 순서로 정렬된 글 RecentPosts: 최근에 등록된 순서로 정렬된 글 UsersStatus: 실시간으로 접속하고있는 유저리스트 Footer: 개발자 정보 및 기타 등 크게 이렇게 메인 컴포넌트들로만 나눠놨고 기능을 구현하면서 디테일을 잡아갈 예정이다. 글 작성 기능 추가 메인 랜딩페이지에 글 작성을 바로할 수 있는 컴포넌트를 만들어놨다. 한글로만 작성할 수 있도록 정규표현식과 여러 조건들을 추가했다. const onSubmit = useCallback( (event) => { event.preve..
이번 주말동안 크게 한 것은 로그인 상태관리(서버)를 Redux에서 ReactQuery로 바꿨다는 점 작업하는동안 크게 느꼈던 것 부터 적고가자.. Redux는 클라이언트의 상태관리, React Query는 서버의 상태관리 HTTP 통신 시 요청(requset)과 응답(response)의 데이터를 꼭 확인하면서 작업하자. useQuery의 Promise함수는 꼭 response를 return을 해야 data에 값이 들어온다. const { data, isLoading, error } = useQuery( ['isLoggedIn'], async () => await axios .get('/api/users') .then((res) => { ✅ if (res.data.isAuth === false) retu..
