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

나는 새로운 기술을 학습하는 것에 관심이 많다. 그래서 '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개를 개선하기로 결정했다. ..

쉽게 오늘의 뉴스를 확인할 수 있는 프로젝트인 "퀵뉴스"에서 뉴스를 검색할 때, 검색어를 입력받고, 단어와 관련된 뉴스를 출력하도록 구현했다. 실행하여 확인한 결과, 문제없이 동작하였다. 그러나 이 때, 문제가 하나 있었다. 바로, 같은 단어를 여러 번 검색 요청을 하면 중복 요청이 일어난다는 것이다. 검색 기능을 구현할 때, 검색어를 입력하지 않을 경우에는 검색이 되지 않고, 검색어가 입력하였을 때만 검색하도록 구현하였다. 이 때, 중복 단어에 대한 검사를 구현하지 않아 문제가 발생한 것이다. 이 문제는 불필요한 API 요청을 할 뿐만 아니라, 비용적인 면에서도 비효율적이었다. 이를 해결하기 위해, 같은 단어로 검색할 경우, 요청이 일어나지 않도록 수정하여 개선해야 했다. 여기서 도움을 얻은 것은 바로..

CSR (Client-Side Rendering) 'CSR'은 클라이언트 측에서 렌더링되는 방식이다. 서버는 초기 HTML 파일과 함께 JavaScript 번들을 제공하고, JavaScript 코드가 클라이언트에서 실행될 때 동적으로 컨텐츠를 가져와 렌더링한다. 'CSR'은 초기 로딩 속도가 빠르고, 클라이언트 측에서 데이터를 가져와 렌더링할 수 있어 상호작용성이 뛰어나다. 예시 코드는 다음과 같다. 'React'에서 자주 사용했던 코드와 비슷하다. import React, { useEffect, useState } from 'react'; function ExampleComponent() { const [data, setData] = useState(null); useEffect(() => { // 클..