ChatGPT 선생님과 성장하는 독학 개발자의 기록

보통 API의 Key 값을 선언할 때는 '.env' 파일에서 선언해서 사용하고 있다. 그런데, Next.js 프로젝트에서 API Key 값을 선언할 때 두 가지 방법이 있는 것을 알게 됐다. NEXT_PUBLIC_API_KEYAPI_KEY 'NEXT_PUBLIC'이 붙은 선언과 그렇지 않은 일반적인 선언이 있다는 것을 알게 되면서, 왜 이 둘로 나뉘어 졌는지, 그리고 이 둘의 차이점이 무엇인지 궁금해졌다. NEXT_PUBLIC의 의미와 차이점NEXT_PUBLIC이 붙은 환경 변수이는 클라이언트 사이드에도 포함이 된다. 즉, 브라우저에서 접근이 가능하다. 정적으로 HTML과 JavaScript로 빌드될 때 환경 변수 값을 포함시킨다. 보안상 누구나 소스 뷰(F12)나 네트워크 요청을 통해 접근할 수 있다...

나는 사진(또는 동영상)을 찍고 그 장면의 표현력을 더 극대화하는 보정을 하는 것을 좋아한다. 이는 나의 취미 중 하나이기도 하다.그러나, 보정은 뛰어난 감각이 있지 않는 한 매우 어렵다. 내가 표현하고 싶은 느낌으로 보정하는 게 생각보다 제대로 되지 않고, 그렇기에 전문가가 공유한 보정 파일을 사용하거나 사진작가가 참여한 보정 앱을 사용하는 경우가 생각보다 많다. 파일이나 앱을 사용하더라도 내가 원하는 느낌이나 사진에 알맞는 보정이 없는 경우가 발생하기도 하는데, 이럴 때마다 누군가 내가 원하는 느낌으로 보정해줬으면 좋겠다는 생각이 들기도 했다. 이 때 든 생각이 바로 '자동 사진 보정 서비스'이다. 요즘 무료로 제공하는 AI API를 활용한다면 원하는 기능을 구현할 수 있을 것이라고 생각했다. 계획은..

나는 새로운 기술을 학습하는 것에 관심이 많다. 그래서 'React' 다음에 'Next.js'에 대한 궁금함이 생겼고, 공부를 시작했다. 나만의 공부 방법은 다음과 같다. 동영상 강의, 공식 홈페이지 등 이론을 간단하게 학습한다. (1~2회 이론 내용 읽기)간단한 이론 학습을 마친 뒤, 실습을 진행하여 직접적으로 배운다. 위의 학습 방법을 기반으로 학습 진행 과정에서 오늘 하루의 주요 뉴스, 종합을 포함한 다양한 카테고리 뉴스들을 쉽게 볼 수 있는 프로젝트 'Quick-News' 서비스를 개발하기 시작했다. 간단하게 학습한 이론을 기반으로 진행한 이 프로젝트의 처음 폴더 구조는 대략적으로 아래와 같았다. pagse - page - api - utils - type 위 처럼 폴더 구조를 잡..

제목: 캘린더 메모타겟: 캘린더 형식으로 쉽게 기록하고 정리하고 싶은 사람기능: 캘린더 기반으로 메모 및 일정 기록, 년/월 기준으로 메모 및 기록 확인, 사진 첨부  위 서비스 개발 시작 계획은 아직 정하지 않았지만, 2025년 안에 개발하는 것을 목표로 하고 있다.위의 서비스를 통해 나의 일정을 쉽게 기록하고 확인하고, 계획이나 기억해야 할 메모를 기록하는 용도로 활용하고 싶다.

이전에 Next.js 프로젝트인 `Quick-News`의 `Lighthouse` 점수 개선을 시도한 적이 있었다.다행히, `Performace` 점수를 제외한 나머지 세 개 점수는 모두 100점으로 개선할 수 있었다. 그러나, 가장 중요한 `Performance` 점수를 개선하는 데 굉장히 많은 어려움을 겪고 있었다. (이는 현재 진행형이다) `Lighthouse`에서 어떤 점이 문제이고, 어떻게 개선하면 좋을지에 대해 나타난 정보들을 모두 확인하여 많은 개선 시도를 했음에도 불구하고, 점수는 크게 개선되지 않았다. 한 가지, 현 컴퓨터의 성능이 굉장히 오래된 컴퓨터이기 때문에, 성능 상 문제로 인해 `Performance` 점수에 영향을 줄 수 있다는 것을 고려해도, 위의 점수는 굉장히 낮다. 나는 7..

이전 글을 `Quick-news` 프로젝트에서 CSR 방식으로 데이터를 가져오는 것을 SSR 방식으로 변경하려다 실패했다고 작성했었다. 그리고, 마지막으로 한 번만 더 시도해보고 안 되면 CSR 방식으로 두기로 결정했다. 이 시도는 옳았다. 이제서야 SSR 방식으로 데이터를 가져오는 방법을 제대로 깨우쳤다. 이전에 SSR 방식으로 데이터를 가져왔던 시도는 다음과 같았다.export default function List({posts}: Props) { // posts 데이터 사용}export async function getServerSideProps() { const url = 'https://jsonplaceholder.typicode.com/posts'; try { const respons..

이전에 `Quick-News` 프로젝트에서 Lighthouse로 성능을 분석한 결과를 작성한 적이 있었다. 그리고, `Performance` 점수를 제외한 나머지 3개 부분의 점수를 100점으로 개선한 적이 있었다. 그리고 나서, `Perforamnce` 점수 개선을 시도했다. 여기서 현재 내 컴퓨터는 10년이 되어 성능 상 문제가 많다. 그래서 모든 문제를 해결하기 어렵기 때문에 최대한 개선이 가능한 부분들만 개선하기로 결정했다. `Performance` 점수 개선을 위해 우선 문제점을 파악하였다. 페이지 렌더링 시간을 개선할 필요가 있었고, 기존에 CSR 방식 대신 초기 렌더링이 빠른 SSR 방식으로 초기 데이터를 불러오는 전략을 선택하기로 결정했다. 초기 렌더링 시간은 `Performance`에 영..

수 많은 강의, 수 많은 블로그를 보면서 `Lighthouse`에 대해 많은 말을 들었다.최적화에 도움이 되고 성능 개선에 필요한 필수 과정이라는 것을 알고 있었지만, 보고 듣기만 했을 뿐 직접 `Lighthouse`를 사용한 적이 없었다. 미루고 미루다 이번에 `Lighthouse` 사용을 결심하고 기존 프로젝트에 사용해봤다. 기존 `Quick-News` 프로젝트에 `Lighthouse`를 분석해봤다. 처참했다.이 프로젝트를 리팩토링하며, 많은 블로그를 읽고 ChatGPT를 활용해 최대한 코드를 최적화했다고 생각했는데 그게 제대로 된 방법이 아니었다는 것을 알게 된 결과였다.일단, 가장 처참한 `Performace(성능)`은 마지막으로 미루고 빠르게 개선할 수 있는 나머지 3개를 개선하기로 결정했다. ..