173만명의 커뮤니티!! 함께 토론해봐요.
미해결
프로젝트로 배우는 React.js
useParams hook을 사용할때 import를 react-router 에서 하시는데 react-router-dom에서 하든 react-router에서 하든 별 상관 없는건가요? 강의에서는 react-router-dom을 사용하고 있는걸로 있는데 react-router와의 차이와 import할 때 이 둘을 구분하지 않아도 되는지 궁금합니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에 반응형 관련 강의도 있을까요 ㅠㅠ? gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ 비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기존 방식인 <button onClick={handleEdit}>수정 완료</button> 대신에, <button onClick={() => {onEdit(id, localContent)}}>수정 완료</button> 가 안되는 이유는 무엇인가요?
해결됨
[코드캠프] 훈훈한 Javascript
어디에 가야 볼수있나요?
해결됨
따라하며 배우는 리액트 A-Z[19버전 반영]
next13 학습을 진행하고 있는데 오류가 발생해서 질문드립니다. 기본적으로 이 상태에서는 이런 오류가 발생하고 <Link>를 사용을 하게 되면 이런 오류가 발생합니다.. 어떻게 해야하나요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 swr revalidate 가 deprecated 되어 mutate를 사용하면 된다는 답변을 확인하고 mutate를 썼는데 궁금한 점이 있습니다. mutate()를 하는 이유는 로그인 성공했을때 그 시점에 users api를 호출하기 위해서 인가요? 그리고 mutate 와 무관하게 디폴트 설정에따라(화면전환등) SWR에서 userapi를 호출하고 있는것도 맞나요? 1: 화면 첫 렌더링때 user api 콜 로그인 mutate실행으로 user api 콜 화면전환했을때 다시 콜 제가 이해한게 맞는지 답변 부탁드립니다. 감사합니다.
미해결
프로젝트로 배우는 React.js
안녕하세요 코지코더님 강의 수강중인 수강생입니다. 가끔 보면 새로고침을 하지 않아도 local 에 바로 업데이트가 되는게 있고 이번 강의처럼 새로고침을 한번 누르시는게 있는데 그 기준이 있을까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님 첫화면엔 커넥션 리퓨즈 뜨고 회원가입 누르면 이러한 오류가 뜹니다 넘어가질 않고 오류가 계속나오는데 왜이런걸까요?.. 무엇이 문제인지 궁금합니다 :4000 으로 계속 찍히는거 보면 cors가 안되는것일까요 강의보고 다 제대로 따라했는데 ㅠㅠ 도와주시면 감사하겠습니다
해결됨
함수형 프로그래밍과 JavaScript ES6+
안녕하세요. 먼저 좋은 강의와 항상 빠르게 답변을 해주셔서 너무 감사합니다. 질문은 아래와 같습니다. 지연성 1 파트에 있는 평가순서 강의를 복습하면서 클레이슬리 컴포지션의 평가 순서를 생각해보았는데, 제 생각이 맞는지 궁금합니다. 예시코드 // go go( [1, 2, 3, 4, 5], L.map((n) => Promise.resolve(n)), L.filter((n) => n % 2), take(2), console.log // [1, 3] ); // take export const take = curry((l, iter) => { let result = []; iter = iter[Symbol.iterator](); // recur()가 실행되면, 여기서 다시 시작을 하는데. // iter.next()가 실행되면, return (function recur() { let cur; while (!(cur = iter.next()).done) { const value = cur.value; // a가 promise 인 경우 재귀함수를 이용해서 처리함 if (value instanceof Promise) return ( value // .then((v) => (result.push(v), result).length === l ? result : recur() ) // filter에서 reject가 되면, catch에 걸리고 e가 nop이면 recur()를 실행한다. .catch((e) => (e === nop ? recur() : Promise.reject(e))) ); result.push(value); if (result.length === l) return result; } return result; })(); }); // L.filter const nop = Symbol("nop"); export const L.filter = curry(function* (f, iter) { for (const a of iter) { const b = go1(a, f); if (b instanceof Promise) yield b.then((b) => (b ? a : Promise.reject(nop))); else if (b) yield a; } }); // L.map export const L.Map = curry(function* (f, iter) { for (const el of iter) { yield go1(el, f); } }); 평가 순서 take 함수 내, iter.next() 평가를 시도 → L.filter로 이동 L.filter 내, iter.next() 평가를 시도 → L.map 으로 이동 L.map 내, inter.next() 평가를 시도한다. → [1, 2, 3..] 를 iter 로 받았기 때문에 1로 평가 된다. L.filter 로 돌아와, L.map으로부터 평가받은 Promise.resolve(1) 이라는 값(b)으로 내부 로직을 수행한다. b의 인스턴스가 Promise라면, b.then을 실행하고 a 또는 Promise.reject 을 한다. 여기서 a는 Promise 이다. b의 인스턴스가 Promise가 아니라면, result.push(value); 을 실행하고 while로 순회한다. L.filter 의 평가가 끝나면 take 함수로 돌아온다 take로 전해지는 L.filter 의 평가값은 4개 중에 하나일 것이다. a → take 내에서 result.push 가 실행됨 Promise.resolve(a) → take 내에서 .then 절 이 실행됨. Promise.reject(nop) → take 내에서 .catch 절 이 실행되고 recur() 를 실행함 Promise.reject(e) → take 내에서 .catch절 이 실행되고, Promise.reject(e) 로 이어짐 recur() 가 실행되면, take 에서 실행된 첫번째 while 사이클이 끝나면서, 다시 recur()가 실행되며 iter.next() 가 평가할때 위 과정을 다시 반복한다. take에 있는 while 사이클이 return되고 recur() 함수 실행이 종료됐음에도 iter.next() 의 값이 이전값에서 이어지는 이유는 recur() 와 iter가 클로저이기때문이다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
src/components/Row.js Line 14:7: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps 쌤 그리고 fetchMovieData 가 있습니다. 그것을 포함하거나 종속성 배열 React-hooks/exhausitve deps를 제거하라는게 무슨말인가요??
해결됨
[코드캠프] 훈훈한 Javascript
섹션 9 JSON 데이터 활용에서 images파일은 어디서 다운로드 받을수 있나요?? 아무리 찾아도 안보이네요..ㅠㅠ
미해결
처음 만난 리액트(React)
이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.
미해결
처음 만난 리액트(React)
에러가 나서요ㅠ
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
todoapp 클라이언트(리액트), 서버(몽구스) 로 작업중입니다. (글읽기, 리스트보여주기, 삭제 까지는 구현을 했는대요. 글리스트에서 특정리스트를 클릭시 해당상세페이지로 넘어가는 방법이 잘안됩니다. 구체적으로 어떻게 해야되는지 꼭좀 알려주세요. -----------리액트-------------------------- import React, { useEffect } from 'react' import axios from 'axios' import { useParams } from 'react-router-dom' const ShowPage = () => { const {id} = useParams() const getPost = (id) => { axios.get(`users/board/${id}`).then((res)=>{ console.log(res.data.user); }) } useEffect(()=>{ getPost(id); },[]) return ( <div>ShowPage</div> ) } -----------server-------------------------- userRouter.get('/board/:userId',async(req,res)=>{ try{ const {userId} = req.params; const user = await User.findOne({id:userId}); return res.status(200).json({success:true, user}) }catch(err){ console.log(err); return res.status(500).send({err: err.message}) } })
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
id와 nickname에 마우스를 올리면 useState를 이용한 password(string), passwordCheck(boolean)과 다르게, 함수라고 나오는데 이렇게 되어도 괜찮은건가요?? 그리고 이것과 관련된 오류인지는 모르겠는데, 약관동의 버튼을 누르고 아이디와 비밀번호를 수정해도 값이 변경되지않습니다. 강의랑 똑같이 작성한것같은데 어디가 잘못된건지 모르겠네요 ㅠㅠ .. 어떻게 해결해야 할까요?? ```signup.js import React, { useCallback, useState } from 'react'; import AppLayout from '../components/AppLayout'; import Head from 'next/head'; import styled from 'styled-components'; import { Button, Checkbox, Form, Input } from 'antd'; import useInput from '../components/hooks/useInput'; const ErrorMessage = styled.div` color: red; `; const Signup = () => { const [id, onChangeId] = useInput(''); const [nickname, onChangeNickname] = useInput(''); const [password, onChangePassword] = useInput(''); const [passwordCheck, setPasswordCheck] = useState(''); const [passwordError, setPasswordError] = useState(false); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setPasswordError(e.target.value !== password); }, [password] ); console.log(id); const [term, setTerm] = useState(false); const [termError, setTermError] = useState(false); const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); setTermError(false); }, []); const onSubmit = useCallback(() => { if (password !== passwordCheck) { return setPasswordError(true); } if (!term) { return setTermError(true); } console.log(id, nickname, password); }, [password, passwordCheck, term]); return ( <> <AppLayout> <Head> <title>회원가입 | NodeBird</title> </Head> <Form onFinish={onSubmit}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} required onChange={onChangeId} /> </div> <div> <label htmlFor="user-nick">닉네임</label> <br /> <Input name="user-nick" value={nickname} required onChange={onChangeNickname} /> </div> <div> <label htmlFor="user-password">패스워드</label> <br /> <Input name="user-password" value={password} required onChange={onChangePassword} /> </div> <div> <label htmlFor="user-password-check">비밀번호체크</label> <br /> <Input name="user-password-check" value={passwordCheck} required onChange={onChangePasswordCheck} /> {passwordError && ( <ErrorMessage>비밀번호가 일치하지 않습니다</ErrorMessage> )} </div> <div> <Checkbox name="user-term" checked={term} onChange={onChangeTerm}> 약관에 동의합니다. </Checkbox> {termError && <ErrorMessage>약관에 동의하지 않습니다</ErrorMessage>} </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit"> 가입하기 </Button> </div> </Form> </AppLayout> </> ); }; export default Signup; import { useState, useCallback } from 'react'; export default (initialValue = null) => { const [value, setValue] = useState(initialValue); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler]; };
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
<template> <div class="inputBox shadow"> <input type="text" v-model="newTodoItem"> <span class="addContainer" @click="addTodo"> <i class="fa-solid fa-plus addBtn"></i> </span> </div> </template> <style scoped> input:focus { outline: none; } .inputBox { background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { border-style: none; font-size: 0.9rem; } .addContainer { float: right; background: linear-gradient(to right, #6478FB, #8763F8); display: block; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; } </style> 위처럼 아예 input창 크기도 안맞춰지고 span 태그도 사라져있더라구요.. 왜 이상하게 나왔는지를 몰라서 임시로 아래처럼 바꿨는데 요즘은 flex를 현업에 안쓴다고 들었는데 그게 맞을까요 ?? 아직 git 허가를 못받아서 ..😭 input:focus { outline: none; } .inputBox { display: flex; align-items: center; background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { height: 100%; width: calc(100% - 3rem); border-style: none; font-size: 0.9rem; } .addContainer { background: linear-gradient(to right, #6478FB, #8763F8); display: block; height: 100%; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; }
해결됨
[코드캠프] 훈훈한 Javascript
아래와 같이 Url이 승인되지 않는 경우가 발생합니다. openWeatherMap API 강의에서 버전을 API버전을 3.0에서 2.5로 바꾸라고 합니다. 저는 그렇게 바꾸었는데, 안되었습니다. 3.0도 Unauthorized로 거부 되었습니다. 그래서 2022년 12월 13일 기준으로 2.5로 바꾸지 않고, 2.8로 바꾸니 Unauthorized 메시지가 사라졌습니다. 그런데 위 글의 사항을 반영하였다면, then, catch 파트의 인강을 수강할 때, fetch함수의 url 주소를 .org/data/2.8/onecall?lat=$~~~~ 에서 .org/data/2.5/weather?lat=$~~~ 로 다시 바꾸어 주셔야합니다!!! 2.8 유지 하시면 안됩니다!!! 중간에 오류가 나서 당황해서 "왜 안되지" 라고 멘탈붕괴가 오실 수 있을 텐데, 끝까지 인강대로 따라오면 오류 없어집니다. 인강 내용이 맞습니다. .org/data/2.8/weather?lat=$~~~ 유지시 오류 .org/data/2.5/weather?lat=$~~~ 오류 해결 ※중간에 오류가 나더라도 인강내용대로 따라 가면 "현재 기준"으로 오류 사라집니다. 괜히 이 글이 혼란을 줄까봐 염려스럽네요. 아 그냥 이런 경우도 있었네 라고 봐주시면 감사하겠습니다.
미해결
함수형 프로그래밍과 JavaScript ES6+
2차원 배열일 경우에는 L.flatten 코드로 가능하지만 3차원 배열, 4차원 배열일 경우엔 어떻게 구현해야 좋을까요? 아래와 같이 구현할려고하니 deepFlatten을 해결해주는 곳이 없어서 3차원 배열 이상은 이터레이터로 리턴받고 있습니다.ㅠㅠ const isIterable = a => a && a[Symbol.iterator]; function* deepFlatten(iter){ for(const a of iter){ if (isIterable(a)) yield deepFlatten(a) else yield a; } } L.flatten = function* (iter) { for (const a of iter) { if (isIterable(a)) yield deepFlatten(a) else yield a; } }; var it = L.flatten([[1, [1,2,3]], 3, 4, [5, 6], [7, 8, 9]]); log(take(Infinity, it)) [deepFlatten, 3, 4, deepFlatten, deepFlatten]
미해결
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
안녕하세요, 동균님! 😁 강의 자막은 제공되지 않는걸까요!?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
선생님 포스트 나 댓글 삭제기능은 어떤식으로 해야될까요 따로 강의는 없겟죠? ㅠ
