173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! 현재 강의 내용을 따라 학습을 재밌게 진행하고 있습니다. 회색 네모난 표시의 정체를 알 수 있을까요 ??? data 옆에 있는 ': number' (resolve) 옆에 있는 'executor:' 등등등 ...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
정확하게 같게 했는데 이게 왜이런지 모르겠습니다 host3000 패이지는 잘나옵니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제로초쌤 강의를 들으면서 redux, redux-saga로 작성하신걸 깃헙 소스코드 참고하고 스스로 해보면서 toolkit으로 변환하면서 해보고 있는데 toolkit에서는 따로 한번만 요청이 가게 할 수 없나요..? 제 코드 첨부하겠습니다 <pages > index.js> useEffect(() => { function onScroll(){ console.log(window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight); if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300){ if(hasMorePosts && !loadPostsLoading){ dispatch(loadPost(10)); console.log(loadPostsLoading); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); } }, [hasMorePosts]) <actions > post.js> export const loadPost = createAsyncThunk('post/loadPosts' , async (data , thunkAPI) => { try{ const result = await delay(getDummyPost(data), 1000); return result; } catch(error){ console.log(error); } }); <reducers > postSlice.js> .addCase(loadPost.pending, (state, action) => { state.loadPostsLoading = true; state.loadPostsDone = false; state.loadPostsError = null; }) .addCase(loadPost.fulfilled, (state, action) => { state.loadPostsLoading = false; state.loadPostsDone = true; state.mainPosts = action.payload.concat(state.mainPosts); state.hasMorePosts = action.payload.length < 100; }) .addCase(loadPost.rejected, (state, action) => { state.loadPostsLoading = false; state.loadPostsError = action.error; })
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. React.memo로 렌더링 최적화 강의를 듣다가 질문이 생겼습니다. React.memo는 props가 변하지 않으면 다시 렌더링 하지 않는다고 알고 있는데요. App.js에서 useState의 결과물인 setState(setTodoData 등)가 List.js의 props로 내려가는데, 이는 변화로 보지 않는 것으로 보았습니다. 아래의 단순화된 useState의 구현을 보면 useState로 나온 state는 클로저를 통해 값이 변경되지 않으면 useState가 같은 값?참조?를 내려주는 것 같은데, setState는 매번 새로 생성되어 참조가 바뀔 것 같다는 생각을 하였습니다. 그래서 React.memo가 매번 새로 생성되는 setState를 보고 props가 바뀌는 것으로 인식하여 렌더링을 해주어야 하지 않을까 했는데... 실제로는 그렇지 않더라고요 물론 단순화된 구현이고 실제 리액트의 구현은 복잡한 과정을 거쳐 같은 참조를 내려줄 것 같다고 생각이 드는데요. 이 마법같은 과정이나 원리, 키워드에 대해서 아무리 찾아도 찾을 수가 없어서 도움을 청하고자 질문을 남깁니다... 감사합니다. const MyReact = (function() { let _val // hold our state in module scope return { render(Component) { const Comp = Component() Comp.render() return Comp }, useState(initialValue) { _val = _val || initialValue function setState(newVal) { _val = newVal } return [_val, setState] } } })() 출처: https://medium.com/hcleedev/web-usestate%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%95%A8%EC%A0%95-7b4825c16b9
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
저는 일전에 윈도우에서도 nodejs를 사용했었는데 지금 맥으로 넘어왔는데 계속 설치단계에서 다른 설치가 완료되기를 기다리는중이라면서 설치가 안됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
열심히 수업을 들으면서 포트폴리오도 따라서 해보는 중인 수강생입니다. 게시판 포트폴리오에서 반응형으로 바꾸는 건 수업에 없나요? (강사님이 올려주시는 포트폴리오 예시(?) 답지(?)를 적용해도 반응형은 아니더라구요) @media 쿼리로 적용하는 방법 ( emotion으로 반응형 만드는 방법)을 구글링 해보아도 적용하는 방법을 모르겠습니다ㅠ 뒤에 수업에 있는 건가요? 아니면 제가 따로 해야하는건가요? 구글링해도 쉽지가 않아서 질문 남기는거라... 자세한 답변 부탁드리겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요. 소주제 - 이모션까지 강의를 보고 복습, 퀴즈를 진행한 뒤 피그마를 참고하여 포트폴리오1 게시판을 만들었습니다. 등록하기 버튼까지 다 만들고 부족한 부분은 리뷰 강의를 본 후에 강사님 코드를 참고하여 틀린 부분들을 고치면서 보강했습니다. 그런데 코드를 참고하여 틀린 부분들을 다 고쳤다고 생각했는데 딱 두군데가 맞지 않아서 몇 시간 동안 원인을 못 찾고 있어, 문의를 드립니다. 제가 노란색으로 표시한 두 부분이 튀어나왔는데 저 부분은 몇 시간 동안 찾아보고 비교해봐도 왜 저런지를 모르겠어서 최후의 수단으로 강사님 index.js랑 emotion.js 코드를 전부 복붙해봤는데도 저 두 곳이 튀어나온 상태에서 바뀌질 않습니다. 버전 때문에 그런가 해서 버전 다시 맞추고 yarn install 해봐도 똑같습니다 ㅠㅠ (그런데 강사님 git 코드를 clone 한걸 실행하면 정상적으로 랜더링 됩니다) 강사님의 index, emotion 코드를 붙여 넣어봐도 저 상태인거 보면 코드가 아니라 어디쪽 문제일까요..?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
vscode 강의랑 맞출려고하는데 확장 어떤거 사용하셨을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
질문1 리액트에 gql 적용시 영상과다르게 아래와같이 단색으로 프로그래밍 됩니다 어떤 패키지를 적용해야 할까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요, react 도커파일 작성 및 docker run을 해줬는데요, (port 10001:10001) localhost :10001이 들어가지지 않는데,, 별도의 설정이 필요할까요?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요. 1월 21일까지 수강기간인데 제가 한번더 총체적으로 살펴보길 소망해서요. 혹시 수강기간을 연장해주실 수 있을까요? 보통 무제한 수강인줄알고 구매를 했었는데 수강기간이 제한이 있는줄 늦게 알게 되었습니다. ㅠ
미해결
파이썬 무료 강의 (활용편3) - 웹 스크래핑 (5시간)
안녕하세요 먼저 좋은 강의 해주시는 나도코딩님께 감사드립니다. 이전에 나름 정성들여 글을 작성했는데, 확인이 안돼서 다시 작성해봅니다. 제가 강의를 보고있는 2023년 1월 19일과 강의날인 2020년 8월과 네이버 항공권 인터페이스가 많이 상이하고, 셀레니움과 파이썬 버전이 달라 저의경우 아래와 같이 코드를 작성했습니다. 다른분들께 도움이 되었으면 좋겠습니다. 현재 저의 환경의 경우 python버전 3.10.7 버전이고 selenium또한 강의때 사용하신것 보다 더 높은 것으로 보입니다. 현재 제 경우와 강의내용과 상이한 부분은 아래와 같습니다. 네이버 항공권 진입시, "지금 바로 혜택 확인하기" 광고 팝업창 발생, 해당부분 get_attribute메소드를 사용해 title을 비교해, 팝업이 있다면 팝업을 삭제하는 XPATH를 확인해 해당 엘리먼트를 클릭하도록 구현 browser.find_element_by_class_name과 같이 find_element_by_~~ 메소드 사용불가 => 현재 제가 사용중인 셀레니움 버전이 상위 버전으로 보이는데, 이는 3 line과 같이 import By로 쉽게 수정 가능 find_elements_link_text 메소드 사용 불가 => 2020년대비 2023년 현재 네이버 항공권 웹페이지 인터페이스의 변화때문인지 "가는 날" 및 날짜 선택을 위해 해당 메소드 사용시 빈리스트만 반환 "가는 날"은 XPATH로 엘리먼트를 얻어와 클릭하도록 구현 원하는 날짜의 경우 class이름을 확인해 모든 날짜정보를 갖고와 원하는 날짜정보만 사용하도록 구현 (compute_date 함수 참고 부탁 드립니다.) 추가적으로, 이 경우에 1년치 달력정보를 모두 읽어와 속도가 매우 느린데 더 좋은 방법을 알고계신분은 공유 부탁드립니다. ( _ _ ) compute_date(dates, 30)[1].click() 코드를 이렇게 수정해 오는날을 2월 30일을 선택하려 했으나 3월 30일을 선택해, 코드 오류인줄 알고 디버깅해보니 2월달은 30일이 없었습니다...ㅎ 정상동작 중 입니다. 저와같이 초반에 고생하시는 분들께 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다. import time from selenium import webdriver from selenium.webdriver.common.by import By URL = "https://flight.naver.com/" def compute_date(dates, target) -> list: print("compute entire date information from current month to limit") return [date for date in dates if date.text == str(target)] browser = webdriver.Chrome() # browser.maximize_window() browser.get(URL) time.sleep(1) # remove AD popup find = browser.find_elements(By.CLASS_NAME, "anchor") for f in find: if f.get_attribute("title") == "지금 바로 혜택 확인하기": browser.find_element(By.XPATH, '//*[@id="__next"]/div/div[1]/div[9]/div/div[2]/button[1]').click() print("remove pop up") break # push 가는 날 button also delay 1 sec is necessary, if don't use this, can not read date information. browser.find_element(By.XPATH, '//*[@id="__next"]/div/div[1]/div[4]/div/div/div[2]/div[2]/button[1]').click() time.sleep(1) # read date information and push 25 day dates = browser.find_elements(By.CLASS_NAME, "sc-evZas dDVwEk num".replace(" ", ".")) compute_date(dates, 25)[0].click() # read date information and push 30 day dates = browser.find_elements(By.CLASS_NAME, "sc-evZas dDVwEk num".replace(" ", ".")) compute_date(dates, 30)[0].click() while True: pass
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
제선에서 할 수 있는 방법은 다 해본거 같은데 모르겠습니다.. config 수정 node v 18- >14 fs오류때문에 강의 진행이 안되고있습니다 ㅠ 해결방법이 무엇일까요
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground에서 api-docs가 강의에 있는 docs랑 다릅니다 같게 할 방법이 있을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ 코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강사님 모든 코드를 수정한 후 로그인하려고 하는데 아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다. 콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요. 몇개파일의 코드 같이 올려드립니다. 아래는 로그인 안되는 화면캡처본입니다. LoginForm.js import React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.js export const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.js import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;
미해결
코딩테스트 [ ALL IN ONE ]
안녕하세요! Leetcode daily temperature 문제 해설을 보다 질문이 생겨서 남깁니다! while 문으로 stack을 돌면서 대소 비교를 하는데, 여기서의 시간복잡도가 O(n)이 될 걱정은 안해도 되나요? 어렴풋이 생각하기에, stack에 temperatures의 원소가 들어가기 때문에 n개의 원소가 들어갈 것이고, for문으로 길이가 n인 temperatures를 돌면 결과적으로 worst case로 O(n^2)이 될 수도 있지 않나 ... 라는 생각이 들었습니다. 시간복잡도 개념이 아직 부족해서 헷갈리는 것 같은데 제가 어떤 부분을 간과했을까요?
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
안녕하세요 선생님 강의자료 부탁드립니다 b_9108@naver.com 입니다 감사합니다
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 넷플릭스 실습을 하면서 iframe을 사용해 유튜브에서 동영상이 나오게 하는거 까지는 완료가 되었습니다. 그런데 재생버튼을 누르고 영상이 시작되면 그림처럼 흐릿하게 나오는데 왜 그런걸까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
[text, setText]와 onChangeText를 만들어놓은 훅 useInput을 사용해서 코딩해도 되지 않나요? 그렇게 하지 않은 이유가 긍금합니다!
