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

Styled-Components로 스타일을 적용하고 나서 새로고침을 하면 적용되었던 스타일이 제거되는 문제가 발생한다. 이전에는 Babel을 사용한 babel-plugin-styled-components를 설치해서 따로 구현을 해서 처리함으로써 문제를 해결했다면 이제는 Next JS의 Rust Compiler인 SWC가 나옴으로써 next.config.js 파일에서 쉽게 처리할 수 있다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false, compiler: { styledComponents: true, }, async rewrites() { return [ { ... } ] } } module.expor..

정규표현식(Regular Expression)을 사용하다보면 이해가 잘 되지 않은 채로 사용할 때가 있다. 문법 자체가 어려운 부분이 있기 때문에 이해하기도 어렵다. /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/g 위에 정규표현식을 쉽게 이해하는 사람도 있겠지만, 반대인 사람도 있을 것이다. 위에는 이메일 형식으로 제대로 입력했는지 확인하는 정규표현식이다. 그렇다면 정규표현식을 쉽게 사용하는 방법은 없을까? 있다. https://github.com/VerbalExpressions/JSVerbalExpressions GitHub - VerbalExpressions/JSVerbalExpressions: JavaScript Regular expressions made easy JavaScript Re..

Mocking Server를 구축하는 방법은 구글에 검색하면 많은 곳에서 확인할 수 있다. 그래서 주의할 점만 간단하게 작성하려고 한다. Mocking Server 서버 구축 과정 중에서 Handler를 구현하고 이를 setupWorker에 담아 전달하고 App.js에서 개발 모드일 경우에만 실행하도록 작성한다. 그러나 이 때, 아래처럼 여러 개의 API를 배열로 가져오고 나서 이 배열을 다시 다른 배열에 담아서 setupWorker에 담아 보내려고 할 때, 에러가 발생할 것이다. 그 이유는 간단하다. API를 가져오는 것을 배열에 담았는데 이것을 또 배열에 담은 것이 문제였던 것이다. import { rest, setupWorker } from 'msw'; const getHandlers = [ res..

최근 많은 서비스에서 애니메이션 그래픽을 모바일, 웹 서비스에 도입하는 경우를 많이 찾아볼 수 있다. 예를 들어서 토스처럼. 움직임이 없는 정적인 디자인에서 벗어나 고객이 시각적 재미를 느낄 수 있도록 그래픽 애니메이션을 도입하고 있다. 이는 서비스를 더욱 세련되게 만들어주기도 한다. 나는 그래픽 애니메이션을 구현해보기 위해 검색을 해오다가 다양한 그래픽 라이브러리들이 있지만 LottieFiles를 추천받았다. 왜 LottieFiles를 사용하는 것이 좋을까? LottieFiles는 가볍다. 공식 홈페이지에서 확인할 수 있는 정보이다. 그들은 LottieFiles가 굉장히 가볍다고 한다. 직접 사용해봤을 때, 실제로 무겁다고 느껴지지 않았다. 직접 CSS로 애니메이션을 구현해본 것과 비교했을 때도 오히려..

openweathermap의 무료 api를 호출을 시도했다. $.getJSON("https://api.openweathermap.org/data/2.5/forecast/daily", { q: this.location, cnt: 4, units: "metric", appid: "..." } 그런데 현재 날씨 정보를 가져오는 것은 성공했으나 일간 날씨를 가져올 때 401 Unauthorized 에러가 발생하여 호출이 실패했다. 401 Unauthorized에 대해 알아보니 api Key를 잘못 작성했거나 유효하지 않은 api Key를 사용한 경우가 많았다. openweathermap 공식 사이트에서 api 카테고리에 401 Unauthorized에 대해 알아보니 위와 같은 이유가 작성되어 있었다. 그리고 결..

Open API를 호출할 때, 굉장히 단순한 방법으로 호출했었다. const getData = async () => { const res = await fetch('/api/popular') .then((res) => res.json()) .then((data) => setData(data.results)); return res; } 대충 위와 같은 방법으로 API의 데이터를 가져와서 사용했다. 그러나 이 처럼 사용했을 때, Console로 Log를 확인하면 Undefined가 우선 출력이 되고 다음에 가져온 데이터가 출력이 됐다. 그래서 Undefined가 나오지 않도록 API를 호출하는 방법을 검색해보았다. 위 처럼 사용하는 것보다 Try / Catch 문을 사용해서 호출하는 방법이 효율적이라는 글을..

React와 Next JS 학습을 하면서 외부 데이터를 가져오게 되었다. 외부 URL을 이용해서 제목과 이미지를 가져와 사용하였다. 여기서 외부 데이터를 가져오는 방법이 한 가지가 아니라는 것을 알게 되었고 잊지 않기 위해 기록하게 되었다. 첫 번째 방법, URL을 입력하여 직접 가져오기 우리는 자바스크립트에서 외부 API를 가져오기 위해 비동기 통신 "Axios"를 사용한다. 여기서 직접 URL을 입력하여 데이터를 가져오는 방법은 const res = await fetch(`https://jsonplaceholder.typicode.com/photos/`) const photo = await res.json(); 위 처럼 비동기 방식으로 URL을 가져오는 방법이다. 그리고 해당 데이터를 return하여..

클린 코드란 '명확한 이름', '중복 줄이기'를 먼저 말한다. 실무에서 클린 코드의 의의 그 코드는 건드리지 않는 게 좋겠어요. 제가 할게요. 이 말의 의미를 다시 한 번 해석해보면 1. 흐름 파악이 어렵고 2. 도메인 맥략 표현이 안되어 3. 동료에게 물어봐야 알 수 있는 코드 이러한 코드는 유지 보수도 힘들고, 최악의 경우에는 추가 기능을 추가하지 못할 수도 있다. 그리고 윶어 입장에서도 쾌적하지 못할 수 있다. 여기서 클린 코드란, 유지 보수 시간의 단축이라고 생각하면 된다. 클린 코드로 작성을 하면 코드를 파악하기 쉽고, 디버깅 시간도 단축되며 낭비하는 시간을 줄일 수 있다. 안일한 코드 추가의 함정 만약에 기능을 추가해야 할 일이 생기면 어떻게 될까? 다른 사람이 작성한 코드에서 내가 새로운 기..