묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 29 state 원리
const onChangeContents = (event) => { setContents(event.target.value); if (writer && title && contents) { setIsActive(true); } };리렌더링은 함수에 바뀐값이 있다면 함수가 끝난후에 리렌더링이 되고 그래서 함수가 끝나기 전에 위 코드처럼 참/거짓 검증을 하려고 하면 undefined 값이라 거짓이라 setActive 값은 리렌더링이 되지않고const onChangeContents = (event) => { setContents(event.target.value); if (writer && title && event.target.value) { setIsActive(true); } };위처럼 event.target.value로 바꾸면 참이라서 바로 리렌더링이 되어서 노란색으로 버튼이 활성화 되는건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit으로 thunk를 실행하는 방법이 궁금합니다
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; import thunkMiddleware from "redux-thunk"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => { configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ thunk: { loggerMiddleware, }, }), preloadedState: serverState, // SSR }); }; export default createWrapper(makeStore);아런 코드에서 redux thunk를 실행하는 방법이 궁금합니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
우와 12강 완료 했어요~~ ㅎㅎㅎ
우와 우와
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
맥북 터미널에서 node-v 입력시 나오는 오류
안녕하세요 그랩님!혹시 영상 4:56쯤 단계부터 오류가 떠 다른 분들의 질문과 그랩님 답변도 보고 이것저것 시도해 보았으나 해결이 안되어 질문드립니다ㅜㅜ 혹시 아래의 오류가 제가 지금 사용하는 맥북이 2017년 버전(10.13.1)으로 시스템 업그레이드를 한지 오래되었기 때문에 뜨는걸까요..? 맥에서 지원하는 최신 시스템 업그레이드를 하려면외장하드 구입 후 컴퓨터 내 백업을 준비 후에 OS 삭제>재설치>백업복원 까지 진행해야 하기에 하기 오류가 컴퓨터 백업과 OS 재설치 없이도 해결이 가능할지 혹시 아실까 하여 문의드립니다ㅜㅜ
-
미해결프로젝트로 배우는 React.js
id가 두번 찍혀요
import { useParams } from "react-router-dom"; const ShowPage = () =>{ const {id} = useParams(); console.log(id); return <div>Show Page</div>; }; export default ShowPage;
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 도커 pgadmin 배포 에러
안녕하세요 aws ec2 배포중 docker-compose up 시 동일 에러가 계속 뜨는데 이유를 모르겠습니다ㅠㅠ...env 파일 따로 루트폴더에 생성해서 아이디 패스워드 작성해주었습니다오류메세지.envdocker-compose.yml
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
css 가운데 정렬
const ImgWrapper = styled.div` padding: 32px; text-align: center; & img { margin: 0 auto; max-height: 750px; } `;사진이 정확히 가운데에 정렬이 안돼서 padding을 봤는데 이상하게 padding 오른쪽이 있는데 오른쪽 padding이 짤려서출력이 됩니다 이유가 무었일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 규칙 적용 관련 질문입니다.
사진처럼 eslint js 파일에 rules 설정을 마쳤는데도 npx eslint .을 하면 여전히 문제가 100개 이상 발생하고 있습니다. 하지만 강의 내용에는 저 5개의 규칙만 적용해도 발생하는 문제가 없다고 뜹니다. 뭐가 문제인가요?빠른 수정 방식으로 새로운 규칙을 지정하는 등의 문제 해결은 가능하나 현재 강의 내용과 보여지는 에러가 달라서 질문 남깁니다. 빨간 줄이 쳐저 있는 부분은 import하는 부분과 코드 내부에서는 router 기능을 사용하는 곳에 표시됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 첫번째 피그마 과제 질문
제 한계네용... 1.텍스트입력칸을 어떻게 하면 밑줄만 가로로 쭉 나오게 할지 모르겠고2. 성별 선택하는 라디오"만" 중앙배치 시키고싶은데 아직 해결이 안되고3.모든 요소들사이에 공간을 만들어주는게 아닌 가입버튼과 이용약관, 성별 선택라디오이렇게 세가지 요소만 공간을 만들고 요소를 선택해서 배치를 자유자재로 하고싶은데어렵네요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
1강 Nodejs, npm, yarn 이해 - 프로젝트 설치 중 컴퓨터 튕김현상
학습자료를 보고 수업프로젝트 설치목록 class와 freeboard_frontend를 설치하고 있는데, 어떨때는 설치가 잘 되는데 어떨때는 설치도중에 컴퓨터 전원이 꺼져버리네요. 왜 어쩔때는 설치도중에 컴퓨터 전원이 꺼지는 건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
useSWR 자동완성 질문
안녕하세요! 강의 잘 보고있습니다섹션 8에 유저페이지 생성하기 부분을 진행 하던 중 useSWR을 입력 시 툴팁으로 useSWR에 대한 추론이 나오시는데 저는 나오지를 않습니다ㅠㅠ.. useSWRConfig 말고는 나오지 않는데 이유가 무엇일까요?라이브러리는 제대로 설치가 되었습니다..!
-
미해결너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어
[빌드와 배포] Failed to list Firebase projects 오류 (해결)
(Mac)firebase init 입력 후 Hosting 까지 선택했으나,Use an existing project 선택 시Error: Failed to list Firebase projects. See firebase-debug.log for more info.위와 같은 에러가 발생했다면저의 경우 firebase login --reauth 를 통해 해결할 수 있었습니다.혹시 저와 같은 상황을 맞닥드리신 분이 있다면 시도해보시면 좋을 것 같습니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
제가 생각하는 일기 분석 시작이 2번 되는 호출되는 이유가 맞는지 궁금합니다
const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then((res) => res.json()); const initData = res.slice(0, 20).map((it) => { return { author: it.email, content: it.body, emotion: Math.floor(Math.random() * 5) + 1, created_date: new Date().getTime(), id: dataId.current++, }; }); setData(initData); }; useEffect(() => { getData(); }, []); const getDiaryAnalysis = useMemo(() => { console.log("일기분석"); | 처음 App 컴포넌트 실행이 되었을 때 useEffect를 통해 getData는 데이터를 불러오고 있는 상태이고(비동기가 맞을까요?) getDiaryAnalysis가 실행되면서 처음 "일기분석" 실행되고getData에서 데이터를 불러 온 상태가 되면 useEffect가 mount되면서 App컴포넌트가 한번 더 실행되는게 맞을까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
이 강의는 정말 파이썬 기초 지식만 있으면 되는 건가요?
강사님 이 강의를 듣기 위해 필요한 선수지식은 파이썬 기본 문법이라고 명시가 되어 있지만,강의를 들으면 들을수록 이 강의는 파이썬 고급문법에 자바스크립트 기초 지식 뿐만 아니라 경험까지 필요한 거 같습니다.본 섹션의 강의만 하더라도 this에 대해 아무런 기초 설명없이 이미 아는 사람한테 설명하듯이 하시는데 무슨 말을 하는지 도무지 알 수가 없었습니다.이 뿐만이 아니라 다른 강의 내용들도 진정 자바스크립트를 모르는 사람이 들을 수 있는 강의라고 생각하시는지요?node.js가 무언지, 리액트가 어떤 건지에 대해서도 초급자가 이해할 수 있는 수준으로 설명하고 있지 않습니다.참고로 저는 자바스크립트를 아주 모르진 않습니다. 그런데도 이해가 안되는 부분이 많은데 처음 접하는 사람들은 황당할 수도 있겠단 생각이 듭니다.사실 자바스크립트에 대한 강의 뿐만이 아닙니다. 앞선 대다수의 강의에서 기초적인 부분에 대해 모두 안다는 식으로 대충 설명하고 넘어가는 경우가 상당합니다. 시간만 낼 수 있다면 90% 이상의 강의에서 이러한 내용들을 짚어 드릴 수 있습니다그때마다 따로 찾아볼 수 밖에 없었고 강의 하나를 다 이해하는데 많게는 일주일이 걸린 적도 있습니다. 질문은 성의 있게 답해 주셔서 좋지만, 질문이 최소화 될 수 있도록 강의를 만드는 것도 강사님의 몫입니다. 질문 하는 것도 수강자 입장에서는 많은 에너지가 들어갑니다. 그 자리에서 보여주면서 질문할 수 있는 오프라인 강의가 아니기 때문입니다.강사님이 이런 문제점들을 인지 못하셨다고 생각하지 않습니다. 아님 이 가격에 이 정도 퀄리티가 적당하다고 생각해서 이렇게 준비하진 않으셨겠죠?이미지가 거의 없이 텍스트로만 만들어진 강의 자료도 정말 이 강의에서 처음 봅니다. 지금이라도 이 강의를 위해 필요한 수준을 다시 명시해 주시는 게 좋을 것 같습니다. 저야 이미 결제를 하고 수업자료도 받아버려서 돌이킬 수 없지만 새로 듣는 사람들을 위해서 부탁드립니다.강사님의 불명확한 발음, 불안정하면서도 빠른 발성을 모두 견디면서도 국내에 유일한 심도 있는 강의란 말을 믿고 열심히 수강해 왔지만 지금까지 오는 것도 상당히 힘든 시간이었습니다.앞으로 남은 강의에 대해 기대감은 전혀 없고 독학으로 헤쳐나가야 된다는 부담감만 더합니다.강의 소개에 분명 위와 같이 안내가 되어있습니다. 파이썬 기본 문법에 대한 이해가 되어 있는 수강생이 무리 없이 강의를 소화할 수 있도록 하는 건 선택사항이 아니라 의무입니다.독학 대신 돈을 내고 유료강의를 듣는 건 시간 대비 효율성을 위한 결정입니다. 그런데 강의 내용에서 건너뛴 내용에 대해 독학으로 공부해야 한다면 무슨 의미가 있을까요?다시 한번 말씀 드리지만 선수 지식에 대한 내용 수정 꼭 부탁드립니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도커를 이용한 Postgres 실행 강의 폴더가 안생겨요
똑같이 했는데요 docker-compose up data폴더안에 안생겨요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 23 프로그램 세팅 관련 질의
안녕하세요? 프로그램 설치 관련 한번 더 질의 드립니다. 질의 답변 및 노션의 디렉션대로 진행하던 중 어떤 문제가 발생한 듯도 했지만 설치는 진행이 되었습니다. npx create-next-app을 설치한 한 class 폴더 내 다른 폴더들 확인한 결과, 아래와 같이 pages 폴더는 설치가 되지 않았고, node.modules에서는 노션에 나온 대로 버전 변경하려 했으나 이미 변경된 상태였습니다. 시간이 지나 업데이트 등의 이유로 설치 항목이 변경되어 위와 같은 것인지, 혹은 제가 무언가 실수를 한 것인지 궁금하여 질의 드립니다. 위와 같이 설치된 상태에서도 수업 진행에 차질이 없을지요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
Dialogflow ES에서 서비스 어카운트에 dialogflow client api설정 하는 법 질문
3강, 정확하게는 2번째 강의에 질문있습니다.현재 Dialogflow ES로 실습중인데.. 서비스 어카운트를 만든 후, 서비스 어카운트에 dialogflow client api설정하는 부분이 안됩니다..정확하게는 강의에서 나오는 Dialogflow의 버전이 달라서 설정하는 법을 쉽게 못찾고 있는데... Dialogflow ES에서 서비스 어카운트에 dialogflow client api설정하려면 어떻게 해야 하나요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
false 나오시는분 이렇게 해보세요.
user.save((err, userInfo) => { if (err) return res.json({ success: false, err }) return res.status(200).json({ success: true }) }) 위 코드를 아래와 같이 바꾸니 잘되네요~ user.save() .then((userInfo) => res.status(200).json({ success: true })) .catch((err) => res.json({ success: false, err }));
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
usememo 자식컴포넌트 리렌더링 질문
안녕하세요 제로초님 궁금한게 있어서요.이러한 부모자식 관계에서 props로 함수를 넘겨줄때는 usecallback+자식컴포넌트(react.memo)로 자식컴포넌트의 리랜더링을 방지할 수 있다고 배웠습니다. 리액트는 함수나, style={{}}, 등 다 객체 참조값을 비교하여 부모컴포넌트가 리랜더링되면서 생성된 함수는 새로운 참조값을 갖게되까 변경사항이 있다고 생각한다. 라고 알고있습니다. 근데 이 부분에서는 style객체를 usememo만으로 리렌더링을 방지한다. 라고 하셨는데 그 말씀이 ButtonWrapper 의 컴포넌트에서 retun() 부분만 virtual dom 이 비교하고(함수자체는실행됨) 바뀐게 없네 하고 return 부분을 다시 안그린다는 의미에서 리렌더링을 방지한다고 하신건지..?? 아니면 아예 ButtonWrapper컴포넌트함수 자체가 react.memo를 사용한 것 처럼 리렌더링이 안되는건지 궁금합니다.ButtonWrapper컴포넌트의 리렌더링을 막으려면ButtonWrapper에react.memo적용 후 usememo를 사용해야되는것 아닌가해서요. usecallback과 마찬가지로요예제로 이런식으로 해봤는데 부모컴포넌트가 리렌더링되면 자식컴포넌트의 스타일을 usememo로 감싸주어도 리렌더링이 되더라구요??이 역시 자식컴포넌트에 React.memo를 감싸주고나서야 자식 컴포넌트가 리렌더링 안되는데 수업에서는 memo를 쓰지않아도 리렌더링이 되지않는다고 한 이유가 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useState 실행순서
안녕하세요 강사님 강의를 듣다가 이해를 제대로 한게 아닌거 같다는 생각이 들어 질문드립니다 검색해봐도 검색실력이 꽝인지... 제대로된 답을 못 찾았습니다 실행순서에 대해 알고싶은데요 이 코드의 실행순서가1 구조만들기 export default return2 html 을 만들고 onClick이벤트 안 함수로 가서 그 함수 안 실행 값을 setCount로 인해 count에 담아주어 실행된다 라고 생각하긴했는데 count가 먼저 실행되어지고 그 다음에 setCount로 인해 값이 변경되어지는게 아닌가란 의문이 들었습니다 useState는 실행순서가 언제 인가요? useState있을때 실행순서를 알고싶습니다제가 자바스크립트라던지 리액트의 실행순서에 동작방식에 미흡한데 추천해주실만한 글이나 어떻게 공부를 해야하는지에 대해 조언부탁드립니다 🙏