173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
docker-compose up -d --build 후 마이그레이션 하는 과정에서 makemigrations 적용이 되지 않아서 질문 올려드립니다. 문제가 뭔지 열심히 찾아봐도 도통 뭑가 문제인지 모르겠습니다 github 주소는 여기있습니다
해결됨
모던 자바스크립트 딥다이브 스터디
안녕하세요. 모던 자바스크립트를 읽다가 책이 빠르게 굵직한 부분을 훑고 싶어 강사님의 저서 '코어 자바스크립트'를 읽던 중 질문이 생겨 질문드립니다. 먼저 강의에 관련된 질문이 아닌 점 죄송합니다. 클로저, 135쪽, 예제 5-14, 부분 적용 함수 구현(1) const partial = function () { // 01 const originalPartialArgs = arguments ; // 02 const func = originalPartialArgs [ 0 ]; if ( typeof func !== "function" ) { throw new Error ( "It's not a function." ); } return function () { // 07 console . log ( arguments ); const partialArgs = Array . prototype . slice . call ( originalPartialArgs , 1 ); const restArgs = Array . prototype . slice . call ( arguments ); // 09 return func . apply ( this , partialArgs . concat ( restArgs )); }; }; 1. 9번째 줄의 arguments는 7번째 줄에서 return되는 익명함수의 렉시컬 환경에서 새로 생성된 argument이기 때문에 partial함수의 렉시컬 환경의 arguments(2번째 줄)과 다르다. 2. 7번째 줄에서 익명함수 선언 시 9번째 줄의 arguments는 익명함수의 렉시컬 환경에 수집되어 빈 객체 상태로 익명함수가 return된다.(실행 컨텍스트가 활성화 된느 시점이 아닌 선언 시점에 정보가 수집된다.) 3. 후에 21번째 줄에서 익명함수를 할당받은 addPartial 함수가 22번째 줄에서 호출 될때 7번째 줄의 arguments가 arguments object [6,7,8,9,10]로 재할당 된다. 4. 8번째 줄의 originalPartialArgs가 클로저를 이용한 것이다. 처음에 7번째 줄의 익명함수 속 arguments가 상위 스코프의 arguments(2번째 줄)을 참조한다고 생각했고 결과가 달라 고민한 결과 위와 같이 결론을 내렸습니다. 제가 잘 이해한 것인지 확인받고싶어 질문 드렸습니다. 다시한번 강의와 무관한 질문 드려 죄송합니다.
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
안녕하세요? page를 처음 렌더링하고 MsgItem의 수정을 클릭하여 startEdit을 실행하면 setEditingId(x.id)를 실행시키는데요. 바로 console.log(x.id)와 console.log(editingId)를 찍어보면 x.id는 잘 나오는데 editingId의 경우 처음 null 이 오고 계속 전값들이 찍혀서요(계속 클릭한 전 x값들이 editingID에 찍힘). setEditingId 함수로 editingID 값 변경까지 시간 딜레이가 있어서 일까요? 작동은 잘 합니다만, 공부하느라 console.log를 찍어보다 의문점이 들어서요!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
App.js 에서 react-router-dom v6 버전에 맞게 문법을 Switch 대신 Routes 로 바꾸는 부분과 component 대신 element 로 바꾸시고 꼼수(?)로 Auth로 감싼 컴포넌트를 새로 정의해서 넣으시면 작동은 됩니다..
해결됨
[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
조현영님 강좌를 보던 중 express와 미들웨어 관련된 강좌를 보고 express를 사용해 서버를 만들던 도중에 막히는 부분이 있어서 질문해봅니다. (단순 에러 해결 질문은 아닙니다.) const axios = require ( " axios " ) ; const express = require ( " express " ) ; const path = require ( " path " ) ; const morgan = require ( " morgan " ) ; const app = express () ; const hostName = " 127.0.0.1 " ; const port = process . env . PORT || 5147 ; require ( " ./productServer1 " ) ; app . use ( morgan ( " dev " )) ; function getInfoWithAxios ( key ) { if (key === " 1 " ) { res . sendFile (path . join (__dirname , " ./productOne.html " )) ; } else if (key === " 2 " ) { res . sendFile (path . join (__dirname , " ./productTwo.html " )) ; } else { res . sendFile (path . join (__dirname , " ./productThree.html " )) ; } } app . set ( " func " , getInfoWithAxios ()) ; app . get ( " / " , ( req , res ) => { res . sendFile (path . join (__dirname , " ./expressAPI.html " )) ; } ) ; app . use ( " /product/:addr " , ( req , res , next ) => { console . log ( ` you connect on ${ req . params . addr } } ` ) ; next () ; } ) ; app . get ( " /product " , ( req , res ) => { res . write ( " <h1>Here is product information</h1> " ) ; res . send () ; } ) ; app . get ( " /product/product1 " , async ( req , res ) => { try { const result = await axios . get ( " http://127.0.0.1:3257 " ) ; const productID = String (result . data[ 0 ] . id) ; app . get ( " func " ) ; console . log ( " Request Type: " , req . method) ; } catch (err) { console . error (err) ; } } ) ; app . get ( " /product/product2 " , async ( req , res ) => { try { const result = await axios . get ( " http://127.0.0.1:3257 " ) ; const productID = String (result . data[ 1 ] . id) ; app . get ( " func " ) ; console . log ( " Request Type: " , req . method) ; } catch (err) { console . error (err) ; } } ) ; app . get ( " /product/product3 " , async ( req , res ) => { try { const result = await axios . get ( " http://127.0.0.1:3257 " ) ; const productID = String (result . data[ 2 ] . id) ; app . get ( " func " ) ; console . log ( " Request Type: " , req . method) ; } catch (err) { console . error (err) ; } } ) ; app . use ( ( err , req , res , next ) => { console . error (err) ; res . status ( 401 ) . send (err . message) ; } ) ; app . listen (port , () => { console . log ( ` server is running at http:// ${ hostName } : ${ port } ` ) ; } ) ; 위에 코드를 실행시키면 우선 코드 본문의 내용이 실행됨과 동시에 require()로 productServer1이라는 express를 사용한 상품 데이터 서버가 실행됩니다. (localhost를 사용하고 상품 데이터 서버 포트는 3257)입니다. /product/product(1~3)으로 get메서드를 보내면 같이 실행되는 상품 데이터 서버에서 id값을 받아오고 id값을 getInfoWithAxios(key)함수에 넣어서 html페이지를 id값에 맞게 상품별로 분기하게 됩니다. 이떄 문제는 getInfoWithAxios()함수에 res객체가 없어서 id에 맞게 html페이지를 분기 할 수가 없다는 것입니다. 미들웨어로 처리를 하고 싶지만 방법을 모르겠어서 질문해봅니다. 그리고 app.get() 함수에 있는 각각의 productID를 어떻게 하면 매개변수로 대입 할 수 있는지도 궁금합니다. 요약하자면 함수를 미들웨어로 만들려면 어떻게 작성해야 하고 만든 함수를 접근할때 매개변수는 어떻게 대입할수 있을까요? 조현영님의 이해를 돕기 위해서 전체 프로젝트에 대한 깃 주소를 남겨드리겠습니다. https://github.com/shere1765/node_server/tree/main/small_project 전체 프로젝트에 있는 expressAPI는 문제없이 잘 실행될겁니다. 하지만 제가 원하는 코드는 아닙니다. 그 밖에 문제점이 있다면 피드백 부탁드립니다.
미해결
함수형 프로그래밍과 JavaScript ES6+
( res . push (a), res). length; 이부분은 어떻게 평가되는건가요..?? 같은 질문하신분의 답변을 봐도 이해가 안됩니다 ㅠ.
미해결
웹 게임을 만들며 배우는 React
강의에서는 es6 방식을 사용하지만, common js도 알아두어야 할 것 같아서, 혼자 common js를 사용해보던 도중 문제가 발생하여 질문 드립니다! 문제 요약: common js 방식으로 내보내기 한 후, 같은 경로 상의 다른 파일에서 require를 했을 때, 빈객체가 required됩니다. 세부사항 1. 상황 TicTacToe.jsx에서 CLICK_CELL이라는 상수를 내보내어, Td.jsx라는 동일 경로의 다른 파일에서 그 상수를 받아 오려 하는데, 빈 객체가 required 되어 CLICK_CELL의 값이 undefined로 나타납니다. 해당 상수는 Td.jsx가 아닌 다른 경로에 있는 파일에서는 정상적으로 required됩니다! 2. 코드 # 파일 구조 # TicTacToe.jsx # Td.jsx console.log 결과 3. 추측 common js를 통해 같은 경로 상의 파일에서 모듈을 받아오는 경우에 문제가 생기는 것 같습니다. 다만 정확히 어떤 문제인지, 또 어떻게 해결할 수 있는지 해결 방법을 끝내 찾지 못해 질문 드립니다. *깃헙 주소: https://github.com/Parkhanyoung/React-zerocho-basic 항상 좋은 강의 감사드립니다! 덕분에 정말 즐겁게 공부하고 있습니다 ㅎㅎ
미해결
실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
처음 설계하는게 어렵지 기능구현은 쉬운 것 같은데 스케폴딩 하는 부분에서 머리 터질 것 같네요. 그래도 바닐라 자바스크립트 부분은 신경써야 하겠죠?
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
무한스크롤 구현시 < div ref ={ fetchMoreEl } / > 이부분이 화면스크롤시 제대로 감지가 안되는 건지 useEffect 에서 intersecting 이 계속 false 더군요 제가 해결한 방법은 < div ref ={ fetchMoreEl } style ={{ border: ' 1px solid white ' }} ></ div > 이렇게 입력해서 정상작동하는 것을 확인했습니다. 비슷한 문제 발생시 참고용~
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
이렇게 적으면 v6에서 작동합니다. 앞에 분들이 여럿 글을 적어 주셨지만 정리된 게 없는 것 같아서 이렇게 올립니다. 공식문서에 나와있지만 영어가 어려우신 분들이나 처음 공부하시는 분들은 이거 참고 하시면 될 겁니다. 그리고 Link부분은 아직 안 나왔는데 적혀있어서, 오류떠서 주석 처리 했습니다. ```js import { BrowserRouter , Route , Routes , //Link } from "react-router-dom" ; import LandingPage from './components/views/LandingPage/LandingPage' import LoginPage from './components/views/LoginPage/LoginPage' import RegisterPage from './components/views/RegisterPage/RegisterPage' function App () { return ( < BrowserRouter > < Routes > < Route exact path = "/" element = { < LandingPage /> } /> < Route exact path = "/login" element = { < LoginPage /> } /> < Route exact path = "/register" element = { < RegisterPage /> } /> </ Routes > </ BrowserRouter > ); }
해결됨
함수형 프로그래밍과 JavaScript ES6+
`for(const i of infinity(1)) log(i)`를 하게되면 무한히 값이 생성되서 브라우저가 멈춰버리는데요. odds안에 저렇게 무한히 생성되는 아이를 for문에 조건문으로 적어주었을때 이미 값은 내부적으로 다 만들어져있는 상태인가요?
미해결
따라하며 배우는 리액트 테스트 [2023.11 업데이트]
너무 기초적인 질문인 것 같아 걱정이지만 질문드립니다~! 1. jest와 @testing-library/jest-dom는 어떤 차이가 있고 각각의 역할이 궁금합니다. 2. @testing-library와 함께 사용하는 이유와 jest만 따로 사용하지는 않는 이유가 궁금합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 포트폴리오를 nextjs로 새로만들면서 작업중인데 라우트 이동 및 새로고침시에도 각 컴포넌트별 state를 유지하는 효율적인 방법을 좀 알고싶습니다. url : https://dv-node-portfolio.herokuapp.com/ git : https://github.com/dvisign/new-next-portfolio 전에 리액트로 할때는 useHistory를 이용한 커스텀 훅스 route state에 저장하였는데 nextjs에서는 사용할수가 없어서 useRouer로 저장이 가능한가 확인해보았는데 안되더라구요 그래서 다음으로 알아본것이 redux-persist 라이브러리였는데 리뉴얼된 강좌에서 ssr때문에 HYDRATE 액션때문에 사용은 해보지 않았고 리액트로 redux-persist 라이브러리를 사용했을때 로컬스토리지에 담는것같아 이용하지 않았습니다(개인적으로 localstorage를 신뢰하지 않는 개인적 성향때문에 그렇습니다.) 예를들어서 사이드 네비게이션이 열려있는것을 닫았다가 다른 라우트로 이동했을때 다시 열려있는 현상입니다. 스크린샷을 첨부합니다. 부단 이 부분 뿐만 아니라 나중에 더 만들다보면 이런 state유지 할것들이 더 많아질텐데 어떻게 유지 시키는것이 가장 효율적인 방법일까요?
해결됨
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
안녕하세요! 저도 스크립트에서 loop(); 만 실행하면 스크롤 하게되면 강아지있는 사진이 붕 뜨는데 뭐가 문제일까요ㅠㅠ 혹시 코드 봐주실수 있나요!! let x = 0 ; let y = 0 ; let mx = 0 ; let my = 0 ; let speed = 0.03 ; let scrollTop = 0 ; let parallax_0 , parallax_1 , parallax_2 , parallax_3 , parallax_4 , parallax_5 , parallax_6 ; window . onload = function () { progressBar = document . getElementsByClassName ( "progressBar" )[ 0 ]; parallax_0 = document . getElementById ( "parallax_0" ); parallax_1 = document . getElementById ( "parallax_1" ); parallax_2 = document . getElementById ( "parallax_2" ); parallax_3 = document . getElementById ( "parallax_3" ); parallax_4 = document . getElementById ( "parallax_4" ); parallax_5 = document . getElementById ( "parallax_5" ); parallax_6 = document . getElementById ( "parallax_6" ); window . addEventListener ( 'resize' , stageResize , false ); window . addEventListener ( 'mousemove' , mouseMove , false ); window . addEventListener ( 'scroll' , scrollFunc , false ); stageResize (); loop (); } function scrollFunc ( e ) { scrollTop = document . documentElement . scrollTop ; let per = Math . ceil ( scrollTop / ( _documentHum - _windowHNum ) * 100 ); progressBar . style . width = per + '%' ; parallax_0 . style . transform = "translate3d(0px," + scrollTop * .03 + "px, 0px)" ; parallax_1 . style . transform = "translate3d(0px," + - scrollTop * .03 + "px, 0px)" ; parallax_2 . style . transform = "translate3d(0px," + - scrollTop * .12 + "px, 0px)" ; parallax_3 . style . transform = "translate3d(0px," + - scrollTop * .16 + "px, 0px)" ; parallax_4 . style . transform = "translate3d(0px," + - scrollTop * .22 + "px, 0px)" ; parallax_5 . style . transform = "translate3d(0px," + - scrollTop * .25 + "px, 0px)" ; } function stageResize (){ _documentHum = document . body . offsetHeight ; _windowHNum = window . outerHeight ; } function loop (){ mx += ( x - mx ) * speed ; my += ( y - my ) * speed ; parallax_4 . style . transform = "translate3d(" + mx / 140 + "px ," + - scrollTop * 22 + "px, 0px)" ; parallax_5 . style . transform = "scale(1.1) translate(" + mx / 50 + "px," + - scrollTop * 25 + "px)" ; parallax_6 . style . transform = "scale(1.2) translate(" + - mx / 20 + "px," + - my / 20 + "px)" ; window . requestAnimationFrame ( loop ); } function mouseMove ( e ){ x = ( e . clientX - window . innerWidth / 2 ); y = ( e . clientY - window . innerHeight / 2 ); }
해결됨
실전 리액트 프로그래밍
React.memo 가 props 비교를 통해 리렌더링을 막아줄 수 있는 유용한 기능이라는 것을 알게되었는데요, 그렇다면 리액트에서는 왜 React.memo 적용을 모든 컴포넌트에 default로 제공하지 않는지 궁금합니다. 제가 구글링을 해본 결과 2년 전에 Dan Abramov가 트위터에 이런 글을 올렸더라구요.. ``` Ask yourself: Why don’t you put Lodash memoize() around every function? Wouldn’t that make all functions faster? Do we need a benchmark for this? Why not? ``` 저는 React.memo가 특정 컴포넌트의 이전 상태의 props를 기억하고 있다가 새로 렌더되어야할 상황에 전달된 props와의 비교를 통해 선택적으로 렌더링을 결정하는것이라고 생각했는데, 저 트위터를 보면 마치 React.memo가 컴포넌트 전체를 메모리 어딘가에 기억해야하고 이 작업이 오히려 성능에 악영향을 줄 수 있다는 뉘앙스로 들렸습니다. 횡설수설 서론이 길어진 것 같아서 죄송합니다. React.memo를 왜 모든 컴포넌트에 적용하면 안좋은지 궁금합니다!
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님! 그라바타 적용하다가 data.email 이 새로고침 시에 오류가 나서 질문 드립니다.!!! 먼저, 오류나 경고 메시지들 보고 라우터 문제인가 싶어서 (라우터 v6 사용 중입니다. ) 라우터 관련해서만 구글링 하다가, data.email가 아닌 data만 사용하면 새로고침 시에도 문제 없다는 걸 알았는데요.. data를 콘솔로 찍어보니 두번 출력이 되면서, 첫번째는 undefined로 나오고 두번째는 정상으로 나오는데data가 undefinde일 때 랜더링이 되서 그런 건가?? 하는 생각이 들긴했는데 이게 왜 저렇게 되는 건지 navigate로 페이지 이동되면서 저렇게 되는 건지 data가 언디파인드 인데도 login으로 페이지도 안넘어가는 상황입니다 에러 원인에 대한 판단이 잘 안서서 해결을 못하고 있습니다ㅠㅠ 혹시 해결 방향을 잡아주실 수 있을까요??? < 컴포넌트에서 data.email이 사용될 때 새로고침 > < data만 사용할 때 새로고침 > 제 코드 입니다! import axios from "axios" ; import React , { FC , useCallback , useEffect } from "react" ; import { useNavigate } from "react-router" ; import useSWR from "swr" ; import fetcher from "@src/utils/fetcher" ; import { Channels , Chats , Header , MenuScroll , ProfileImg , RightMenu , WorkspaceName , Workspaces , WorkspaceWrapper , } from "./style" ; import gravatar from "gravatar" ; const Workspace : FC = ({ children }) => { const { data , error , mutate } = useSWR ( "http://localhost:3095/api/users" , fetcher , { dedupingInterval : 100000 , loadingTimeout : 900000 , } ); const onLogout = useCallback (() => { axios . post ( "http://localhost:3095/api/users/logout" , null , { withCredentials : true , }) . then (() => mutate ( false , false )); }, []); const navigate = useNavigate (); if ( ! data || data === undefined ) { navigate ( "/login" ); } console . log ( "@@@data" , data ); return ( <> < Header > < RightMenu > < span > { /* <ProfileImg src={gravatar.url(data, { s: "28px", d: "retro" })} alt={data} ></ProfileImg> */ } </ span > </ RightMenu > </ Header > < button onClick ={ onLogout } > 로그아웃 </ button > < WorkspaceWrapper > < Workspaces > test </ Workspaces > < Channels > < WorkspaceName > Clone </ WorkspaceName > < MenuScroll > MenuScroll </ MenuScroll > </ Channels > < Chats > Chats </ Chats > </ WorkspaceWrapper > { children } </> ); }; export default Workspace ;
해결됨
모던 자바스크립트 딥다이브 스터디
안녕하세요! 강의 정말 잘 보고 있습니다! 덕분에 두꺼운 책이 쓱쓱 넘어가고 있어요! 단톡방이라고 언급을 하시는거 같은데 혹시 어떤 단톡방인가요? 혹시 저도 들어갈 수 있을까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
댓글 등록하고 버튼 눌렀을때 User 값이 안들어오는 것처럼 에러가 뜨는데 그 상태에서 바로 새로고침하면 값이 들어가있네요 분명 통신과정에서 올바르게 include한 전체 값을 들고오는게 맞는데 뭐가 문제인걸까요....?
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요? 더보기 버튼을 클릭하면 아래쪽으로 20개씩 영화 리스트가 쭉 뻗어나가는 기능은 정상적으로 작동합니다. 그런데 더보기를 누를 때마다 저런 경고메세지가 나옵니다. 다른분들 글을 보고 참고해서 MainMovieImage에 초기값으로 null을 넣어주었고, 선생님 코드와 비교해봐도 다른점이 없습니다. 그리고 저는 웹 페이지를 처음 로드했을 때는 아무런 에러가 없다가, loadMore 버튼만 누르면 이러는데..어떻게 해결해야 할까요 ㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 완강 후 덕분에 3군데에서 면접을 보게되어서 복습겸해서 작게나마 오픈api 활용해 영화정보 보여주는 프로젝트를 진행중 입니다. redux 셋팅을 마치고 메인 페이지에서 아래처럼 dispatch를 하고있는데 여기는 사가입니다. 이렇게요.. 어느부분이 문제인지 찾기 위해 dispatch를 하지 않고 그냥 메인페이지에서 axios호출을 하면 정상작동을 합니다. effect 콘솔도 한번만 찍히구요.. 그렇게 4시간정도 찾아보면서 수정을하다가 그럼 결론은 saga의 문제구나를 깨닫긴했는데 도대체 어디가 문제인지 알 수가 없네용 강의 프로젝트가 아니긴 하지만 한번만 확인해 주실 수 있을까용?? 전체코드가 필요할 수 도 있을 것 같아서 깃헙주소도 남겨 놓겠습니다! 바쁘실테지만,, 미리 감사합니다! 취업후기도 꼭 남길게요😄 https://github.com/psw0962/movie-reviews
