LasBe's Upgrade

최신 글

• 

  2025년 React Native 현황과 CLI vs Expo 비교분석 📒 2025년 React Native 현황과 CLI vs Expo Go 비교분석2023.07.13 - [React-Native] - React Native 장단점과 CLI, Expo 비교와 후기이 글을 쓴 지도 어언 1년 하고도 6개월이 지났습니다. 그동안 플러터가 치고 올라오며 RN은 이제 죽었나 생각이 들 때마다 무언가 하나씩 등장하며 엎치락뒤치락하는 상황이 반복되었습니다.정말 짧은 시간이었지만 그동안 RN이 0.76 버전까지 올라오며 어떤 변경점들이 있었는지 알아보고, 이제는 Expo를 마음 놓고 사용해도 될지 알아보겠습니다. 📌 Hermes Enginehttps://reactnative.dev/architecture/bundled-hermesHermes는 Meta에서 개발한 React Nati.. 댓글 0 2025.01.15

• 

  [NextJS, NestJS] 오픈프차 - 프랜차이즈 정보 분석 🎙️ 오픈프차 - 프랜차이즈 정보 분석공정거래위원회의 가맹사업 정보공개서를 기반으로 창업 전, 프랜차이즈 본사 정보, 브랜드의 매출, 가맹점 수, 인테리어 금액, 창업 비용 정보를 편리하게 확인할 수 있습니다.1차 완성 후 회원, 로그인, 게시판 기능을 추가하려 했으나 취업하는 바람에 계속해서 미뤄지고 있습니다.완성도 2달 전에 했는데 이제서야 올리고 있네요. 원래 남들 돈 얼마버나 관심이 많아 관련 유튜버를 즐겨보는데, 특정 프랜차이즈 본사 분석하는 영상을 보며 순간적으로 아이디어를 얻게 되었습니다.아이디어 떠오르자마자 바로 만들기 시작해 프론트, 백엔드 개발과 배포까지 2주 정도 소요되었습니다.나름 구경하는 재미가 있으니 한번 씩 들려주세요~~URL오픈프차Github FrontendGithub Ba.. 댓글 0 2025.01.10

• 

  [React Native] Android Native-Module Event Listener 만들기 📒 [React Native] Android Native-Module Event Listener 만들기Native 모듈을 만드는 것은 간단하지만 여기에 Event Listener가 더해진다면?찾아보아도 딱히 참고할 만한 예제도 없고, 업무 준비와 공부도 할 겸 제가 A부터 Z까지 만들어보고 기록합니다. 📌 폴더 및 파일 생성안드로이드 네이티브 모듈을 만들기 위해서는 자바 혹은 코틀린 파일을 다음과 같은 경로로 생성해주어야 합니다./android/app/src/main/java/패키지명/ 저는 모듈의 이름을 Event로 지었습니다.📌 모듈 파일 생성// EventModule.javapackage com.패키지명.event;import android.os.Handler;import android.os... 댓글 0 2025.01.10

• 

  2년 차 주니어 프론트엔드 개발자 이직 후기 📒 2년 차 주니어 프론트엔드 개발자 이직 후기24년 6월 말에 퇴사.여행, 휴식, 공부를 하며 지내다 10월부터 취업 준비를 시작.12월에 이직 성공까지의 일들과 느낀 점을 회고해 봅니다. 📌 타임라인🔎 24.07 ~ 24.09, 퇴사부터 이직 준비 전출근의 압박도 사라졌고, 아직 도전은 해보지 않았기에 이직은 손쉽게 할 수 있을 거란 오묘한 가능성에 취해 살았습니다.거기에 첫 해외여행도 가보며 매일매일이 행복이었던 시간.그러나 아주 조금씩 덮쳐오는 취업의 압박에 조금씩 공부하며 휴식이 계속되는 나날들.그래도 어느정도 준비는 해놓았기에 여유는 있어, 이력서는 넣지 않고 하고 싶은 것만 하고 지냈습니다. 🔎 24.10 ~ 24.12, 이직 준비와 성공좀 쉬다보니 이제는 불안하기도 하고 일이 하고 .. 댓글 2 2025.01.07

• 

  package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook 📒 package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook이번에 이직을 하게 되어 기존 코드를 이리저리 파악해 봤습니다.리드분과 Q&A를 하던 중 package.json scripts의 생명주기에 대한 이야기를 스치듯 들었고, 궁금해서 자세히 찾아보게 되었습니다. 📌 package.json의 scripts"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint"},위는 next.js에서 흔히 보던 스크립트 필드입니다.해당 스크립트를 실행시키기 위해 사용하는 패키지 매니저에 따라 npm run dev / yarn dev / pnpm dev와 같.. 댓글 0 2024.12.30

• 

  [ubuntu, fail2ban] 로그인 실패 횟수에 따라 IP 차단하기 📒 [ubuntu, fail2ban] 로그인 실패 횟수에 따라 IP 차단하기한 번씩 개인 서버에 들어가 로그인 시도 정보를 확인하면 정말 하루종일 무작위 공격을 시도하는 것을 확인할 수 있습니다.괜히 전기요금 더 나올 것 같아 방어하려고 찾아보던 중 fail2ban이란 툴을 발견했습니다. 📌 fail2banfail2ban은 SSH 로그인 실패 횟수에 따라 IP를 차단시켜 주는 툴입니다.무작위 공격 특성상 IP를 차단하는 것만으로도 어느 정도 예방이 가능합니다. 🔎 설치$ sudo apt update$ sudo apt install fail2ban -y 🔎 설정파일 수정기본 설정 파일을 복사해 줍니다.$ sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.lo.. 댓글 0 2024.12.10

React

• 

  Github-Actions Playwright Test Report 결과 PR Commnet로 남기기 📒 Github-Actions Playwright Test Report 결과 PR Commnet로 남기기Github Actions 파이프라인에서 Playwright로 E2E 테스트를 진행하고, 테스트 결과 및 소요 시간을 Pull Request Comment로 남기는 방법을 소개합니다. 📌 Playwright Report output 설정playwright.config.ts 파일에서 테스트 결과 report를 다음과 같이 설정해 주었습니다.export default defineConfig({ ... reporter: process.env.CI ? [["json", { outputFile: "results.json" }]] : "line", ...});Github Action 환경에서 돌아갈 때는.. 2024.12.01

• 

  [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기검색 엔진 최적화(SEO)에서 중요한 요소로 사용되는 사이트맵은, 웹사이트의 페이지와 콘텐츠를 구조적으로 나열한 파일로, 검색 엔진과 사용자에게 웹사이트의 구조와 페이지 간 관계를 명확히 전달하는 역할을 합니다. 이번 프로젝트에서 각 프렌차이즈 브랜드마다 사이트맵을 생성하여 검색 결과에 걸리게 하기 위해 사용해봤습니다. 이번엔 NextJS AppRouter에서 사이트맵을 동적으로 생성하는 방법에 대해 소개합니다. 📌 sitemap.xml Route Handler 폴더 구조 잡기app ㄴ sitemap.xml ㄴ route.ts위와 같이 폴더 구조를 잡아주어 https://xxx.com/sitemap.xml로.. 2024.11.22

• 

  [NextJS, SEO] AppRouter Dynamic Metadata 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Metadata 생성하기동적인 메타데이터를 사용하면 페이지마다 맞춤화된 메타 정보를 제공할 수 있습니다. 이를 통해 검색 엔진이 페이지의 목적과 내용을 더 정확히 이해할 수 있어 SEO를 향상시킬 수 있고,example.com/post/123와 example.com/post/456처럼 같은 페이지여도 독립적으로 색인될 가능성이 증가합니다. 📌 정적 메타데이터 생성NextJS에서 정적 메타데이터를 생성하는 방법은 다음과 같습니다.import type { Metadata } from 'next' export const metadata: Metadata = { title: '...', description: '...',} export defa.. 2024.11.21

• 

  package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook 📒 package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook이번에 이직을 하게 되어 기존 코드를 이리저리 파악해 봤습니다.리드분과 Q&A를 하던 중 package.json scripts의 생명주기에 대한 이야기를 스치듯 들었고, 궁금해서 자세히 찾아보게 되었습니다. 📌 package.json의 scripts"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint"},위는 next.js에서 흔히 보던 스크립트 필드입니다.해당 스크립트를 실행시키기 위해 사용하는 패키지 매니저에 따라 npm run dev / yarn dev / pnpm dev와 같.. 2024.12.30

• 

  지금 당장 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

회고

• 

  2년 차 주니어 프론트엔드 개발자 이직 후기 📒 2년 차 주니어 프론트엔드 개발자 이직 후기24년 6월 말에 퇴사.여행, 휴식, 공부를 하며 지내다 10월부터 취업 준비를 시작.12월에 이직 성공까지의 일들과 느낀 점을 회고해 봅니다. 📌 타임라인🔎 24.07 ~ 24.09, 퇴사부터 이직 준비 전출근의 압박도 사라졌고, 아직 도전은 해보지 않았기에 이직은 손쉽게 할 수 있을 거란 오묘한 가능성에 취해 살았습니다.거기에 첫 해외여행도 가보며 매일매일이 행복이었던 시간.그러나 아주 조금씩 덮쳐오는 취업의 압박에 조금씩 공부하며 휴식이 계속되는 나날들.그래도 어느정도 준비는 해놓았기에 여유는 있어, 이력서는 넣지 않고 하고 싶은 것만 하고 지냈습니다. 🔎 24.10 ~ 24.12, 이직 준비와 성공좀 쉬다보니 이제는 불안하기도 하고 일이 하고 .. 2025.01.07

• 

  첫 회사 퇴사 후기 📒 첫 회사 퇴사 후기📌 퇴사24년 6월까지 회사를 다니고 퇴사했다.여기에는 말 못 할 여러 가지 이유가 있겠지만, 가장 큰 이유는 매너리즘이다.외적인 요인으로 힘든 일은 없었는데, 한번 매너리즘에 빠지기 시작하니 마음이 붕 뜨게 되고 마법 같이 모든 의욕이 사라졌다.익숙해진 일과 상황이 반복되니 여기서 다음 단계로 스탭업하려면 환경을 옮기는 게 맞다고 확신했다.아쉽지만 좋은 사람들을 만나 너무 재미있게 일 하면서 많이 배워간다.📌 계획퇴사 전 빠르게 재취업을 하려 느슨한 계획들을 세워놨었다.하지만 인생은 계획대로 되지 않는 법.오퍼 온 스타트업 회사는 내가 간절하지 않았던 건지 준비를 너무 안 해서 탈락하고, 프리 형태로 제안 온 프로젝트는 계속 펜딩 되는 바람에 마음을 접었다.기대도 안했지만 왠.. 2024.07.22

• 

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