172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 강의 잘 듣고 있었는데요 저도 윗 분들 처럼 일기 작성 후에 네비게이트로 페이지 이동까지는 되는데 작성한게 업데이트가 안됩니다 ㅠㅠ https://codesandbox.io/s/blazing-sun-kyl8yt?file=/src/components/EmotionItem.js
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
3-4 브랜치로 체크아웃을 하여 테스트해봐도 source의 srcset 속성에 {props.webp + 's'}를 줬을 때 이미지가 엑박이 뜹니다. previousSibling.srcset = previousSibling.dataset.srcset; 위 소스 한 줄을 지울 때는 정상동작 되는데 이유가 있을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
부모컴포넌트에서 리덕스를 사용하지않고 props로 값을 전달할때에 자식 컴포넌트에서 props.state를 사용하여 앞에 프롭스를 항상붙여 써도 동작하는경우가있고 프롭스 없이 state를 바로사용할수있는경우가 있는데 어떤 차이가있고 어떤걸 사용해야하는지 궁금합니다 만약 프롭스를 붙이지않고 정상적으로 동작하여도 props. 형태를 매번 사용하는것이 좋을까요? 아래는 예시 상황입니다 // 부모에게서 randomstate 를 전달받아 바로 사용하는 자식컴포넌트 const Child1 = ( randomstate ) => { console.log(randomstate); return 자식 컴포넌트 ; }; ... // props를 매번 이용하여 사용하는 컴포넌트 const Child2 = ( props, randomstate ) => { console.log(props.randomstate); return 자식 컴포넌트 ; }; ...
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 해당 강의를 다 마치고, 사진과 같이 onCreate 함수 내부에서 data를 콘솔로 출력해보니 data 값을 읽어오지 못하는데 그 이유가 뭘까요?? data.length와 같은 작업을 진행하고 싶은데 어떻게 접근해야 할지 모르겠어서 질문 남깁니다 !
해결됨
PHP 7+ 프로그래밍: 객체지향
안녕하세요 이번에 강의를 다 듣고 또 게시판도 여러번 수행해서 정말 잘 되는것을 확인을 하였습니다 하지만 이번에 react와 함께 연동을 해서 view는 react를 사용하고 또 api 설계는 php로 한번 해보자 하고 도전을 해 보았는데요 laravel에서는 굳이 cors를 지정하지 않아도 잘 연동이 되더라고요 하지만 이번 프로젝트는 어떻게 react를 사용해야하지.. 라고 막혔습니다 제가 생각했던 아이디어는 -frontend 폴더 -backend 폴더 를 따로 두고 proxy를 두어서 php 쪽에서 그냥 header로 cors를 넘겨주면 되지 않을까.. 라고 생각하고 들었는데요 https://github.com/DevelopJKong/php_react_project 일단 문제점은.. 제가 아직 실력이 부족해서 npm 으로 프로그램을 돌리는것이 아니기 때문에 되는게 아닐까? 라는 생각이 들었습니다 그래서 이번에는 상위 폴더에서 돌리는것이 아닌 따로따로서버를 켜서 해놨는데요 그래도.. 안되더라고요 혹시나 싶어서 CorsMiddleware를 만들어서 아래와 같이 만들어보고 post 로 보낼때 Route::add(x,y,[CorsMiddleware::class]) 도 입력해봤는데요 코드는 아래와 같습니다 <?php namespace App\Middlewares; use Eclair\Routing\Middleware; class CorsMiddleware extends Middleware { public static function process() { header("Content-type: application/x-javascript;charset=utf-8"); Header("Access-Control-Allow-Origin: *"); Header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); Header("Access-Control-Allow-Headers:orgin, x-requested-with"); } } <?php use Eclair\Routing\Route; use App\Middlewares\RequireMiddleware; use App\Middlewares\CsrfTokenMiddleware; use App\Middlewares\CorsMiddleware; Route::add('post', '/api/auth', '\App\Controllers\AuthController::login', [CorsMiddleware::class] ); 조금 조언을 얻고자 이렇게 글을 쓰게 되었습니다 laravel에서는 그래도 해봤는데 laravel에서는 되더라고요 근데 왜이 프로젝트에서는 안될까? 라는 생각이 들었습니다 감사합니다 :)
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
질문있습니다. 소켓프로그래밍이라 하면 어떤것을 제작하는 것을 의미하나요 어렴풋이 서버 프로그래밍을 얘기하는 것 같은데.... 그리고 서버 어플리케이션을 만드는 것으 이야기하는지 서버의 운영체제를 만드는 것을 이야기하는지 잘 모르겠습니다. 도움말씀 부탁드려요..
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요! 강의 잘 보고 있는 학생입니다! 여러모로 영상강의에 힘입어 도움을 많이 받게되어 항상 감사합니다! 이번 강의에서 의문점이 생겻는데, 그랩마켓 페이지에서 각 상품마다 id가 부여되어 새로운 페이지로 넘어 가야 하는상황인데, 클릭을하면 id는 가지게 되지만 바로 화면이 바뀌질 않아 당황하고 있습니다.. , 어디가 문제인지 모르겟습니다만.. 혹시 봐주실수 있으실까요? ㅜㅜ
미해결
따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
npm ERR! code 1 npm ERR! path C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\지은\AppData\Roaming\nvm\v16.15.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@16.15.0 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@16.15.0 (node-v93 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON npm ERR! gyp ERR! find Python checking if "python3" can be used npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python" can be used npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python36-32\python.exe" could not be run npm ERR! C:\Users\지은\AppData\Local\npm-cache\_logs\2022-05-25T05_57_34_949Z-debug-0.lognpm ERR! code 1 npm ERR! path C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\지은\AppData\Roaming\nvm\v16.15.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@16.15.0 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@16.15.0 (node-v93 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON npm ERR! gyp ERR! find Python checking if "python3" can be used npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python" can be used npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python36-32\python.exe" could not be run npm ERR! C:\Users\지은\AppData\Local\npm-cache\_logs\2022-05-25T05_57_34_949Z-debug-0.log 루트 디렉토리에서 npm install 오류가 계속뜹니다ㅠ 버전의 문제인가요...? 이 강의 꼭 듣고싶은데 해결방법이 있을까요..?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
배포했는데 회원가입도 되고, 로그인도 되는데, 쿠키가 안넘어갑니다. 개발모드일때는 쿠키가 넘어갔는데, 어디서 문제인지 모르겠습니다. 아이디 부분만 닉네임으로 바꿨습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님! 현재 백엔드 파트 게시물 좋아요 기능을 구현하다가 갑자기 회원가입과 로그인 기능에서 오류가 떠서 질문드립니다. 회원가입을 하게 되면, TypeError: Cannot read properties of undefined (reading 'findOne') 라는 오류가 발생하면서 데이터베이스에 데이터가 전송되지 않고 있습니다. 제가 생각하기에는 User모델에 문제가 발생하여 데이터가 들어가지 않아 findOne이 에러가 뜨는 것 같은데,,, 문제가 된다고 생각하는 코드 올리겠습니다. models/index.js const Sequelize = require("sequelize"); const env = process.env.NODE_ENV || "development"; const config = require("../config/config")[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config, ); db.Comment = require("./comment")(sequelize, Sequelize); db.Hashtag = require("./hashtag")(sequelize, Sequelize); db.Post = require("./post")(sequelize, Sequelize); db.User = require("./user")(sequelize, Sequelize); db.Image = require("./image")(sequelize, Sequelize); Object.keys(db).forEach((modelName) => { if (db[modelName].associate) { db[modelName].associate(db); } }); // 반복문을 이용하여 각 데이터베이스의 관계를 설정해줌. db.sequelize = sequelize; db.Sequelize = Sequelize; module.exports = db; models/user.js const DataTypes = require("sequelize"); const { Model } = DataTypes; module.exports = (sequelize, DataTypes) => { const User = sequelize.define( "User", // id가 기본적으로 들어가있기 때문에 만들지 않아도 됨. { email: { type: DataTypes.STRING(30), allowNull: false, //필수 unique: true, //고유한 값 }, nickname: { type: DataTypes.STRING(30), allowNull: false, //필수}, }, password: { type: DataTypes.STRING(100), allowNull: false, //필수}, }, }, { charset: "utf8", collate: "utf8_general_ci", // 한글 저장 }, ); User.associate = (db) => { db.User.hasMany(db.Post); db.User.hasMany(db.Comment); db.User.belongsToMany(db.Post, { through: "Like", as: "Liked" }); db.User.belongsToMany(db.User, { through: "Follow", as: "Followers", foreignKey: "FollowingId", }); db.User.belongsToMany(db.User, { through: "Follow", as: "Followings", foreignKey: "FollowerId", }); }; return User; }; routes/user.js const express = require("express"); const bcrypt = require("bcrypt"); const passport = require("passport"); const { User, Post } = require("../models"); const { isLoggedIn, isNotLoggedIn } = require("./middlewares"); const router = express.Router(); router.get("/", async (req, res, next) => { // GET /user try { if (req.user) { const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, attributes: { exclude: ["password"], }, include: [ { model: Post, attributes: ["id"], }, { model: User, as: "Followings", attributes: ["id"], }, { model: User, as: "Followers", attributes: ["id"], }, ], }); res.status(200).json(fullUserWithoutPassword); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } }); router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { if (err) { console.error(err); return next(err); } if (info) { return res.status(401).send(info.reason); } return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ["password"], }, include: [ { model: Post, attributes: ["id"], }, { model: User, as: "Followings", attributes: ["id"], }, { model: User, as: "Followers", attributes: ["id"], }, ], }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); router.post("/", isNotLoggedIn, async (req, res, next) => { // async await을 이용하여 비동기 문제 해결 try { const exUser = await User.findOne({ where: { email: req.body.email, }, }); // 같은 이메일을 사용하고 있는 사람이 있는지 if (exUser) { return res.status(403).send("이미 사용중인 아이디입니다."); } // return이 없으면 아래있는 res도 실행이 됨. const hashedPassword = await bcrypt.hash(req.body.password, 13); await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.send("ok"); } catch (error) { console.error(error); next(error); } }); //post /user/ router.post("/user/logout", isLoggedIn, (req, res, next) => { req.logout(); req.session.destroy(); res.send("ok"); }); module.exports = router; 오류 사진
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기본적인 CSS를 추가하실 때 갑자기 <select> 옆에 "오늘의 감정점수 : " 가 추가되어서 제가 놓쳤나 싶었네요 ㅎㅎ.. 다른 분들도 헷갈리시지 않게 강의 밑 소스코드를 참고하시거나 아래 코드를 넣어주시면 편하게 하실듯합니다~ < div > < span > 오늘의 감정점수 : </ span > < select name = " emotion " value = { state . emotion } onChange = { handleChangeState } > < option value = { 1 } > 1 </ option > < option value = { 2 } > 2 </ option > < option value = { 3 } > 3 </ option > < option value = { 4 } > 4 </ option > < option value = { 5 } > 5 </ option > </ select > </ div >
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하십니까 제로초님 슬랙 클론코딩 강의를 보고 실시간 챗을 구현해보고 있습니다. useSwrInfinite를 사용하여 구현하고 있고, 요청주기에 대해 궁금한점이 생겼습니다. useSwr은 DedupingInterval을 사용해서 설정한 주기 동안은 탭 변환이 일어나도 재요청을 보내지않고 캐시된 값을 그대로 사용하는 것으로 이해하고 있습니다. 그런데 useSwrInfinite의 요청 주기를 잘 모르겠어서 공식문서를 읽어보니 initialSize = 1 : 초기에 로드해야 하는 페이지의 수 revalidateAll = false : 항상 모든 페이지의 갱신 시도 revalidateFirstPage = true : always try to revalidate the first page persistSize = false : 첫 페이지의 키가 변경될 때, 페이지 크기를 1( initialSize 가 설정된 경우 initialSize )로 초기화하지 않음 챗을 쳐서 실시간으로 채팅이 화면에 그려질 수 있는이유는 초기에 initialSize = 1 로 설정되어 있어서 이차원 배열의 첫번째 배열이 갱신되어서 그런 것일까요? 챗을 칠때마다 갱신된 데이터를 get 할 수 있어서 좋지만 서버에 얼마만큼(어느주기로) 요청을 보내는지 알고 싶습니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
만든걸로 이것저것 해보다가 알게되었는데요. 21번째 아이템을 삭제한 후 다시 아이템을 추가하면 22번째 아이템이라고 뜹니다. chapt 15 소스코드는 아예 콘솔에 출력이 안되서 chapt14 소스코드에서 해보니 제목과 같은 현상이 발생해서요. 21번째 아이템을 삭제한후 다시 아이템을 추가하면 21번째 아이템이어야 되는거 아닌가요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
화면에 새로고침 할때마다 콘솔 찍은 부분들이 2개씩 항상 찍히던데.. 뭔 이유인지를 모르겠네요..
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
The media could not be loaded, either because the server or network failed or because the format is not supported. 이런 에러가 나오는데 어떻게 해야하나요? 앞부분 이미 들었는데 이러네요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
diaryList[0].filter 이렇게 하시면 콘솔창에서 필터가 되어 있는 모습을 볼 수 있습니다. 한 30분동안 왜 필터가 안 되는지 forEach로 찍어봤는데 배열 하나 안에 객체가 여러개 있는거기 때문에 저렇게 해야하는거 같긴 한데, 또 강사님은 그냥 하셔도 출력이 되시네요. 무튼 저는 위의 방식으로 해결했습니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
강사님 강의 내용과 똑같은 코드를 작성했으나 오류가 계속 생성됬는데 어찌저찌 풀어서 참고하실 분들을 위해 남깁니다 제가 오류가 발생한 상황(hoc/auth.js) [강사님과 같은 코드를 작성 후 서버/클라이언트 실행 시 빈 화면이 나옴] (오류 내용 : unctions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.) - 해결책 : AuthenticationCheck 리턴 시 함수로 리턴하는 것이 아닌 JSX 컴포넌트로 리턴하라고 합니다 (참고 : https://www.inflearn.com/questions/357383) - 실제로 auth.js의 마지막 부분인 을 return AuthenticationCheck -> return < AuthenticationCheck />로 변경 시 정상적으로 작동함을 확인할 수 있었습니다. [hoc/auth.js 코드] import React, { useEffect } from "react"; import { useDispatch } from "react-redux"; import { auth } from "../_action/user_action"; import { useNavigate } from "react-router-dom"; export default function (SpecificComponent, option, adminRoute = null) { //option : null = anyone, true = login user only, false = logout user only function AuthenticationCheck(props) { const dispatch = useDispatch(); const navigate = useNavigate(); useEffect(() => { dispatch(auth()).then((response) => { console.log("auth? ", response); if (!response.payload.isAuth) { // login yet if (option) { navigate("/login"); } } else { // login if (adminRoute && !response.payload.isAdmin) { navigate("/"); } else { if (option === false) { navigate("/"); } } } }); }, []); return ( <SpecificComponent /> // component return이 없으면 React 실행이 안됨. ); } return <AuthenticationCheck />; }
해결됨
Slack 클론 코딩[실시간 채팅 with React]
const {data, error, revalidate}=useSWR(주소, fetcher) -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등 나눠서 사용할 수 있을까요? 그리고 프로젝트를 함께 진행하고 있는 친구가 회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데 당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.
미해결
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
모든 과정을 세번씩 돌려보면서 따라했는데도 안되네요... queryClient는 위와 같이구성하였고 BASE_URL은 '/'으로 설정하였습니다. 위와같은 오류가 발생합니다 어떻게 해결하여야할까요? https://github.com/shinwonse/shopping-mall 깃 주소 첨부드립니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 10분28초쯤 일기 수정 중에 useEffect에서 isEdit과 originData를 배열에 넣어주는데요 isEdit과 originData는 바뀌지 않는 값인데 추가하는 이유가 있을까요?
