힘내봐요 개발의 숲

문제 상황Next.js의 Image 컴포넌트를 사용하여 프로필 이미지를 불러오도록 작성했는데,아래와 같은 에러가 발생했다.Error: Image Optimization using the default loader is not compatible with `{ output: 'export' }`. Possible solutions: - Remove `{ output: 'export' }` and run "next start" to run server mode including the Image Optimization API. - Configure `{ images: { unoptimized: true } }` in `next.config.js` to disable the Image Optimi..

이전 글에 이어서, 포트폴리오 사이트를 구현하기에 앞서 피그마로 디자인하며 프로토타입으로 실제 느낌을 확인해보고, 피그마를 공부하기 위해 ‘위로 가기’ 버튼의 효과를 적용하려 한다. 처음엔 막연하게 ppt 처럼 위로 올라가기 효과같은게 있을 거라고 생각했는데,서치해보며 여러 효과 적용 예제를 보다 보니, 피그마에서는 효과 적용 전/적용 후 화면을 별도로 만들어둔 후 그 화면을 연결하는 식으로 프로토타입 효과를 적용하는 것 같다. 위로 가기 효과도 비슷하게 레이어를 복사해서 두개를 만들어 두고, 위로 가기 버튼이 클릭되면 다른 레이어로 이동시키는 방식으로 적용할 수 있었다.레이어 복사하기우선 레이어를 복사해서 두개를 만들어 둔다.  위로 가기 버튼의 Interactions 설정하기위로 가기 컴포넌트를 클릭..

포트폴리오 사이트를 구현하기 위해서 Figma에 디자인을 했다.하나의 페이지에서 쭈욱 스크롤 되며 정보를 볼 수 있도록 하기 위해서, 각 카테고리(표지/About Me/Project) 별로 프레임에 그린 후 한 프레임에 합친 상태이다.   구현 전, 실제로 화면에서 스크롤 되는 느낌까지도 확인해보고 싶었고, 피그마 공부도 할 겸 프로토타입으로 스크롤 효과를 적용해보기로 했다.아래 몇가지의 목표를 갖고 스크롤 효과를 적용하려 한다.스크롤 시에도 우측 하단에 네비게이션 바와 위로 가기 버튼이 있도록 고정About Me 카테고리부터 헤더가 있으며, 이후로는 상단에 있도록 고정 레이어(Layers) 구성하기우선 스크롤 효과를 적용하기 위해서는, 스크롤 되어야 하는 컨텐츠가 화면 사이즈(ex: Macbook Ai..

2023.12 ~ 2024.04프로젝트를 시작하며42Seoul의 마지막 과제로 핑퐁 게임과 채팅이 포함된 웹프로젝트를 진행하게 되었다. 과제의 요구사항은 프론트엔드는 Vanilla JS로 할 것, SPA를 구현할 것 등등이 있어 학습하기는 좋겠지만 난이도 있게 느껴졌다. 프로젝트 인원은 프론트엔드 3명과 백엔드 2명이였고, 42Seoul 기간이 끝나기 전에 프로젝트를 완료해야 했기 때문에 조금 촉박하게 진행해야 했었다. 기획필요한 페이지와 기능이 많아서 기획 단계에서 시간과 애를 많이 먹었다.팀원들과 여러 차례 회의하며 노션 페이지에 각 페이지 별 필요한 기능들과 디테일을 정리했다. (디자인 이후에 삭제되었는지 없어졌다..)최종적으로 구현해야 하는 페이지와 기능은 크게 아래와 같다.로그인 페이지 : 생동..

2023.10 ~ 2023.12프로젝트를 시작하며사이드 프로젝트 주제를 고민하다가, 곧 크리스마스인데 내 트리를 꾸며줘 같은 롤링페이퍼 서비스를 만들면 어떨까? 하는 의견이 있었다. 큰 규모도 아니고, 귀엽게 만들어서 지인들과 사용하면 좋겠다는 생각이 들어 프론트엔드 2명과 백엔드 1명이 모여 진행하게 되었다. 셋이서 기획, 디자인, 개발을 진행했고, 12월 전까지 서비스 오픈을 목표로 하였기 때문에 꽤나 촉박하게 진행되었다. 기획피그잼을 사용하여 필요한 화면과 각 화면의 기능을 논의했고, 최종적인 내용은 간단하게 표현해두었다. 다행히 기획 단계에서 논의한 로직에서 거의 바뀌지 않고 구현했다.이후에 노션에 아래처럼 각 페이지별 기능에 대한 명세를 해두었다. 이렇게 정리해두니 어느 부분에서 API가 필요한..

웹폰트 란,웹폰트(Web Fonts)는 웹 디자인에서 더 나은 시각적 경험을 위해 필수적인 요소입니다. 기본 시스템 폰트로만 제한되어 있으면 웹사이트의 디자인 선택폭이 제한되는데, 이는 디자이너와 개발자 모두에게 제한된 경험을 제공하게 됩니다. 웹폰트는 이러한 제한을 극복하고, 웹사이트에 디자인 요소를 추가할 수 있는 강력한 도구입니다.웹폰트 최적화의 필요성하지만, 웹폰트를 사용할 때는 최적화가 필수적입니다. 왜냐하면 웹폰트는 웹페이지의 성능에 영향을 미치는 요소 중 하나이기 때문입니다. 웹폰트를 사용하면 추가적인 리소스가 필요하므로 로딩 속도가 길어져 FOIT, FOUT와 같은 문제가 발생할 수 있어 사용자에게 혼란을 줄 수 있고, 사용자 경험을 저하시킬 수 있습니다.FOIT, FOUT 란,FOIT(F..

웹 개발자라면 누구나 CSS를 사용하지만, 복잡한 CSS 코드 작성으로 어려움을 겪은 적이 한 번쯤 있을 것입니다.Tailwind CSS는 바로 이러한 문제를 해결하기 위해 등장한 CSS 프레임워크입니다. 기존 CSS와는 달리 유틸리티 클래스 기반으로 구성되어 있어, 마치 레고 블록처럼 직관적으로 CSS 코드를 작성할 수 있습니다. Tailwind CSS 란,Tailwind CSS는 Adam Wathan과 Adam Pisoni가 개발한 CSS 프레임워크로, 2017년 오픈 소스로 공개되었습니다. Tailwind CSS는 유틸리티 클래스 기반으로 구성되어 있으며, HTML 요소에 직접 클래스를 추가하여 원하는 스타일을 적용할 수 있습니다. 또한, 다양한 색상, 글꼴, 크기, 여백, 패딩 등을 위한 미리 정..

App.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.라는 에러가 발생했다. 보통 import, export 시 파일 명이나 경로가 잘 못 되었을 경우 발생한다고 한다. 나의 경우에는 index.html 파일에 아래처럼 상대경로인 ./src/App.js 라고 써서 발생했던 문제였다. . 을 지워 절대경로로 바꾸어 주니 에러가 해결되었다!   출처

웹 프론트엔드 개발에 대한 이해도를 높이고 기초부터 숙달하기 위하여, 새로운 프로젝트를 Vanilla JS로 진행해 보기로 했다. 페이지 전환 속도를 감소하여 사용자 경험을 향상시키기 위하여, React처럼 SPA(Single Page Application)로 구현했다.꽤나 어렵고 번거로운 일이었지만, 직접 구현해보며 어떤 식으로 돌아가는지 공부해 볼 수 있었고, 프레임워크나 라이브러리를 쓰며 얼마나 편하게 작업할 수 있었던 것인지 깨달을 수 있었던 유익한 시간이었다. 구현 시 아래 목표들을 달성하기 위해 많은 고민을 하며 진행했다.페이지 이동 시 URL의 경로도 변경될 것URL의 경로가 깔끔할 것뒤로 가기가 가능할 것해당 페이지의 CSS가 적용될 것URL의 경로를 직접 수정하여도 해당 페이지로 이동될 ..

웹프로젝트에서 필요한 key 들을 .env 파일에 저장하고, 접근하도록 적용해두었다. 그러나 .env 파일은 보안을 위해 github 에 올리지 않는 파일인데, 배포 때는 어떻게 되는거지? 하는 의문이 생겼고, 백엔드 팀원이 github actions에 secrets 로 환경변수를 관리하는 방식을 알려주어, 공부하며 기록해둔다.Github Actions 란?Github에서 제공하는 CI(Continuos Integration, 지속통합)와 CD(Continuous Deployment, 지속배포)를 위한 서비스이다.Github Actions 은 특정 이벤트가 발생했을 때, 특정 작업이 일어나게 하거나, 주기적으로 특정 작업을 반복해서 실행시킬 수 있는 자동화 툴이다. 예를 들어 main 브랜치에 코드가 p..