LasBe's Upgrade

최신 글

• 

  개발자 성지, 성수동 튜링의 사과 방문 후기 📒 튜링의 사과 방문 후기내가 100% 통제할 수 있는 공간에서는 도무지 집중이 되지 않는 요즘입니다. 카페를 가기에는 허리 박살 날 것 같은 의자들, 쥐똥만 한 노트북 화면, 오래 앉아 있기엔 눈치 보이는 상황이 너무나 불편합니다. 원래 노트북 들고 카페가서 하염없이 시간 때우는 걸 좋아했지만,언덕 꼭대기에 있는 자취방으로 이사오고 난 후 언덕을 오르락내리락하는 것에 비해 메리트가 없다고 느껴 집에서만 공부했습니다. 그러다 어느 날 개발자들이 모이는 카페 혹은 작업공간이 있다길래 검색해보니 편안한 의자 + 모니터까지 이보다 더 좋을 수 없었습니다. 성수동, 멀긴 하지만 너무나 가고 싶은 마음에 노트북을 챙겨 그 주 주말에 방문해 봤습니다.2호선 뚝섬역 5번 출구에서 1분 정도의 거리에 존재하는 튜링의.. 댓글 1 2024.04.17

• 

  지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 댓글 0 2024.04.10

• 

  [Electron, React, TS] 데스크톱 앱 프로젝트 생성하기 📒 Electron + React 프로젝트 구축하기 (24-04-01 추가) electron-is-dev 모듈이 ESM 방식을 지원하기 시작해서 CJS, require에서 MJS, import 방식을 사용하도록 글 내용을 변경했습니다. 📌 Electron이란 Chromium과 Node.js를 하나의 런타임으로 통합하여 JS, HTML, CSS 같은 기본적인 웹 지식으로도 데스크톱 애플리케이션을 만들 수 있는 프레임워크 입니다. 이걸로 데스크톱 애플리케이션을 어떻게 만드냐 싶겠지만 이미 우리가 사용하고 있는 VSCode, Slack, Skype, Figma 등등등 이미 검증된 서비스들에서 사용하고 있습니다. 또한 빌드 라이브러리를 통해 하나의 자바스크립트 코드를 윈도우, 맥, 리눅스에서 흔히 보던 설치 프.. 댓글 1 2024.04.01

• 

  [React] 리액트 스크롤 애니메이션 라이브러리 개발 📒 @lasbe/react-scroll-animation @lasbe/react-scroll-animation 리액트에서 손쉽게 사용하는 스크롤 애니메이션. Latest version: 2.0.2, last published: a month ago. Start using @lasbe/react-scroll-animation in your project by running `npm i @lasbe/react-scroll-animation`. There are no other projects in www.npmjs.com GitHub - LasBe-code/react-scroll-animation: 리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는 라이브 리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는.. 댓글 0 2024.03.13

• 

  TanStack Query(react-query) v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary 📒 react-query v5 주요 변경점 알아보기 새로운 프로젝트에 생각없이 react-query를 설치하고 예전 방식 그대로 사용하려는데 여기저기 오류가 빵빵 터져나갔습니다. 왜이러지 싶어 package.json을 찾아보니 메이저 버전이 업데이트 되었고, 공식문서를 천천히 훑어보니 생각보다 사용 방식이 변경된 것이 많아 주요 변경점들을 짚고 넘어가겠습니다. 📌 hook 옵션 객체 형태로 변경 버전이 올라가며 훅에 옵션을 넣어주는 방식이 객체 형태로 바뀌어 더욱 직관적인 모습을 보입니다. 기존 사용 방식 const { data } = useQuery(['queryKey'], getData); const mutation = useMutation(setData); 변경 후 사용 방식 const { data.. 댓글 0 2024.03.13

• 

  TanStack Query(react-query), useMutation의 mutationKey 역할은 도대체 뭘까? 📒 react-query v5, useMutation의 mutationKey 역할은 도대체 뭘까? react-query의 메이저 버전이 5로 올라가고 사용방법이 많이 바뀌어서 코드를 수정할 일이 있었습니다. 그저 당연스럽게 공식문서를 보고 바꾸던 중, useMutation을 수정할 때 mutationKey라는 속성이 보였습니다. 저 Key라는 말에 꽂혀 당연히 필수 요소라 생각한 나머지 하나하나 정성스럽게 mutationKey를 작성해 주었습니다. const mutation = useMutation({ mutationKey: ['mutationKey'], mutationFn: updateData }); 그러다 어느 정도 프로젝트 규모가 커질 무렵 어느 순간 문득 다음과 같은 생각이 머리를 스쳤습니다. ".. 댓글 1 2024.03.13

React

• 

  [Electron, React, TS] 데스크톱 앱 프로젝트 생성하기 📒 Electron + React 프로젝트 구축하기 (24-04-01 추가) electron-is-dev 모듈이 ESM 방식을 지원하기 시작해서 CJS, require에서 MJS, import 방식을 사용하도록 글 내용을 변경했습니다. 📌 Electron이란 Chromium과 Node.js를 하나의 런타임으로 통합하여 JS, HTML, CSS 같은 기본적인 웹 지식으로도 데스크톱 애플리케이션을 만들 수 있는 프레임워크 입니다. 이걸로 데스크톱 애플리케이션을 어떻게 만드냐 싶겠지만 이미 우리가 사용하고 있는 VSCode, Slack, Skype, Figma 등등등 이미 검증된 서비스들에서 사용하고 있습니다. 또한 빌드 라이브러리를 통해 하나의 자바스크립트 코드를 윈도우, 맥, 리눅스에서 흔히 보던 설치 프.. 2024.04.01

• 

  [React] 리액트 스크롤 애니메이션 라이브러리 개발 📒 @lasbe/react-scroll-animation @lasbe/react-scroll-animation 리액트에서 손쉽게 사용하는 스크롤 애니메이션. Latest version: 2.0.2, last published: a month ago. Start using @lasbe/react-scroll-animation in your project by running `npm i @lasbe/react-scroll-animation`. There are no other projects in www.npmjs.com GitHub - LasBe-code/react-scroll-animation: 리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는 라이브 리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는.. 2024.03.13

• 

  TanStack Query(react-query) v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary 📒 react-query v5 주요 변경점 알아보기 새로운 프로젝트에 생각없이 react-query를 설치하고 예전 방식 그대로 사용하려는데 여기저기 오류가 빵빵 터져나갔습니다. 왜이러지 싶어 package.json을 찾아보니 메이저 버전이 업데이트 되었고, 공식문서를 천천히 훑어보니 생각보다 사용 방식이 변경된 것이 많아 주요 변경점들을 짚고 넘어가겠습니다. 📌 hook 옵션 객체 형태로 변경 버전이 올라가며 훅에 옵션을 넣어주는 방식이 객체 형태로 바뀌어 더욱 직관적인 모습을 보입니다. 기존 사용 방식 const { data } = useQuery(['queryKey'], getData); const mutation = useMutation(setData); 변경 후 사용 방식 const { data.. 2024.03.13

• 

  지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 2024.04.10

• 

  [Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) ⚡ 논리 연산자 ‘&&’, ‘||’ 📌 단축평가 console.log("aaa" || "bbb") // "aaa" console.log("aaa" && "bbb") // "bbb" 논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다. console.log(true && "aaa") // "aaa" console.log(false && "aaa") // false &&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다. console.log(true || "aaa") // true console.log(.. 2023.01.10

• 

  [Javascript/자바스크립트] innerHTML, innerText, textContent의 차이 innerHTML innerHtml은 마크업 태그를 핸들링할 수 있기 때문에 태그(div, img, script...)들을 삽입 가능합니다. 각종 태그들을 삽일할 수 있다보니 input 태그에 악성 스크립트를 삽입하는 XSS 공격의 가능성이 존재합니다. Login input으로 위와 같이 스크립트 태그를 넣으니 정상적으로 작동되는 것을 볼 수 있습니다. 저는 간단히 alert를 사용했지만 충분히 악의적으로 사용할만 합니다. 이에 최대한 innerHTML 사용을 지양하는 편이 좋습니다. innerText, textContent innerText 프로퍼티는 textContent와 기능이 유사하지만 중요한 차이점이 존재합니다. 이는 반환하는 값과 성능 두가지 측면에서 알아보겠습니다. 반환 값 innerText.. 2022.02.07

• 

  [Javascript/자바스크립트] CSS 선택자를 사용하는 querySelector, querySelectorAll를 통해 요소 선택하기 CSS 선택자 종류 document.querySelector(선택자) document.querySelectorAll(선택자) CSS 선택자를 사용하는 querySelector를 알아보기 위해 먼저 CSS 선택자의 종류부터 알아보겠습니다. 다음 표와 같은 키워드를 사용해 특정 요소들을 가져올 수 있습니다. 이름 선택자 형태 설명 태그 선택자 태그 특정 태그를 가진 요소를 추출 아이디 선택자 #아이디 특정 id 속성을 가진 요소를 추출 클래스 선택자 .클래스 특정 class 속성을 가진 요소를 추출 속성 선택자 [속성 = 값] 특정 속성 값을 갖고 있는 요소를 추출 후손 선택자 선택자1 선택자2 선택자1 아래에 있는 선택자2를 선택 querySelector querySelector는 위와 같은 css 선택자.. 2022.02.04

• 

  [Javascript/자바스크립트] 나머지 매개변수(rest parameter), 전개 연산자(Spread syntax) 매개변수와 전달인자는 아래와 같이 다른 프로그래밍 언어에서도 흔히 사용되는 개념입니다. function sum(a, b) { // a, b는 매개변수 return a+b } let calc = sum(1, 10) // 1, 2는 전달인자 자바스크립트에서도 이러한 개념은 동일하지만 특이한 점이 있습니다. console.log(sum(1)) // NaN console.log(sum(1, 10, 100)) // 11 함수에 정해둔 매개변수의 개수보다 전달인자를 적게 혹은 더 넣어주어도 오류가 나지 않는다는 점입니다. 위 sum 함수에 1개의 매개변수를 넣어주면 나머지 매개변수를 undefined로 할당해 NaN이 출력되고, 더 넣어주면 왼쪽부터 순서대로 정해둔 매개변수만 사용해 출력을 내어줍니다. 그리고 추가.. 2022.02.03

회고

• 

  프론트엔드 개발자 2023.08 ~ 2024.01 회고 📒 2023.08 ~ 2024.01 회고 원래 23년 안으로 회고록을 작성하려 했지만 너무 바쁘고 정신이 없어서 이제야 작성해본다. 분기마다 작성하려 했던 회고를 거진 6개월만에 작성하며 그동안 내가 무엇을 했고 어떤 생각을 주로 해왔는지 복기해보려 한다. 📌 회사에서 내가 22년 8월에 입사했으니 벌써 1년 6개월이 지나버렸다. 마지막 회고로부터 6개월 밖에 지나지 않았지만 생각보다 많은 경험을 했던 것 같다. 🔎 신입 뽑기 회사에 프론트 인원이 적은 관계로 내가 프론트 채용을 담당하게 됐다. 500명 가까운 인원 중 이력서를 추려서 10명 가까운 인원들에게 합격 연락을 돌리고 기술 면접관으로 들어가기도 했다. 윗 사람들이 어떻게 나한테 전권을 맡겼고 내가 이 경력에 이런 중요한 일을 덥썩 물었는지 지.. 2024.01.25

• 

  1년 5개월차 경력, 프론트엔드/리액트 신입 이력서를 검토하다 📒 1년 5개월 경력에 신입 프론트엔드 채용 1차 서류 심사한 후기 회사에 프론트 직무가 생긴지 얼마 안됐고, 그나마 있는 인원도 저 포함 1년~3년차 3명인 상황. 그나마 채용시즌에 시간적으로 이력서를 검토하고 기술 면접을 볼 수 있는 인원이 저 밖에 없었습니다. 그렇게 채용이란 중요한 임무를 부여받고 나름 재미있지 않을까 생각하며 이력서 검토를 시작했습니다. 그런데 재미는 개뿔 그냥 이력서 수백개가 쌓여있어서 2주 동안 업무와 이력서 검토를 병행 하느라 눈알이 개박살 나는줄 알았습니다. 이번 글에서는 이력서를 검토하며 느꼈던 시장 상황과 함께 지원자 분들이 보완했으면 하는 부분들에 대해 이야기 해보겠습니다. 📌 Frontend 레드오션 프론트 공고 뿐 아니라 임베디드 및 백엔드 공고를 냈음에도 지원자.. 2024.01.18

• 

  프론트엔드 개발자 입사 만 1년차 회고 ⚡️ 2023.04 ~ 2023.08 📌 8월 16일 8월 16일, 광복절 다음 날. 벌써 취업 후 1년이 지났다. 이제 와서 생각해 보면 너무나 빠르게 흘러온 것 같아 기억이 흐릿하지만 주기적으로 작성한 회고를 보니 지나온 일들이 어제 같이 생생하다. 너무 정신 없이 살아 어제 먹은 식사도 기억을 잘 못하는 걸 보니 최소 분기 단위로 회고록을 작성해야겠다고 다짐한다. 📌 커피챗 얼마 전 블로그 댓글로 어떤 학생이 나와 커피챗을 하고 싶다는 댓글이 달렸다. 처음엔 너무 당황스러웠다. 아직까진 항상 도움을 받을 존재란 생각을 했는데 누군가 내 도움을 필요로 했기 때문이다. 또한 중고거래 제외하고 온라인을 통해 누군가를 만난다는 것이 처음이기도 하고, 댓글로 미리 알려준 질문 내용들은 내 머릿속에 아직 정리.. 2023.08.26