개탕 IT FACTORY

개요 리액트를 처음 배웠을 당시 전역상태관리 라이브러리는 Redux와 Mobx밖에 없었다 심지어 Redux가 우위에 있을정도로 다운로드 차이가 많이났었는데 당시 입사했던 회사에서는 Mobx를 사용하여서 경험만 해보았을 당시에는 리덕스에 비해서 편리하다는 느낌을 많이 받았던걸로 기억한다. 최근이라기는 너무 오래되긴했지만 다양한 상태관리 라이브러리가 존재하는 것 같다. react를 개발하는 메타(구 페이스북)에서는 recoil이라는 것을 내놓았고, 그에 영감을 받아 Jotai, zustand의경우 redux와 유사하지만 보일러플레이트가 많이 줄어들어 쉽게 쓸수있는것 같다. TanStack Query(구 React-Query)가 나온뒤로 전역 상태관리 라이브러리의 필요성이 많이 줄어든것같지만, 그래도 내부적으..

개요 저번 포스팅에서 CRA는 죽었다(라는 표현보단 deprecated)라는 포스팅을 하였는데 이번에 최근에 각광받고 있고, 빠른 vite로 CRA(create-react-app)을 마이그레이션(migration) 해볼까한다 사실 CRA로 게시되있는 프로젝트를 바꾸는 방법은 두가지인데 Case1. Vite로 새롭게 만들기 사실 가장 원시적인 방법이다. 일단 가장 어려운점은 프로젝트 사이즈가 크지 않은 거라면 상관없지만 프로젝트가 크다면, 관련된 라이브러리 및 연관된 디펜던시등의 설정이 어려움이 있을가능성이 높다 그렇기 때문에 이부분은 PASS Case2. Webpack to Vite 이번 포스팅을 하게 된 계기인데 가장 안정적인 방법이지 않을까 싶다 기존프로젝트를 유지한채로 vite만 갈아 끼우는 방법 ..

RIP CRA(Create-React-App) CRA(Create-React-App)이 죽었다… 아 죽었다는 표현보단는 deprecated가 맞는 표현 같다 React에서는 새로운 문서 https://react.dev/ 를 공개하고 이전 문서의 지원을 중단했는데 충격적이게도… 새프로젝트 생성부분에 CRA(Create-React-App)부분이 존재하지 않았다 충격 실화! 근데 사실 전부터 이런 이슈는 존재해왔는데 어떤점이 문제였고, 그러면 어떤부분이 바뀌었는지 확인해보자 이후 Create-React-App는 CRA로 표현 💡 들어가기 앞서 이영상을 참고하면 좋을거 같다 https://www.youtube.com/watch?v=M4CLvtCS2YU 성능 이슈 사실 이문제는 전부터 존재하였지만, 새로운 모듈러..

서론 작년 State of CSS 2021 에서 tailwind 라는 프레임워크를 알게되었다. 그때는 사실 bootstrap같은 프레임워크에 불과하겠지라는 생각했지만 막상 들여다보니 많이 달랐다 특히 내가 공부할려던 vite, nextjs에서는 공식적으로 지원하기 시작하였고, 막상 본인도 궁금해져서 맛볼겸 프로젝트에 적용할겸 공부차원에서 넣을려고 한다. Tailwind CSS가 무엇인가? Utility-First를 지향하는 CSS 프레임워크이다. Utility-First 란? 미리 세팅된 Utility 클래스를 사용해서 만드는 것을 말한다. 기존에 클래스명을 고민하느라 고생했지만 tailwind에서는 관련된 클래스만 쓰면 바로 사용이 가능하다 Click me 설치과정 https://tailwindcss...

1. 개요 개인 공부를 하던 와중에 친구와 공부내기에서 떠올린 프로젝트이다. 친구와 몇시간 혹은 특정 장소에서 공부한걸 인증한걸 공유하자 (도서관, 카페) 대신 집과 거리가 멀고, 공부를 하지 않고 인증만해도 그정도의 정성은 인정하자는 분위기였다. 근데 매번 타이머키고 인증하고, 또 공부 타이머앱 깔고 분석하기엔 뭔가 별루였다… (뭔가 보상이 없달까?) 그래서 뭔가 보상도 있고, 인터페이스도 쉬우면서, 동기부여가 되는 타이머앱을 만들기로 했다. 2. 기능 기본기능 타이머 : 당연하다, 타이머 앱이니까 타이머는 기본 탑재이다 분석기능 : 기본적인 목표치를 설정 주단위 분석 또는 달단위 분석 기능을 탑재할까 싶다 공유기능 : 자신의 공부시간 혹은 공부량등을 자랑할수있게 공유기능을 넣을예정 커뮤니티 기능 : ..

개요프로젝트를 진행할때마다 CRA를 활용한 어플개발을 많이 하였다. 일단 환경 구축등의 시간 단축이 좋다는 이유로 많이 사용하였지만, CRA의 단점은 커스텀이 어렵다는 부분이 있다.물론 npm run eject을 통해서 webpack설정을 바꿀순 있지만, 기존에 지원하던 좋은 장점을 버리는 거라 추천은 하지 않는다 (사실 직접 webpack으로 골라 만드는게 좋을듯…)그래서 SSR, SSG의 장점이 가진 Nextjs를 나만의 boilerplate로 제작해볼까 한다.준비사항일단 어떤 요소를 넣어야 하는지에 대한 부분이 필요했다.필수요소typescriptESLintPrettierReact-testing-library, jeststyled-componentstailwindCSS데이터페칭위 필수요소를 기반으로 ..

2. 스택(stack) Stack O(n) O(1) O(1) 순서가 보존되는 선형 데이터 구조 유형 가장 마지막 요소부터 처리하는 LIFO(Last In First Out) 구조 장단점 장점 동적 메모리크기 데이터를 순서대로 정렬 단점 최신데이터만 가져온다 한번에 하나의 데이터만 처리가능 코드 // 클래스 구현 class Stack { constructor(){ this.arr = []; this.index = 0; } push() { this.arr[this.index++] = item; } pop() { if(this.index

1. 배열 자료구조 가져오기 추가 삭제 Array O(n) O(n) O(n) 배열은 가장 기본적인 데이터 구조다. 동일한 타입의 데이터들을 저장(Javascript는 예외), 고정된 크기를 가진다. 인덱싱이 되어 있어 인덱싱 번호로 데이터 접근 가능 장단점 장점 원하는 데이터를효율적으로 탐색이 가능하다. 정렬에 용이해 다양한 정렬 알고리즘에서 사용 (삽입,빠른, 버블, 병합) 복잡한 자료구조의 기초 단점 데이터를 저장 할 수 있는 메모리 크기가 고정 데이터 추가/삭제가 비효율적 코드 let Array = [2,4,10,5,15,3]