176만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! DiaryList.jsx 파일에서 option이나 Button 태그의 옵션에 보면 value={"latest"}나 type={"POSITIVE"} 이런 식으로 { } 를 사용하셨던데 없이 해도 출력이 잘 되는데 꼭 써줘야 하는지 궁금합니다.
윤유정
2024-05-14T04:53:33.735Z
댓글 1
좋아요 0
조회수 257
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
한 30분동안 고생했는데.. 후.. 다른분들은 고생하지 마시길 바라며.. vercel : 이 시스템에서 스크립트를 실행할 수 없으므로 위치 줄:1 문자:1 + vercel login + ~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 이런 문구가 나온다면 windows powerShell을 관리자로 실행하셔서 현재 권한상태 확인(get-ExecutionPolicy) - Restricted로, 로컬에서 작성한 스크립트를 실행할 수 없는 상태 오류 권한 상태를 Set-ExecutionPolicy RemoteSigned를 하고 Y로 변경한다. get-ExecutionPolicy로 변경이 되었는 지 확인하시면 됩니다. 꼭, 관리자 실행으로 PowerShell을 키셔야 가능합니다!!!! 다른분들은 고생하지 마시길 바랍니다 ㅠ
rladygks1210
2024-05-13T18:17:44.910Z
댓글 1
좋아요 4
조회수 916
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
수정 삭제는 sqlite로 직접 만져야되나요
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
조현성
2024-05-10T14:27:55.656Z
댓글 2
좋아요 1
조회수 309
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 섹션 04-05-graphql-mutation-product 따라하고 있는데 도중에 저런 에러 메세지가 떴습니다. 디버깅 하려고 해도 Network 부분에 message 부분이 안 뜨네요ㅠ 검색해보니 쿠키 및 인터넷 기록 삭제해보라고 나오는데.. 삭제해도 해결이 안 되고요ㅠㅠ 어떻게 해야 해결될까요? 도움 부탁드립니다
react node.js seo graphql next.js
edo020424
2024-05-08T10:35:28.420Z
댓글 2
좋아요 0
조회수 305
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요!! 과제 완료해서 피드백 부탁드리고자 올렸습니다! 앞으로 잘 부탁 드립니당~ <html> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html> <css> * { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
react node.js seo graphql next.js
개발하는 알파카
2024-05-03T06:52:35.874Z
댓글 2
좋아요 0
조회수 311
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Multer 이용하여 이미지 업로드 하면 다음 오류가 뜹니다 import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> {images.map((image, index) => ( <div key={image+index}> {/* image 이름과 index를 조합하여 고유한 키를 생성 */} <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
react redux node.js 웹앱 mongodb
volcano1122
2024-04-25T07:49:05.983Z
댓글 1
좋아요 0
조회수 245
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?
이화영
2024-04-20T14:29:57.455Z
댓글 2
좋아요 0
조회수 446
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ
우다슬
2024-04-18T08:05:32.165Z
댓글 5
좋아요 0
조회수 1000
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.3) React.memo와 컴포넌트 렌더링 최적화 위 강의를 보다보니, 뭔가 이상해서 질문드립니다... 여기서 Header컴포넌트에 memo함수로 감싸서 최적화된 컴포넌트를 만드셨다고 했는데, 영상으로만 보면 item 컴포넌트 변경시에 리랜더링이 안되야 하는 Header 컴폰넌트에 highLight가 들어가는데요..(4:46 경..) 아무리 봐도 하이라이트가 들어가는데, 말씀으로는 하이라이트가 더이상 들어가지 않는다고 하는데, 제가 뭘 잘못 이해한걸까요?
sketchband
2024-04-11T03:08:26.288Z
댓글 2
좋아요 3
조회수 686
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의에서 소개해주신 것 처럼 Format on Save 옵션을 적용하였는데도, 저장 시 자동으로 Formatter가 작동하지 않아 서치해보니,Default Formatter 옵션이 위처럼 없음(null)로 설정이 된 경우에는 Prettier로 적용해주어야 정상동작하더라구요.해당 내용 공유드려요 ㅎ
진영
2024-04-04T06:41:13.043Z
댓글 7
좋아요 21
조회수 1661
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
브라우저 사파리에서는 정상동작 합니다 참고로 크롬 버젼은 123.0.6312.107(공식 빌드) (arm64) 맥에서 실행했습니다.
node.js mysql mongodb express typescript socket.io jwt
rnfkwoddl12
2024-04-03T06:19:41.283Z
댓글 3
좋아요 0
조회수 539
미해결
탄탄한 백엔드 NestJS, 기초부터 심화까지
import { Module } from '@nestjs/common'; import { AuthController } from './auth.controller'; import { AuthService } from './auth.service'; import { ConfigModule } from '@nestjs/config'; import { PassportModule } from '@nestjs/passport'; import { JwtModule } from '@nestjs/jwt'; import { JwtStrategy } from 'src/auth/jwt/jwt.strategy'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true, envFilePath: `.env.${process.env.NODE_ENV}`, }), PassportModule.register({ defaultStrategy: 'jwt', session: false }), JwtModule.register({ secret: process.env.JWT_SECRET, signOptions: { expiresIn: '1y' }, }), ], controllers: [AuthController], providers: [AuthService, JwtStrategy], }) export class AuthModule {} 이게 auth.module.ts 파일입니다 import { Injectable } from '@nestjs/common'; import { PassportStrategy } from '@nestjs/passport'; import { ExtractJwt, Strategy } from 'passport-jwt'; @Injectable() export class JwtStrategy extends PassportStrategy(Strategy) { constructor() { super({ jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), ignoreExpiration: false, secretOrKey: process.env.JWT_SECRET, }); } async validate() {} } 여기서 문제가 일어났습니다. process.env.JWT_SECRET 이 것을 읽지 못합니다. NODE_ENV="development" JWT_SECRET="secret" PORT=8000 .env.development 파일도 root폴더에 잘 있습니다. 무엇이 문제인지 잘 모르겠습니다
node.js mongodb express nestjs ssr
2024-04-01T06:52:10.868Z
댓글 2
좋아요 0
조회수 371
해결됨
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
안녕하세요 강사님 강의 정말 잘 듣고있습니다. 다름이 아니라 프롬프트의 내용이 꽤 긴데 혹시 복붙할 수 있는 페이지는 따로 없는지 궁금합니다..! 제가 못찾은것일수도 있어서 조심스럽게 문의드립니다
HTML/CSS javascript react node.js chatgpt
류돌프
2024-03-30T02:18:51.513Z
댓글 2
좋아요 1
조회수 473
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 2.14 비동기작업처리하기, 5:59 비동기는 프로세스의 병렬 처리를 위해 사용하는 것인데 비동기 함수를 await 키워드를 통해서 값이 반환되기를 기다렸다가 사용하면 동기 와 다른 점이 뭔지 궁금합니다. 어떤 경우에 await가 비동기 함수를 사용하면서 중요한 역할을 담당하는지도 궁금합니다.
yeonsul123
2024-03-29T02:07:35.894Z
댓글 2
좋아요 1
조회수 1261
해결됨
클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편
안녕하세요 선생님. 급한 마음에 강의를 구매하며 이렇게 문의글도 남기네요. 저는 이제 막 입사 반년 정도 된 주니어 백엔드 개발자 입니다. 회사에 별다른 사수는 없고 php만 쓰던 분들 몇분 계시는데 저 혼자 nestjs를 사용하고있고 레거시코드를 전부 nestjs로 바꾸라고해서 이 강의까지 오게되었습니다. 회사에서는 DDD가 뭔지는 잘 모르지만 요즘 좋다고하니 그걸로 해서 레거시코드를 다 변환하라고하는데 저는 DDD를 잘 알지못하는 상태이고 물어볼 선임도 없고 마땅한 강의도 이것밖에 보이질 않아서요,, 이 강의를 보면서 nest에 적용시키는것에는 크게 어려움이 없겠지요? ( 아직 보기 전인데 익스프레스 기반 인것같아서요 ,, 개념만 이해하면 구조 잡는것에는 문제가 없겠죠? ) 소개 페이지에 나와있는 메일로 문의를 드려도 문의에 대한 답변을 받을 수 있는지도 궁금합니다. 🙂
2024-03-25T06:26:22.914Z
댓글 1
좋아요 1
조회수 411
해결됨
Vue로 Nodebird SNS 만들기
React는 리뉴얼된 자료가 있던데 Vue NodeBird는 따로 없는것같아서요! 감사합니다.
vue.js node.js aws mysql vuex ssr
테라
2024-03-17T12:21:49.653Z
댓글 1
좋아요 0
조회수 381
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님강의 잘 듣고 있습니다! 다름이 아니라 선생님 강의 중 'JSX로 UI 표현하기' 편을 듣고 있는데import를 이용해서 CSS파일을 연결하는 부분에서 막혔습니다 강의와 똑같이 작성했는데 스타일 적용이 안되는 이유가 뭘까요?화면에 오류 표시도 안뜨는데 코드에 문제가 있는지 궁금합니다
Nara
2024-03-16T10:34:01.224Z
댓글 3
좋아요 0
조회수 668
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not empty initdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.
react node.js postgresql docker typescript 클론코딩 next.js
진용
2024-03-14T12:19:07.419Z
댓글 1
좋아요 0
조회수 855
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
이제는 promise chain이나 async await 문으로 콜백함수를 처리해야 하는 것으로 보입니다. 다음과 같이 코드를 수정해서 돌아가는 것을 확인했으니 활용하시면 좋을 것 같아요! // index.js app.post('/login', (req, res) => { // 이메일이 DB에 있는지 확인 User.findOne({ email: req.body.email }) .then (async (user) => { if (!user) { throw new Error("제공된 이메일에 해당하는 유저가 없습니다.") } // 비밀번호가 일치하는지 확인 const isMatch = await user.comparePassword(req.body.password); return { isMatch, user }; }) .then(({ isMatch, user }) => { console.log(isMatch); if (!isMatch) { throw new Error("비밀번호가 틀렸습니다.") } // 로그인 완료 return user.generateToken(); }) .then ((user) => { // 토큰 저장 (쿠키, localstorage ...) return res.cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); }) .catch ((err) => { console.log(err); return res.status(400).json({ loginSuccess: false, message: err.message }); }) }); // User.js userSchema.pre('save', function( next ) { // 비밀번호 암호화 const user = this; if(user.isModified('password')) { bcrypt.genSalt(10, function(err, salt) { if (err) { return next(err); } bcrypt.hash(user.password, salt, function(err, hash) { if (err) { return next(err); } user.password = hash; return next(); }); }); } else { return next(); } }); userSchema.methods.comparePassword = function(plainPassword) { // 암호화된 비밀번호와 같은지 체크 const user = this; return bcrypt.compare(plainPassword, this.password) } userSchema.methods.generateToken = function() { // jwt 생성 user = this; const token = jwt.sign(user._id.toJSON(), 'secretToken'); user.token = token; return user.save(); }
ywk0205
2024-02-28T13:07:46.300Z
댓글 2
좋아요 4
조회수 723
미해결
따라하며 배우는 TDD 개발 [2023.11 업데이트]
학습중 repository pattern을 적용하여 테스트를 적용해 보던 중 TypeError: user_model_1.default.create is not a function 라는 에러와 마주하게 되었습니다. user.repository.ts import User from "../model/user.model"; export class UserRepository { createUser = async(user) => { const newUser = await User.create({ ...user }) return newUser } findUserById = async(id:string) => { const user = await User.findById('65cba34813b2fbec74a558a8') if(!user) throw new Error('존재하지 않는 유저정보 입니다.') return user } } user.repository.test.ts import { UserRepository } from "../../app/repository/user.repository" const createMock = jest.fn() const findByIdMock = jest.fn() jest.mock("../../app/model/user.model", () => { return { User: jest.fn(() => { return { create:createMock, findById:findByIdMock } }) } }) describe('user repository Create', () => { let sut:UserRepository; const newUser = { id:"abcdefrwgsf123123", name:"test name", email:"test@nanana.com" } beforeEach(() => { sut = new UserRepository() }) afterEach(() => { jest.clearAllMocks() }) it('create api', async () => { createMock.mockReturnValueOnce(newUser) const actual = await sut.createUser({name:newUser.name, email:newUser.email}) expect(createMock).toHaveBeenCalledTimes(1) expect(actual).toStrictEqual(newUser) expect(createMock).toHaveBeenCalledWith({name:newUser.name, email:newUser.email}) }) }) jest실행시 create api의 createMock.mockReturnValue() 까지는 실행이되지만 await sut.createUser() 부분에서 에러가 나는것으로 확인되었습니다.
node.js mongodb express supertest tdd jest mongoose 소프트웨어-테스트
양진영
2024-02-15T05:45:46.918Z
댓글 1
좋아요 0
조회수 307
