23 min read
한국어 번역으로 기여하기
최근 holistics/dbx-multi-lang 저장소에 한국어 locale을 추가하는 PR을 보냈다.처음에는 단순히 “한국어 번역 파일을 추가하면 되겠지” 정도로 생각했다. 한국어 문장을 채워 넣고, 파일을 추가하고, PR을 올리면 끝나는 작업에 가까울 거라고 봤다. 그런데 막상 작업해보니 생각보다 단순한 번역 작업은
Category
Engineering
22 min read
쉽고 간편한 SSL/TLS 인증서 등록, 발급, 관리를 위한 Certificate Manager
본 포스팅은 네이버클라우드에서 소정의 수수료를 제공받아 작성된 글입니다. 썸네일 출처: 네이버클라우드 제공 이미지인증서 만료는 작은 설정 문제가 아니라 서비스 신뢰 문제다웹사이트를 운영하고 있다면 사이트의 보안 유지는 더 이상 선택이 아닙니다. 특히 웹사이트와 사용자 사이의 신뢰 관계를 만들기 위해서는 보안서버 구축이 사
15 min read
프론트엔드 개발자의 시선으로 바라본 AWS의 전체 구조
그림으로 이해하는 AWS 구조와 기술 서평1. 서론프론트엔드 개발자로 실무를 경험하면서 가장 크게 느낀 점 중 하나는,“나는 화면을 만들고 있지만, 서비스 전체 구조는 잘 모른다”는 한계였다. React 기반으로 UI를 구현하고 API를 호출하는 작업에는 익숙해졌지만,그 API가 어디에서 실행되고, 정적 파일이 어떻게 사
31 min read
Electron 웹뷰 앱을 Tauri Native UI로 마이그레이션하기 1: 왜 지금 갈아타는가
들어가며거부기린은 개인적으로 애정이 가는 프로젝트다. 그래서 더 대충 넘기고 싶지 않았다."지금도 돌아가니까 유지하자"는 식으로 남겨두기보다, 실제로 쓰는 사람이 덜 답답하고 앞으로 유지보수하는 사람도 덜 고생하는 구조로 바꾸고 싶었다. 소프트웨어를 오래 운영하다 보면 초기에 가볍게 선택한 구조가 나중에는 로딩 속도, 화
Engineering
5 min read
[Nextjs] Next.js로 구현하는 로그인
1. 왜 인증이 중요한가?웹에서 인증은 필수적인 기능이다. 사용자의 데이터를 보호하고, 로그인한 사용자만 특정 기능을 이용할 수 있도록 제한하는 것이 중요하다.인증 방식에는 여러 가지가 있지만, 이번 강의에서는 세션 기반 인증을 배웠다. 특히 Next.js의 서버 액션과 Lucia 인증 라이브러리를 활용하여 인증 시스템을
Engineering
6 min read
[Next.js] 서버 컴포넌트 vs 클라이언트 컴포넌트
강의를 듣다 저번 Nextjs 프로젝트 할때 가장 어려웠던 서버 컴포넌트와 클라이언트 컴포넌트에 대한 내용이 나왔다. 넥스트로 프로젝트를 처음해봤어서 편하다는 이유로 최상단 루트에 클라이언트 컴포넌트를 선언하고 개발을 진행했다. 그리고 개발이 다 끝나고 나서야 알았다. 이게 얼마나 멍청한 짓이였는지를.. 그래서 저번과 같
Engineering
9 min read
React-Router-Dom 로더와 액션
1. Loader와 Action은 왜 나오게 되었나?데이터 API의 변화Loader와 Action이 나오기 전인 React Router DOM v6.4 이전에는 라우팅과 데이터 페칭이 완전히 분리되어 있었습니다. 라우터는 단순히 URL에 따라 어떤 컴포넌트를 렌더링할지만 결정했고, 데이터 로딩은 각 컴포넌트의 책임이었습니
7 min read
깃허브 액션으로 CI해보기
저번 테커 부트캠프때 깃허브를 이용해서 CI/CD를 해봤는데 지금 읽는 스터디 책에 깃허브로 CI하는 내용이 있어서 정리 한 번 해보고 코드에 반영을 할 수 있으면 반영까지 해보려고 한다!CI란?우선 기본적인 CI의 정의는 Continuous Integration(지속적 통합)의 약자로, 소프트웨어 개발에서 자주 사용하는
![[React] 리액트 개발 도구를 활용해 좋은 웹 어플리케이션 만들기 cover](https://pub-2eadf17a82cb46679204775b78a2c16a.r2.dev/blog/tistory/tistory-11/b8be229207b34211.png)
11 min read
[React] 리액트 개발 도구를 활용해 좋은 웹 어플리케이션 만들기
디버깅은 프로그래밍에서 가장 중요한 요소중 하나다. 잘못된 동작을 찾아내는 것은 때론 간단하지만, 여러 라이브러리와 작성된 코드들이 섞인다면 잘못된 동작을 찾아내기란 사막에서 바늘 찾기다. 이때 활용할 수 있는 리액트 개발 도구에 대해 소개해보겠다.리액트 개발 도구리액트 개발 도구란?리액트 팀에서 리액트 개발을 더 편리하
![[React] SSR은 뭘까..? cover](https://pub-2eadf17a82cb46679204775b78a2c16a.r2.dev/blog/tistory/tistory-10/4bddd020c94ee711.gif)
9 min read
[React] SSR은 뭘까..?
이 글을 읽는 모두 SSR에 대해 많이 들어봤을것이다.SSR, 서버 사이드 렌더링 나도 많이 들어봤지만 그게 정확히 뭐야? 라고 한다면 잘 설명하지 못했었던거 같다. 글을 쓰며 정리하고 다시 읽어보며 SSR을 정복해보자!우선 SSR에 대해 잘 알고 설명할 수 있으려면 SPA에 대하여 잘 알아야한다고 생각한다.📌 SPA란
Engineering
5 min read
[React] useThrottle과 useDebounce에 대해서 알아보자
React 애플리케이션에서 자주 사용하는 useThrottle와 useDebounce는 사용자 인터페이스 성능을 최적화하는 데 유용한 커스텀 훅이다.스크롤, 키보드 입력, 리사이즈 등 이벤트가 자주 발생하는 상황에서 불필요한 호출을 줄여 부드러운 사용자 경험을 제공하는 것이 목적이다 먼저 useThrottle과 useDe
![[React] 언제 메모이제이션을 해야할까? cover](https://pub-2eadf17a82cb46679204775b78a2c16a.r2.dev/blog/tistory/tistory-7/23f004edbe13a9d8.png)
11 min read
[React] 언제 메모이제이션을 해야할까?
스터디 책을 읽다가 평소 관심이 있던 최적화와 관련된 부분이 있어서 정리해보기로 했다.메모이제이션이란?계산 결과를 메모리에 저장해 두고 동일한 계산이 요청될 때 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법이다.리액트에서는 useMemo, useCallback 훅과 고차 컴포넌트인 memo를 활용해 메모이제이션을
3 min read
깃허브 페이지 커스텀 도메인 연결하기
지금 블로그는 버셀로 배포가 되어있기 때문에 이번에 만들고 있는 개인 포트폴리오 사이트는 깃허브 페이지로 배포하기로 했다.깃허브 페이지 배포하는것은 크게 어렵지 않았지만, 커스텀 도메인 연결이 시간이 오래걸렸어서 까먹지 않기 위해 정리 한 번 하려고 한다.1. 도메인 구매나같은 경우에는 가비아에서 이미 도메인을 산 상태여
Engineering
2 min read
정규표현식
정규표현식 정규식, Regualar Expression 역할 문자 검색 (search) 문자 대체 (replace) 문자 추출 테스트 사이트 https://regexr.com/ 정규식 생성 // 생성자new RegExp("표현", "옵션"); new RegExp("[a-z]", "gi"); // 리터럴/표현/옵션 /[a-