YG1ee Weblog

우분투에 기본적으로 tar이 설치돼있고 zip/unzip은 apt install로 따로 설치해야 하기 때문에, 우분투 환경에서는 tar을 애용하는 편이다. 이 글에서는파일 묶기를 위한 tar cf파일 압축을 위한 tar cfz묶은 파일 풀기를 위한 tar xf에 대해 설명한다.묶기 (아카이빙)tar cf (묶음 파일명) (...묶을 대상(들))c = Createf = File(name)tar은 압축하는 것이 아니라, 폴더 계층 구조에 맞게 한 파일로 묶어놓는 명령어이다.그래서 "압축"이 아니라 "묶기"라고 적었다. (원문 표현은 archive여서 참고용으로 병기했다.)출력 파일명의 확장자는 어떤 것이든 무관하고, 아예 없어도 된다.다만, 받아보는 사람이 알아보기 쉽게 .tar로 붙이곤 한다.예1) tar..

이전 글에서 이어집니다: 우분투(리눅스)에서 ssh키 발급 받기 ssh키를 발급 받았으니, 이걸 활용해보자. 원격지 설정원격지에 ssh키를 이용해 접속하고자 할 때는, 원격지에서의 설정이 먼저 필요하다.a. 우선, ssh 연결이 닿는 곳이라고 가정하고 scp 명령어로 ssh 키페어 중 공개키(.pub)를 송신하자.(여기서는 8022 포트로 통신하기 위해 -P 옵션을 넣었다.)b. 원격지에 들어가서, cat (퍼블릭 키) >> ~/.ssh/authorized_keys 를 입력한다. ssh 연결을 하려는 클라이언트 중 해당 공개키와 페어를 이루는 비밀키로 접속 시도하는 걸 허용해주는 작업이다.여기까지 하면 원격지의 설정은 끝난다. 이제 아래와 같이 입력하면 이제 비밀번호 없이 원격지 접속이 가능하다!ssh ..

발급 방법은 굉장히 쉽다.터미널에서, ssy-keygen을 입력&엔터 후, 엔터를 3번 더 하면 완료된다.이렇게 하면 ~/.ssh 폴더에 비밀키인 id_rsa와, 공개키인 id_rsa.pub 파일이 생성된다.이름에서 알 수 있듯이, 비밀키는 유출되어선 안 되고, 공개키는 어디에 공개되든 무관하다. 간단하게 사용하려면 여기서 멈추고, id_rsa 페어를 사용하면 된다. 더 깊게 알아보고 싶다면, 위에서 엔터 3번 눌러서 건너뛰었던 설정들에 대해서 알아보겠다. 1. Enter file in which to save the key (/home/balatro/.ssh/id_rsa):비밀키와 공개키의 파일명을 지정하는 부분이다. 지정하지 않으면 기본적으로 id_rsa라는 이름으로 생성되지만, 이미 id_rsa 페..

useQuery는 기본적으로 re-fetch 시마다 data가 undefined로 바뀐다.이게 문제가 되는 상황을 직면하게 됐는데, 한 페이지 안에서 re-fetch를 할 때다.위의 예시에서는, 버튼을 누를 때마다 데이터를 새로 받아오게 되는데, 데이터가 캐시되기 전, 새로운 데이터를 받아올 때마다 "자료를 불러오는 중…"이 떠서 좋지 않은 사용 경험을 줄 수 있다. (받아오고 렌더링하는 데이터의 양이 많아서 페이지가 긴데, 버튼을 누를 때마다 확 줄어들었다가, 다시 확 늘어나는 게 반복된다고 생각해보자.) 그래서 나는 화면이 마구 바뀌기보다, 재요청한 데이터가 수신 완료됐을 때 바뀌면 좋겠다고 생각했다.사실 걱정이 앞섰다. '"아 useQuery 그렇게 쓰는 거 아닌데~" 하며 onSuccess, on..

들어가기 전에: ES2022에 추가된 .at() 내장 메서드에 대해 설명합니다.또한, 타입스크립트에 대한 부분부터는 tsconfig.json에 최소한 아래의 설정이 들어가있는 것을 전제로 합니다. 자바스크립트에서 배열의 요소에 접근할 때는 주로 대괄호에 인덱스를 넣어서 한다.이를 테면 아래와 같다.const arr = [1,2,3,4,5];console.log(arr[2]) // 3 출력console.log(arr[6]) // undefined 출력 이 방식으로 배열의 뒤쪽에 있는 요소에 접근하려면, 다들 아시다시피 아래처럼 배열의 길이를 이용해서 길고 지루하게 코드를 작성해야 한다.const arr = [1,2,3,4,5];console.log(arr[2]) // 3 출력console.log(arr[a..

TIL: 구조분해할당할 때, undefined일 수 있는 변수를 위해 기본값을 제공할 수 있다.undefined가 될 수 있는 레이어에서 assign 으로 제공하면 된다.예시의 경우는 hrs, min, sec이 undefined일 수 있고, undefined가 들어오면 value를 참조하려고 할 때 그 부모에서 undefined를 읽었다면서 사이트가 뻗어버릴 수 있으므로, 아래 쪽에 있는 parseInt까지 생각해서 value에 "0"을 넣어 기본값으로 설정했다. 그리고, 작성하면서 더 괜찮은 로직이 생각났는데, parseInt가 필요하지 않은 때는 아예 실행되지 않도록 하는 것이다.둘 중 자신한테 더 잘 맞는 방법을 쓰면 되겠다. 검색해보니, 이렇게 매개변수에 기본값을 제공해주는 것을 정식 용어로는"D..

Next.js에서 뜬금없이 위와 같은 오류가 뜬다면 아래 세 가지 조건을 동시에 만족하는지 확인해보자. 1. 자신이 svg를 import하여 사용하고 있다.2. package.json의 "dependencies"나 "devDependencies"에 @svgr/webpack 이 없다.3. next.config.js가 휑하다. Next.js에서 svg를 정상적으로 import하여 사용하려면 "@svgr/webpack" 라이브러리를 설치하고, next.config.js 에 아래 설정 코드를 넣어야 한다./** @type {import('next').NextConfig} */module.exports = {  webpack: (config) => {    config.module.rules.push({     ..

토스 개발자가 발표하는 컨퍼런스가 있더군요. 추첨으로 참가할 수 있는데 홍보하면 참가권 받을 기회가 더 생긴다고 해서 올려봅니다. 참가 신청 링크는 https://toss.im/slash-24 입니다. 아래는 제맘대로 구성해본 시간표입니다.

· 문제 환경WSL2에서 Ubuntu 위에서 Next.js 14.2.5와 14.1.3에서 재현되었다.프로젝트 이름이랑 무관하게, Next.js 빌드 시점의 디렉터리명이 dist* 이면 빌드 에러가 난다.· 문제 원인: 모르겠다..· 문제 해결법코드는 전혀 바꿀 것 없이, 폴더명만 바꿔서 빌드하면 성공한다.프로젝트명이 dist로 시작하더라도, 프로젝트 디렉터리명은 다른 이름으로 바꿔서 사용하자.  · 문제 현상에러 시 마지막 쯤에> Build error occurred 가 뜨고,좀 더 아래쪽에 build/utils.js:1268:15 (줄번호는 다를 수도 있음)가 출력됨

TypeScript에서는 enum을 쓰지 말라는 글을 예전에 본 적이 있다.개발을 하던 중 enum, const enum, 그리고 const (객체) as const 의 차이점이 궁금해져서,TS Playground ( https://www.typescriptlang.org/play )에서 트랜스파일 결과를 비교해봤다.· enum의 경우 IIFE가 생기고 코드가 엄청 길어져서 트리셰이킹에 안 좋다는 말을 체감할 수 있었다.· const enum의 장점은, 트랜스파일이 일어났을 때 정의 코드까지 말끔하게 사라진다 는 것.단점은,- a[key]의 방식으로, enum에 대해서 변수로 접근이 안 된다는 점- 한글을 유니코드로 저장해서 코드가 쓸데없이 길어지는 감이 있다.그리고 이건 직접 테스트해본 것은 아니지만,..