172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
개인정보 페이지같은 보안이 중요한경우 CSR보다 SSR을 적용하는게 좋다고 하셨는데 오히려 검색엔진의 정보수집때문에(SEO) 개인정보를 노출할수도 있지 않나요? 검색을 해보니 이런 주장을 하는 분들도 계셔서요 요청을 최소화 하냐 vs 정보수집에 노출되지 않도록 하냐 이 두개의 충돌같은데 어떻게 생각하시는지 궁금합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
이 에러는 왜 발생한 건가요? 구글에 검색도 해봤는데 안나오네요 도와주세요 ㅠ reducers/user.js 코드입니다 export const initialState = { } export const loginAction = (data) => { return { type: 'LOG_IN', data, } } export const logoutAction = () => { return { type: 'LOG_OUT', } } const reducer = (State = initialState, action) => { switch (action.type) { case 'LOG_IN': { return { ...state, isLoggedIn: true, user: action.data, }; } case 'LOG_OUT': { return { ...state, isLoggedIn: false, user: null, }; } default: return state; } }; export default reducer; 터미널창 오류 메세지 입니다 error - reducers/user.js (37:12) @ reducer error - ReferenceError: state is not defined at reducer (webpack-internal:///./reducers/user.js:39:13) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:15:75) at Object../reducers/index.js (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/.next/server/pages/_app.js:33:1) at __webpack_require__ (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///./store/configureStore.js:9:67) at Object../store/configureStore.js (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/.next/server/pages/_app.js:66:1) { page: '/' } 35 | } 36 | default: > 37 | return state; | ^ 38 | 39 | } 40 | }; event - compiled client and server successfully in 100 ms (1518 modules) 4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } ReferenceError: state is not defined at reducer (webpack-internal:///./reducers/user.js:39:13) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:15:75) at Object../reducers/index.js (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/.next/server/pages/_app.js:33:1) at __webpack_require__ (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///./store/configureStore.js:9:67) at Object../store/configureStore.js (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/.next/server/pages/_app.js:66:1) http://localhost:3060 에 뜬 오류 입니다 Server Error ReferenceError: state is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window. Source reducers/user.js (35:12) @ reducer 33 | } 34 | default: > 35 | return state; | ^ 36 | 37 | } 38 | };
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
하드코딩으로 값을 넣었을때는 잘진행이 되었는데요ㅠㅠ 안에 값을 지정하니 에러가 계속뜨네요 아마 이 부분 에서 고쳐야 할 점이 있는 것 같은데 똑같이 작성을 한 것 같음에도 동작이 안되서 질문드려봅니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
브라우저에서 새로고침해도 수정된 index.js가 반영이 안되던데 왜그러는걸까요 ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이거 인가요? 피그마파일인가요? 둘중에 상관 없는거죠?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
저는 버튼을 누르면 텍스트 출력은 오류, 콘솔 출력은 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. 지도 서비스 개발)
먼저 좋은 강의 해주셔서 감사합니다. 궁금한 점은 CSR이 자바스크립트 파일을 캐시한다고 하셨는데 여기서의 캐시가 브라우저가 state값을 계속 가지고 있다는 것인지 아니면 브라우저가 js파일을 가지고 계속 동적으로 렌더링 할 때 사용한다는 의미인가요? 둘 다 아니라면 캐시의 의미가 궁금합니다. 다시 한 번 좋은 강의 감사드려요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 회원가입 과제를 풀다가 막혀서 더 이상 진도를 못 나가고 있는 상황입니다. 섹션 7에 파이널 과제를 참고 하라고 하셨는데 회원가입 과제는 섹션7과 다르게 입력칸이 밑줄이라서 어떤 식으로 코드를 쳐야할지 감도 안 오는 상황입니다. 참고식이 아닌 회원가입 과제 부분 코드를 보고 싶은데 혹시 제가 정답 코드를 못 찾는거라면 링크를 첨부해주실 수 있으실까요?
미해결
실습으로 배우는 선착순 이벤트 시스템
안녕하세요! 강의 재미있고 유익하게 잘 듣고 있습니다 :) 확장에 대해 생각해보니, Set을 이용해서는 중복방지 이상 개수 확장에 대해서 처리는 불가능 할 거 같아서요. 혹시, 2개 이상 N개 제한에 대한 확장 방법은 어떤게 있을까요?? 감사합니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
저는 왜이렇게 나오는걸까요...코드 여러번 재작성 해도 저렇게 나옵니다..ㅠ background-color 넣었을땐 정상적으로 나옵니다..왜 저러는건가요..? 그리구 .outerbox 코드에 "outerbox": Unknown word. 가 발생합니다.
해결됨
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 강의를 듣다 의문점이 생겨 질문 드립니다. OrderDto는 JPA에서 생성된 객체가 아니고 직접 생성자로 만들어서 사용한 객체인데 왜 Hibernate5Module이 프록시 객체로 생각해서 null값을 반환하는지 모르겠습니다. 제가 긴시간 찾아보면서 생각한 이유는 이렇습니다. 강의 5분경 쯤에 api 호출시 Json에서 orderItems 가 null로 반환되는것을 보여주십니다. orderItems가 null로 반환되는것은 스프링이 string으로 응답을 보낼때 messageConverter가 json으로 변환해서 반환을합니다. 이때 orderItems가 JPA(Hibernate)에서 만든 프록시 객체로 되어있어 전강의에서 설정한 Hibernate5Module이 프록시 객체를 null로 바꾸기 때문에 orderItems가 null로 나타낸것으로 생각됩니다. 하지만 제가 디버깅 모드로 확인해본 결과 OrderDto안에 있는 orderItems는 프록시 객체가 아닌 실제로 생성된 객체였습니다.(OrderDto는 단순히 JPA가 관리 하지 않아서 당연하다고 생각합니다.) 강의 기준으로 orderItems 안에 있는 orderItem객체가 2개 존재하는데 orderItem객체는 JPA를 통해 생성된 객체이고 자세히 살펴보면 orderItem 안에 Item은 LAZY로딩으로 프록시 객체가 생성되어있습니다. 혹시몰라 Hibernate5Module을 끄고 실행한 결과 Item이 @JsonIgnore가 있으면 orderItems가 제대로 결과 값이 나오고 @JsonIgnore이 없으면 프록시 객체를 Json으로 변환하지 못해서 오류가 발생합니다. 그럼 Hibernate5Module는 엔티티 안에 객체의 값중 하나라도 프록시 객체가 있다면 다른 객체의 값이 있든 말든 그냥 null을 반환하는 걸까요?? 제가 이해한것이 맞는지 궁금해서 질문드립니다. 긴글 읽어주셔서 감사합니다.
해결됨
스프링 시큐리티
안녕하세요 선생님 좋은강의 정말 감사드립니다! 선생님 혹시 사용자의 어떤 request에 의해서 CustomAccessDeniedHandler 여기로 오게 되는지 디버그를 이용해서 확인하고 싶다면 어떤 필터를 확인하면 알 수 있을까요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
학습 자료(노션)에 포트폴리오 리뷰가 안 보입니다.
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
[질문 내용] 상품주문_재고수량초과 테스트할 때 Junit5 사용해서 expected가 없습니다. import static org.junit.jupiter.api.Assertions.*; @Test public void 상품주문_재고수량초과() throws Exception { //given Member member = createMember(); Item item = createBook("시골", 10000, 10); int orderCount = 11; //when //then assertThrows(NotEnoughStockException.class, ()-> orderService.order(member.getId(), item.getId(), orderCount)); } 그래서 이렇게 작성해서 초록불은 떴는데 적절하게 작성했는지 궁금합니다. 더 좋은 예시가 있는 지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
항상 좋은 강의 감사합니다. 다름이 아니라 혹시 강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 항상 좋은 강의를 해주셔서 감사합니다. 다름이 아니라 글 작성시 콘솔에 ADD_POST_REQUEST에 대한 리듀서 작동은 확인했으나 그 뒤에 addPost 사가가 작동하지 않는 것에 대해 질문이 있습니다. 위 문제는 watchAddPost()가 정상적으로 ADD_POST_REQUEST에 대한 이벤트를 캐치하지 못 해서 다음 과정이 진행되지 않는 것이라고 생각합니다. 다만 콘솔에서는 이에 대한 것도 뜨지 않아 해당 오류를 해결하기 어려워 질문 드립니다. 다음은 제가 작성한 코드입니다. () @/component/PostFrom.js const 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.js export 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.js import { 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 강의를 보고 실습중에 캐시가 되지 않아 질문드립니다. 다음과 같이 코드를 작성하고, 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 룰을 변경했는데도 해결되지 않았습니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
만약 Member에 검증이 필요하다고 하면 검증객체를 따로 클래스로 만들어서 사용하나요? 엔티티에 덧붙여서 사용하나요?
