묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제가 노션에 있는 이미지인가요 영상에 나오는 이미지인가요?
이거 인가요? 피그마파일인가요? 둘중에 상관 없는거죠?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
훈훈한 자바스크립트 반복문파트 스크립트 태그의 위치 질문
저는 버튼을 누르면 텍스트 출력은 오류, 콘솔 출력은 null이 뜹니다 원인이 뭐죠? index.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D-Day-count</title> <link rel="stylesheet" href="./style.css" /> <script src="./script.js"></script> </head> <body> <h1>D-Day</h1> <div id="d-day-container"> <div class="d-day-child-container"> <span id="days">0</span> <span>일</span> </div> <div class="d-day-child-container"> <span id="hours">0</span> <span>시간</span> </div> <div class="d-day-child-container"> <span id="min">0</span> <span>분</span> </div> <div class="d-day-child-container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="d-day-meassage"></div> <div id="target-selector id"> <input id="target-year-input" class="target-input" size="5" /> - <input id="target-month-input" class="target-input" size="5" /> - <input id="target-date-input" class="target-input" size="5" /> </div> <button onclick="counterMaker()" id="start-btn">카운트다운 시작</button> </body> </html> script.js // const obj = { // name: "Jason", // age: 25, // }; // if (obj.name === "Jason" || obj.age === 25) { // console.log("안녕, " + obj.name + ", 너의 나이는 " + obj.age); // } else { // console.log("넌 우리 멤버가 아니다."); // } const dateFormMaker = function () { const inputYear = document.querySelector("#target-year-input").value; const inputMonth = document.querySelector("#target-month-input").value; const inputDate = document.querySelector("#target-date-input").value; // const dateFormat = inputYear + '-' + inputMonth + '-' + inputDate; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; //템플릿 리터럴 return dateFormat; }; const counterMaker = function () { const messageContainer = document.querySelector("#d-day-message"); console.log(messageContainer); messageContainer.textContent = "D-Day를 입력해주세요."; const targetDateInput = dateFormMaker(); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; // 만약, remaining === 0 라면, 타이머가 종료되었습니다. 출력 if (remaining <= 0) { console.log("타이머가 종료되었습니다."); } else if (isNaN(remaining)) { //만약, 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다. 출력 console.log("유효한 시간대가 아닙니다."); } const remainingDate = Math.floor(remaining / 3600 / 24); //몇일 남았는지 구하기 const remainingHours = Math.floor(remaining / 3600) % 24; //몇 시간 남았는지 구하기 const remainingMin = Math.floor(remaining / 60) % 60; //몇 분 남았는지 구하기 const remainingSec = Math.floor(remaining) % 60; //몇 초 남았는지 구하기 console.log(remainingDate, remainingHours, remainingMin, remainingSec); };
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
3분 쯤에 자바스크립트 파일을 캐시한다는 의미가 궁금합니다.
먼저 좋은 강의 해주셔서 감사합니다. 궁금한 점은 CSR이 자바스크립트 파일을 캐시한다고 하셨는데 여기서의 캐시가 브라우저가 state값을 계속 가지고 있다는 것인지 아니면 브라우저가 js파일을 가지고 계속 동적으로 렌더링 할 때 사용한다는 의미인가요? 둘 다 아니라면 캐시의 의미가 궁금합니다. 다시 한 번 좋은 강의 감사드려요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제
안녕하세요! 회원가입 과제를 풀다가 막혀서 더 이상 진도를 못 나가고 있는 상황입니다. 섹션 7에 파이널 과제를 참고 하라고 하셨는데 회원가입 과제는 섹션7과 다르게 입력칸이 밑줄이라서 어떤 식으로 코드를 쳐야할지 감도 안 오는 상황입니다. 참고식이 아닌 회원가입 과제 부분 코드를 보고 싶은데 혹시 제가 정답 코드를 못 찾는거라면 링크를 첨부해주실 수 있으실까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기1탄 이미지 삽입이 이상합니다.
저는 왜이렇게 나오는걸까요...코드 여러번 재작성 해도 저렇게 나옵니다..ㅠ background-color 넣었을땐 정상적으로 나옵니다..왜 저러는건가요..?그리구 .outerbox 코드에 "outerbox": Unknown word. 가 발생합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
학습 자료(노션)에 포트폴리오 리뷰가 안 보입니다.
학습 자료(노션)에 포트폴리오 리뷰가 안 보입니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요?
항상 좋은 강의 감사합니다.다름이 아니라 혹시 강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
(해결/오타문제) addPost 액션이 동작하지 않는 것에 대해 궁금합니다.
안녕하세요. 항상 좋은 강의를 해주셔서 감사합니다.다름이 아니라 글 작성시 콘솔에 ADD_POST_REQUEST에 대한 리듀서 작동은 확인했으나 그 뒤에 addPost 사가가 작동하지 않는 것에 대해 질문이 있습니다.위 문제는 watchAddPost()가 정상적으로 ADD_POST_REQUEST에 대한 이벤트를 캐치하지 못 해서 다음 과정이 진행되지 않는 것이라고 생각합니다. 다만 콘솔에서는 이에 대한 것도 뜨지 않아 해당 오류를 해결하기 어려워 질문 드립니다.다음은 제가 작성한 코드입니다. ()@/component/PostFrom.jsconst PostForm = () => { const dispatch = useDispatch(); const { imagePaths, addPostDone } = useSelector((state) => state.post); const [text, onChangeText, setText] = useInput(""); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); ... }@/reducer/post.jsexport const initialState = { mainPosts: [...], ... addPostLoading: false, addPostDone: false, addPostError: null } export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); const dummyPost = (data) => ({ id: 2, content: data, User: { id: 1, nickname: "윤섭", }, Images: [], Comments: [], }); const reducer = (state: initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log("REDUCER: ADD_POST_REQUEST"); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: console.log("REDUCER: ADD_POST_SUCCESS"); return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; ... } }@/sagas/post.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, } from "@/reducers/post"; // add post function addPostAPI(data) { return axios.post("/api/post"); } function* addPost(action) { try { // const result = yield call(addPostAPI); yield delay(1000); console.log("SAGA: addPost"); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); }아래는 ADD_POST_REQUEST 이후 아무런 반응이 없는 스크린샷입니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
내장함수 타이머 작동 질문
작성된 코드는 똑같은데 타이머가 작동하지 않아요 ㅠㅠ min과 sec 두 변수 모두 String으로 감싸줘보기도 하고 min "+" sec 부분을 String으로 감싸주기도 해봤는데 해결이 안돼요 let auth = () => { const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); document.getElementById("number").innerText = token; document.getElementById("number").style.color = "#" + token; let time = 180; setInterval(function () { if (time >= 0) { let min = Math.floor(time / 60); let sec = Stirng(time % 60).padStart(2, "0"); document.getElementById("timer").innerText = min + ":" + sec; time = time - 1; } else { document.getElementById("finish").disabled = true; } }, 1000); };
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getServerSideProps cache가 되지 않을 때
안녕하세요 강사님. getServerSideProps 강의를 보고 실습중에 캐시가 되지 않아 질문드립니다. 다음과 같이 코드를 작성하고, getServerSideProps 페이지에서 로드된 html 문서의 헤더를 보면 캐시 정보가 나오지 않고 캐시가 되지 않는데 이유를 알 수 있을까요..?import type { GetServerSideProps, NextPage } from 'next'; type Props = { data: number; }; const Example: NextPage<Props> = ({ data }) => { return ( <main> <h1>getServerSideProps Page!</h1> <p>값: {data}</p> </main> ); }; export default Example; export const getServerSideProps: GetServerSideProps = async ({ res }) => { res.setHeader( 'Cache-Control', 'public, s-maxage=5, stale-while-revalidate=10' ); const delayInSeconds = 2; const data = await new Promise((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ); return { props: { data }, }; };
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
firebase 업데이트
강사님 안녕하세요!다름이 아니라 firebase 데이터 업데이트 하는 부분이 막혀 질문하려고 합니다.아래 사진은 Firebase 데이터 업데이트 함수와 발생하는 에러 사진입니다.해당 문제를 해결할 수 있게 도움 부탁드립니다 ㅠㅠ해당 오류 해결하기 위해 firebase 룰을 변경했는데도 해결되지 않았습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
npm run dev 오류가 뜹니다
http://localhost:3000/에 뜬 오류Server ErrorTypeError: Cannot read properties of undefined (reading 'user')This error happened while generating the page. Any console logs will be displayed in the terminal window.Sourcecomponents/AppLayout.js (15:52) @ eval 13 | 14 | const AppLayout = ({ children }) => { > 15 | const isLoggedIn = useSelector((state) => state.user.isLoggedIn); | ^ 16 | // const { isLoggedIn } = useSelector(state => state.user); 17 | 18 | return (Call StackAppLayoutcomponents/AppLayout.js (15:36)Show collapsed frames 터미널에 뜬 오류TypeError: Cannot read properties of undefined (reading 'user')at eval (webpack-internal:///./components/AppLayout.js:32:101)at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/react-redux/lib/hooks/useSelector.js:67:26 npm run dev를 하고http://localhost:3000/ 들어갔더니이런 오류가 뜨면서 안됩니다.유저를 왜 읽지 못하는 걸까요?오류 해결하고 싶습니다 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자유게시판 로그인일때 (비로그인 유저아닐때)
강사님 안녕하세요, 혹시 밑에 질문했는데 제가 잘못 말을 전달한것 같아서요비로그인일때는 피그마에서 작성자, 비밀번호를 입력하게 나타나는데로그인일때는 작성자, 비밀번호를 입력 못하게 나타나더라고여 근데 playground 가보면 파라미터를 받는곳을 보면 user 정보를 받는 파라미터가 없더라구요그래서 fetchBoard를 들어가서 user정보를 가져와도 null값이 나옵니다.그럼 피그마에 있는 저거는 로그인유저도 비로그인유저 화면으로 만들어야하나요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
createAsyncThunk 진행 순서
제가 이번에 loadPosts를 createAsyncThunk로 구현하면서 createAsyncThunk의 진행 순서가 궁금해서 질문 드립니index.js useEffect(() => { console.log("dipathch hi"); dispatch(loadPosts(10)); }, [dispatch]);reducers/post.js export const loadPosts = createAsyncThunk(LOAD_POST, async (data) => { trottle(); return data; }); const trottle = () => listenerMiddleware.startListening({ type: LOAD_POST, effect: async (action, listenerApi) => { listenerApi.unsubscribe(); console.log("Original state ", listenerApi.getOriginalState()); await listenerApi.delay(5000); console.log("Current state ", listenerApi.getState()); listenerApi.subscribe(); }, }); const postSlice = createSlice({ name: "post", initialState, extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.post, })) // loadPosts .addCase(loadPosts.pending, (state, action) => { state.loadPostsLoading = true; state.loadPostsDone = false; }) .addCase(loadPosts.fulfilled, (state, action) => { action.payload = generateDummpyPost(action.payload); state.mainPosts = action.payload.concat(state.mainPosts); state.hasMorePost = state.mainPosts.length < 50; state.loadPostsLoading = false; state.loadPostsDone = true; }) .addCase(loadPosts.rejected, (state, action) => { state.loadPostsLoading = false; state.loadPostsError = action.error; }) .addDefaultCase((state) => state), });제가 하나하나 console.log를 찍어서 확인한 진행 순서를 얘기해 드리겠습니다일단 화면을 처음 랜더링할때 index.js에서 dispatch가 제일 먼저 실행됩니다 그리고 post.js로 넘어와서 loadPost.pending -> loadPosts.fulfilled ->loadPosts = createAsyncThunk(LOAD_POST) 이 순서대로 진행이 됩니다 그래서 loadPosts.fulfilled에 generateDummpyPost()함수를 작성한 것입니다그래서 마지막에 createAsyncThunk가 실행이 되니 return이 필요없지 않나? 라는 생각에 return을 지워봤더니 post가 하나만 작성되고 그 이후는 작성되지 않았습니다제가 궁금한 부분은 세개입니다createAsyncThunk의 정확한 진행순서가 궁금합니다generateDummpyPost()함수를 저렇게 작성하는게 맞는지 궁금합니다https://blog.logrocket.com/redux-toolkits-new-listener-middleware-vs-redux-saga/ 에서 Throttling관련 얘기가 있어서 똑같이 따라 해봤는데 쓰로틀링을 createAsyncThunk에 장착하는 방법을 잘 모르겠습니다 쓰로틀링이 없어도 윈도우 이밴트로 요청이 한번에 많이 오는 현상은 없지만 그래도 궁금해서 질문 드립니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
16-02 강의에 잡음이 발생하는 것 같습니다.
4분 15초경부터 25초까지 잡음이 들려서 강의 소리가 잘 안들리네요참고하시면 좋을 것 같습니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
Next.js13 에서 getStaticProps 관련해서 질문드립니다!
안녕하세요! 강의 잘보고있습니다 :)next.js 13 버전으로 create-next-app 으로 설치하여 강의를 듣고있는데요,섹션1 > getStaticProps 강의내용대로 동일코드를 입력했지만props로 넘긴 값을 받아오질 못하더라구요.. console.log를 찍어봐도 안넘어와서 문의드립니다ㅠㅠ 아래와같이 입력했고 /app/section1/page.tsx로 만들었습니다.관련 깃헙소소는 : https://github.com/simjieun/next13 여기에 있습니다! 한번 확인부탁드리겠습니다ㅠㅠimport { NextPage } from "next"; interface Props { second: number; } const Example: NextPage<Props> = ({ second }) => { return ( <main> <h1>getStaticProps Page</h1> <p>{second}</p> </main> ); }; export default Example; export async function getStaticProps() { const delayInSecond = 2; const second = await new Promise((resolve) => { setTimeout(() => { resolve(Math.random()); }, delayInSecond * 1000); }); return { props: { second, }, }; }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit을 사용해서 throttling설절을 어떻게 할 수 있나요?
아래 질문(reduxjs/toolkit 에서 loadPost 한번만 가게하기)에서 비슷한 내용의 질문이 올라왔는데delay란 함수를 어떻게 설정하는지 잘 이해가 안되서 질문드립니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
useEffect()의 window에 관한 콘솔은 계속 찍히는 이유가 무었인가요?
useEffect(() => { function onScroll() { console.log( window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight ); if ( window.scrollY + document.documentElement.clientHeight === document.documentElement.scrollHeight ) if (hasMorePost) { const dummypost = generateDummpyPost(10); dispatch(loadPost({ dummypost })); } } window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, [hasMorePost]);useEffect를 이런 식으로 작성하면 hasMorePost의 값이 변경되기 전까지 useEffect는 처음 단한번만 실행된후 그후에는실행되지 않아야 하는데 왜 계속 console.log가 실행되는건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
댓글부분 구현시 Comment가 적용되지 않는 부분
댓글 구현하기 수강 중에 제로초님께서 antd의 <Comment />를 import 하여 적용하는데 안 되시는 분들은 List.Item과 List.Item.Meta를 이용해서 만들어보세요. 제 경우 antd를 최신버전으로 사용하고 있는데 공식문서를 보니 Comment는 없습니다. 대신 List 컴포넌트에 List.Item과 List.Item.Meta가 있는데 이걸 이용해 댓글 컴포넌트를 만들 수 있습니다. {commentFormOpened && ( <div> <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( // 강의에서는 <li></li>로 사용하고 있습니다. <List.Item> {/* 강의에서는 <Comment />로 사용하고 있습니다. */} <List.Item.Meta // author => title로, content => description으로 적용하면 강의에서 보는 UI와 똑같아요. title={item.User.nickname} avatar={<Avatar>{item.User.nickname[0]}</Avatar>} description={item.content} /> </List.Item> )} /> </div> )}
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자유게시판 로그인 유저 전용 작성하기
강사님 안녕하세요, 혹시 로그인 유저가 자유게시판 작성하기 할때작성자, 비밀번호등... 필요하잖아요근데 비밀번호는 로그인 유저가 한 비밀번호를 가져와야 하는데 이걸 localStorage, session에해버리면 보안상 문제가 생기지않나요? 지금은 그냥 localStroage, session 이런곳에 유저 비밀번호를 저장해놓을까요?
