리액트에 관해서 프로젝트를 하고 공부를 하면서 get을 통해 서버에서 데이터를 가져오는 작업은 무리없이 잘 실행했었습니다. 근데 이번에 백엔드(Spring)과 협업하여 프로젝트를 진행하는 과정에서 데이터를 서버에 보내야하는 과정이 필요했습니다. 그래서 이번에는 axios.post를 통해 서버에 실제로 데이터를 전달하는 방법에 대해 알아보겠습니다. POST POST : axios.post(url,data [, config]) axios에서 Request Method를 사용하기 위해서는 axios에 . 을 붙히며 소문자로 Req Method를 넣어주면 됩니다. 그리고 해당 메서드의 파라미터에는 API의 주소를 넣습니다. 그리고 POST메서드에서는 일반적으로 데이터를 Message Body에 포함시켜 보냅니다..
오늘은 프로젝트 도중 발생한 문제점을 알려드리고 어떻게 해결했는지 알려드리겠습니다. 리액트-스프링 프로젝트를 진행하고 있는 도중에 로그인기능을 구현하고 있었습니다. 이렇게 로그인화면에서 서버에 저장되어 있는 아이디와 비밀번호를 입력하고 Login 버튼을 클릭하면 메인페이지로 이동하면서 상단의 nav바의 로그인/회원가입버튼이 로그아웃 버튼으로 바뀌게 해주는 작업이었습니다. 아래 처럼 axios.post를 이용해 사용자가 입력한 데이터를 서버에 보내주었습니다. 문제점 리렌더링 X 처음에는 생각없이 당연하다는 듯이 navigate로 메인페이지로 이동시켜주었는데 여기 부분이 문제였습니다. 로그인이 성공하면 nav바를 리렌더링시켜줘야하는데 navgiate로 이동을하면 리렌더링이 발생하지 않았습니다. 여기서 문제를..
Request & Response 클라이언트는 서버에게 요청을 보냅니다. "회원가입 시켜줘" , "게시물 생성해줘" 등등 이때 API라는 체계를 이용하여 클라이언트와 서버간에 요청과 응답을 주고 받습니다. 그 중에서도 더 체계적으로 API를 관리하기 위해 REST API가 등장했습니다. REST API는 HTTP프로토콜을 사용해 통신하며, HTTP 메서드로 요청을 표현한다는 특징이 있습니다. 요청을 보낼 때는 보낼 정확한 서버 주소를 알아야 합니다. 서버주소는 '서버주소/A'와 같이 구성되어 있습니다. 서버주소는 말 그대로 서버 컴퓨터가 위치한 곳의 주소이고, 슬래시 뒤의 A라는 곳에는 원하는 요청 기능을 적어줍니다. 예를 들면 서버주소/signin 은 로그인 기능을 수행하고 서버주소/signup은 회원..
REST API란? 서버와 통신하는 방식 중 한가지로 http 메서드를 사용하여 데이터를 요청/전송합니다. 기존에 많이 사용하던 SOAP API의 경우 서비스 인터페이스를 이용해 서버에 접근했다면, REST는 인터넷 식별자(URI)와 HTTP프로토콜을 이용해서 접근하는 것이 특징이며 사용법이 단순하여 높은 보안수준을 요구하는 작업이 아닐 경우 일반적으로 많이 선호되는 통신방법입니다. 데이터 포맷은 브라우저 호환성이 좋은 JSON을 사용하며 resource, method, messgae로 구성됩니다. 쉽게 말하자면, REST API는 url 주소와 메서드로 CRUD 요청을 하는 것 입니다. 클라이언트가 서버에게 요청을 보내는 유형은 크게 4가지로 나눌 수 있고, 이게 바로 CRUD 입니다. 종류 용도 GE..
repository란? git이라는 친구가 파일버전을 저장해두는 장소를 repository라고 합니다. 로컬 작업폴더엔 .git폴더가 있는데 그게 repository입니다. repository는 한국말로 저장소라고합니다. 실제로 개발할 땐 온라인repository를 많이 사용합니다. 내가 컴퓨터에 만들어 놓은 git repository를 온라인으로 저장해두는 겁니다. Github에서 만든 원격 저장소에 올리기 로컬저장소 -> 원격저장소 이렇게 업로드하고 싶으면 작업폴더에서 터미널켜서 git push -u 원격저장소주소 main 하면 됩니다. 로컬저장소의 main브랜치를 원격저장소에 올리라는 뜻입니다. -u 옵션은 방금 입력한 주소 기억해두라는 뜻입니다. 다음부터는 주소를 입력안하고 git push만 입력..
브랜치를 합칠 때 다양한 방법으로 합칠 수 있습니다. 3-way merge 브랜치에 각각 신규 commit이 1회이상 있는 경우 merge명령을 내리면 두 브랜치의 코드를 합쳐서 새로운 commit을 자동으로 생성해줍니다. 이걸 3-way merge 라고 부릅니다. 이게 merge의 기본동작방식입니다. fast-forward merge 가끔은 새로운 브랜치에만 commit이 있고 기준이 되는 브랜치에는 신규 commit이 없는 경우가 있습니다. 이 경우 merge하게 되면 "fast-forward merge" 라고 알려줍니다. fast-forward merge가 뭐냐면 신규브랜치보고 "지금부터 니 이름은 main 브랜치야" 하는 것입니다. (그래도 결과는 어차피 같으니까) 그래서 "기준이 되는 브랜치에 ..
커밋하면서 계속 코드를 짜다보면 갑자기 새로운 기능을 추가해야하는 경우가 있습니다. 그럴 때는 원본파일에 코드를 추가하고 커밋해도 되겠지만 혹시나 잘못해서 지금까지 잤던 프로그램이 망가지거나 그러면 큰일납니다. 그럴 걱정 없이 안전하게 새로운 기능을 추가하고 싶으면 복사본을 만들어 먼저 개발하는것도 나쁘지 않습니다. git 안에선 branch 기능을 이용해서 복사본을 만들 수 있습니다. branch만들기 이러면 프로젝트 사본이 하나 생성됩니다. git branch 브랜치이름 방금 만든 브랜치로 이동하고 싶으면 아래의 명령어를 사용하면 됩니다. git switch 브랜치이름 (다시 메인브렌치로 이동하고 싶으면 git switch main 하면 됩니다, 어떤 브랜치에 와있는지 까먹었으면 git status ..
코드를 짜다가 실수해서 2일전으로 돌아가고 싶으면 어떻게 할까요? 매일매일 손수 파일 복사본을 만들어두거나 git쓰거나 둘 중 하나만 선택하면 됩니다. git의 commit 기능을 쓰면 파일의 현재상태를 매일매일 기록해둘 수 있습니다. 작업폴더에서 git을 이용하고 싶으면 터미널을 열어서 git init 부터 입력하고 시작합니다. 이제 git이 파일생성하는거, 코드작성하는걸 추적하기 시작합니다. 이제 짠 코드를 기록을 해두고 싶으면 차례로 터미널에 입력하면 됩니다. 이러면 방금 파일의 내용을 어딘가에 기록(기록보다는 버전생성이 더 정확)해줍니다. git add 파일명 git commit -m '아무메세지' staging area & repository 버전만들 땐 git add, git commit 차례..
자바스크립트의 sync / async 관련 상식 자바스크립트는 일반적인 코드를 작성하면 synchronous(동기)하게 처리 됩니다. 코드적은 순서대로 윗줄부터 차례로 코드가 실행된다는 뜻입니다. 자바스크립트는 이상한 함수들을 사용하면 asychronous(비동기적)하게 코드실행이 가능합니다. ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 그런 현상이 일어납니다. 이런 함수들은 처리시간이 오래걸립니다. ajax를 예로 들면 인터넷 상황이 안좋으면 코드실행이 오래걸릴 수 있습니다. 그래서 ajax 요청하는 코드들은 순차적으로 실행되지 않고 완료되면 실행됩니다. 예를 들어보면 console.log(1+1) axios로 get요청하고나서 console.log(1+2) 실행해주는 코드 con..
리액트 18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 하나 추가되었습니다. useTransition 이건데 이걸로 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해줍니다.(코드실행시점만조절해주는식) batching automatic batching이라는 기능이 있는데 state변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야하지만 리액트는 재렌더링을 마지막에 1회만 처리해줍니다. 일종의 쓸데없는 재렌더링 방지기능이고 batching이라고 합니다. setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 근데 문제는 ajax요청, setTimeout안에 state변경함수가 있는 경우 batching이 일어나지 않습니다. 리..
컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링됩니다. 평소에는 별 문제가 없겠지만 자식컴포넌트가 렌더링시간이 1초나 걸리는 무거운 컴포넌트면 어쩔 것입니까. 부모컴포넌트에 있는 버튼 누를 때 마다 1초 버벅이는 불상사가 발생합니다. 그럴 땐 자식을 memo로 감싸놓으면 됩니다. function Child(){ console.log('재렌더링됨') return 자식임 } function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } 콘솔로 확인해보시면 버튼을 누를때마다 Cart컴포넌트가 재렌더링될때마다 Child도 재렌더링됩니다. 평소엔 별 문제가 없겠지만 예가 렌더링이 2초정도..
React를 이용해서 개발을 진행할때 이미지를 넣었는데 안보이는 버그같은게 생기면 개발자도구를 켜서 Elements탭 살펴보면 되는데 여기선 짠 코드가 실제 html css로 변환되어서 보여집니다. 컴포넌트로 미리보고 싶으면 리액트 개발자도구를 설치해서 보면 됩니다. React Developer Tools 크롬 웹스토어에 들어가면 설치가 가능합니다. 설치를 하면 개발자도구에서 Components 탭이 생기는데 여기서 컴포넌트를 볼 수 있습니다. 컴포넌트구조파악이 가능하고 컴포넌트를 찍어보면 해당 컴포넌트의 state, props 같은 것들 조회가능합니다. 수정해볼 수 도 있습니다. Profiler 탭에서 성능평가 가능 Profiler 탭 들어가서 녹화버튼 누르고 페이지 이동이나 버튼조작을 해보고 녹화를 ..
AJAX 요청하다보면 다음의 기능들이 가끔 필요해집니다. 몇초마다 자동으로 데이터 다시 가져오게 하려면? 요청실패시 몇초 간격으로 재시도? 다음 페이지 미리가져오기? AJAX 성공/실패시 각각 다른 HTML 보여주려면? 직접 개발해도 되겠지만 React-query라는 라이브러리 설치해서 써도 됩니다. sns, 코인거래소 같은 실시간 데이터를 보여줘야하는 사이트들이 쓰면 유용하고 나머지 사이트들은 딱히 쓸데는 없습니다. 설치 & 셋팅 npm install react-query 그리고 index.js파일열어서 1번 2번 3번하면됩니다. import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new Query..
새로고침하면 모든 state 데이터는 리셋됩니다. 왜냐하면 새로고침을 하면 브라우저는 html css js파일들을 처음부터 다시 읽기 때문입니다. 이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하거나 하면 됩니다. 서버나 DB가 없다면 localStorage를 이용해도 됩니다. 크롬개발자도구에서 Application 탭에 들어가면 볼 수 있습니다. 사이트마다 5MB정도의 문자 데이터를 저장할 수 있습니다. object 자료랑 비슷하게 key/value 형태로 저장합니다. 유저가 브라우저를 청소하지 않은이상 영구적으로 남아있습니다. localStorage 문법 js파일 아무데서나 다음 문법을 쓰면 로컬스토리지에 데이터 입출력할 수 있습니다. 차례대로 추가,읽기,삭제 문법입니다. localStor..
지금까지는 삼항연산자로만 JSX에서 if문을 작성했었는데 또 어떤 if문들을 사용할 수 있는지 알아봅시다. 1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 아래와 같이 사용합니다. 우리가 프로그래밍을 하면서 자주사용하던 if문은 return()안의 JSX 내에서는 사용불가능합니다. 그래서 보통 return + JSX 전체를 if문을 작성해서 사용합니다. function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } (참고) else와 중괄호를 하나 없애도 아까 코드와 똑같은 기능을 합니다. 이유는 자바스크립트 function 안에선 return 이라는 키워드를 만나면 return..
