코드 줄바꿈

안녕하세요 박재은님 이정환입니다.우선 줄바꿈을 자동으로 적용하시려면 4.2 챕터의 3분 20초경 소개해드리는 ESLint 플러그인을 설치하고 설정까지 마쳐주셔야 합니다. 잘 설정되었다면 Ctrl + S를 눌러 파일을 저장할 때 마다 코드가 자동으로 정렬됩니다.비주얼 스튜디오 코드는 별도의 로그인이 필요하지 않습니다. 깃허브 계정 연동은 향후 버전관리 챕터에서 진행하니 그때 참고해주시면 되겠습니다.

vs code 프로그램 동기화 가능여부

안녕하세요 하태석님 이정환입니다.결론부터 말씀드리자면 VSCode 자체로는 여러 컴퓨터간의 연동은 어렵습니다. 그러나 이후 섹션에서 배우는 버전관리 Git & GitHub를 배우시게 되면 여러 컴퓨터에서 동일한 소스코드 파일을 공유하며 작업을 이어 진행할 수 있습니다.

라이브러리 설치 질문

안녕하세요 손재상님 이정환입니다네 맞습니다. npm install 명령의 의미가 package.json 파일을 기준으로 node_modules를 설치하는 것이기 때문에 이미 잘 설치가 되어 있다면 굳이 다시 명령하실 필요 없습니다.

linter 질문

안녕하세요 손재상님 이정환입니다AI 인턴의 답변대로 Oxlint는 ESLint 대비 약 50배 ~ 200배 빠른 성능을 가지고 있는 대체제 역할의 프로덕트인데요 아직은 출시된지 시간이 오래 지나지 않아 호환성 측면에서 몇가지 이슈가 발생할 수도 있습니다. 따라서 가급적이면 ESLint 설정을 권장드립니다! (Oxlint 사용시에도 문제없이 실습은 가능합니다!)

클로드 회원가입 전인데 perplexity 프로

안녕하세요 박재은님 이정환입니다.결론부터 말씀드리면 Perplexity는 권장드리지 않습니다 🥲Perplexity는 AI 챗봇으로써 기본적으로 검색과 답변에 특화된 도구입니다. 질문을 던지면 자료를 찾아 정리해 주고, 그 과정에서 코드 조각도 함께 보여줄 수 있죠. 재은님이 이미 결과물을 만들어 보셨다는 것도 충분히 가능한 일입니다 👍다만 이번 강의에서 진행하는 바이브코딩에 사용하기는 많이 어렵습니다. 우리에게 필요한건 AI 챗봇(퍼플렉시티)이 아닌 내 컴퓨터에 설치되어 직접 파일을 생성하고 수정하는 AI 에이전트(클로드 코드 or 코덱스)입니다.AI 에이전트(클로드 코드 or 코덱스)는 내 컴퓨터의 파일을 직접 읽고, 코드를 수정하고, 명령어를 입력해 필요한 개발 도구를 설치하고 실행하는 등 목적만 명시하면 목적을 달성하기 까지의 작업을 알아서 모두 수행합니다. 그러나 AI 챗봇(퍼플렉시티)는 우리의 PC에 직접 접근할 수 없거나 있다고 하더라도 저 수준이거나 매우 제한적인 기능만 사용할 수 있으므로 사용을 권장드리지 않습니다 🥲

감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유

안녕하세요 MIYEON LEE님 이정환입니다.해당 이슈는 SPA 방식으로 작동(index.html 하나의 페이지만을 사용하는)하는 리액트의 특징으로 인해 발생한 것 인데요 설정 파일 하나만으로 간단하게 해결하실 수 있습니다.프로젝트 루트 위치에 vercel.json 파일을 새롭게 생성해주세요 그런 다음 해당 파일 안에 다음과 같이 설정 내용을 작성해주세요 그런 다음 다시 배포해주시면 정상적으로 작동할 겁니다 😀{ "rewrites": [ { "source": "/(.*)", "destination": "/" } ] }이 설정파일의 역할은 어떤 주소로 요청이 들어오든(/(.*)), 그냥 index.html을 응답하라는 의미입니다. 그럼 그 이후의 라우팅 과정은 리액트 컴포넌트가 담당하게 될 테니 정상적으로 페이지가 렌더링 됩니다.

supabase 설정하기 관련 문의사항이 있습니다.

안녕하세요 단단한 순두부님 이정환입니다.우선 죄송합니다 ㅠㅠ! Supabase 업데이트에 따라 Seoul 리전이 추가된 것을 제가 확인하지 못하고 Asia Pacific으로 안내드리고 있었네요 일반적으로 서버 위치는 가까운게 무조건 좋기 때문에 가급적 Seoul 리전을 선택하시는게 훨씬 좋습니다! 이에 맞춰 강의 내용도 수정해 두었습니다.다만 이미 설정된 프로젝트의 지역(서버 위치)는 변경하실 수 없습니다 ㅠㅠ 기존 프로젝트를 제거하신 다음 새롭게 다시 생성하셔야하는데요 프로젝트를 제거하시는 방법은 아래 그림처럼 좌측 사이드바의 설정 아이콘 > General > Delete Project 섹션을 확인하시면 됩니다!(사진)

Sort 메서드 관련 아티클

안녕하세요 ikv님 이정환입니다.앗 노션 API 사용 방식의 변경으로 인해 잠시 404 페이지가 노출된 것 같습니다.현재는 모두 정상 작동하도록 수정 해 두었습니다.

Zustand의 Store 타입은 어떤 기준으로 작성하는 건가요?

안녕하세요 유혁스쿨님 이정환입니다.결론부터 말씀드리자면 create 메서드에 제네릭 타입 변수로 Store 타입을 전달하면, create 메서드가 알아서 Store 타입에 맞춰 get과 set 메서드의 타입을 설정합니다. 따라서 이 메서드들의 타입까지는 우리가 직접 설정하지 않아도 됩니다. 자동으로 설정됩니다 😀1, 4) 앞서 말씀드렸듯 get과 set 메서드의 타입은 Store 타입에 맞춰 자동으로 설정됩니다.2, 3) 네 맞습니다. 보통은 공식문서의 예제를 살펴보고, VSCode에서 직접 실습해보며 "아 get과 set 메서드에 타입이 자동으로 설정되는구나" 하고 이해하는걸로 알고 있습니다. 저 또한 그렇게 학습합니다. 물론 더 자세히 파헤쳐 보려면 내부의 코드까지 파악해야 하겠지만, Zustand는 단순 도구일 뿐이므로 비슷한 도구를 제작하는게 목표가 아니라면 굳이 그 정도까지 파헤칠 필요는 없다고 생각하고 있습니다.마지막으로 실제로 라이브러리를 사용할 때는 공식 문서의 사용법을 먼저 따라 하고, 타입이 적용되는 원리가 궁금하거나 오류가 발생했을 때 타입 선언 파일을 확인하는 방식이 일반적인지도 궁금합니다. 라고도 질문 주셨는데요네 맞습니다. 모든 라이브러리마다 구체적인 구현체를 다 파악하고 사용하기에는 시간도 부족하고 여력도 없기 때문에 보통은 대략적인 사용법만 파악하는게 일반적입니다.(예를 들어 React.js가 정말 구체적으로 어떤 방식으로 DOM을 수정하고 화면을 그려내는지 구현체 까지 파악하고 있는 분들을 많이 계시지 않는 것 처럼 말이죠)PS. 만약 해결되지 않는 문제가 생기거나 원하는 구조의 코드 설계가 이루어지지 않을 경우에는 특정 부분의 디깅은 필요할 수 있습니다.

4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.

안녕하세요 승준님 이정환입니다.결론부터 쉽게 말씀드리자면 DOM 수정 회수가 줄어들기 때문입니다.오늘날 대부분의 웹 서비스들은 사용자의 편의를 위해 다양한 화면 업데이트를 제공합니다. 예를 들어 인스타그램의 좋아요 버튼을 클릭한다고 가정해 보겠습니다. 사용자가 좋아요 버튼 한번만 클릭해도 화면에는 아래와 같은 변경사항이 동시에 발생합니다.하트 모양의 좋아요 버튼이 빨간색으로 채워집니다.좋아요 개수가 1 증가합니다.기타 등등 ...화면의 변경사항은 DOM을 수정함으로써 이루어집니다. 그런데 DOM 수정은 시간이 오래 걸리는 작업입니다. 따라서 위처럼 동시에 여러곳의 화면 업데이트가 필요할 경우 DOM 수정을 일괄적으로 처리할 수 있어야 합니다. 그렇지 않으면 성능이 매우 나빠질 수 있습니다.따라서 Virtual DOM을 이용합니다. 가상의 DOM에 동시에 발생한 변경사항들을 모두 모아놓고 실제 DOM은 한번만 수정하도록 함으로써 DOM 수정 회수를 줄입니다.