우당탕탕 개발일기

기본으로 나오는 크롬 뷰어를 사용하고 있는데 간간히 파일명에 설정한 적 없는 정보가 노출될 때가 있었다.파일명인 줄 알았지만 단순 파일명이 아니었다.찾아보니, pdf에 있는 메타데이터가 있을 경우 뷰어에 우선적으로 노출된다고 했다.따라서 해당 부분을 없애려면 PDF에 설정되어있는 메타데이터를 없애야하는 것. 하지만 이미 수십개의 파일이 메타데이터가 설정된 채 pdf가 만들어져있어 해당 파일들의 메타데이터 제거 방법이 필요했다.다행히(?)도 관련 라이브러리가 있어서 활용했다!💡https://www.npmjs.com/package/exiftool-vendored exiftool-vendoredEfficient, cross-platform access to ExifTool. Latest version: 30..

1) 내 레포 클론하기git clone ${내 레포 주소} 2) 다른 레포를 ‘upstream’으로 등록하기git remote add upstream ${포크할 레포}## 확인하는 방법git remote -v # origin: 내 레포# upstream: 포크할 레포 3) upstream 변경사항 가져오기(fetch)git fetch upstreamupstream/main, upstream/feature-xxx 같은 브랜치 정보가 로컬에 생긴다. 4) upstream 브랜치를 내 브랜치에 병합하기 Merge 방식 (기존 커밋 그대로 합치기) 원본의 커밋 히스토리를 있는 그대로 보존.언제 어떤 코드가 합쳐졌는지(merge commit) 기록이 남음.git checkout main # --allow-unr..

나를 무려 이틀 반동안 골치아프게했던 문제가 해결되었다.생각보다 너무 어이없는 이유라서 티스토리에도 기록을 남겨본다.. ✅ 문제 상황React + Express로 개발 중, 새로운 메뉴를 추가해야만 했다.프론트 라우터에 새로운 경로를 등록했고, 백엔드에도 해당 API 및 미들웨어를 잘 붙여놨다.그런데 문제는...메뉴를 직접 클릭해서 이동하면 잘 되는데, 새로고침만 하면 ENOENT: no such file or directory가 발생하는 것!Error: ENOENT: no such file or directory, stat '...경로...\client\index.html' 🔍 문제 원인을 찾아서'spa 새로고침 404'로 검색하니 SPA 라우팅 문제라고 곧잘 내용이 정리되어있었다. Spring..

리눅스에서 파일을 옮길 때 명령어~를 까먹지 않기 위해 기록..cp ${복사할 폴더 경로}/${복사할 파일.확장자} ${붙여넣을 폴더 경로}/${붙여넣을 파일 이름.확장자} 폴더 경로가 헷갈렸는데 굳이 최상단까지 갈 필요는 없고~복사할 폴더와 붙여넣을 폴더가 모두 존재하는 폴더까지 위치를 이동한다음 ./로 시작하면 된다! 즉,  rootFolder- folderA  - haveToCopy.txt- folderB가 있는 경우  rootFolder까지 이동해서 cp ./rootFolder/folderA/haveToCopy.txt ./rootFolder/folderB/haveToPaste.txt 요 명령어 실행하면 된다!현재 위치가 애매~할땐 tab 눌러서 자동완성 되는 폴더명을 살펴보자구~

맥북에서 시작한 프로젝트를 윈도우에서 이어받아 하려고 하는데 코드에 갑자기 요상한 빨간 밑줄이, 그것도 엄청 많이 생겼다.찾아보니 운영체제에 따라 Carriage Return이 달라 발생하는 문제여서 한 쪽으로 맞춰줘야한다고 한다.1. CRLF (Carriage Return + Line Feed)표현 방식: \r\n (CR + LF)CR: Carriage Return. 커서를 가장 왼쪽으로 이동.LF: Line Feed. 다음 줄로 이동.사용 운영 체제: Windows.2. LF (Line Feed)표현 방식: \n (LF만 사용)LF: 다음 줄로 이동.사용 운영 체제: Unix 계열 (macOS, Linux). 윈도우는 과거 도트 매트릭스 프린터에서 사용하던 CR(줄의 시작)과 LF(다음 줄로 이동)을..

12월 14일부터 시작된 항해 플러스 프론트엔드 4기의 1주차가 어느덧 마무리되었다. 참 많은 생각들이 스쳐 지나가지만, 막상 글로 쉽게 써내려가려니 쉽지만은 않다. 문득, "글을 많이 써봐야 한다"라는 코치님의 말씀이 떠오른다. 이번 1주차 과제는 바닐라JS로 SPA(Single Page Application)를 구현하는 것이었다. 지금까지 바닐라JS만으로 코드를 작성해 본 적이 거의 없었어서 조금 막막했다. 어디서 어떻게 동작하는지도 코드 흐름 파악하는 것도 쉽지 않았으니 폴더 구조도 어떻게 잡아야 할 지 고민이 많았다. 정말 어렵고 힘들었다. 그렇지만 분명 재밌고 배움이 많았다.  💡 React 동작 원리에 대한 깨달음바닐라JS로 setState와 BrowserRouter를 직접 구현해보는 경험을..

1. 모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각.일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다.  →  이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 모든 자산 (변수, 함수, 객체 등)은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할수 있다.이를 import라 한다. 2. 자바스크립트와 모듈ES6에서는 클라이언트 사이드 자바..

1. 비동기 처리를 위한 콜백 패턴의 단점1. 콜백 헬비동기 함수란 함수 내부에 비동기로 동작하는 코드를 포함한 함수를 의미한다.비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다.따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다.콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 또 다시 비동기 함수를 호출해야 하는 경우 콜백 함수 호출이 중첩되고 복잡도가 높아지는 현상이 발생하는데 이를 콜백 헬이라 한다.  2. 에러 처리의 한계비동기 처리를 위한 콜백 패턴의 문제점 중에서 가장 심각한 것은 에러 처리가 곤란하다는 것이다.try { setTimeout(() => {..

1. 동기 처리와 비동기 처리①함수를 호출하면 ②함수 코드가 평가되어 ③함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 ④실행 컨텍스트 스택에 푸시되고 ⑤함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 ⑥실행 컨텍스트 스택에서 팝되어 제거된다. 함수가 호출된 순서대로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다.== "함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다."자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉, 동시에 2개 이상의 함수를 동시에 실행할 수 없다. 따라서 현재 실행 중인 함수가 종료하면 비로소 다른 함수가 실행되기 시작한다. 이를 싱글 스레드 방식으로 동작한다고 한다...

1. 호출 스케일링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용하는데, 이를 호출 스케줄링이라 한다.자바스크립트는 타이머를 생성할 수 있는 함수와 타이머를 제거할 수 있는 함수를 제거하지만 이는 ECMAScript 사양에 정의된 빌트인 함수는 아니고, 호스트 객체*에 해당한다. 타이머 생성 함수 : setTimout, setInterval타이머 제거 함수 : clearTimeout, clearIntervalsetTimout과 setInterval 모두 일정 시간이 경과된 이후(=setTimeout과 setInterval이 생성한 타이머가 만료되면) 콜백 함수가 호출된다.setTimout 함수가 생성한 타이머는 단 한 번 동작하고, setI..