Dev Diary 💻

Intro 안녕하세요. 오늘은 저번주에 봤던 오픽 시험 점수가 발표되는 날이었습니다. 난이도는 6-6로 설정했고, 자세한 문제 유형은 위 포스팅에서 참고해주시길 바랍니다. Result 예상 점수인 IH가 나왔습니다 🥲 AL을 받고 싶었는데 너무 아쉽네요. 다음주에 한번 더 오픽 시험을 도전해보려 합니다. 다음주에는 더 향상된 점수를 받을 수 있길 바라며, 공부를 하러 가보겠습니다. 😵‍💫 😵‍💫 ~~

Intro 안녕하세요. 저는 recharts chart 차트 라이브러리를 사용하여 차트의 넓이를 화면 100%에 맞춰서 뿌려주고 싶었는데요. width 값을 100%로 설정하자 다음의 에러가 발생했습니다. TS2322: Type 'string' is not assignable to type 'number'. import {NextPage} from "next"; import React from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; const data = [ { name: 'Jan', uv: 4000, pv: 2400, amt: 2400, }, { name: 'Feb'..

Intro AutoGPT는 github에서 폭팔적인 인기를 끌고 있는 오픈소스 프로젝트입니다. 이미 9만 개가 넘는 별들을 보유하고 있습니다. 이는 장고, Spring Boot 보다도 더 높은 순위를 의미합니다. What is Auto-GPT? Auto-GPT가 하는 일은 탁구 테이블에서 인간을 제거하는 것입니다. GPT-4 모델을 허용하여 스스로 '쓰기 프롬프트'를 하는 것입니다. 작업을 부여하기만 하면 Auto-GPT는 인간의 개입 없이 프롬포트를 스스로 제시할 수 있습니다. 벡터 데이터베이스와의 통합 덕분에 장기 기억(Long-term Memory) 과 단기 기억(Short-term Memory) 을 모두 갖추고 있습니다. How to run Auto-GPT - python 3.8 이상 설치 - v..

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Error: Redundant double negation. no-extra-boolean-cast {text} Why 위 에러는 ESLint의 no-extra-boolean-cast 규칙으로, 불필요한 불리언 캐스트(불린 값을 강제로 캐스팅하는 것)를 방지하기 위한 규칙입니다. 현재 !!visible와 같은 형태로 불린 값을 강제로 캐스팅하고 하고 있습니다. 이미 불리언 값이 존재하기 때문에 이중 부정 연산자를 사용하여 불리언 값이 될 필요가 없습니다. How to solve 따라서 아래와 같이 이중 부정 연산자를 제거하면 ESLint 에러가 사라집니다. visible 자체를 사용해도 동일한 결과를 얻을 수 있습니다. {text}

Intro 안녕하세요. 이번 시간에는 인텔리제이 디버깅 모드가 실행 안될 때 해결 방법에 대해 알아보겠습니다. Why? 처음에 제 노트북에 문제가 있나 싶어 노트북을 키고 끔을 반복했지만 인텔리제이에서 디버깅 모드가 실행이 안되더라고요. 알고보니 브레이크 포인트가 걸려있을 경우 메모리를 많이 잡아 먹어 디버깅 모드가 실행이 안될 수가 있다고 합니다. How to solve cmd + shift + f8 버튼을 눌러서 걸려있는 브레이크 포인트를 모두 해제하고 다시 실행하니 디버깅 모드가 정상 작동 되었습니다. 실제 확인해보니 브레이크 포인트가 많이 걸려 있었어요. 혹시 인텔리제이에서 디버깅 모드가 실행 안된다면 걸려있는 브레이크 포인트를 확인해보시길 바랍니다 :)

Intro 안녕하세요. 이번에 저는 오픽 시험을 봤습니다. 시험 복기 차원에서 포스팅을 적어보려 합니다. 오픽 성적이 만료되기도 하고, 오랜만에 영어 스피킹 시험을 보고 싶어서 이렇게 오픽을 보게 되었네요 :-) 글로벌한 환경에서 일하고 싶어서 영어를 꾸준히 열심히 공부하는 중이랍니다~! 공부 방법 공부 기간은 일주일이였고요, 유튜브 오픽노잼님 영상을 계속 봤습니다. 2년전 오픽을 공부했을 때도 오픽노잼님을 보고 공부했고, IH를 받았던 기억이 있어서 따로 책을 사서 공부하진 않았어요. 시험 난이도 저는 6-6 난이도 설정했습니다. 서베이 서베이는 아래의 항목으로 선택했습니다. - 학생 여부 : 아니오 - 최근 수강한 강의 : 학위 과정 수업 - 거주지 관련 항목 : 주택이나 아파트에 가족/배우자/자녀 ..

Intro mongodb 에서 추가된 컬렉션을 스프링부트에서 활용하던 도중 아래의 에러가 발생했습니다. Failed to instantiate [org.springframework.data.mongodb.core.SimpleReactiveMongoDatabaseFactory]: Factory method 'someHotMongoFactory' threw exception with message: Cannot invoke "String.startsWith(String)" because "connectionString" is null Why? 이 오류는 connectionString이 null이기 때문에 "String.startsWith(String)"를 호출할 수 없다는 것을 나타냅니다. SomeHotMo..

Intro 안녕하세요. 이번시간에는 모바일 기기 (mobile device) 화면 잘림 현상에 대해 알아보겠습니다. 제 경우 react next project를 만들었습니다. pc local 개발자도구 테스트 시 화면 잘림 현상 없이 잘 나왔지만, 실제 핸드폰에는 border line이 살짝 잘린 현상이 나타나더라고요. 해당 문제를 해결하기 위해 구글링을 해봤습니다. 🤘 Why? 모바일 기기에서 화면 잘림 현상이 나타나는 원인은 여러가지 있을 수 있겠만, 대게는 모바일 기기 브라우저의 뷰포트와 관련된 문제라고 합니다. 모바일 브라우저는 페이지 렌더링 시 뷰퍼트의 크키에 맞게 자동 조정됩니다. 하지만 브라우저가 뷰포트의 크기를 올바르게 계산하지 못할 경우, 페이지가 제대로 나오지 않는 경우가 발생합니다. ..

Intro 안녕하세요. 이번시간에는 Next.js에서 Viewport(뷰포인트)를 설정하는 방법에 대해 알아보겠습니다. How to apply viewport in nextjs _document.js 파일을 사용하여 아래와 같이 전체 페이지에 meta 태그를 추가해주면 됩니다. import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { return ( ); } } export default MyDocument;

Intro 안녕하세요. 이번 시간에는 Zustand 설치 방법 및 예졔를 살펴보도록 하겠습니다. 그전에 앞서 zustand 가 무엇인지 궁금하신 분들은 위 포스팅 참고 부탁드립니다 :) How to install Zustand Zustand 설치방법은 아래와 같습니다. 각자 사용하는 패키지 관리 툴(npm / yarn)에 맞춰 설치해주시면 됩니다. 1. npm npm install zustand 2. yarn yarn add zustand Zustand Simple Example 간단한 예제로 카운터를 만들어 보겠습니다. zustand를 import하고, 상태 컨테이너를 생성해줍니다. 컨테이너 안에는 count, increment(), decrement()이 들어있습니다. import create fro..