눕라이크 눕라이크

전체 글

• create-react-app 처럼 cli를 하나 만들어보자

  Node 2024. 3. 25. 18:50

  Create-react-app와 같이 cli를 만들 필요가 있어 create-react-app repository를 풀 받아서 분석했습니다. Npm package를 만들고 npm에 배포하면서 얻은 노하우를 공유드립니다. https://pingfanzhilu.tistory.com/entry/Vuejs-Vue-CLI-UI%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-Vue-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EC%83%9D%EC%84%B1%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 [Vue.js] - Vue CLI UI를 사용해서 Vue 프로젝트를 생성하는 방법 #Vue UI란? Vue UI는 Vu..

  Read More
• 리액트 개발 전 알아야 할 자바스크립트 및 노트 (개인적인 노트)

  Javascript/노트 2023. 12. 24. 22:56

  리액트 딥다이브의 "알아야 할 자바스크립트" 부분이랑 [스코프, 이벤트 루프와 태스크 큐, promise, 실행컨텍스트, 호출스택, this]를 정리한 개인적인 노트입니다 1. 객체 간 비교 Object.is는 참조가 다른 객체에 대해 비교가 불가능하다 Object.is({ hello: 'world'}, { hello: 'world'}); // false 리액트에서의 shallowEqual 객체 비교는 1 depth까지는 비교가 가능하다 shallowEqual({ hello: 'world'}, { hello: 'world'}); // true // 객체 안 객체 또는 2depth까지 가면 비교할 방법이 없다 2. 함수를 정의하는 방법 2-1) 함수 선언문 (호이스팅됨) console.log(add); /..

  Read More
• React HOC (Higher Order Component) 디자인 패턴

  Front-end/React 2023. 12. 5. 00:33

  Loado V2 (https://loado-v2.vercel.app/) 로스트아크 시세확인 및 재련시뮬레이션 프로젝트를 진행하면서 여러 타입의 input을 만들어야 할 이유가 있었습니다. 프로젝트 화면 이 프로젝트에서 따로 개발해야 할 Input 컴포넌트는 아래와 같습니다. InputDefault -> 기본 input 컴포넌트 InputDefaultNumber -> 숫자만 입력받을 수 있는 input 컴포넌트 InputSearch -> input안에 검색 아이콘이 있는 input 컴포넌트 InputWithIcon -> input과 여러 아이콘을 조합할 수 있는 input 컴포넌트 기본적으로 Semantic UI React라는 UI library를 base로 따로 customizing하여 컴포넌트를 개발했..

  Read More
• 로스트아크 api호출에 쓰일 수 있는 axios instance를 만들어보자

  Javascript 2023. 6. 18. 16:38

  https://developer-lostark.game.onstove.com/ 에서 제공되는 api를 호출하기 위한 axios instance를 만들어 호출해보는 방법을 소개하고자 합니다. (사이트 들어가서 api토큰을 만들어줘야 합니다) 곧 출시할 Loado (로스트아크 게임 관련 정보제공 사이트) 버전2를 개발하면서 겪은 내용과 경험을 바탕으로 작성합니다. 여기에 제가 작성할 내용은 큰 틀에서 보면 다음과 같습니다. Lostark api에 통신할 axios instance랑 서비스를 만들기 (Axios) { if ( config.url?.endsWith("markets/items") || config.url?.endsWith("auctions/items") ) { Object.assign(config..

  Read More
• [사이드 프로젝트] Loado App (로스트아크 숙제관리)

  사이드 프로젝트/Loado App 2023. 1. 14. 20:09

  로스트아크 숙제관리 및 아이템 시세 조회 App 저연차 때 만든 공부용으로 만들었으며 엄청난(?) 열정과 패기로 개발한 첫 작업물입니다 홍보도 하고 사용자의 피드백을 수용하면서 개발하여 재밌는 프로젝트였습니다. (Loado App은 현재 운영중이지 않으며 신규 버전으로 재출시 할 수도 있습니다) 개요 집과 피시방을 번갈아가면서 기존 App을 이용할 경우 데이터가 공유되지 않으니 자기가 세팅한 케릭터들의 숙제현황을 보지 못하거나 보고자 할 경우 따로 파일을 저장+불러오기하여 작업해야 했습니다. 이런 문제를 해결하고자 데이터를 DB화하여 언제 어디서든 로그인만 하면 자기 케릭현황을 파악할 수 있도록 했습니다. 홍보 URL https://www.inven.co.kr/board/lostark/4811/30239..

  Read More
• Slack에서 쓰는 에디터를 비슷하게 구현해보자 (drag & drop포함)

  Front-end/React 2023. 1. 8. 19:06

  React-Quill을 이용하여 Slack의 editor 구현해보기 (Nextjs) 게시판 글쓰기, 댓글, 건의사항 작성, 등 이런 기능들을 개발할 때 간단하게 textarea로 개발할 수 있지만 이미지, 링크, 코드에디팅 등의 기능이 필요한 경우 별도의 에디터가 필요한 경우가 많습니다. 직접 개발할 수 있지만 보통은 library를 이용해서 개발을 진행합니다. 여기에선 react-quill 라이브러리를 이용한 방법을 공유합니다. 그러나 다른 에디터의 경우는 모르겠지만 react-quill의 경우 보통 이미지를 copy+paste를 진행하면 아래 이미지처럼 에디터 내부에 이미지가 들어갑니다. 이런 상황이 발생하면 에디터 내부가 어지럽고 이미지가 좀 클 경우 에디터의 높이가 증가할 수 있습니다. 아래 그림..

  Read More
• Storybook & SASS 설정

  Front-end/Nextjs (12버전) 2022. 12. 11. 22:27

  Nextjs Storybook설정 & SCSS 적용 방법 보통 프로젝트에서 개발자들이 각자 컴포넌트를 만들면 이를 다른 개발자들에게 공유를 하거나 작동방식에 대한 예시가 필요합니다. 이는 ExamplePage이나 샘플 페이지를 만들어서 작동하는걸 보여줄 수 있지만 스토리북을 이용해 보여주는 방식이 더 좋습니다. 이 페이지에서 스토리북을 어떻게 만들고 설정을 적용하는지 설명드리겠습니다. 링크: https://github.com/biglol10/tistory_source/tree/main/nextStorybook 우선 해당 페이지에서 필요한 패키지들은 아래와 같습니다 sass, sb, style-loader, css-loader, sass-loader 우선 npm install --save-dev sb 후 ..

  Read More
• Nextjs에 Redux Toolkit와 Redux Saga 적용하기

  Front-end/Nextjs (12버전) 2022. 12. 1. 00:51

  Nextjs에 RTK와 Saga로 전역상태관리하기 Redux는 유용하게 쓰기 위해선 복잡한 설정들을 해야 했으며 많은 패키지를 설치해야 했습니다. 이런 문제들을 해결하기 위해 Redux-Toolkit (=RTK)이 등장했습니다. 다만 RTK는 Redux-Saga를 지원하지 않으니 이를 따로 설치해서 적용해야 합니다. Redux에서 액션을 dispatch하고 비동기 작업까지 다 작성+컨트롤하면 화면단에 소스가 엄청 길어질 수 있습니다. UI는 최대한 간결해야되며 가능하면 렌더링 관련 로직만 있는 것이 좋습니다. 이런 비동기 작업을 해결해 주는게 Redux-Saga입니다. 프로젝트 소스가 많이 길고 이해가 힘들 수 있으니 티스토리용 제 깃헙 링크 공유드립니다 링크: https://github.com/bigl..

  Read More