묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
회원 가입을 위해 정보를 입력해주세요 과제 정답지 어디가면 알 수 있나요?!
display-flex; 이게 안먹혀서 position을 주고 했는데<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <!-- <link href="homework01.css" rel="stylesheet"> --> <style> .box{ position: absolute; top: 60px; left: 625px; width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px 0px #0068FF40; } .head{ position : fixed; top: 132px; left: 725px; width: 466px; height: 94px; color: #0068FF; } .head2{ position : fixed; top: 286px; left: 725px; width: 158px; height: 23.65px; color: #797979; } .head3{ position : fixed; top: 387px; left: 725px; width: 158px; height: 23.65px; color: #797979; } .head4{ position : fixed; top: 488px; left: 725px; width: 158px; height: 23.65px; color: #797979; } .head5{ position : fixed; top: 589px; left: 725px; width: 158px; height: 23.65px; color: #797979; } .wo{ position : fixed; top: 719x; left: 850px; width: 200px; height: 23.94px; color: #797979; } .man{ position : fixed; top: 719x; left: 1000px; width: 200px; height: 23.94px; color: #797979; } .ch{ position : fixed; top: 793x; left: 738px; width: 509px; height: 21px; color: #797979; font-size: 13px; } .box2{ position: fixed; top: 895px; left: 725px; width: 470px; height: 75px; border: 1px solid #0068FF; border-radius: 10px; } .text{ position : fixed; top: 899x; left: 925px; width: 70px; height: 27px; color: #0068FF; } </style> </head> <body> <div class="box"> <div class="head"><h1>회원 가입을 위해<br> 정보를 입력해주세요</h1> <div class="head2">*이메일 </div> <div><br><br></div><br><br><hr> <div class="head3">*이름 </div> <div><br><br></div><br><br><hr> <div class="head4">*비밀번호 </div> <div><br><br></div><br><br><hr> <div class="head5">*비밀번호 확인</div> <div><br><br></div><br><br><hr> <br><br> <div class="wo"><input type="radio" name="gender">여성</div> <div class="man"><input type="radio" name="gender">남성</div> <br><br><br><br> <div class="ch"><input type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</div> <div><br><br></div><hr> <br><br> <div class="box2"> <div class="text"><br>가입하기</div> </div> </div> </body> </html>이렇게 코드로 모양만 갖췄는데 어려워서 코드리뷰를 하고싶어서 그러는데 정답지가 있나요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
redux thunk 원리 질문
1.thunk를 사용하면 함수형 action을 dispatch 했을때action을 단순히 실행하는 것으로 보이는데요. 그렇다면 아래 두 코드처럼함수형 action을 dispatch하는 방식과 함수로 감싸지 않고 하는 방식과 결과는 같다고 생각되는데 맞나요?const loginAction = () => { return (dispatch) => { dispatch(loginRequestAction()); axios.post('/api/login') .then((res) => { dispatch(loginSuccessAction(res.data)); }) .catch((err) => { dispatch(loginFailureAction(err)); }) } } const onClickLogin = () => { dispatch(loginAction()); }const onClickLogin = () => { dispatch(loginRequestAction()); axios.post('/api/login') .then((res) => { dispatch(loginSuccessAction(res.data)); }) .catch((err) => { dispatch(loginFailureAction(err)); }) }2.1이 맞다면 함수 action을 dispatch하는 방식은 편의성 때문이라고 봐도 될까요?3.강의 10:40 쯤에 thunk는 한번에 dispatch를 여러번 할 수 있게 해준다고 하셨는데thunk없이 아래처럼 여러번 쓰는 것은 문제가 될 수 있나요?// action은 임의로 지었습니다 const onClickButton = () => { dispatch({type: 'CHANGE_ID'}); dispatch({type: 'CHANGE_PASSWORD'}); }
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
채팅 서버 통신 구조 설계 및 DB 관리 방법이 궁금합니다.
안녕하세요, 사내에서 채팅 프로젝트를 진행하게 되어 강의를 신청해 수강 중에 있습니다.( 채팅은 대규모 서비스를 전제로 하고 있지만, 현재는 상담사와 고객의 1:1 상담을 먼저 진행할 예정입니다. )관련해서 두가지 질문이 있습니다!(1) 채팅 서버 통신 구조 설계: 팀원들과 함께 이야기를 나눠볼 때, Socket으로 채팅 히스토리를 조회하거나 채팅 내용을 저장할 수 있지 않을까? 라는 이야기가 나왔습니다. 강의에서 채팅 서버 통신 구조를 설계할 때, 제로초님께서는 HTTP와 Socket을 혼합해서 사용하고 계시는데요. HTTP와 Socket을 함께 사용하시는 이유가 있는지 궁금합니다. 또한, 대규모 서비스로 전환 될 것을 전제하며 실제 서비스를 설계할 때는 어떤 방식이 더 나은지 궁금합니다.(2) DB 관리 : 채팅 히스토리를 관리하는 방법을 두가지로 고민중에 있습니다. 저장 DB는 mongoDB를 생각 중에 있습니다. (A. 인메모리에 저장해두었다가 주기적으로 DB에 저장 B. 건마다 DB에 저장) 개인 적으로는 A방법을 진행했을 때, 데이터 유실이 우려되어 B방법이 더 나은 옵션이지 않을까 생각하지만, 빈번한 DB접근이 우려됩니다. 제로초님은 어떤 방식으로 관리하고 계신지 조언주시면 감사하겠습니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Fly.io도 유료로 전환이 된걸까요
Fly.io 설치 후 홍콩으로 선택하는 지점(강의 4:17)에서 하기와 같은 오류가 뜨고있습니다.에러 내용이 Error: We need your payment information to continue! Add a credit card or buy credit: https://fly.io/dashboard/kimyr6868-gmail-com/billing 결제수단을 입력하는 내용으로 보아 진행이 어려울 것 같은데 이런 상황에선 어떻게 하면 좋을지 문의드립니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
sequlize같은 orm에 대한 질문
javascript는 sequilize java는 JPA같은 데이터베이스를 다루는 ORM이 있는 것 같은데 ORM에 대해 좀더 찾아보니 sql 쿼리문을 직접 작성하는 것보다 코드의 양도 줄고 유지 보수도 더 쉬운 것 같습니다.나중에 sql 쿼리문을 직접 입력하는 방식을 배워야하나 생각이 들었지만 이렇게 장점이 많은 ORM을 안 쓸 이유가 없는 것 같고 나중에 다른 백앤드 프레임 워크 예를 들어 java Spring같은 것을 배워도 JPA같은 ORM을 배우지 sql 쿼리문을 직접 넣는 방식으로는 하지 않을꺼 같습니다.그럼에도 불구하고 sql 쿼리문을 직접 넣는 방식을 배워둘 필요가 있을까요? 아니면 ORM방식에 단점이 있을까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
state is not defined 에러가 뜹니다
이 에러는 왜 발생한 건가요?구글에 검색도 해봤는데 안나오네요도와주세요 ㅠ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) @ reducererror - 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 ErrorReferenceError: state is not definedThis error happened while generating the page. Any console logs will be displayed in the terminal window.Sourcereducers/user.js (35:12) @ reducer 33 | } 34 | default: > 35 | return state; | ^ 36 | 37 | } 38 | };
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Detail.js CSS 관련 강의가 없어진거 같은데요 ?
Update : 게시글 수정하기 강의 들을 차례인데 DetailCSS 부분은 강의 내용이 없는데 값자기 다 적용된체로 수업이 진행 되네요 흐름상 강의가 빠진거 같은데요 ?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
504 에러
안녕하세요 Reple Upload 파트 에서 에러가 504 에러가 발생 해서 질문드립니다Server -> Router -> reple.js 측에서 20번줄에서 에러가 나고 있는데, terminal에서 더이상 .save callback 을 할수 없다고 뜹니다프론트 쪽에서는 이러한 에러가 뜨고 있는데요 지금 서버랑, 프론트쪽 연결이 되지 않은거 같은데요 어떻게 해결할수 있을까요? 감사합니다mongoose 다운그레이드 해서 해결했습니다
-
미해결습관부터 바꿔주는 Node.js & Express 기초
prisma에서 (비)식별관계 설계
안녕하세요.강의를 보고 현재 첫 프로젝트를 진행중입니다. 전공자라서 이론적으로는 비식별관계와 식별관계에 대해서 인지한 상태인데, prisma로 식별관계를 설정하려면 어떻게 해야할까요? 구글링했는데도 답이 나오질 않네요ㅜㅜ
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
ejs, cjs 둘 중 무엇으로 코딩해야하나요?
ejs와 cjs 둘 중 express 프레임워크를 사용해서 프로그래밍을 하려면 어떤 방식을 추천하시나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
ApolloDriverConfig를 찾지를 못해요
import { Module } from '@nestjs/common'; import { BoardModule } from './apis/boards/boards.module'; import { GraphQLModule } from '@nestjs/graphql'; import { ApolloDriver } from '@nestjs/apollo'; @Module({ imports: [ BoardModule, GraphQLModule.forRoot<apolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), ], }) export class AppModule {} yarn add @nestjs/graphql @nestjs/apollo graphql apollo-server-express 이거 추가하고 수업 따라서 진행하는데 apolloDriverConfig이놈만 찾지를 못하네요... 버전이 달라서 그런걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
08-06 docker my-backend 접속이 안됩니다 ㅠㅠ
밑에 질문글이 있어서 똑같이 해봤는데 계속 안되네요 ㅠ..ㅠ db접속까지는 되는데 backend에서 접속이 계속 안됩니다... 살려주세요
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
docker git action ec2
강의 내용과 거리가 먼 질문이지만 제가 채팅 프로젝트를 만드는데 현재 ec2에서 docker로 배포를 하면서 진행 중인데 배포시 힙 메모리 부족으로 서버가 열리지 않아 기존 t2.micro에서 t3.small로 인스턴스 유형을 변경하니 서버가 정상적으로 실행이 됩니다. 다음은 스왑을 적용한 t2.micro와 t3.small 인스턴스에서의 램 상황입니다.보시다시피 기존 t2.micro일 때 는 swap메모리의 크기와 상관없이 거의 사용하지 않는데 swap메모리는 hdd에서 끌어다 쓰다보니 swap메모리를 사용하는데 제한이 있는건가요??다음은 힙메모리 초과로 서버가 열리지 않을 때 입니다.<--- Last few GCs ---> [18:0x7f6622d90300] 21689 ms: Scavenge (reduce) 481.9 (490.6) -> 481.5 (491.1) MB, 15.1 / 0.0 ms (average mu = 0.143, current mu = 0.005) allocation failure; [18:0x7f6622d90300] 22102 ms: Mark-sweep (reduce) 482.2 (491.1) -> 481.9 (491.9) MB, 349.1 / 0.0 ms (+ 121.4 ms in 21 steps since start of marking, biggest step 21.3 ms, walltime since start of marking 503 ms) (average mu = 0.231, current mu = 0.312) <--- JS stacktrace ---> FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory npm ERR! path /home/app npm ERR! command failed npm ERR! signal SIGABRT npm ERR! command sh -c nest start --watch npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2023-07-07T09_03_12_827Z-debug-0.log
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
메인 화면 이미지가 안뜨는 문제 관련
안녕하세요 그랩님! 바로 이전 질문에서 저와 동일한 현상으로 질문 주신것에 답변(하기 스크린샷)대로 변경을 해보았습니다.그랬더니 이번엔 그랩마켓 내의 '상품업로드'를 통해 등록한 키보드2 이미지만 뜨고 이전에 등록한 제품들은 깨져서 보이지 않아 이럴경우엔 어떻게 해결해야 할지 문의드립니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
개인 프로젝트 관련 질문
안녕하세요 드디어 강의 완강했습니다!!^^ 뒷부분 부터는 퀴즈가 없어서 비교적 빨리 수강했네요.강의 후에 해봐야 할 것들을 생각해보았는데 조언을 듣고 싶어서 질문남깁니다.일단은 지금 것 했던 "나만의 ~~프로젝트"를 리팩토링(성능/안정성/가독성/로직개선)하고 api기능추가, 테스트코드 작성, DB쿼리성능개선등을 해보고자합니다.전부 다 하려면 시간이 오래걸리겠지만(ㅠ) 마지막에 취업준비강의에서 말씀하신 3년차개발자로 생각되기 위해선 해야할게 많은 것 같습니다..ㅎㅎ(3년차 같은 신입을 뽑는다니!!ㅠㅠ)그래서 일단 목표는 실제 현업에서 하는 것처럼 코드를 작성해보고자 하는데요, 막상 하려니 좀 막막하네요.질문은:지금 제 생각은 현업에서 쓰는 좋은 코드를 보고 어떤 식으로 설계했는지 테스트코드는 어떻게 작성했는지 등등 참고하고 분석하고 공부해서 제 나름대로 프로젝트를 리팩토링해보고 싶은 생각입니다. 그게 가장 실력도 늘 것 같구요. 그래서 혹시 관련 코드나 책이나 자료등이 있으면 추천해주시면 감사하겠습니다.아! 그리고 백엔드 심화강의에서 마이크로큐와 await의 관계를 굉장히 감명깊게 들었습니다. 비동기과정이 정말 헷갈렸는데 속이 시원해졌습니다.ㅎㅎ 혹시 이런 자바스크립트 원리나 cs관련내용도 추천해주실만한 책이나 자료 있으면 알려주시면 감사하겠습니다.일단 방향은 이렇게 잡았는데 조언해주시면 참고하겠습니다!!끝으로 제가 지금것 들었던 개발강의중 가장 자세하고 친절하고 이해도 잘되고 재밌는 강의였습니다!!퀴즈 할때나 버그나 에러날때 힘들긴 했지만, 그래도 개발이 점점 더 재밌어지고 더 잘하고 싶네요. 궁금한 것있으면 또 질문해도 되겠죠?^^;;; 감사합니다!!
-
해결됨코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
styled component 버튼 타입에러
import { ReactNode } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; interface ButtonProps { children?: ReactNode; onClick: (e: any) => void; type?: "link" | "button"; url?: string; } const StyledButton = styled.button<ButtonProps>` outline: none; border: none; display: flex; align-items: center; justify-content: center; `; function Button({ children, onClick, type = "button", url }: ButtonProps) { const RealButton = <StyledButton onClick={onClick}>{children}</StyledButton>; const RealLink = ( <StyledButton onClick={() => {}}> <Link to={url!}>{children}</Link> </StyledButton> ); return <div></div>; } export default Button;강의를 보고 진행하던중에 RealLink에서 타입오류나 가서 확인을 해보니button onClick이 없으면 styled componenet에서 에러를 내는 것 같습니다. 링크로 쓰면 onClick이벤트를 전달해주면 안될 것 같은데 ()=>{} 이처럼 의미없는 함수를 넘겨주면 될까요
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
선생님 cloudFront를 사용하게되면 S3는 private으로 사용하는게 좋을까요
s3를 퍼블릭으로 두는것은 좋지 않다고 생각하는데,CDN 주소로 접근하는거면 s3는 private으로 하고 사용할수 있도록 설정이 가능할까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
jsx 문법이 적용이 안되고있습니다.
안녕하세요 그랩님저번 강의부터 jsx문법으로 상품상세 페이지 아이디 반영하는 부분 부터 문제가 발생하였는데 당시에는 그냥 + index 형식으로 진행해서 문제가 없었는데 계속 Link to부분 이문제가 발생하고있습니다.아래 코드 올려드립니다. 다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
axios 주소 변경 이후 화면이 뜨지 않아 문의드립니다!
안녕하세요 그랩님!강의 4:40~4:50 경 axios의 주소를 포스트맨 ulr에서 저희가 구축한 서버 url인 http://localhost:8080/products 로 변경하고 보니 아래와 같이 상품목록이 보이지 않아 개발자 도구를 켜서 확인해보니 에러발생 : AxiosError /Failed to load resource: net::ERR_CONNECTION_REFUSED 라고 뜨고 있는 상황입니다.. >> 이부분은 해결 되었습니다!추가로 잘 작동하였던 서버도 하기와 같이 GET http://localhost:8080/ 404 (Not Found) 오류가 뜨고 있는데 구글링으로 검색해 보아도 문제 해결이 되지 않아 문의글 남겨드립니다..ㅠㅡㅜhttp://localhost:8080/products 경로로 접근시엔 화면이 잘 뜨는데 왜 8080까지의 메인화면에서는 'cannot get' 이란 오류가 뜨는지 알 수 있을까요?
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
선생님 aws-sdk 모듈을 찾을 수 없다고 합니다.
aws-sdk는 따로 설치를 안해도 괜찮도 하셔서 설치를 안했습니다. 하지만 Cannot find module 'aws-sdk' 에러가 발생합니다.
