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 위 처럼 폴더 구조를 잡..

자신의 단 한 장의 최고의 사진을 공유하는 서비스이자 개인 프로젝트인 'YooP'에 기존에 없었던 새로운 게시물이 나타났다. 바로 예상하지 못한 회원이 나타난 것이다. 단 한 명의 회원을 통해 'YooP' 서비스의 문제점을 알 수 있었다.'YooP' 서비스에서 게시물을 작성할 때, 이미지 첨부와 글 작성을 필수로 포함될 수 있도록 유효성 검사가 이루어져 있다. 그래서 만약에 이미지를 첨부하지 않거나 글을 작성하지 않은 채 작성하게 되면 이미지를 첨부하거나 글을 작성하라는 메세지가 나타나도록 구현되어 있다.  그러나, 한 명의 고객이 작성한 게시글에는 이미지가 첨부되어 있지 않고 글만 포함되어 있는 채 작성되어 있었다. 또 다른 문제는 회원 프로필 사진이 엑스박스(이미지가 없어서 발생하는 문제)로 나타나 ..

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

서비스 제목: 안전의증서도구: 웹, (펜이 없는) 태블릿, 모바일타겟: 계약서 작성 빈도가 높은 직장인 일상 생활에서 계약서를 종이로 작성하는 경우가 많다. 그러나, 종이로 작성하는 경우에도 파일로 남겨야 하는 경우가 있는데, 이 때, 종이로 작성하고 스캔을 하여 파일로 저장하는 복잡한 단계를 거쳐야 하는 번거로움이 있다. 이를 대체할 수 있도록 온라인에서 계약서를 작성하는 서비스를 계획하였고, 피그마 툴을 통해 디자인 스케치를 진행하였다.  서비스에 접속하여 처음으로 접하는 화면은 서비스를 이용하는 데 있어서 책임은 사용자에게 존재한다는 확인 페이지이다. 확인하지 않으면 페이지를 접속하지 못하고, 확인 버튼을 눌러야 계약서를 작성할 수 있는 사이트로 이동할 수 있다.  확인 버튼을 눌러 계약서를 작성할..

`단일 책임 원칙(Single Responsibility Principle)`을 이제 대부분 알고 있을 것이다. 아니면, 한 번쯤 들어봤을 것이다. `단일 책임 원칙`은 각 소프트웨어 모듈은 변경의 이유가 단 하나여야 한다는 규칙을 가지고 있다. 즉, 하나의 모듈은 하나의 사용자 또는 이해관계자에 대해서만 책임을 져야 한다는 것이고, 하나의 요소가 하나의 변경의 이유를 갖게 하라는 말이다. 쉽게 말해, 대표가 1명인 개발자와 대표가 4명인 개발자 중 대표가 4명인 개발자는 어떻게 개발해 나가야 하는지 개발 방향이 4명의 대표마다 달라 혼란스러울 것이다. 이를 방지하자는 것이다. 그리고 여기에서 `응집성`이 중요한데, 이는 단일 액터를 책임지는 코드를 함께 묶어주는 힘을 말한다. 만약, 다음과 같은 요구사..

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