리액트 프로젝트 새로 만들려고 예전처럼 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..

Threads에 개발자 분들이 많아서 종종 피드에서 유익한 글을 읽게 되는데, 2주 전쯤에 UI/UX와 관련한 글을 읽고 캡쳐해둔 내용을 블로그에 백업해본다. 웹사이트 혹은 어플리케이션에 고객이 유입되고 그게 구매로 연결되어 실제 매출이 잡히려면, 사용자의 편의를 생각하는 UI/UX가 중요하다는 것을 공부할 당시에 배워서 알고 있었지만, 현재 일하면서 몸소 체감하고 있다.어떻게 해야 더 많은 고객을 유입시킬 수 있을까고객이 우리 웹사이트/어플리케이션을 사용해야하는 이유가 뭘까 (소구점 어필)유입률이 구매율로 이어지려면 어떻게 해야하는가

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

개발에서 '버전 관리'는 코드의 변경사항을 관리하며, 만약 실수나 에러가 생겼을 경우에 복구를 쉽게 해주는 작업이다. 그동안 '버전 관리'라고 하면 git 밖에 몰랐는데, 크게 2개의 시스템으로 나눌 수 있다고 해서 공부해보았다.CVCS (Centralized Version Control System)중앙집중식 버전 관리 시스템. 장점- 중앙 서버에서 모든 파일과 기록을 관리하며, 유저는 서버에 연결해 데이터를 다운로드/업로드한다. - 작업 시마다 서버와 통신하며, 모든 변경 사항이 바로 중앙 서버에 반영된다. - 단일한 저장소로 데이터 통제가 가능하고, 서버에 모든 데이터가 있어서 백업이 명확하고 직관적이다.단점- 중앙 서버가 항상 모든 데이터를 갖고 있어서 '의존성'이 강하다.- 네트워크가 반드시 연..

일년전쯤 배우긴 했지만 그리 깊게 배우진 않았어서, 이번에 실제 작업하며 약간 헷갈렸던 CSS와 관련된 내용을 기록해본다. 당시 공부하며 학습내용을 정리했던 글도 링크로 첨부한다.https://hjinn0813.tistory.com/12 [코딩온] 프론트엔드 입문 Day 17 (CSS 문법, 선택자)드디어 CSS에 대해서 배우기 시작했다.hjinn0813.tistory.comCSS 가상선택자의 종류Pseudo-classes '상태'를 의미히며, 콜론 1개를 사용한다. 실제 HTML 요소에만 적용이 가능하다.:hover /* 요소에 마우스를 올릴 때 */:focus /* 요소에 포커스가 있을 때 */:checked /* 요소가 체크된 상태 (checkbox, radio) */:active /* 요소가 클릭..

지난 시간에 이어 이번에는 실제로 서버와 통신하며 게시글의 생성, 수정, 삭제가 되는 게시판 만들기를 위해 프론트엔드 쪽에서는 어떤 작업을 했는지 기록해보려고 한다.✍본론으로 들어가기에 앞서, 지난번에 백엔드 작업을 기록하면서 사용 기술도 같이 적어두는걸 까먹었길래 여기에 적어본다.백엔드는 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 변수에 정의를 내리면서 숫자를 사용..

Zustand는 강의가 없어서 어떻게 연습해볼 수 있을까 고민하다가, 아무래도 다양한 자료를 찾아보는 것보다는 직접 코드를 작성해보고 한 줄씩 해석해보는게 더 빨리 익힐 수 있으니까 지난번처럼 공부하면서 만들었던 코드를 리팩토링해보기로 했다. 이번에는 Zustand로 전역에서 상태관리를 하는 로직이어서, 개인 프로젝트 당시에 Redux로 로그인 여부를 확인하고 Header에 반영시켰던 로직을 수정해보았다.이번에 리팩토링한 기존 코드는 아래 주소에 있다.(헤더, 로그인 페이지 모두 수정했지만 가장 간단한 헤더 링크를 가져왔다.)https://github.com/hjinn0813/cinetalk/blob/devel/src/components/Header/Header.jsx기존의 코드는 Redux를 사용해서 ..

옛말에 "백문이 불여일견"이라고 했다.영상 강의를 보는 것도 좋지만 직접 코드를 작성해보는게 더 빨리 익힐 수 있을것 같아서, 예전에 팀플에서 사용했던 코드를 리팩토링하며 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/..

Redux, Zustand 같은 전역 상태관리 라이브러리는 Flux 패턴을 기반으로 만들어졌다.나는 이미 Redux를 사용해봤기 때문에 Flux 패턴에 대해서도 특징과 장단점을 알고 있지만, 텍스트로 정리해두면 좋을 것 같아서 기본적인 개념부터 이와 반대되는 패턴들까지 정리해본다.✍Flux 패턴웹 애플리케이션의 전역 상태 관리를 더욱 효율적이고 일관되게 할 수 있도록 설계된 아키텍처 패턴.2014년에 Facebook에 의해 개발되었으며, 다양한 JS 라이브러리나 프레임워크에서 사용되지만 특히 React에서 주로 사용되고 있다. 단방향 데이터 흐름을 통해 상태 변경을 명확하게 추적하고 관리할 수 있다는 장점이 있다.Flux 패턴의 특징단방향 데이터 흐름 (Unidirectional Data Flow): 데..