172만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
WebStorm으로 작업하신다고 하시고 프로젝트 처음에 불러오는 과정이 안나와서 짐작으로 frontend/ch02_start폴더를 만들고 cmd콘솔에서 npm install react-router-dom진행했거든요. 근데 강사님이 실습하는 폴더구조가 다르거든요? 이 과정이 생략되어있어서.. src폴더, public폴더가 자동으로 안생기는데 임의로 src폴더 만들고 그냥 하는건가요? 중간 과정 생략된걸 짐작으로 따라하려다보니 확신이 안들어서 여쭤봅니다
해결됨
빠르게 git - 핵심만 골라 배우는 Git/Github
로컬저장소를 만들고 그 안에 Git bash우클릭을 시도해도 보이지 않습니다. 맥 Terminal을 따로 열어 깃이 설치되었는지 보면 설치가 분명 되었다고는 나옵니다. 어찌된 영문인지 잘 모르겠어서 실습을 못하고 있는데 도와주세요 ㅠ .
해결됨
빠르게 git - 핵심만 골라 배우는 Git/Github
아래처럼 나오는 건 어떤 에러일까요 ?
해결됨
빠르게 git - 핵심만 골라 배우는 Git/Github
자꾸 화면처럼 나오지 않아서 애를 먹고 있는데 제가 뭘 잘못 한 걸까요..?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
tailwind를 실제로 product에 적용해본 경험이 없어서 질문드립니다. 공통된 스타일은 global.css 로그인 페이지 스타일은 login.css 회원가입 페이지를 스타일을 signup.css로 @layout components를 나눠서 작성했을때 코드 스플릿팅이 되나요? 제대로 테스트를 못해봤지만 login.css 작성한 @layout components 클래스를 signup에서 쓰려면 써지는것 같더라구요 안썻을때 빌드시 코드 스플릿이 되는지 궁금합니다. jit 모드 라는게 있던데 프로젝트가 엄청 커졌을때 해당 기능으로 페이지 별로 어느정도 최적화가 되는지 궁금합니다.
해결됨
팀 개발을 위한 Git, GitHub 입문
강의 자료 부탁드립니다. wnsgml351@naver.com
미해결
코드로 배우는 React 19 with 스프링부트 API서버
서버 쪽 이랑 이름이 다르면 데이터 바인딩이 안되지 않나요?
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
import React from 'react'; import Counter from './components/Counter'; // Counter 컴포넌트의 경로를 정확히 입력 function App() { return ( <> <Counter /> </> ); } export default App; 이런 오류가 뜹니다 버전이 달라서일까요? 노드는 최신버전을 쓰고있습니다.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
1. 강사님께서 올려주신 답변들을 봤습니다. " 공식 문서에서 클라이언트 컴포넌트를 트리의 끝에 보내라고 권한다. 서버 컴포넌트를 최대한 활용하기 위한 권장 사항이라고 이해하시면 좋다. "이라고 봤는데 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요? 2. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다. 하지만 위 이미지 처럼 에러가 발생합니다. package.json 은 아래와 같습니다. node_modules 는 아래와 같습니다. 설치됨을 다 확인하였으나 인식을 못하네요. tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다. 이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?
해결됨
빠르게 git - 핵심만 골라 배우는 Git/Github
안녕하세요, 깃을 맥북에 다운로드하려고 하는데, UI가 많이 달라져있어 애를 먹고 있습니다 Homebrew를 설치해야 하는지 아니면 다른 것을 설치해야 하는지 궁금합니다. 혹시 쉽게 다운로드하는 방법 업데이트나 관련 영상이 있다면 주시면 감사하겠습니다. 참고로 저는 Homebrew로 터미널 열어 설치햇는데, 분명 버전이 나오며 설치됬다고 나오지만 vs code로 깃 이닛을 시킬 때 찾을 수 없어 Command not found가 계속 나옵니다. 도움 부탁드립니다. 감사합니 다
해결됨
팀 개발을 위한 Git, GitHub 입문
좋은 강의 감사합니다! 강의자료 부탁드려요! sdgeo2020@gmail.com
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 1
빈페이지로 나오는데 왜그런걸까요? https://github.com/fe-ui-study/ui-study
해결됨
모두의 깃 & 깃허브
소스트리에 ssh로 계정 연결 후 계속 해당 알랏이 주기적으로 나오고 있습니다. 아무리 검색해봐도 무슨 비밀번호를 입력하는건지... 더 이상 팝업이 안나오게 하려면 어떻게 해야 하나요
미해결
처음 만난 리액트(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 삭제 후 재설치 해도 이렇게 뜨는데 어떻게 해결해야 할까요?
