173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다. 하지만 위 이미지 처럼 에러가 발생합니다. package.json 은 아래와 같습니다. node_modules 는 아래와 같습니다. 설치됨을 다 확인하였으나 인식을 못하네요. tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다. 이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 1
빈페이지로 나오는데 왜그런걸까요? https://github.com/fe-ui-study/ui-study
미해결
처음 만난 리액트(React)
안녕하세요. 소플님. 강의 정말 잘 듣고 있습니다. 컴포넌트 합성과 추출에서 props에 관련하여 질문이 있어 질문을 드립니다. // Component 추출 전 function Comment(props){ return ( <div className = "comment"> <div className = "user-info"> <img className = "avatar" src = {props.author.avatarUrl}, alt = {props.author.name} /> <div className = "user-info-name"> {props.author.name} </div> </div> <div className = "comment-text"> {props.text} </div> <div className = "comment-date"> {formatDate(props.date)} </div> </div> ); } 첫 코드가 Component를 추출하기 전의 코드이고 /* Component 추출 후 */ // 1. Avatar Component 추출 function Avatar(props){ return( <img className = "avatar" src = {props.user.avatarUrl}, alt = {props.user.name} {/* 재사용성을 측면을 높이기 위해 보편적인 단어인 user를 사용 */} /> ); } // 2. UserInfoName Component 추출 function UserInfoName(props){ return( <div className = "user-info-name"> {props.user.name} </div> ); } // 3. UserInfo 추출하기 function UserInfo(props){ return( <div className = "user-info"> {/* 이미 추출한 Avatar Component도 적용 */} <Avatar user = {props.user} /> {/* 이미 추출한 UserInfoName Component도 적용 */} <UserInfoName user = {props.user}/> </div> ); } // 4. CommentText 추출하기 function CommentText(props){ return( <div className = "comment-text"> {props.text} </div> ); } // 5. CommentDate 추출하기 function CommentDate(props){ return( <div className = "comment-date"> {formatDate(props.date)} </div> ); } // 6. 추출한 Component들로 Comment 재합성 function Comment(props){ return( <div className = "comment"> <UserInfo user = {props.user}/> <CommentText text = {props.text}/> <CommentDate date = {props.date}/> </div> ); } 이 코드가 강의에서 작성해주신 코드를 제 나름대로 완성한 컴포넌트를 추출한 형태입니다. userData가 아래의 형태라고 가정하겠습니다. const commentData = { user: { avatarUrl: "https://example.com/avatar.jpg", // 아바타 이미지 URL name: "Soaple" // 사용자 이름 }, text: "안녕 리액트!", date: new Date() // 댓글 작성 날짜 }; 처음 Comment Component에 Props로는 CommentData 자체가 전달될 것이고, 그 다음 UserInfo의 props로는 props.user, 여기서는 아래의 commentData.user가 전달이 되는 것까지는 논리적 흐름대로 이해를 했습니다. // UserInfo가 받은 props(commentData.user) user: { avatarUrl: "https://example.com/avatar.jpg", name: "Soaple" } 그런데 Avatar의 props로는 props.user가 전달되어야 하는데 그렇게 되면 Avatar에 전달하는 props가 commentData.user.user가 되어 전달할 수 없지 않나요? UserInfoName도 commentData.user.user 가 되어 이상하다는 생각이 드는데... chatGPT나 뤼튼과 AI에 물어봐도 이상이 없는 정상 코드라는 답변을 받았습니다. React에서 props가 굉장히 중요하다고 강조하신 만큼 이 부분은 꼭 집고 넘어가야겠다는 생각이 듭니다. 답변 부탁드립니다!
미해결
Next + React Query로 SNS 서비스 만들기
영상을 3:29 이 부분을 똑같이 하려고하는데, http://localhost:3000/home 로 접속하면 파일이 없다고 합니다.. app 안에 (afterLogin) (beforeLogin)로 나뉘고, home 폴더를 만들어서 layout.tsx 와 page.tsx를 만들어 홈페이지와 홈 레이아웃을 작성하여 루트 레이아웃과 층계별 확인하려고 http://localhost:3000/ 를 들어가면 루트레이아웃은 잘나오는데 http://localhost:3000/home 는 페이지가 없다고 나옵니다.. (afterLogin) 안이 아니라 밖으로 app/home/layout.tsx 와 page.tsx가 있어야만 http://localhost:3000/home 가 잘나오는데 왜이럴까요?
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 2
[셀렉트박스 (3/5) headless #2 hook 적용] 부분에서 getTriggerProps/getListProps 처럼 각 컴포넌트가 필요한 것들을 useCallback으로 감싸고 함수형태로 제공해주셨는데요, 아래처럼 useMemo를 이용해서 객체에 값을 담아서 전달해주는 방식은 다른 걸까요?? const getTriggerProps = useCallback( () => ({ selectedItem: items[selectedIndex], toggle, }), [selectedIndex, items, toggle] ); const TriggerpropsValue = useMemo(() => { return { selectedItem: items[selectedIndex], toggle, }; }, [items, selectedIndex, toggle]);
해결됨
Next + React Query로 SNS 서비스 만들기
채팅을 계속 올려서 몇개월 치를 사용자가 본다면 위로 채팅 기록이 엄청 쌓일텐데, 실무에서 메모리가 넘치는걸 방지하는 방법으로 사용하시는게 있는지 어떤걸 사용하시는지 궁금합니다. 찾아보니 react-window 같은 라이브러리를 사용해서 실제 랜더링 하는 요소 갯수를 제한하고 스크롤을 유지 시켜서 성능 향상을 하는 글을 봤습니다. 실제로 실무에서 이런 방법을 주로 쓰는지 궁금합니다.
해결됨
Next.js 시작하기
인텔리센스 단축키 (Intellisense shortcut) ¶ https://stackoverflow.com/questions/51341555/visualcode-shortcut-to-display-autocomplete-list-before-typing-in-macos 인텔리센스 사용시 한영 전환(ctrl + space)와 스팟라이트(cmd + space) 단축키와 충돌이 발생하므로 (option + esc) 조합을 사용합니다. 메인 메뉴 Code > Preferences > Keyboard Shortcuts (cmd + K, cmd + S)에서 단축키(Trigger Suggest)를 (ctrl + .)로 변경할 수 있습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 pc에서 강의를 듣는 중에 yarn dev 후 웹페이지에서 이런 에러가 뜹니다 ㅜㅜ node_modules 삭제 후 재설치 해도 이렇게 뜨는데 어떻게 해결해야 할까요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
api/(site)/page.tsx 에 actions/todo/todo.actions.ts를 사용하고 하위컴포넌트들에서는 ex) api/(site)/compoents/...container.ts 내부에서는 hook을 임포트한것들이 apis/todo-no-rls.ts를 사용하면 될까요? *위 예시는 강의에서 다룬 파일만을 예를 들었보았습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
ec2 터미널에서 node를 14버전으로 설치 후에 강의대로 따라가는 중인데요 git clone해와서 yarn install시에 node의 버전이 맞지 않아서 설치가 안되고 있습니다 ec2의 node 버전을 업그레이드하면 /lib64/libm.so.6: version GLIBC_2.27 not found(required by node) 가 뜨면서 ec2의 버전이 맞지 않는거같고 14버전으로 진행하면 설치한 프로젝트의 버전이 달라서 안되는데 class_build의 버전은 이런데 react의 버전을 바꿔야 해결되는걸까요? "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.5" }
미해결
Next + React Query로 SNS 서비스 만들기
회원가입 페이지 에서 프로필 이미지를 한글이 포함된 이미지명로 업로드했을때 , nextjs의 서버 Formdata에서 한글 파일명이 깨지는 현상 이 있습니다. 해결방법이 있을까요?? Step1. 회원가입 페이지 Step2. 서버 에러 결과 회원가입 페이지 경로 : D:\z-com\src\app\(beforeLogin)\_lib\signup.ts 업로드시 한글 파일명 출력 확인을 위해 아래코드를 추가해봤습니다. formData.getAll("image").map((data, idx) => { console.log(data); }); 업로드 이미지명에 한글이 포함되었을때 출력 -- 한글파일명이 깨져서 출력되고 데이터베이스에 저장됩니다.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
07-07 강의에서 상속을 써서 중복 컬럼을 제거하는데요 상속을 먼저 받기 때문에 날짜 컬럼 순서가 앞에 위치합니다. 순서를 뒤로 바꾸려면 어떻게 해야하나요?
해결됨
Next + React Query로 SNS 서비스 만들기
제가 알기로는 require는 commonjs에서 쓰는걸로 알고 있는데 useEffect내부에서 쓰시는걸 보고 궁금점이 생겨 질문드립니다. require 대신에 dynamic import를 쓰는건 보았는데 require도 클라이언트에서 사용이 가능한가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님. useNavigate 질문이 있습니다. 새 일기쓰기 페이지에서 '취소하기'를 누르면 뒤로 돌아갈때 nav(-1)을 쓰셨는데 사실 nav(-1)도 할 수 있지만 nav('/')를 할 수도 있는데 성능상의 차이가 있을까요?? 반응 이라던지 좀 더 큰 프로젝트라면 어떤걸 쓰는게 안전하다던지 하는 차이가 있는지 궁금합니다. 감사합니다
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
/app/api/revalidate/route.ts 파일 내 POST 함수가 async로 선언되어 있습니다. 본문에 await이 없는데 async로 선언되어야 하나요?
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
(사진)
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요 로그인 질문 드립니다. 강의와 크게 상관은 없지만 강의 듣다가 궁금한게 생겨서요.. 현재 시큐리티 강의 듣고 있습니다. DB에 암호화해서 저장하는건 이해하였습니다. 사용자가 암호를 잊었을때 시큐리티 암호 같은 방식은 암호 재발급 하면 되지만 복원 하는건 힘들어 보이네요 . 예를 들어서 이런 방식입니다. 암호의 3째자리 까진 알려주는 방식 암호의 흰트를 입력하면 가입한 이메일에 암호를 보내준다던지... ms sqlserver에는 암호 복원 기능 있는거 같던데 ... 암튼 강의듣다가 생각나서 질문 드려요
미해결
React 기반 Gatsby로 기술 블로그 개발하기 v2
pages/index.tsx 파일이 먼저 렌더링이 되어야되는데 pages/{contentfulPost.slug}.tsx 파일 이 먼저 렌더링 되는 현상이 생겼는데 이거는 무슨경우인가요 ? 갑자기 이렇게 되었습니다. 캐시 제거랑 재부팅까지했지만 해결을 못하고있습니다..
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
아래와 같은 타입에러가 발생했습니다. 데이터베이스와 todoDto모두 설정 및 정상적으로 가져온거 같은데요 마우스를 올려보고 에러내용도 확인해보면 타입은 다 같게 설정되어있는거 같습니다. 타입자체를 비교해서 대입 하려해도 에러가나오네요.. 플러그인을 통해서 시각화해서 좀 더 자세하게 머가 문제인지 비교해봐도 타입이 같습니다.. 혹시 뭐가 문제인지 알 수 있을까요?...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql의 장점이 딱 원하는 데이터만 가져온다는 것은 이해가 되는데, REST API도 딱 원하는 DB 컬럼만 요청해서 가져오거나 할 수도 있지 않나요? 이게 어떠한 차이가 있나 궁금합니다. ㅎㅎ
