판교너굴맨의 개발노트

package.json.lock 파일을 .gitignore 설정하고 진행 중이던 프로젝트에 최근 문제가 생겼다. 그 과정에서 package-lock.json 파일에 대해 좀 더 알아보는 시간이 될 수 있었다. 1. package.json란? 현재 프로젝트에 대한 이름, 버전 등의 정보와 패키지 매니저로 설치한 모듈의 의존성을 관리하는 파일이다. npm공식문서: https://docs.npmjs.com/cli/v9/configuring-npm/package-json package.json 2. package-lock.json란? package-lock.json is automatically generated for any operations where npm modifies either the node_m..

2021.09.24 - [React-native] - [React Native] Windows에서 React native 환경 구축부터 실행까지 1. Homebrew 설치 Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다. Homebrew: https://brew.sh/ 터미널을 열어 명령어로 Homebrew를 설치하고 잘 설치 됐는지 확인해 보자. $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ brew --version Homebrew 3.6.20 2. rbenv설치 rbenv는 Ruby 버전 관리자이다. Mac에는 ..

1. NVM이란? Node Version Manager. 노드 버전 관리자이다. 프로젝트마다 다른 노드 버전을 관리하기에 유용하다. 2. NVM 설치 1. Homebrew 설치 Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다. Homebrew: https://brew.sh/ 터미널을 열어 명령어로 Homebrew를 설치하고 잘 설치 됐는지 확인해보자. $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ brew --version Homebrew 3.6.20 2. NVM 설치 homebrew를 통해 NVM을 설치한다. $ b..

git alias를 설정하면 자주 사용하는 git 명령어들을 좀 더 간단하게 사용할 수 있다 귀찮은 걸 싫어하는 개발자들... Alias 추가 # global git config --global alias.[단축어] [git명령어] git config --global alias.st status # local git config alias.[단축어] [git명령어] git config alias.st status Alias 삭제 # global git config --global --unset [단축어] git config --global --unset aliad.st # local git config --unset [단축어] git config --unset aliad.st Alias 조회하기 # gl..

배열 (Array) 배열이란 같은 종류의 데이터들이 연속된 메모리 공간으로 이루어져 있는 자료구조를 말한다. 예를 들어 크기가 8인 배열 하나를 생성한다고 하면 컴퓨터는 연속된 빈 공간을 찾아 데이터를 할당하게 된다. 장점 컴퓨터는 위 메모리에서 배열의 시작과 끝이 어디인지 알고 있기 때문에 내가 배열의 3번 인덱스를 참조할 때 0...1...2 순차적으로 찾는 게 아니라 3번 인덱스에 바로 참조할 수 있다. 그래서 시간 복잡도는 O(1)이 된다. 즉, 읽기 쓰기와 같은 참조에서는 O(1)의 좋은 성능을 가졌다. 단점 하지만 배열에 데이터를 빈번하게 추가하거나 삭제하는 경우에는 비효율적이다. 배열 중간에 값을 추가하게 되면 추가하려는 부분의 자리를 비우고, 기존 데이터는 복사되어 한 칸씩 미뤄지게 된다...

1. Debug 사용하기 위한 설정 craete a launch.json file.을 클릭한다. VSCode에 내장되어 있는 Chrom debugger를 사용하기 위해 Web App (Chrom)을 클릭한다. 클릭 후에는 .vscode 폴더와 launch.json 파일이 생성된다. launch.json의 url의 값을 React 기본 url인 localhost:3000으로 수정한다. Debug 전에 React를 먼저 실행한다. (설정한 localhost:3000) Start Debugging 버튼 또는 F5를 누르면 디버깅이 시작되면서 새로운 크롬 브라우저가 띄워진다. 디버깅 크롬 브라우저를 새로고침 하면 VSCode에 Debug도 새로고침 된다. 만약 디버깅 크롬이 아무 화면도 안나온다면 설정한 url..

회사에서 할당받은 Linux 서버를 VSCode에 원격 접속해서 작업하려고 한다. 내 Wiindows노트북 보다 Linux 서버가 훨씬 빠르기 때문에.. 1. Remote - SSH 설치 Extensions에서 Remote-SSH를 설치한다. 설치가 완료 되면 아래처럼 아이콘이 생기는 걸 확인할 수 있다. 2. Connect Current Window to Host... F1 또는 Ctrl + Shift + p 를 클릭해서 입력창에 Connect Current Window to Host... 를 입력 또는 선택한다. 선택 후에 + Add New SSH Host...를 클릭하고, 아래 양식에 따라 입력한다. 1번 방법 [user]@[hostname]:[port] # ex) hello@microsoft.co..

기존에 사용하던 Ant Design라이브러리 Table을 Ag grid로 변경하게 되었다. Ant D Table은 Row Data를 useState hook을 통해 직접 변경해야 했다면 Ag grid에서는 useState hook을 사용하지 않고, applyTransaction이라는 내장 함수를 통해 Row Data를 변경할 수 있다. applyTransaction: Update row data. Pass a transaction object with lists for add, remove and update 행 데이터를 업데이트합니다. 추가 제거 및 업데이트 목록과 함께 트랜잭션 객체를 전달합니다. 1. 환경 설정 1-1. Ag Grid 설치 (무료 버전만 사용 시) # npm npm i ag-grid..

1. 크롤링이란? 크롤링(crawling) 혹은 스크레이핑(scraping)은 웹 페이지를 그대로 가져와서 거기서 데이터를 추출해 내는 행위다. 크롤링하는 소프트웨어는 크롤러(crawler)라고 부른다. 출처: 나무위키 예를 들어 우리가 음원 사이트의 음원 정보를 엑셀에 출력해야 한다면 일일이 수작업으로 작성할 수 있지만 굉장히 비효율 적이다. 그래서 크롤링을 사용하면 음원 사이트 HTML에서 내가 필요한 정보만 뽑아 추출할 수 있다. 2. 코드 구현 1. 라이브러리 Axios - Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 통신 라이브러리이다. Cheerio - cheerio는 문자열로 구성된 html 코드를 분석하여 서버에서도 원하는 document 속성이나 text를 탐..

React의 useRef로 간단하게 특정 DOM 요소로 이동할 수 있다. 1. 디자인 구현 먼저 아래와 같은 간단한 디자인을 구현했다. 우측 상단에 navigation을 클릭하면 해당 content로 이동하는 구조이다. import React from 'react' export default function App() { return ( content1 content2 content3 content1 content2 content3 ) } 2. 스크롤 이동 구현 useRef와 onClick 함수를 추가해준다. useRef는 특정 DOM을 선택해서 조작할 수 있도록 해주는 React의 Hook이다. import React, {useRef} from 'react' export default function ..