CRA 명령어 지원 종료, vite 개념 정리
·
💻 Frontend/React
리액트 프로젝트 새로 만들려고 예전처럼 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..
맥북 개발환경 설정 (홈브루, git, node.js 설치)
·
🧪 실험 기록
본론으로 들어가기에 앞서, 개인적인 이야기를 몇 자 풀어보자면, 벌써 나의 개발자 인생도 반년을 채웠다. 앞으로도 개발자로 살 예정인데 언제까지 윈도우만 고집할 수 없어서 맥북을 배워보기로 하고, 정말 큰 마음을 먹고 거금을 들여 중고 맥북프로를 구매했다. 그리고 구매한 맥북이 도착한 다음날이었던 어제, 퇴근 2시간 전에 기존에 사용하던 윈도우 노트북의 터치패드가 고장났다.🥲나는 작업할 때 왼손은 터치패드에, 오른손은 마우스를 쥐고 하는게 습관이다. 클릭도 마우스보다 터치패드로 하는걸 선호하는데, 이게 갑자기 고장나니까 작업이 쉽지 않았다. 맥북에 천천히 적응하려고 했는데, 공교롭게도 윈도우 터치패드가 고장나서 오늘부터 출퇴근 시에 맥북을 써야했기 때문에, 개발환경 설정을 빨리 해야했다.일단 Chrom..
github README에 티스토리 최신글 업데이트
·
🧪 실험 기록
예전에 깃허브 프로필에 티스토리 최신글 확인해서 보여주는 카드 위젯이 있었는데, 지원이 끊어져서 엑박으로 나오길래 삭제했다. 티스토리 꾸준히 작성하고 있는걸 깃허브에서도 보여줄 수 있으면 좋을 것 같다고 계속 생각하고 있었는데, 아래 레포와 블로그 글을 읽고 RSS 통해서 최신글 정보를 끌고오면 된다는걸 알게 됐다.실제로 실험을 해봤는데 제대로 안 되는거 같아서 일단 깃허브에서 해당 파일을 삭제했다..뭐가 문제였는지 모르겠음.. 나중에 다시 자세히 읽어보고 시도해봐야지!😂https://github.com/gautamkrishnar/blog-post-workflow GitHub - gautamkrishnar/blog-post-workflow: Show your latest blog posts from a..
UI/UX 기획 관련 인사이트
·
💻 Frontend/UI.UX.Figma
Threads에 개발자 분들이 많아서 종종 피드에서 유익한 글을 읽게 되는데, 2주 전쯤에 UI/UX와 관련한 글을 읽고 캡쳐해둔 내용을 블로그에 백업해본다. 웹사이트 혹은 어플리케이션에 고객이 유입되고 그게 구매로 연결되어 실제 매출이 잡히려면, 사용자의 편의를 생각하는 UI/UX가 중요하다는 것을 공부할 당시에 배워서 알고 있었지만, 현재 일하면서 몸소 체감하고 있다.어떻게 해야 더 많은 고객을 유입시킬 수 있을까고객이 우리 웹사이트/어플리케이션을 사용해야하는 이유가 뭘까 (소구점 어필)유입률이 구매율로 이어지려면 어떻게 해야하는가
IDE의 종류 (VS code 에러 해결)
·
📚 자료실
작년 늦가을부터 사수님의 가르침에 따라, 회사에서 대부분의 코드는 vscode로 ssh 원격접속을 해서 작업하고 있다. 이제는 손에 익어서 원격접속 정도는 금방 하는데, 간혹 코드 작성 중에 vscode에서 서버와 연결을 유지하려고 로딩중인 액션이 뜨고, 결국 터미널에 connection timeout 이라는 메시지를 띄우며 연결이 끊어지는 상황이 자주 발생했다.작업 중인데 연결이 끊어지면 그만큼 업무 효율이 떨어지는거라, 이 방법을 해결하려고 다양한 시도들을 해봤다.일단 connection timeout 이라는 메시지가 뜨는 원인은 서버의 CPU가 사용률 100%에 달할 정도로 과도하게 돌아가고 있기 때문이었고, 그래서 서버의 리소스를 최대한 줄일 수 있도록 vscode의 settings.json에서 ..
활성사용자 정의
·
📚 자료실
활성사용자 Active User웹분석에서는 방문수(Visit), 방문자수(Visitor) 등의 용어로 사이트의 방문횟수를 측정하지만, 앱 분석에서는 DAU(Daily Active User), WAU(Weekly Active User), MAU(Monthly Active User)라는 지표로 앱 사용현황을 파악.**활성사용자에 대한 기준에 따라 계산이 달라질 수 있음.방문수(Visit)는 다른 말로 세션(Session)이라고 함. ‘세션’은 쉽게 말해서 ‘총 방문한 횟수’, 방문할 때마다 또는 앱을 실행할 때마다 증가하는 수치.앱을 사용하는 실제 사용자의 수를 파악하기 위해 각각의 계정/디바이스마다 UUID(Unique User ID)를 부여하여 조건 기간마다 1회만 측정하여 사용자 수를 판단.DAU, W..
socket.io로 채팅 어플리케이션 만들기 (w. React, Express)
·
💻 Frontend/React
회사에서 본격적으로 socket.io를 사용해보기 전에 공부하는 의미로 채팅 어플리케이션을 만들어보라는 제안을 받았다. 구글링해서 블로그도 여럿 찾아보고, 챗GPT의 도움도 받으면서 만든 과정을 기록해보려 한다.✍(지금 글을 정리하면서 계산해보니, 최소한의 기능만 구현해서 그런지 최종 완성까지 3일 걸린듯 하다.)프로젝트 생성 및 의존성 설치이게 과정이 생각보다 매우 길었다.아침에 출근하자마자 시작했는데 전처리 과정에만 오전 시간을 다 썼던듯 하다.😂1. 일단 디렉토리 구조를 최상위 폴더 아래에 /server, /client로 나누기socket.io는 서버와 클라이언트가 실시간으로 양방향 통신이 가능하도록 만들어주는 JS 라이브러리니까, '/socket-chat'이라는 최상위 폴더를 만들고 그 아래에 ..
WebSocket과 socket.io의 기본 개념
·
📚 자료실
회사에서 새로운 프로젝트에 socket.io를 사용할 예정이니까 미리 공부해두라고 해서 기록하는 글.socket.io를 알기 전에 먼저 WebSocket이 뭔지부터 공부해봤다.웹소켓(WebSocket)실시간 양방향 데이터 전송을 위한 기술로, 'WS 프로토콜' 이라고도 부른다.TCP를 기반으로 하는 "전송 계층 프로토콜"이다.※ OSI 7계층 설명은 여기 참고 - https://hjinn0813.tistory.com/133 프로토콜의 개념과 종류, OSI 7계층, TCP/IP 4계층데이터 전송 절차와 관련해서 공부를 하다보니, 올해 상반기 정보처리기사 준비하면서 봤던 OSI 7계층을 다시 보게 됐다.hjinn0813.tistory.com실시간 통신을 위해, 가장 초기에는 폴링(polling)이라는 방식을..
버전 관리 CVCS, DVCS의 개념
·
💻 Frontend/HTML, git
개발에서 '버전 관리'는 코드의 변경사항을 관리하며, 만약 실수나 에러가 생겼을 경우에 복구를 쉽게 해주는 작업이다. 그동안 '버전 관리'라고 하면 git 밖에 몰랐는데, 크게 2개의 시스템으로 나눌 수 있다고 해서 공부해보았다.CVCS (Centralized Version Control System)중앙집중식 버전 관리 시스템. 장점- 중앙 서버에서 모든 파일과 기록을 관리하며, 유저는 서버에 연결해 데이터를 다운로드/업로드한다. - 작업 시마다 서버와 통신하며, 모든 변경 사항이 바로 중앙 서버에 반영된다. - 단일한 저장소로 데이터 통제가 가능하고, 서버에 모든 데이터가 있어서 백업이 명확하고 직관적이다.단점- 중앙 서버가 항상 모든 데이터를 갖고 있어서 '의존성'이 강하다.- 네트워크가 반드시 연..
CSS 가상선택자 적용 순서
·
💻 Frontend/CSS, Tailwind
일년전쯤 배우긴 했지만 그리 깊게 배우진 않았어서, 이번에 실제 작업하며 약간 헷갈렸던 CSS와 관련된 내용을 기록해본다. 당시 공부하며 학습내용을 정리했던 글도 링크로 첨부한다.https://hjinn0813.tistory.com/12 [코딩온] 프론트엔드 입문 Day 17 (CSS 문법, 선택자)드디어 CSS에 대해서 배우기 시작했다.hjinn0813.tistory.comCSS 가상선택자의 종류Pseudo-classes '상태'를 의미히며, 콜론 1개를 사용한다. 실제 HTML 요소에만 적용이 가능하다.:hover /* 요소에 마우스를 올릴 때 */:focus /* 요소에 포커스가 있을 때 */:checked /* 요소가 체크된 상태 (checkbox, radio) */:active /* 요소가 클릭..