그동안 공부를 하면서 간결하고 쉬운 설명으로 많은 도움을 받았던 테코톡을 진행하는 우테코의 프리코스에 참여하게 되었습니다. 과제 안내 사항 1주 차 미션은 야구 숫자 게임입니다. 과제 repository를 fork 하여 진행합니다. 리드미에 과제 안내 사항에 대해서 자세하게 적혀있습니다. 이 부분을 자세히 읽지 않으면 과제 진행이 어렵습니다. 실제로 코수타 라이브에서 크루들이 말하길 과제 문의를 정말 많이 받았는데 모두 리드미를 충분히 숙지하지 않았던 문제였다고 하네요! 대략적인 안내사항은 다음과 같습니다. 기능 요구 사항 - 랜덤 숫자 3개 - 사용자 입력 숫자 3개 - 위 두 가지 숫자를 비교해서 스트라이크, 볼, 낫싱 문구 출력하고 맞출 때까지 반복 - 3 스트라이크 일 때 1 입력 시 게임 다시 ..
라이트하우스? 구글에서 개발한 웹 페이지의 품질을 개선할 수 있는 오픈소스 형태의 자동화 도구입니다. Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. 다음과 같은 지표를 확인할 수 있습니다. Performance 1. Fist Contentful Paint(FCP) - 브라우저가 첫 번째 콘텐츠를 랜더링 하는 데 걸리는 시간 - 웹 페이지 초기 로딩 속도 2. Largest Contentful Paind(LCP) - 가장 큰 크기의 콘텐츠를 랜더링 하는 걸리는 시간 - 사용자가 주요 콘텐츠를 볼 수 있을 때까지 걸리는 시간 3. Total b..
에러 문구 error ESLint: Failed to load config "next/core-web-vitals" to extend from. Referenced from: /vercel/path0/.eslintrc 원인 어쩐지 에러가 안잡히는 부분이 있더라더니 next.js에서의 ESLint 설정을 제공하는 패키지를 설치 하지 않았었다. 아래 명령어로 패키지를 설치하고 해결! 해결 npm i --save-dev eslint-config-next eslint-config-prettier eslint-plugin-prettier https://stackoverflow.com/questions/69480558/error-failed-to-load-config-next-to-extend-from Error:..
문제 묵혀둔 Next.js 게시판 프로젝트를 고치면서 첫 todo는 바로 any 타입 고치기였다. 온갖 구글링을 통해 제공되는 타입 설정 까지는 어떻게든 해냈는데 도저히 무엇이 문제인지 모르겠는 타입 설정이 하나 있었다. 해당 에러 메세지는 변수 posts가 타입 WithId []가 타입 Post []에 할당될 수 없다고 뜬다. 그러니까 await db~ 로 출력된 결괏값이 WithId [] 타입이고 그 값을 할당하려는 변수 타입을 Post []로 설정해 주어 생긴 타입호환성 오류였다. 해결 그렇다면 출력된 결과 값을 Post로 설정해 주면 해결되는데 제네릭에 대한 이해가 부족했던 나는 한참을 헤맸다. 제네릭은 타입을 마치 함수의 파라미터 처럼 사용하는것을 의미한다. MongoDB에서 'post'로 정의..
주절주절 분명 예전에는 하트를 누르면 늦게나마 빨간 하트가 되었는데 요청은 정상적으로 되나 빨간 하트로 변하지 않았다. const session: UserInfo | null = await getServerSession(authOptions); const db = (await connectDB).db('forum'); let result = await db.collection('post').findOne({ _id: new ObjectId(props.params.id) }); if (result) { result._id = result._id.toString() as unknown as ObjectId; } let foundOne; if (session) { foundOne = await db.colle..
문제 오랜만에 뜯어본 Next.js의 게시판 프로젝트에 다음과 같은 에러가 발생했습니다. 비동기 함수인 컴포넌트는 프로미스 객체를 리턴합니다. 하지만 이게 왜... 문제죠? 멋진 icyJoseph의 의견에 따르면 typescript가 async 컴포넌트를 이해 하지 못한다고 합니다. 따라서 해당 주석을 달아 임시방편으로 오류를 해결할 수 있다고 합니다. 해결방안 1. 주석달기 export default async function Home() { return ( {/* @ts-expect-error Server Component */} 뭔가 멋진 메인 사진을 걸고 싶어요 캐러셀같은거 넣으면 좋겠다 ); } 아무래도 주석이 있는 것은 영 찜찜합니다. 해결방안 2. 업데이트하기 역시 정답은 공식문서에 있었습니..
이벤트루프는 자바스크립트가 비동기로 작동할 수 있게 만들어주는 도구입니다. (저는 도구(: 어떤 일을 할 때 이용하는 장치)라고 생각합니다.) 자바스크립트는 싱글 스레드 언어이지만 ajax 요청이나 setTimeout같은 비동기 처리가 가능합니다. 여기서 싱글 스레드란 하나의 콜 스텍을 가지고 하나의 프로그램이 동시에 하나의 코드만 실행할 수 있다는 뜻입니다. 왜냐하면 자바스크립트 런타임 환경인 브라우저에서 webAPI가 비동기 함수를 처리하기 때문입니다. webAPI는 각 API 마다 스레드들이 할당되어있고 이들이 모여 멀티 스레드로 이루어져 있습니다. webAPI가 비동기 함수를 처리하고 여기서 바로 이벤트 루프가 처리된 비동기 함수를 콜 스택에 전달해주어 콜 스택에서 처리된 비동기 함수가 실행됩니다..
이 글은 전적으로 아래 영상을 따릅니다. https://youtu.be/7RiMu2DQrb4?si=h744LMvNaWwIUTs6 This 바인딩 일반적으로 객체 지향 언어에서 this 라는 예약어는 함수가 속해 있는 객체 자기 자신과 관련이 깊습니다. 하지만 일급 객체인 자바스크립트 함수는 const foo = function foo2(){} 1. 변수나 데이터에 할당 할 수 있고 function foo1(foo2){} 2. 다른함수의 인수 function foo1() { ... return foo1 } 3. 반환값으로 사용할 수가 있습니다. 이러한 특징으로 인해 자바스크립트 함수는 다양한 환경에서 호출 될 수 있습니다. 단독호출 특정 객체의 매서드로써 호출 동일한 함수가 서로 다른 객체에 의해서 호출 ..
문제 사진과 같이 게시글 페이지 하단에서 상세 페이지 진입시 스크롤이 아래로 고정되어있음을 발견했습니다. 원인 모모는 React 라이브러리를 사용한 SPA입니다. SPA란 Single Page Application의 약자로 말 그대로 하나의 페이지를 사용합니다. Ajax 기술을 사용하여 서버로부터 매번 새로운 페이지를 받는것이 아닌, 한 페이지 내에서 필요한 부분만 동적으로 업데이트하여 화면 깜빡임없이 부드러운 화면전환과 데이터 크기를 줄일 수 있습니다. 따라서 페이지가 새로 랜더링되더라도 하나의 페이지를 사용하기때문에 스크롤이 고정되어있습니다. 해결 useEffect를 사용하여 컴포넌트가 마운트 될 때 pathname 변경시 스크롤이 브라우저 최상단으로 올라가는 로직을 작성하였습니다. 'lists' 페..
문제 모모프로젝트에서 위 사진과 같은 원인 모를 빈 공간이 있어 css 문제인가 싶어 온갖 방법을 써보았지만 해결을 할 수 없었습니다. 게다가 상세페이지에서만 생기는 현상이기에 도무지 원인을 찾기 힘들었는데요, 리팩토링을 진행하면서 계속 신경쓰이는 부분이었는데 프로젝트 종료 한달 반이 지나서야 그 원인을 찾을 수 있었습니다. 원인 글 상세 페이지에서는 공통 컴포넌트인 세미헤더에 별도의 링크가 걸린 글자를 넣어주었습니다. 이때 세미헤더의 일관적인 스타일을 가질 수 있는 prop으로 들어가는 글자가 아니라서 고정된 글자의 너비크기를 가지는 다른 페이지와 달리 글 상세 페이지에서만 이런 현상이 나타났었던 것입니다. 그리고 이 원인을 찾기 어려웠던 또 다른 이유는 조금 더 깔끔하게 보이기 위해서 ::-webki..
