판교너굴맨의 개발노트

사내에서 담당하고 있던 React 프로젝트의 개발이 진행될수록 첫 페이지가 나타나기 전의 흰 화면 상태가 점점 더 길어지는 이슈를 처리하게 되었다. 목차 웹페이지 구성 방식 MPA VS SPA SSR 정의와 장단점 CSR 정의와 장단점 렌더링 방식 선택 1. 웹페이지 구성 방식 MPA VS SPA MPA (Multi Page Application) MAP 구성 방식은 이름 그대로 여러 페이지로 구성된 웹 어플리케이션이다. SSR 방식을 채택하고 있다. 새로운 페이지를 요청할 때마다 서버에서 렌더링이 준비된 정적 리소스(HTML, CSS, JS 등)를 다운 받아 페이지 전체를 새로 렌더링 하는 전통적인 웹페이지 구성 방식이다. SPA (Single Page Application) 이름 그대로 하나의 페이지..

문제 발생 이번에 Vue를 처음 사용해 보게 되었다. Vue에서 router를 사용하기 위해서 라이브러리 설치가 필요하다. # npm npm i vue-router # yarn yarn add vue-router 설치하래서 설치했더니 이게 웬 에러.. WARNING Compiled with 17 warnings warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default) ... export 'default' (imported as 'VueRouter') was not ..

1. 개요 이전에 nodemon 라이브러리를 사용하면서 한 가지 의문이 들었다. 우리는 nodemon과 eslint와 같은 라이브러리를 사용할 때 npm과 yarn과 같은 패키지 관리자로 실행할 수 있도록 package.json script에 설치한 라이브러리를 설정해왔다. 그럼 우리는 왜 script에 명령어를 설정해 왔던 걸까? 명령어를 짧게 쓰려고?? 2. 실행 경로의 차이 nodemon을 예로 간단한 테스트를 해보겠다. 먼저 nodemon을 package.json이 있는 경로에서 설치 해본다. npm i nodemon 이제 터미널에서 nodemon을 실행해보자! nodemon app.js 나는 방금 nodemon을 설치했는데 nodemon 파일을 찾을 수 없다는 에러 메시지가 출력된다. 에러 메시..

node.js를 사용할 사이드 프로젝트 아이디어가 생각이 나지 않아 일단 개발 서버 환경부터 만들어 두려고 한다. Node.js 설정 0. Nodejs란 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 즉, nodejs는 자바스크립트 파일을 독립적으로 사용할 수 있도록 해주는 런타임(환경)이다. nodejs에 내장되어 있는 http 라이브러리를 통해 아파치와 같은 별도의 웹서버 없이 서버를 실행할 수 있다. 1. node 설치하기 node.js 공식 페이지에서 순서대로 설치하면 된다. 웬만하면 안정성이 높은 LTS로 설치하면 된다. 설치가 완료 되면 터미널 또는 명령 프롬프트에서(cmd) 잘 설치되었는지 확인한다. 위의 node를 설치하면 node의..

1. ESLint란 코드를 실행하기 전에 코드를 분석해 문법적인 오류나 안티 패턴을 찾아 잠재적 위험요소를 사전에 방지하고, 일관된 코드 스타일로 작성할 수 있도록 도와주는 코딩 컨벤션이다. 코딩 컨벤션: 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(작성 표준)이다. ESLint 특징 직접 코드 규칙(rules)을 설정할 수 있으며 규칙을 어긴 코드에는 error 또는 warnig을 발생시킬 수 있다. airbnb esLint와 같이 큰 기업에서 사용하는 코딩 스타일 가이드를 적용할 수 있다. 팀 프로젝트를 진행하다 보면 팀원 간 각자의 코딩 스타일이 다르다. 세미콜론을 사용하는 사람과 사용하지 않는 사람, 조건문 사용 시 중괄호를 사용하는 사람과 사용하지 않는 사람 등 ESLin..

개요 사내 프로젝트 도중에 서버에서 많은 데이터를 받아와 가공해야 하는 경우가 있었다. 자바스크립트는 싱글 스레드이기 때문에 이 과정에서 화면은 잠시 멈추는 것처럼 버벅이게 된다. 그래서 다른 동작을 할 수 없는데 이때 계산하는 과정을 서버에서 데이터를 받을 때처럼 다른 스레드가 처리해 줬으면 했었고, 검색해보니 web-worker에 대해 알 수 있었다, (구글 최고) 간단한 예제를 만들어보자 export default function App(): JSX.Element { const onTestStart = () => { console.log('start'); Array(10000000).fill(0); console.log('end'); }; const onSubTask = () => console.l..

사내에서 간단하게 git rebase에 대해 설명을 하게 되었습니다. Rebase는 이름 그대로 브랜치의 base를 다시 설정한다는 의미입니다. 위 그림을 보면 feature브랜치에서 a3 커밋을 베이스로 작업을 진행하고 있고, master 브랜치는 이미 상당부분 진행되었습니다. 이때 최신 master 브랜치의 작업 내용을 본인이 현재 작업 중인 feature 브랜치에도 적용하고 싶을 때 Rebase 명령어를 사용합니다. 먼저 최신 master를 pull 받아 옵니다. # master 브랜치로 이동 git checkout master # 최신 master 받기 git pull origin master 그리고 feature 브랜치로 이동한 후에 rebase 명령어를 실행합니다. # feature브랜치로 이..

회사에서 프로젝트를 진행하는데 데이터의 값이 원하는 순서대로 들어오지 않았다. 어디서 문제가 났는지 디버그를 해보니 Object.value메서드에서 객체의 순서를 key 값의 오름차순으로 자동 변환시켰다. 객체 객체는 배열과 다르게 index(순서)가 없다. 그렇기 때문에 어떤 순서로 객체의 키 값에 접근하는지 알 수 없다. 객체의 값은 키를 통해서만 접근이 가능하다. 순서가 보장되지 않은 순회라고 한다. Object.keys() mozilla 문서 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다 아래의 예시 코드를 보자 const test = { 1: { a: 1, b: 1 }, 4: { a: 4, b: 4 }, 2: { a: 2, b: ..

1. Github에서 Repository 생성 Repository를 생성할 때 자신의 깃허브 계정 이름으로 생성해야 한다. Repository 생성 후 Import code를 클릭하고 원하는 jekyll 테마의 URL을 넣어주고 Begin import 버튼을 클릭한다. jekyll 테마 본인은 minimal mistakes 테마를 사용했다. 사용한 이유는 사람들이 많이 사용하는 것 같고, 심플한 디자인이 좋았기 때문이다. Begin import를 클릭하면 몇 분의 시간이 소요된 후 minimal mistakes 테마가 적용된 Repository가 생성된다. 자신의 계정.github.io 으로 생성된 레포지토리는 자신의 계정.github.io 을 주소창에 입력하면 자동으로 호스팅이 되는 것을 확인할 수 있..

환경변수 환경변수라는 단어를 검색하면 아래와 같이 설명한다. 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다. 즉, 환경변수는 운영체제가 참조하는 변수이다. 환경변수 path windows에서 Java를 설치할 때, 또는 Android studio를 설치한 후 path 변수에 설정해주던 기억이 있다. 블로그에서 설치 순서라며 막연히 따라만 해보다가 문득 path에 설정해주는 이유가 궁금하게 되었다. 환경변수 위키백과에서는 path에 대해 이렇게 설명한다. PATH : 디렉터리 경로의 목록. 사용자가 전체 경로를 지정하지 않고 명령을 입력하면 이 목록을 확인하여 해당 명령어가 경로에 속하는지를 살펴본다. 예를 들어 Java의 컴파일러인 javac 명령어를 사용하려고 한다. 윈도..