리액트 프로젝트 새로 만들려고 예전처럼 CRA 명령어 썼더니, 이제 지원 안하는 명령어라고 메시지가 떴다.npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supportednpm warn dep..

회사에서 본격적으로 socket.io를 사용해보기 전에 공부하는 의미로 채팅 어플리케이션을 만들어보라는 제안을 받았다. 구글링해서 블로그도 여럿 찾아보고, 챗GPT의 도움도 받으면서 만든 과정을 기록해보려 한다.✍(지금 글을 정리하면서 계산해보니, 최소한의 기능만 구현해서 그런지 최종 완성까지 3일 걸린듯 하다.)프로젝트 생성 및 의존성 설치이게 과정이 생각보다 매우 길었다.아침에 출근하자마자 시작했는데 전처리 과정에만 오전 시간을 다 썼던듯 하다.😂1. 일단 디렉토리 구조를 최상위 폴더 아래에 /server, /client로 나누기socket.io는 서버와 클라이언트가 실시간으로 양방향 통신이 가능하도록 만들어주는 JS 라이브러리니까, '/socket-chat'이라는 최상위 폴더를 만들고 그 아래에 ..

지난 시간에 이어 이번에는 실제로 서버와 통신하며 게시글의 생성, 수정, 삭제가 되는 게시판 만들기를 위해 프론트엔드 쪽에서는 어떤 작업을 했는지 기록해보려고 한다.✍본론으로 들어가기에 앞서, 지난번에 백엔드 작업을 기록하면서 사용 기술도 같이 적어두는걸 까먹었길래 여기에 적어본다.백엔드는 Python, Fast API, MariaDB를 사용했고, 프론트엔드는 Axios, React Query, React, scss를 사용했다.※ 게시판 만들기 백엔드 작업 기록 - https://hjinn0813.tistory.com/149 DB에 CRUD가 되는 게시판 만들기 - Backend나중에 풀스택으로 성장하고 싶다고 말했지만, 이렇게 빨리 백엔드를 배우게 될 줄은 몰랐다.😂hjinn0813.tistory.c..

지난 시간에는 로컬에 있던 프로배구팀 데이터를 가상환경의 DB 계정으로 이관하는 작업을 끝냈다. 이후에 React로 API 불러와서 화면에 보여주는 작업을 하면서, 선수단 전체 목록 페이지에서 특정 선수의 이름을 클릭하면 목록에서 ID값이 추출되며 디테일 페이지로 이동하게 했다. 디테일 페이지에서는 그 선수에 대한 정보만 보여지고, ID값을 통해 이전/이후 버튼을 클릭하면 해당 번호를 가진 선수의 정보가 바로 보여질 수 있도록 했다. 예를 들어 2번 선수를 클릭했을 경우, 이전/이후 버튼을 통해 1번과 3번 선수의 정보를 바로 확인할 수 있는 방식이다.선수단은 인원에 한계가 있기 때문에, 첫번째 팀 데이터로 작업할 때는 이전/이후 버튼의 동작을 위해 dataLength 변수에 정의를 내리면서 숫자를 사용..

옛말에 "백문이 불여일견"이라고 했다.영상 강의를 보는 것도 좋지만 직접 코드를 작성해보는게 더 빨리 익힐 수 있을것 같아서, 예전에 팀플에서 사용했던 코드를 리팩토링하며 React Query와 Axios를 실습해보기로 했다. React Query가 서버에서 데이터를 가져오는 기능이 있기 때문에, 새싹 수업 3차 팀플에서 만들었던 날씨 위젯 코드를 리팩토링해보았다.👩‍💻※ React Query 기본 개념 - https://hjinn0813.tistory.com/126※ Axios 기본 개념 - https://hjinn0813.tistory.com/127일단 사용하려면 npm에서 설치부터 해야하는데, React Query와 Axios의 설치 명령어는 아래와 같다.npm install @tanstack/..

Axios란?자바스크립트(JS)에서 HTTP 요청을 보내고 데이터를 받아오기 위한 Promise 기반 HTTP 클라이언트 라이브러리.브라우저와 Node.js 환경에서 모두 사용할 수 있어서 React, Vue와 같은 프레임워크에서 주로 사용된다.서버와 통신할 때 GET, POST, PUT, DELETE 같은 CRUD 요청을 보내고 데이터를 가져오는 일을 간편하게 처리해준다.Axios 특징Promise 기반: Axios는 비동기적으로 작동하며, Promise를 사용해 HTTP 요청이 완료될 때 결과를 처리할 수 있다.CRUD 메서드 사용: 서버와의 통신을 위해 HTTP의 CRUD 메서드를 명시적으로 사용한다.자동 JSON 변환: 요청을 통해 서버로부터 받은 데이터는 자동으로 JSON으로 변환되어 사용이 쉽..

기존에는 React로 프로젝트를 진행하며 데이터를 불러와서 다뤄야하는 경우, 컴포넌트나 페이지에서 fetch()를 사용하거나 Redux를 사용했다. 근데 회사에서 실제 고객들에게 서비스하는 '제품'을 만들 때에도 이런 방식을 사용하는건 유지/보수 측면에서 불편할 것 같다고 생각했고, 그런 와중에 React Query를 알게 되었다. 사실 지난 여름에 뉴딜 과정 수업을 들으면서도 다른 동기분들을 통해서 React Query의 존재를 알고 있었지만, 이번에 React Query의 특징과 장단점을 확실하게 알게 되었다. 앞으로 회사에서 진행될 프로젝트도 마침 React를 사용할 예정이라, 미리 착실하게 공부해뒀다가 응용해보면 좋을 것 같아서 기록해본다.✍React Query데이터를 서버에서 가져오고, 캐싱하고..

회사에서 페이지 리뉴얼 프로젝트를 담당하게 됐다.피그마로 기획+디자인을 한번에 하고 천천히 살펴보면서, 전체 페이지에 반복 사용되는 요소들이 많으니까 React를 사용해서 컴포넌트 기반으로 작업하는게 훨씬 효율적일 것 같다고 생각했다. 카드나 버튼 컴포넌트는 그동안 공부하면서 프로젝트를 통해 많이 사용해봤는데, 통계 그래프를 보여주는 페이지들에 구글 애널리틱스 차트를 사용한다고 해서 고민이었다."이거 한번도 사용해본 경험이 없는데 React로는 어떻게 렌더링을 해야할까?"사수님이 차분하게 가르쳐주신 내용을 토대로 chatGPT한테 물어봐서 해결했다.React에서 구글 차트 사용하기1) React에서 구글 애널리틱스 차트를 사용하려면, 일단 라이브러리를 설치해야 한다.$ npm install react-g..

이번에 React로 토이 프로젝트를 진행하고, 배포과정에 Vercel을 이용하면서 있었던 경험담을 기록하려고 한다.일단 Vercel을 GitHub 연동해서 가입하고 레포를 불러오는건 구글링하면 많이 나오니까 생략하고..😆GitHub에서 레포를 성공적으로 불러오면, 아래 사진처럼 Import할건지 묻는 페이지를 볼 수 있다. 여기서 Import를 클릭하면, 'Configure Project'라는 배포 직전 설정 페이지로 이동하게 된다. Project Name : 배포할 프로젝트의 이름. GitHub에서 가져온 레포 이름 그대로 입력되길래 굳이 수정하지 않았다.Framework Preset : 프로젝트의 빌드/배포에 사용할 프레임워크, 또는 런타임 환경에 필요한 빌드/배포 설정을 자동 구성한다. 프로젝트를..

이 날은 본격적인 3차 팀플에 앞서, 브랜치 관리하는 방법과 React에서 환경변수를 사용하는 방법을 간단하게 배웠다. 벌써 마지막 팀플이라니 시간이 참 빠르다는 생각이 든다. 각설하고 본론으로!🙂Github에서 Default 브랜치 변경하기기본적으로는 메인 브랜치가 디폴트로 되어있는데, 개발 시에 주로 merge하게 되는건 devel 브랜치라서 디폴트 브랜치를 devel로 변경해주면 좋다. 아래 사진처럼 해당 레포의 Settings > General > Default branch에서 변경하면 된다.Github에서 머지된 브랜치 자동으로 삭제하기한번 머지된 브랜치는 더이상 사용하지 않는 경우가 대부분이라, 해당 기능에 대해 개발이 끝났다면 바로 정리해주는게 좋다. 하지만 이걸 일일이 삭제하기엔 번거롭기..