본문 바로가기

전체 글

 (359)
(프론트연계)fetch api를 post 방식으로 보내기 출처:https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 벡단으로 데이터를 전송하고 받아오는 과정을 설명한 글이다. 내 프로젝트에 직접적으로 도움이 되는 글. 설명도 엄청 자세하다 로그인을 할 때 아이디, 비밀번호를 입력하고 로그인 버튼을 누른다. 서버에서는 입력된 아이디, 비밀번호를 데이터베이스와 비교하여 일치 여부를 판단한다. 이번 포스팅에서는 아이디, 비밀번호가 불일치일 때 페이지 전환 없이 ajax를 활용하여..
****중요****Front에서 Back으로 데이터 요청(fetch, push시 사용되는 Fetch API, axios라이브러리에 대하여 관련 실습 코드: https://github.com/dhflekddy/React-and-ReactHookPractice/commits/main/fetchAndAxios    구체적 실습코드 여기에 모두 있으니 꼭보기, Readme도 꼭 보기fetch사용시 데이터를 서버에 post방식으로 전송시 반드시 지켜야 할 것: https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0그 외에서 웹 애플리케이션 서버로 스프링 부트를 사..
API데이터 전송 확인 툴 postMan 클라이언트와 서버간에 데이터가 잘 전송되는지의 여부를 알기 위해 영상에서 소개하는 postMan이라는 프로그램을 사용해 보았다. 아직까지는 그 필요성을 구체적으로는 느끼지 못하겠다. 그냥 post할때는 서버 파일에 post가 정상적으로 될수 있는지 확인하는 console문구를 해당 함수에 추가하면 되고 Get이 잘 되는지는 브라우저 화면에 res.json혹은 res.send와같은 res.json res.send와 같은 함수를 사용해 주면 되기 때문이다(여기서 클라이언트가 body안에 보낸 값을 확인하기 위해서는 body-parsing middleware인 body-parser를 사용해 주면 된다).
nodeJS - req.params, req.query, req.body에 대하여 1. Request Properties 1-1. req.params 예를 들어 /user/:name 경로가 있으면 "name"속성을 req.params.name으로 사용할 수 있다. https://params/user/12341234 일 경우 12341234를 받는다. req.param은 더이상 사용하지 않음 1-2. req.query 이 속성은 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함 된 개체다. 예를 들어 https://query/search?searchWord=구글검색 이면 searchWord 매개변수(parameter)의 구글검색 이라는 값(argument)을 가져온다. 1-3. req.body JSON 등의 데이터를 담을때 사용한다. (주로 POST로 유저의 정보 또는 파일 업로드를..
CORS 에러는 무엇이고 어떻게 해결하는가 참고: https://evan-moon.github.io/2020/05/21/about-cors/ https://beomy.github.io/tech/browser/cors/ https://xiubindev.tistory.com/115 실질적 해결 영상: 7:40초 가량 https://www.youtube.com/watch?v=d6suykcsNeY&t=257s 요약: Cross-Origin Resource Sharing의 줄임말로, 한국어로는 교차-출처 리소스 공유라고 한다. 교차 출처가 무엇이냐, 쉽게 말해 다른 출처라고 말할 수 있다. CORS 에러가 어려운 이유 중 큰 이유가 CORS 에러를 실질적으로 겪는 곳은 프론트엔드이지만 해결해야하는 쪽은 백엔드이기 때문이다. (출처(Resource)는 Pr..
loadable() 이란? 요약: 코드스플리팅은 초기 로딩속도를 향상시키기 위한 것이다. CodeSplitting(코드분할)이란? 필요한 모듈을 정적으로 받아오는 것이 아닌 동적으로 런타임시에 필요할 때 필요한 모듈만을 불러오는 것. 즉 JS 코드 번들을 잘게 쪼개서 필요할 때마다 로드할 수 있도록 사용하는 기술! 즉, 미리 로드해야 하는 코드의 양을 줄여서 초기 로딩 시간을 개선할 수 있다! 코드 예시 import Component1 from "Components/Component1"; const Component2 = loadable(() => { return import("Components/Component2"); }); ... ... 협업하는 팀원이 만들어놓은 App 파일에서 6주차에야 눈에 들어온 loadable(). ..
React Hooks -Custom Hooks 실습: https://github.com/dhflekddy/ReactHookPractice/tree/main/customhooks 커스텀훅이 조금 어렵다고 느껴질 수 있는 내용은 원래 제 자리에 있어야 할 내용이 커스텀훅의 사용으로 커스텀 훅 안으로 감춰져 버렸기 때문이다. 즉, 내용은 서로 연관되 있지만 커스텀 훅 파일과 커스텀 훅이 적용되는 파일이 분리되어 있어 조금 어렵게 느껴진다. 1. Custom Hook이란? 커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다. 2. Custom Hook, 왜 사용할까? 앞서 말했듯이 커스텀 훅은 리액트에서 컴포넌트를 만드는..
React Hooks - React.memo로 컴포넌트 최적화하기 (useMemo, useCallback) 정리: 리엑트에서는 기본적으로 부모컴포넌트가 랜더링되면 반드시 자식컴포넌트 역시 랜더링된다. 따라서 자식컴포넌트에서는 부모로부터 받는 props에 변화가 생길때만 랜더링이 발생하도록 해주면 최적화에 도움을 준다는 생각을 할 수 있다. 리액트로 개발을 하다보면 굳이 반복해서 렌더링될 필요가 없는 컴포넌트가 계속해서 반복적으로 많이 렌더링이 되는 문제를 한번쯤은 겪어봤을 것이다. 대부분의 경우 컴포너트의 렌더링 문제를 크게 고민할 필요는 없다. 하지만 렌더링이 너무 지나치게 자주 발생하거나 매번 렌더링마다 무거운 로직을 처리해서 성능에 부담을 준다면 이는 컴포넌트 성능에 매우 좋지 않으므로 해결하는 것이 좋다. 이러한 문제를 해결하기 위해 리액트에서 제공하는 React.memo를 알아보자. 더불어 useMe..

티스토리툴바