전체 글48 12월 프론트엔드 개발자 뉴스 #1 해당 포스트는 Frontend Weekly Digest의 포스트를 참고하여 몇 가지 인상깊은 포스트를 추려 정리한 글입니다. 웹 개발 뉴스Astro 5.0 Astro 5.0 | AstroAstro 5.0 brings exciting new features like the Astro Content Layer for seamless content loading from any source, and Server Islands for effortlessly combining static and dynamic personalized content.astro.buildAstro란?블로그, 이커머스, 마케팅 등의 컨텐츠 중심 웹사이트를 구축하기 위한 프레임워크이다. Island 아키텍처 도입을 통해 자바스크립트 오버.. 2024. 12. 22. 분열하는 제국 - 콜린 우다드 독서 후기미국은 하나의 국가가 아니라 연방 국가이다. 어쩌면 이 짧은 문장이야말로, 책의 내용을 모두 요약한다고도 볼 수 있다. 애초부터 하나가 아니었기에, 분열하는 것은 그리 이상한 일도 아닐 것이다. 아니, 어쩌면 지금까지 그나마 미국이라는 이름 아래에 하나처럼 보이도록 유지하고 있다는 것 자체가, 기적이었다고도 할 수 있을지도 모르겠다. 분열하는 제국은 거대한 북아메리카 땅덩이를 차지하고 있는 11개의 미국에 대하여 소개한다. 각각의 미국이 자신만의 방식을 가지고 있었고, 그러한 형태들은 도무지 하나로 통합될 수 없어 보일 만큼 개성 넘친다. 미국이라는 제국이 건설되기 한참 전, 그러니까 청교도인들이 하나 둘 원주민의 땅으로 침략해 오며 자신만의 식민지 건설에 여념이 없었던 시절부터 서부 개척과 남.. 2024. 12. 15. React-Three-Fiber + Next14 시작하기...일전에도 Next14에서 React three Fiber, 줄여서 R3F를 사용하는 방법에 대해 언급했었다. 이번에는 간단하게 웹사이트를 만들면서 참고한 예제들과 사용 방법에 대해 언급해보려 한다. https://github.com/pmndrs/react-three-next GitHub - pmndrs/react-three-next: React Three Fiber, Threejs, Nextjs starterReact Three Fiber, Threejs, Nextjs starter. Contribute to pmndrs/react-three-next development by creating an account on GitHub.github.com 위의 템플릿을 사용했다고 했을 때, 기본적.. 2024. 12. 8. 6. Docker + Jenkins + Github + Grafana + Next14 Panda CSS 다크모드 적용해보기전체적인 웹사이트의 형태를 갖추고 난 뒤, panda css에 동적으로 스타일을 적용해보는 몇가지 시도를 진행해보았다. 가장 먼저, 동적으로 내가 원하는 색상을 보이도록 styled css를 작성해보았다.const circleButton = (props) => css({ width: '3rem', height: '3rem', backgroundColor: props.color === 'white' ? 'white' : props.color === 'Orange' ? 'Orange' : 'Black', border: 'none', borderRadius: '50%', textAlign: 'center', lineHeight: '4... 2024. 12. 1. 5. Docker + Jenkins + Github + Grafana + Next14 지난 시간...지난 시간동안 Jenkins에서 도커 이미지를 빌드할 수 있도록 설정하고, 간단한 Next14 프로젝트를 통해 해당 동작이 정상적으로 동작하는지 테스트를 수행해 보았다. 전체적인 자동 빌드 배포 프로세스가 설정되었으니, 이제 우리는 본격적으로 Next14 애플리케이션을 개발하여 우리가 구현하고자 하는 멋진 웹을 개발해야 한다. Next14 포트폴리오 애플리케이션세팅 환경은 다음과 같다.Next14 + App routerpanda cssReact-Three-Fiber사실 이번 Next14에서 가장 핵심이 되는 부분은 React Three Fiber라고도 할 수 있다. 줄여서 R3F라고도 불리는 이 라이브러리는 기존 React에서 3D 모델을 쉽게 컨트롤하여 웹사이트에 띄워줄 수 있는 Thre.. 2024. 11. 23. Docker 이미지 재사용에 관하여 - 2 시행착오환경변수가 빌드 시점과 런타임 시점에서 어떻게 동작하는지에 대해 알아가는 시간을 조금 가져보았다. 사실 일관성 있게 동작하기를 바랐지만, 안타깝게도 이놈의 Next14는 애초에 런타임 환경변수 동작에 대해서 자세히 설명하지도 않고, 한다는 소리는 런타임 환경 변수 주입 시에는 서버 사이드를 권장한다는 것이었다. 아니 그럼 클라이언트 사이드는!!!// Next14 runtime Environment 관련By default, environment variables are only available on the server. To expose an environment variable to the browser, it must be prefixed with NEXT_PUBLIC_. However, th.. 2024. 11. 9. 이전 1 2 3 4 ··· 8 다음 728x90 반응형
