뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

PWA를 만든 이유모바일로 인프런을 이용할 때 매번 [ 크롬 -> 탭을 누르기 -> 인프런 들어가기 -> 강의 누르기 ] 이런 경로를 타다보니 귀찮게 느껴졌는데 마침 인프런 앱이 있었다.그래서 앱을 다운 받아봤는데 마치 PWA 환경과 비슷하다고 생각이 되어서 찾아봤다.[ 개발자 환경 -> 애플리케이션 -> 매니페스트 ] 를 보면 짐작은 할 수 있는데 PWA를 사용할 수 있는 조건은 만족하고 있는 것 같았다.그래서 회사 프로젝트 중 일반 유저들이 사용하는 프로젝트 하나에 PWA를 추가하기로 생각했다. PWA의 장점PWA는 Progressive Wab App을 말한다.직접 네이티브로 개발하지 않아도 웹 개발 한 것을 기반으로 앱을 만들 수 있다는 장점을 가지고 있는데 주요 사용 기업으로는 "스타벅스", "트..

NextJS를 처음 도입해서 프로젝트를 하고 있다.대부분 React만 했었고, NextJS는 React와 거의 같다라고 들어서 큰 문제 없이 사용할 수 있을지 알았는데 생각보다 CSR, SSR을 맞춰서 사용해야하다보니 고민을 해야하는 부분이 많았다. 오늘은 프로젝트 중 만난 Warning 중 하나인 Props must be serializable for components in "use client" file.... 의 해결에 대해서 알아보려고 한다.  배경어떤 경우 문제가 나타났는지 살펴보자면.../////////////////////////////////////////////////////////////// 부모 컴포넌트/////////////////////////////////////////////..

DFS(깊이우선탐색)가 너무 머리에 안 들어오다가 같은 문제를 계속 보다보니까 이제 뭔가 "아하!" 하는게 생겼다.아래는 백준 2606 바이러스 문제이다.물론 백준에서 직접 readFileSync해서 파일 불러오는 것부터 해보면 좋지만 나는 목적이 문제 해결 능력이다보니 겉치레는 치우고, 콘솔을 찍어볼 수 있도록 주로 JDoodle 같은 곳에서 문제를 풀어보는 편이다.그럼 문제를 살펴보자.   위 예제 입력을 보다시피 input은 아래와 같이 사용한다.const input = [ 7, 6, 1 2, 2 3, 1 5, 5 2, 5 6, 4 7] 그리고 문제를 풀어보자. 전체 해결 코드는 아래와 같다.function solution(input) { let an..

나의 경우 총 3개의 깃헙 계정 등록이 필요했다.전에도 한 적은 있었는데 할 때마다 까먹어서 기록해두려고 한다. 등록 필요한 계정은 총 3개다. 1. 회사 업무용 깃헙 계정2. 이전에 SI 수주 받아서 Vercel에 배포 되는데 사용하고 있는 퇴사자의 깃헙 계정3. 개인적으로 사용하는 깃헙 계정 전에도 똑같은 블로그를 참고 하고 만들었는데 이번에도 똑같이 참고하면서 만들어보니 3개가 다 잘 되더라. 1. SSH key 생성하기cd ~/.ssh .ssh 폴더에 들어가서 파일 유무를 확인해보자.기존에 가지고 있던 파일이 있었지만 깨끗하게 다 지우고 다시 만들어주었다.만드는 방법은 아래와 같다. ssh-keygen -t rsa -C "회사이메일주소" -f "id_rsa_company"ssh-keygen -t ..

프론트엔드 개발을 하면서 가장 신경이 쓰이는 부분은 아무래도 상태관리일 것이다.그 중요도를 아는 만큼 redux, zustand, recoil, mobX, jotai 등 다양한 전역 상태관리 툴이 라이브러리로 제공되어지고 있고, 리액트 자체에서도 context API와 같은 훅을 제공해주기도 한다. 상태 관리라는 말은 애플리케이션의 상태(Data)를 효율적으로 관리하는 것을 말한다.UI는 사용자의 interaction에 따라서 동적으로 변해야 하고, 유저의 입력 값, 서버와의 통신 등 다양한 상태를 관리하게 되는데, 적절한 상태 관리 전략을 고려하지 않으면 대규모 애플리케이션의 개발 및 유지보수가 매우 어려워지므로 상태를 효율적으로 관리할 필요성이 있는 것이다.  Local state management..

개발 공부를 하다보면 디자인 패턴이라는 것에 대해서 들어봤을 것이다.디자인 패턴이라는 것은 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 재사용 가능한 솔루션을 제공해놓은 것을 말한다.대표적으로는 이라는 것이 있다. 그렇다면 React를 주로 사용하는 프론트엔드 개발자에게 있어서 사용할 수 있는 디자인패턴은 어떤 것들이 있을까?  HOC(고차 컴포넌트)우선 HOC이다. HOC는 자주 들어봤을 것이라고 생각한다. 이는 컴포넌트 자체를 인수로 받아들이고 향상된 기능을 갖춘 새 컴포넌트를 반환하는 함수이다.추가 기능으로 컴포넌트를 감싸서 코드 재사용, 교차 편집 문제 및 동작 구성을 가능하게 한다.HOC를 이용한 authentication, data fetching, memoization 등을 할..

React(리액트)는 NextJS와 더불어 최고의 주가를 달리고 있는 프론트엔드 라이브러리이다.그러나 우리는 프론트엔드, 백엔드 등의 웹/앱 개발자이지 리액트 개발자가 아니다.리액트 자체에 너무 한정적으로 공부할 필요는 없다.그러나 리액트를 사용하겠다라고 하면 조금 더 깊이 있게, 혹은 명확히 알고 사용하는 것이 좋다고 생각한다.그래서 ReactJS를 사용하는데 있어서 필요한 것들을 나누려고 한다.   ReactJS란 무엇인가?다들 리액트 공식 문서는 한 번 이상 보면서 사용하고 있을 것이라고 생각한다.그러나 보통 learn, 혹은 reference, api 쪽을 주로 보게 되는 것 같다.그 라이브러리가 무엇인지 알기 위해서는 메인 홈페이지를 먼저 살펴보는 것이 좋다.리액트에 대한 설명을 보면 Creat..

현재 Next.js를 사용하고 있고, Docker를 통해 배포를 하고 있다.Filezilla를 통해서 업로드를 하고 있는데, React의 경우에는 build를 하고 나면 index.html과 assets 정도만 나오기 때문에 그것만 Filezilla로 올리도록 만들었다.그런데 Nextjs의 경우에는 build를 하고 나서 static export를 하게 되면 하나의 index.html이 나오는 것이 아니라 여러개의 html 파일이 나오게 된다.그러면서 기존에 업로드 하는 방식과 방법이 달라져서 문제가 생겼고, 이를 위해 Docker로 이미지를 만들어서 압축해서 올리면 그것을 선임 개발자가 처리하는 방식으로 했다.그런데 다른 문제가 또 있었다.기존에 회사에서 SI 업체에 맡겨서 작업을 했던 것들이 있어서 ..