173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
[4:23] 부분에 post를 변경하고 다시 기존 배열 값을 치환해주시는데, find()통해 할당된 변수가 어차피 참조형이라 얕은 복사로 바로 배열 내부 post가 수정되지 않나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 사용자 입력 처리하기 강의 관련 질문입니다. input 태그를 통해 사용자 입력을 받고, 상태 관리하면, 상태에 사용자의 입력이 반영되는 게 한 단계씩 늦는 것 같습니다. (그 이유가 useState가 비동기적으로 처리된다고 들은적이 있는 것 같은데, 정확히 이해가 가지 않아서 질문드립니다.) 아래 코드의 handleOnChange함수에서, Q1) e.target.name, e.target.value은 제깍제깍 실시간으로 반영이 되는데, input state는 한 단계 늦게 반영이 됩니다. 이런 현상이 발생하는 이유는 무엇이고, 이건 개발하는데 문제가 되지 않는 이유는 뭔지? 가 궁금합니다! import { useState } from 'react'; const DiaryEditor = () => { const [input, setInput] = useState({ author: '', content: '', emotion: 1, }); const handleOnChange = (e) => { console.log(e.target.name); console.log(e.target.value); setInput({ ...input, [e.target.name]: e.target.value }); console.log(input); }; const handleSubmit = () => { console.log(input); alert('오늘의 일기가 저장되었습니다!'); }; return ( <div className='DiaryEditor'> <h2>오늘의 일기</h2> <div> <input name='author' value={input.author} onChange={handleOnChange} /> <p>{input.author}</p> </div> <div> <textarea value={input.content} name='content' onChange={handleOnChange} /> <p>{input.content}</p> </div> <div> <span>감정 지수 : </span> <select onChange={handleOnChange} name='emotion' value={input.emotion} > <option value={1}>1</option> <option>2</option> <option>3</option> <option>4</option> <option value={5}>5</option> </select> </div> <div> <button onClick={handleSubmit}>저장하기</button> </div> </div> ); }; export default DiaryEditor; Q2) 위처럼 input이란 state는 한단계씩 늦게 반영이 되는데, select태그의 value 속성을 주는 목적은 무엇인가요?? 인풋의 value 속성은 실시간으로 인풋의 값과 상태를 동기화해주는 목적으로 사용한다고 생각했는데, state가 곧바로 변하지 않는거면, 이 인풋의 value 속성은 무용지물인 것 아닌가라는 생각이 들어 질문드립니다. <select onChange={handleOnChange} name='emotion' value={input.emotion} > Q3) useState의 초기값은 반드시 빈문자열등으로 인자를 전달하는 게 나은가요? 아무 인자도 전달하지 않으면 어떤 잠재적인 에러 발생 가능성이 있는건가요?
해결됨
처음 만난 리액트(React)
분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요? Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다 import React from "react" const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16 }, messageText: { color: 'black', fontSize: 16 } } class Notification extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notification import React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, ] var timer class NotificationList extends React.Component { constructor(props) { super(props) this.state = { notifications: [] } } componentDidMount() { const { notifications } = this.state timer = setInterval(() => { if(notifications.length < reservedNotifications.length) { const index = notifications.length notifications.push(reservedNotifications[index]) this.setState({ notifications: notifications }) } else { clearInterval(timer) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList
미해결
함수형 프로그래밍과 JavaScript ES6+
안녕하세요 선생님~~ 지금까지 모르는거 있어도 그냥 계속 반복해서 보고, log 찍어보면서 해결했는데 flatMap 부분에서 도저히 이해 안 가는 부분이 있어서 이렇게 질문드립니다 ㅠㅠ.. 우선 왜 map을 먼저하는지 모르겠습니다.. 중첩배열을 먼저 평탄화 시켜주고 그 다음 map을 했을때에는 예상치 못한 결과나 에러가 발생하지 않았는데요. map을 먼저 하게 되면 중첩 배열을 받아서 전달된 함수를 실행하는 부분에서 계속 결과값이 이상해 집니다... ㅠㅠ 사실 당연한 결과인데 map이든 L.map이 든 [1,2,[3,4],[5]] 이런 중첩배열을 받아서 순회를 하고 a => a+10 이런 함수를 실행하면 당연히 결과 값이 이상해지는데 선생님 코드에서는 어떻게 제대로 작동 되는 건지 궁금합니다...;; 만약 L.flatMap(a => a, [1, 2, [3, 4], [5]]) 이런식으로 하면 그냥 a를 반환만 하니까 중첩배열이 반환 되고 L.flatten 에서 평탄화 되니까 별문제 없는데 a =>a +10 이런식의 함수를 넘겨주면 결과값이 이상해집니다...ㅠ 뭐가 문제 인지 힌트 부탁드립니다~ const curry = fn => (a, ...args) => args.length ? fn(a, ...args) : (...args) => fn(a, ...args); const reduce = (fn, iter, acc) => { if (!acc) { iter = iter[Symbol.iterator](); acc = iter.next().value; } for (const a of iter) { acc = fn(acc, a); } return acc; } const L = {}; L.map = curry(function* (fn, iter) { for (const a of iter) { yield fn(a) } }); const isIterable = (a) => a && a[Symbol.iterator] L.flatten = function* (iter) { for (const a of iter) { if (isIterable(a)) { yield* a } else yield a } } const map = curry((fn, iter) => { const res = []; for (const a of iter) res.push(fn(a)) return res; }) const take = curry((limit, iter) => { const res = []; for (const a of iter) { res.push(a) if (res.length === limit) return res; } return res; }); const go = (...args) => reduce((a, fn) => fn(a), args); const pipe = (f, ...fn) => (...args) => go(f(...args), ...fn); // L.flatMap L.flatMap = curry(pipe( L.map, L.flatten )); const iter = L.flatMap(a => a + 10, [1, 2, [3, 4], [5]]) console.log(...iter) // 결과값 11 12 3 , 4 1 0 5 1 0
미해결
웹 프론트엔드를 위한 자바스크립트 첫걸음
섹션2 - 자바스크립트 코딩 환경 설정 강의를 들으면서 샌드박스에서 회원가입 후 create 를 눌러 vanilla를 생성했는데, 화면이 이렇게만 뜨는데 어떻게 해야하나요?ㅠㅠ 선생님처럼 파일이나 이런 게 뜨는 게 아니라 계속 저런 화면만 뜨네요
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요 강의 정말 잘 듣고있습니다! SSG가 SSR보다 사용자 경험이 좋은건 이해했습니다! 근데 한가지 더 의문점인건 SSG가 아니고 SSR을 선택해야하는 케이스가 있을까요? 라는 의문이 듭니다! 예를 들면 검색결과 페이지라던가 매번 매순간 페이지의 내용이 달라지는 페이지라면 SSG가 아니고 SSR로 만드는게 더 적합한 그런 케이스가 실무에서 있을까요?
미해결
https://velog.io/@wn8624/22%EC%9E%A5-this
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
인자에 객체 값을 넣는 이유가 안전하기 때문이라고 하셨는데 정확히 어떤 부분이 안전한지 알려주실 수 있나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 과제 중 해결되지 않는 문제가 있어 문의 드립니다. 인증 확인 버튼을 누를 때 '인증이 완료되었습니다' 안내창 띄우기 안내창 확인을 누르면, 인증 확인 버튼 텍스트 인증 완료로 변경 인증 확인 버튼 비활성화 가입하기 버튼 활성화 과정을 하고 있습니다. const timer__button = () => { alert("인증이 완료되었습니다.") document.getElementById("timer__button").innerText = "인증 완료" document.getElementById("timer__button").disabled = true document.getElementById("submit").disabled = false } 인증 확인 버튼을 누르면, '인증이 완료되었습니다.' 안내창이 뜨고, 인증 확인에서 인증 완료로 텍스트가 변경됩니다. 하지만 버튼의 활성화와 비활성화가 되지 않습니다. 타이머가 작동되고 있는 동안 타이머가 활성화되도록 한 코드 때문에 씹히는 걸까요? 혹시 몰라 타이머 부분 코드도 첨부합니다. const randomNumber__button = () => { document.getElementById("randomNumber__button").disabled = true let randomNumber = String(Math.floor( Math.random() * 1000000 )).padStart(6,"0") document.getElementById("randomNumber__number").innerText = randomNumber let time = 7 let timer = true timer = setInterval(function(){ if(time >= 0){ let min = Math.floor(time/60) let sec = String(time%60).padStart(2,"0") document.getElementById("timer__number").innerText = min + ":" + sec time = time - 1 document.getElementById("timer__button").disabled = false } else { document.getElementById("timer__button").disabled = true document.getElementById("randomNumber__number").innerText = "000000" document.getElementById("timer__number").innerText = "3:00" clearInterval(timer) } },1000) } 혹시 이 코드에 영향을 받아 버튼 비활성화가 안 되는 거라면 타이머 숫자를 3:00(기본 세팅 값)으로 바꾸면 될까 했지만 역시 안 됐습니다. const timer__button = () => { document.getElementById("timer__button").innerText = "인증 완료" alert("인증이 완료되었습니다.") document.getElementById("timer__number").innerText = "3:00" // document.getElementById("timer__button").disabled = true // document.getElementById("submit").disabled = false } 여기저기 찾아본 결과 alert 기능은 안내창이 떠 있는 동안 동작을 일시정지 시키고, alert 다음으로 이어지는 동작을 적어줄 땐 첨부 코드와 같이 단순 나열로 가능하다고 합니다. 다른 코드들 찾아봤을 때도 제가 쓴 코드와 유사했고요. 어느 부분이 문제인 건지, 만약 앞서 작성한 타이머 코드 때문에 씹히는 거라면 어떻게 해결해야 좋을지 힌트를 좀 받고 싶습니다. alert button disabled 이 키워드로 해결책을 검색하며 찾아봤는데요, 혹시 더 적절한 검색 키워드가 있다면 그것도 추천 부탁합니다. 검색도 기술인 것 같은데 요령이 없네요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강사님. 마이페이지 내 포인트 화면의 구매내역 조회기능을 구현 중에 있습니다. fetchPointTransactionsOfBuying API 로 구매내역을 조회하는데 판매자의 이름이 불러와지지 않습니다.. const FETCH_POINT_TRANSACTIONS_OF_BUYING = gql` query fetchPointTransactionsOfBuying($search: String, $page: Int) { fetchPointTransactionsOfBuying(search: $search, page: $page) { _id impUid amount balance status statusDetail useditem { _id name price seller { _id # name # email } buyer { _id name email } soldAt } createdAt } } `; useditem.seller._id 까지는 조회가 되는데 name 과 email 은 조회가 되지않습니다. 혹시나 해서 buyer 정보를 불러왔는데 buyer 도 _id 만 조회가 되고 name 과 email 는 조회가 되지 않습니다. 위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요 선생님 이제 막 들으려는 신참인데 섹션 1,2를 들어야할지 고민입니다 1. html+css( 빠르게 한시간 요약된것 ) 학습 2. Javascript 기본적인 부분만 학습 - '변수, 연산자, 반복문, 배열, 객체, 조건문, 함수, 콜백함수, Promise, Async/Await' 이정도 공부를 해둔 상태이고 git이나 git허브에 대한 지식은 전무합니다 이경우에 섹션 1과 2부터 시작 해야할까요? 뭔가 1.2도 가볍게시작하기 부담스러운 느낌이라.. 조언 부탁드립니다 .
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 초심자의 입장에서 사실 저러한 기능을 보면 그냥 처음에 만들때는 useCallback, React.memo 를 다 써보고 나중에 문제 생기면 그때 바꿔쓰면 되지 않나? 라는 생각이 듭니다. 마치 평소에는 const 로 다 만들고, 해보다가 let 으로 변경이 필요하다 싶으면 let 으로 바꾸는 것처럼요. 이걸 어떤 기준을 잡고 사용해야 할까요? 정확한 기준이 있는지도 궁금합니다. 렌더링 되는데 걸리는 시간이 몇 초 이상일시 변경한다거나 하는 기준이 있을까요?
미해결
next 13으로 typescript와 함께 개발중입니다 어느 순간부터 html태그들과 improt 쪽에 빨간줄이 뜨더니 해결될 생각을 안하더라구요.. 많이 검색해 본 결과. @types/react, @types/react-dom 을 다운받아야 한다고 해서 다운 받았지만 해결이 안되더라구요... 이 외에도 많은 방법들을 시도해 봤지만 효과가 없었습니다. 도와주세요ㅠㅠ 태크에서 나는 에러 : JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026) import문에서 나는 에러: Cannot find module 'next/image' or its corresponding type declarations.ts(2307)
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Express에서 데이터 처리하기 강의 수강 중에 생긴 오류 입니다. 이후에 포스트맨에서 body 수정 후 send 시에도 Error: connect ECONNREFUSED이 오류가 떳습니다. index.js를 실행 후에 웹 브라우저에 http://localhost:8080/products 입력하면 [{"name":"농구공","price":5000}] 이렇게 웹 화면에 뜨면서 node:events:492 thorw er;도 같이 뜨면서 서버 에러가 납니다 database.sqlite3을 vs코드 열었을 때는 위 사진처럼 뜨고 sqllite로 열었을 때는 읽을 수 없다고 뜹니다
해결됨
프로젝트 만들기
yunajoe@gmail.com 으로 보내주시면은 감사하겠습니다 :)
미해결
Next.js로 Google Cloud Platform에 App Engine 서비스 배포를 진행하고 있습니다. 문제는 production ( 실 서비스 )와 development ( 개발용 )으로 나누어서 .env.development, .env.production의 두개의 환경변수를 가지고있습니다. 배포 시 실서비스 에서는 .env.production을 사용하도록 개발용 에서는 .env.development를 사용하도록 설정하려는데 이것저것 만져보아도 production만 사용하는 문제가 발생해버리네요. 현재 프로젝트구조와 설정코드는 이렇습니다. project ├── local └── Dockerfile └── docker-compose.yml ├── resource └── .next └── ... (Next.js 빌드 파일) └── node_modules └── package.json └── dev_app.yaml └── prd_app.yaml └── .env.development └── .env.production └── next.config.js └── ... (기타 Next.js 프로젝트 파일) 여기서 package.json의 script설정은 다음과 같습니다. { dev: "next dev", start: "next start", lint: "next lint", deploy: "npm run build && gcloud app deploy --project='production' -q --appyaml=prd_app.yaml", deploy:dev: "npm run build:dev && gcloud app deploy --project='development' -q --appyaml=dev_app.yaml", build: "dotenv -e .env.production next build", build:dev: "dotenv -e .env.development next build" } next.config.js는 특별히 건드리지 않았습니다. dev_app.yaml, prd_app.yaml파일은 서비스명만 각각 설정해 주었습니다. runtime: nodejs20 # or another supported version service: development 질문 1. 현재 app engine 업로드된 용량, 로직을 보니 빌드파일이 아닌 프로젝트 그대로 들어가는 것 같습니다. 빌드는 환경변수파일도 정상적으로 분기되는데 앱엔진에서 해당문제가 발생하는 것으로보아 혹시 Next.js에서 빌드된 파일로 app engine에 배포할 수 있는지 궁금합니다. 질문 2. 빌드파일만 올릴수 없다 라고 하더라도 프로젝트 그대로 올리면서 환경변수를 분기할 방법이 있는지 궁금합니다. 정말 문서건 블로그건 구글서칭, 깃허브검색, GPT 모두 끈질기게 시도해봤지만 능력부족 탓인지 성공하지 못했습니다.. 능력자분들께서 도움주시면 잊지않겠습니다!!
미해결
웹 애니메이션의 새로운 표준, Web Animations API
안녕하세요! 강의 재밌게 잘 보고 있습니다 :D scroll-timeline.js 파일은 어디서 가져오신 건가요? 세팅부터 혼자서 해보려고 했는데 scroll-timeline 저장소 여기서 아무리 찾아봐도 안 보이네요..! Usage에 보면 import를 dist 폴더에서 scroll-timeline.js를 가져오는 것 같은데 dist 폴더도 안 보이고 src 폴더에 scroll-timeline-base.js도 아닌 것 같아서 질문 남깁니다..! 또, scrollOffsets에 넣는 옵션들은 어떻게 확인하나요? README에는 new CSSUnitValue 이것밖에 안 보이는데 강의에서는 target, edge, threshold 속성들도 쓰셔서 어디서 확인하고 쓰시는지 너무 궁금합니다..!
미해결
Vue.js 끝장내기 - 실무에 필요한 모든 것
vue-til-server 때문에 node 버전 10 버전대로 하면 vue cli 가 설치가안됩니다. 그래서 노드 버전을 올려서 vue cli 설치하고 나면 맨위 서버가 스타트가 안됩니다. 이 문제를 도대체 어떻게 해야하나요. 진도를 못나가서 답답하네요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nodejs도 다운로드받고 coderunner도 확장자에서 설치했는데 원인을 모르겠습니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
에러 종류: 위와 같은 환경에서 error: password authentication failed for user "postgres" 로 추정되는 에러 발생 아마 서버 연결시 인증 문제로 보입니다. 작동 절차: docker-compose up 입력, server 파일로 이동, npm run dev 실행. 에러 발생 +1) POSTGRES_HOST_AUTH_METHOD: trust로 설정하고 서버 새로 만들어도 동일한 에러가 발생하여 무슨 문제일지 잘 모르겠네요.. 도움 주시면 감사하겠습니다. +2) 아래에 터미널의 전체 에러 코드 남깁니다. C:\Users\tukim\Desktop\reddit-clone-app\server>npm run dev > server@1.0.0 dev > nodemon --exec ts-node ./src/server.ts [nodemon] 3.0.1 [nodemon] to restart at any time, enter rs [nodemon] watching path(s): . [nodemon] watching extensions: ts,json [nodemon] starting ts-node ./src/server.ts server running at https://localhost:4000 error: ����� "postgres"�� password ������ �����߽��ϴ� at Parser.parseErrorMessage (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:369:69) at Parser.handlePacket (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:188:21) at Parser.parse (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:103:30) at Socket.<anonymous> (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\index.ts:7:48) at Socket.emit (node:events:513:28) at Socket.emit (node:domain:489:12) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Socket.Readable.push (node:internal/streams/readable:234:10) at TCP.onStreamRead (node:internal/stream_base_commons:190:23) { length: 107, severity: 'ġ��������', code: '28P01', detail: undefined, hint: undefined, position: undefined, internalPosition: undefined, internalQuery: undefined, where: undefined, schema: undefined, table: undefined, column: undefined, dataType: undefined, constraint: undefined, file: 'auth.c', line: '329', routine: 'auth_failed' }
