Docker + Jenkins + Github + Grafana + Next14 HTTPS 설정하기 여태 http 프로토콜로 통신하는 방식을 통해 포트폴리오를 운영해왔다. 문제는 이제 대부분의 경우 최신 브라우저에서는 더 이상 http 프로토콜을 안전하지 않은 것으로 판단하여 사이트 접근 전에 경고를 주거나 접근을 막는 경우가 허다하다는 것이었다....

Docker + Jenkins + Github + Grafana + Next14 Grafana 붙이기 전체적으로 세팅을 끝냈고, 이제 정성 가득한 포트폴리오에 접근하는 유저들의 트래픽과 사용 브라우저 등을 확인하고, 정상적으로 랜더링이 이뤄지고 있는지를 파악할 차례다. 또한 현재 필자가 사용중인 서버의 용량과 메모리 사용량에 대해서도 실시간으로 모...

React-Three-Fiber 애니메이션 컨트롤 시작하기 React Three Fiber 라이브러리로 오브젝트에 애니메이션을 부여하여 AboutMe 페이지를 실감나게 바꿔볼 계획을 세우고 있었다. 페이지가 로딩되면 우주비행사가 걸어들어오고 인사를 건내며 특정 질문에 대하여 특정 제스쳐를 표시하는 것이다. 하지만 우선 문제가 있다. 먼저 Blen...

React Native -2 Layout 시스템 알아보기 React 웹과 React Native의 레이아웃은 거의 유사하게 동작하지만 분명하게 차이점이 존재한다. 가장 대표적인 예시로는 ‘display:flex’가 있다. 웹에서는 Flex Direction을 설정하기 위해서는 기본적으로 display를 flex로 설정한 뒤에 해당 row, 혹은 ...

React Native 스터디 -1 시작하기 대세가 모바일 개발이라는 것은 스마트폰의 등장 시절부터 이야기된 부분이기도 하지만, 최근 여러 공고들을 보면서 확실히 프론트엔드 개발자 자격 요건 중에 React-native를 다룰 수 있는 요건이 많이 보이고 있었다. 아무래도 React를 사용하던 개발자에게 있어서 React native의 접근성이 좋...

1월 프론트엔드 개발자 뉴스 #2 해당 1월 뉴스레터들은 대부분 2024를 마무리하는 취지로 작성된 글들이 많이 보인다. 그 중에서도 조금 생소하거나 흥미로운 주제들을 몇가지 정리하여 작성해둔다. 해당 뉴스레터는 지난번 Medium 게시글을 참고한 것과 달리 Javascript Weekly에서 보내주는 에디터픽 게시글들을 참조했다. 자세한 내용까지는...

도커 환경변수 외부 주입 (with Next14) 시작하기… 일전에 프론트엔드 배포 환경을 도커 컨테이너 기반으로 변경하는 일이 있었다. 현재는 무사히 테스트 작업이 끝나 정식 배포가 진행되었지만 여전히 아쉬운 문제가 하나 남아있었다. 바로 ‘도커 이미지 재사용’에 대한 문제였다. 대부분의 회사에서는 테스트 서버와 production 서버를 분리...

Next14 Prerendering 성능 개선의 딜레마 종종 여러 인프라 개선을 위해 무언가를 적용해 보면, 꼭 기존에 사용하던 장점을 버려야 하는 경우가 발생한다. 프레임워크나 라이브러리의 한계라고도 볼 수 있을 것 같다. 블로그에도 추후 다루게 될 이슈이기도 하지만, 최근 이러한 개선과 관련된 업무를 진행하는 과정에서 Next14 프레임워크의 ...

12월 프론트엔드 개발자 뉴스 #1 웹 개발 뉴스 Astro 5.0 https://astro.build/blog/astro-5/ Astro란? 블로그, 이커머스, 마케팅 등의 컨텐츠 중심 웹사이트를 구축하기 위한 프레임워크이다. Island 아키텍처 도입을 통해 자바스크립트 오버헤드와 복잡성을 줄이고 빠른 로딩 속도와 뛰어난 검색 엔진 최적화...

React-Three-Fiber + Next14 시작하기… 일전에도 Next14에서 React three Fiber, 줄여서 R3F를 사용하는 방법에 대해 언급했었다. 이번에는 간단하게 웹사이트를 만들면서 참고한 예제들과 사용 방법에 대해 언급해보려 한다. https://github.com/pmndrs/react-three-next GitHub...