안녕하세요 정환님. 우선 좋은 강의 감사드려요! 첫 프론트엔드 입문임에도 즐겁게 따라가고 있습니다. useEffect를 설명하는 과정에서 setCount가 비동기 방식이니 count 변수에 바로 반영이 되지 않는다는 말씀을 듣고 궁금증이 생겨서 질문드립니다. (구글링을 시도해 봤으나 키워드 자체가 익숙하지 않아 정보를 찾기 힘들었습니다 ㅎㅎ;;) const onClickButton = (incrementValue) => { const updatedCount = count + incrementValue; setCount(updatedCount); console.log(updatedCount); }; 위 코드와 같이 count를 더한 값을 미리 계산한 뒤, 그 값으로 setCount 및 console.log()를 찍어보면 업데이트시마다 값이 정확히 출력되는 것을 확인했습니다. 현재는 App 컴포넌트에서 count 변수의 값을 조작하는 곳이 버튼 한 곳 (해당 이벤트 리스너) 밖에 없기에 크게 문제될 여지는 없다고 느껴집니다. 즉, 해당 경우에서는 단순 로그만 찍고 있는데, 이 경우라면 useEffect보다 해당 이벤트 리스너에 코드 한 줄 추가하는 것 이 더 간단하다는 생각이 들었습니다! 결과적으로, 관리 포인트가 한 곳인 위 케이스에서 마저도 useEffect를 사용하는 것이 좋은 방법인지 여쭤보고 싶습니다! 배속으로 들어도 소리도 참 잘 들리는.. 너무 깔끔한 강의 감사합니다! 따뜻한 연말 보내세요 🙇
윈도우 해결법은 있는데, Mac 해결법은 없는 것 같아서 공유 합니다. 터미널에 아래 명령어 입력하시구, mkdir ~/.npm-global export NPM_CONFIG_PREFIX=~/.npm-global export PATH=$PATH:~/.npm-global/bin echo -e "export NPM_CONFIG_PREFIX=~/.npm-global\nexport PATH=$PATH:~/.npm-global/bin" >> ~/.bashrc npm install -g vercel 입력하시면 정상 설치됩니다~!
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
강의를 듣다가 궁금한 점이 생겨서 질문드립니다. 브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [ Creating a Supabase client for SSR ]( https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client ) @supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다. 클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근 서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근 서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요.. import { getTodos as getTodosClient } from '@/apis/todos'; import { getTodos as getTodosServer } from '@/actions/todos'; export default async function page() { const todos = await getTodos...(); } // todos.ts import { createBrowserSideClient } from "@/lib/client/supabase"; export const getTodos = async() => { const supabase = await createBrowserSideClient(); const result = await supabase.from("todos").select("*"); return result.data; } // todos.action.ts import { createServerSideClient } from "@/lib/server/supabase"; export const getTodos = async() => { const supabase = await createServerSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }
안녕하세요! 이번 강의 4분 10초에 나오는 state 값 content를 사용자에게 값을 입력받는 input의 value로 아래 코드와 같이 작성해주시는 이유는 무엇일까요?? value는 어떤 용도로 사용되며 content를 넣어주면서 어떤 변화가 생기는건지 이해가 잘 안되어서 질문드립니다! <input value={content} placeholder="새로운 Todo..." />
현재 useMemo에 대한 강의를 보고 있습니다. 강의를 볼 땐 어느 부분의 코드가 계속 렌더링이 되기 때문에 불필요한 부분이라 최적화를 해주기 위해 useMemo를 사용한다라고 이해는 하지만 막상 혼자 어떤걸 만들어볼땐 어느 부분의 코드가 계속 렌더링이 되고 불필요한 코드인지 몰라 useMemo를 이용하기가 많이 어렵더라구요. 어떻게 하면 쉽게 이해해서 혼자 코드를 작성할 때 잘 이용할 수 있는지 궁금합니다 ^^
글 수정기능을 추가하고 useReducer로 바꿔서 했는데 글을 추가해도 새로운 내용이 나타나지 않고, 마지막 요소가 다시 추가되었습니다. [{content:"To1"}, {content:"To1"}] 확인해보니 컴포넌트에서 받은 props를 useState초기화값으로 넣으면 바뀌지 않는 사실을 알게되었습니다. 하지만 이부분을 useEffect형식으로 바꿔 적어주니 새로운 내용으로 바뀌는 것을 확인했습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } //////////////////////////////////////////// // useEffect 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(""); useEffect(() => { if (content) { setUpcontent(content); } }, [content]); ... } useReducer를 적용하지 않을때 props를 useState초기화값을 넣어도 잘 구동되었습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } 이것이 리액트 라이프 사이클 때문에 이러한 현상이 발생한것인가요?
주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요? 그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요? 이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.
안녕하세요 현재 useReducer를 이용하여 투두리스트 업그레이드 부분중에 몇가지 질문이 있습니다. useReducer에 대해서 어느정도 이해는 했지만 dispatch는 어느 부분에 작성을 해야되는지 조금 헷갈리는데 이 강의에서는 onCreate 함수안에 dispatch를 작성했는데 이 함수에 dispatch를 사용한 이유가 조금 헷갈립니다. 그리고 useRudcer는 비슷한 기능을 하는 함수들을(업데이트, 삭제) 좀 더 간단하게 만들기 위해 사용한다라고 이해하고 있으면 되는지도 궁금합니다. 마지막으로 리덕스와 조금 비슷한것같은데 useReducer와 리덕스는 완전 다른 개념인건가요?
배포했는데 화면에 아무것도 안 뜨고 콘솔창에 아래와 같은 오류가 뜹니다. ▶ ReferenceError: require is not defined 검색해보니 vite가 require를 지원하지 않아서 라는데, 해결방법이 있을까요? (+) 구글링 했더니 package.json에 아래 코드를 추가하면 된다는데, 이 방법도 아닌 것 같아요. "type": "commonjs",
안녕하세요 어제에 이어 강의 내용을 따라 가고 있는데요. 강의 내용대로 PostModelViewSet을 선언하고 (영상기준 8분30초까지 진행) pytest를 실행앴더니 test_unauthenticated_user_cannot_create_post 에서 assert 403 == 400 test_non_author_cannot_update_post 에서 assert 403 == 200 test_nonauthor_cannot_delete_post 에서 assert 403 == 204 오류가 각기 발생합니다. 강의를 따라가고 있는데 이런식으로만 오류가 발생하니 원인이 어디인지 찾기가 너무 힘든거 같습니다. 원인이 뭐고 이런 오류를 잡으려면 어떻게 해야할까요?
