Lab 9

이제 AI 없이 개발하는 삶을 잊었습니다.95%는 AI 코딩 에디터가 수정하면 코드를 검토하고 저는 프롬프트만 입력하고를 반복했습니다.그렇게 해도 뭔가가 만들어지고 있다는 게 신기합니다.Cursor 1달, Windsurf 한 달 각각 사용해보고 어땠는지 알려드리고자 합니다!Windsurf의 경우 아래에 레퍼럴 링크를 남겨두었으니 혹시 가입해보실 분은 이용해보세요!1. 가격 차이, 작지만 무시 못 해요Cursor는 월 20달러입니다.하지만 연간 결제시 16달러로 떨어집니다.반면 Windsurf는 월 15달러입니다. 아쉽게 연간 결제는 없어요.💡 정리하자면, 단순 비용 기준으론 Windsurf가 달에 1$ 더 이득입니다.2. 인터페이스와 사용 경험둘 다 VS Code 기반이라 그런가 사용할 때 비슷한 느낌..

오랜만에 Next.js 기반으로 개발을 해보려고 했는데 아래와 같은 에러가 발생했다.아뿔싸! 내가 개발을 하지 않던 사이에 서버 컴포넌트가 세상을 점령했던 것이다.기본적으로는 서버 컴포넌트라고 보면 된다.이번 글에서는 'use client'가 뭔지 언제 사용해야 하는지 알아볼 예정이다. use Client란?use Client란, 해당 컴포넌트가 클라이언트 컴포넌트(Client Component)임을 나타내는 지시어(directive)이다.클라이언트 컴포넌트란, 클라이언트에서 렌더링 되는 렌더 트리의 컴포넌트다.=>사용자와 상호 작용을 할 수 있는 컴포넌트라는 뜻이다.클라이언트 컴포넌트에 대해서 알아보았다. Q. 사용자와 상호 작용이 어떤 것을 의미할까?- useState, useEffect, useCo..

💡 Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly. (출처: next 공식 문서) 즉, 미들웨어란 요청이 완료되기 전에 실행되는 코드. 다음 요청에 따라 요청 or 응답 헤더도 수정이나 응답 수정이 가능합니다. NextReseponse API를 통해 할 수 있는 작업들 redirect/rewrite 작업 redirect: 다른 url로 이동 rewrite: ..

DOM에 직접 HTML tag를 넣는 일은 지양하려고 하지만, 때때로 작업이 필요할 때가 있다. 리액트에서는 dangerouslySetInnerHTML을 사용하면 이러한 작업을 수행할 수 있는데, 해당 케이스에서 특수한 스타일을 추가해야 해다. className을 정하고 짜잔.. 실행을 했을 때는요? 화면에서는 아무런 변화가 없었다. https://github.com/styled-components/styled-components/issues/3347 How styled-components interact with inline styles created by dangerouslySetInnerHTML? · Issue #3347 · styled-components/styled It's a question,..