이야기를 나눠요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
[리뉴얼] React로 NodeBird SNS 만들기
강의 순서 관련 질문 드립니다.
안녕하세요 웹 게임을 만들며 배우는 React 를 현재 수강중인 학생입니다.다름 아니라 다음 강의 관련 고민이 있는데요. 프로젝트를 하려고 하는데 프론트단을 nextjs를 사용하고 백엔드단을 코프링을 사용하려고 합니다. 그런데 react관련은 현재 저 강의로 배운 내용정도밖에 모르고 nextjs부분은 아예 모릅니다. 현재 [리뉴얼] React로 NodeBird SNS 만들기/Next + React Query로 SNS 서비스 만들기 두 강의를 구매는 해 놓았는데 정작 어떤것을 들어야 nextjs를 빠르게 도입 할수 있을지가 궁금합니다. 저 두개를 다 듣고 시작하기에는 너무 늦기도 해서 당장 하나정도 듣고 프로젝트를 시작해야 할것 같은데요 NodeBird쪽에도 Nextjs사용 부분이 있어서 그런가 웹 게임을 만들며 배우는 React 완강 후 NodeBird를 들어도 Nextjs로 프로젝트 하는데 문제 없을지 아니면 NodeBird를 건너뛰고 Next + React Query를 듣는게 나을까요? NodeBird가 두배정도의 시간이 있긴하지만 React에 대해서 완벽하게 잡고 가는 느낌이라 고민이 됩니다. 조언 부탁드립니다.
-
[리뉴얼] React로 NodeBird SNS 만들기
공부 순서 고민
선생님 공부 순서와 관련해서 고민이 있는데요, 리액트, 넥스트, 노드 js로 취업을 1달 안에는 하고 싶은데, 현재 진도는 강의를 도메인 연결하기 부터 다시 따라해야하는 상황이여서요,, 방법11. saga방식으로 만든 강의를 다 보고 2. 깃허브 올려주신거 보면서 툴킷 방식으로 바꾼 다음에 3. 새로 산 리액트 쿼리 강좌를 보고, next.js14 + 리액트 쿼리 강의를 따라 하고 4. 혼자 포폴용 프로젝트를 하나 만들고5. 코딩테스트, 기술면접 연습을 하는게 좋을까여,,? 근데 이렇게하면 시간이 오래 걸릴까봐 고민이구,,방법2 1, 2번 진행한 다음에 리액트 쿼리는 강의 다 보기 전에 일단 깃허브 보면서 적용해보고 필요한것만 찾아본다음 바로 4,5 진행하는게 좋을까여? 이렇게하면 리액트 쿼리를 잘 모르고 써서 이해가 안갈할까봐 고민이에요 ,,방법3도메인 두번 연결하면 돈이 두번 드니까 바로3,4,5로 넘어갈지 고민이에요,,
-
Do it! Node.js 프로그래밍 입문
update 함수 문의
컨트롤러에서 updateContact 함수실행시 findByIdAndUpdate 함수를 사용하지 않고 save 함수를 사용한 이유가 있을까요?
-
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 고민상담 부탁드립니다.
안녕하세요. 저는 2023년 1월 부터 6월까지 국비지원 부트캠프를 수료하고 현재 취업 준비중인 예비 프론트엔드 개발자입니다.현재 제로초님의 네이버 클론코딩, 렛츠기릿 자바스크립트, 리액트 무료강좌, 타입스크립트 문법 강좌 수강중입니다. 추가로 앞 강좌들을 다 듣고 리덕스 몹엑스, 슬랙 클론코딩, 노드버드도 들을 준비중에 있습니다. 현재 고민이 있어 글을 남기게 되었습니다. 취직을 올해 안에는 무조건 하고싶습니다. 그러나 현재 제작한 프로젝트가 부트캠프에서 팀원들과 같이한거 1개인데 이것도 완성도가 영 아닌거 같아서 지금은 이력서를 안 넣어 보고 있습니다. 제가 끝까지 완성한 프로젝트 1개를 만들고 이력서를 제출하고 싶은데 어떻게 생각하시나요? 그리고 두번째 고민은 "백엔드를 어디까지 학습하냐?" 입니다. 제가 물론 노드 교과서 강의를 듣고 싶긴하지만 시간적인 여유가 없을것같아서 초조합니다. 제가 서비스를 구축하는데에 최소한의 백엔드 지식을 학습하려면 노드버드 강의의 백엔드 부분만 알고가도 괜찮을까요?? 앗 추가로 넥스트 14버전이 나온걸로 아는데 리액트 노드버드 수강해도 괜찮겠죠? 아니면 요번에 업로드 하신 넥스트 유투브 강의를 수강하는게 나을까요?
-
[리뉴얼] React로 NodeBird SNS 만들기
도대체 다들 공부는 어떻게 하시는 건가요?
말씀드리기 부끄럽지만 공부한 지 약 1년 정도되는 프론트엔드 개발자 취준생입니다.1년을 공부했음에도 다른 사람보다 한참 뒤쳐져 있어서 왜 그동안 열심히 안 했나 속상합니다.강의 자체를 배우면서도 끈기 있게 완강해야 하는데 그러지 못 하고 중간에 넘어가고 포트폴리오를 대충 만들다보니까 이도저도 아닌 프로젝트만 나오고 있습니다. HTML + CSSJavaScriptReactNextTypeScript 공부는 다들 어떻게 하시는 건가요? 딱 6개월만 더 해보고 안 되면 포기하고 공장 들어가려고 합니다. 혹시나 공부하시는 특정 방법이 있으면 알려주시면 감사하겠습니다. 부탁드립니다.
-
Slack 클론 코딩[백엔드 with NestJS + TypeORM]
테스트를 위한 객체 오류와 createQueryBuilder 사용 방법 질문있습니다!
안녕하세요.제로초님 유닛테스트쪽 강의 듣고 프로젝트에 유닛테스트를 적용시켜보고 있는데요!2가지에서 많이 막히고 있습니다. 데이터를 변수에 임시로 넣어주고 원하는 결과값 , 즉 toBe 쪽에 변수를 넣어주려고 하는 도중 계속 아래 오류가 발생하고 있습니다. 오류 메세지가 post 유형에는 없고.. hashtag 유형에 있다는 거면 제대로 작성한거 아닌가요..?// 오류내용 Property 'post' is missing in type '{ id: number; postId: number; hashtag: string; createdAt: Date; }' but required in type 'Hashtag'. post.entity.ts import { PostType } from 'src/enum/postType.enum'; import { Column, CreateDateColumn, Entity, PrimaryGeneratedColumn, UpdateDateColumn, OneToMany, } from 'typeorm'; import { Hashtag } from './hashtag.entity'; @Entity('posts') export class Post { @PrimaryGeneratedColumn() id!: number; @Column() type!: PostType; @Column() title!: string; ... 생략 @CreateDateColumn({ name: 'created_at' }) createdAt!: Date; @UpdateDateColumn({ name: 'updated_at' }) updatedAt!: Date; @OneToMany(() => Hashtag, (hashtag) => hashtag.post) hashtags: Hashtag[]; } hashtag.entity.tsimport { Column, CreateDateColumn, Entity, PrimaryGeneratedColumn, ManyToOne, JoinColumn, } from 'typeorm'; import { Post } from './post.entity'; @Entity('hashtags') export class Hashtag { @PrimaryGeneratedColumn() id!: number; @Column({ name: 'post_id' }) postId: number; @Column() hashtag!: string; @CreateDateColumn({ name: 'created_at' }) createdAt!: Date; @ManyToOne(() => Post, (post) => post.hashtags) @JoinColumn({ name: 'post_id' }) post: Post; } createQueryBuilder, leftJoinAndSelect, where, getOne 이거를 findOne 처럼 전부 만들어줘야 하는 것인가요..? 아래는 제가 서비스에서 사용했던 레포입니다! (테스트 파일 아닙니다!) this.postRepository .createQueryBuilder('posts') .leftJoinAndSelect('posts.hashtags', 'hashtags') .where('posts.id = :id', { id }) .getOne(); createQueryBuilder를 사용하는 강의가 없어서 검색중에 어떤 글을 발견하고 따라해봤지만 막혀서 질문 드립니다 ..! createQueryBuilder 이걸 사용하기 위해서는 어떤 방식으로 만들어야 하는건가요???만약 아래처럼 만들었다고 해도 강의에서는 expect 안에 service.함수명 이런식으로 호출하시던데 만약 createQueryBuilder를 사용하게 되면 repository.createQueryBulder().leftAndJoin.... 이런식으로 똑같이 만들어주는건가요..?? 유닛테스트 작업이 처음이라 계속 막히는 것 같습니다...const MockPostRepository = () => { createQueryBuilder: jest.fn().mockReturnValue({ leftAndJoin: jest.fn().mockReturnThis(), where: jest.fn().mockReturnThis(), getOne: jest.fn().mockReturnThis(), }); }; describe('PostService', () => { let postService: PostService; let postRepository: MockRepository<Post>; beforeEach(async () => { // 가짜 모듈 생성 const module = await Test.createTestingModule({ providers: [ PostService, // 실제 디비가 아닌 목업 디비로 연결해서 사용하기 위함 { provide: getRepositoryToken(Post), useValue: MockPostRepository(), }, ], }).compile(); // 가짜 모듈을 postService 변수에 담아줌 postService = module.get<PostService>(PostService); postRepository = module.get<MockRepository<Post>>(getRepositoryToken(Post)); }); });
-
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님. 대학교 2학년 진로 고민입니다.
코로나 학번이구요.. 20학번이번에 군대 다녀와서 복학합니다.서성한 대학 중 한 대학 다니구요 문과입니다.정시로 시험쳐서 힘들게 들어갔어요.. 공부 머리는 어느정도 있다고 자부합니다.계열로 진입했다가 코로나로 학교를 못가니까 1,2학년때 방황을 좀 해서학점이 좀 망가져있습니다. 원하는 과 진입도 못했고, 복수전공도 어려워보여요. 자기설계전공 있어서 시도는 해볼텐데..학교에 아는 선배님도 많이 없고 저랑 비슷한 길을 걸어간 사람도 없어요.뭔가 할 수 있는게 없어서.. 그냥 고시준비 할까도 고민해봤는데 떨어지면 진짜 뒤가 없더라구요. 적성 맞는 것도 아닌거 같고.1,2학년때 방황하면서 그나마 제일 재밌게 했던게 이거여서 다시 기웃거리고 있어요. 지금 혼공 컴구운체 보고있고, 열혈C 이런거 보고있습니다. 수학도 좀 하고 있구요. 9시출근 9시퇴근합니다.. 수업 들을거 듣고..다시 정신차려서 열심히 살으려고 보니까 과거의 내가 너무 많은 잘못을 했더군요 안일했습니다. 다시 도전해보려고 합니다. 전공은 살리기 힘들 것 같고, 복수전공으로 어떻게든 통계과목이랑 CS과목들 섞어서 학위정도는 만들어 볼 수 있을 것 같아요.제로초님이라면 어떤 선택을 하셨을 것 같나요? 살기가 너무 힘드네요.. 진짜.. 엄청 버거워요..이렇게 문의드려 죄송하고 또 감사합니다.
-
Node.js 노드 빠르게 훑어보기: 서버부터 DB까지
디테일 메인페이지에서 상세페이지로 가는 링크 부분
main.html{% for writing in list %} <tr> <td><a href="/detail/{{ writing._id }}">{{ writing.title }}</a></td> <td>{{ writing.contents }}</td> <td>{{ writing.date }}</td> </tr> {% endfor %}제목 링크 넣는 부분 강의에 빠져있어서 혹시나 하고 올립니다 {{ writing._id }}
-
탄탄한 백엔드 NestJS, 기초부터 심화까지
nestjs s3 파일업로드 진행중인데 Buffer속성이 없어요
nestjs s3 파일업로드 진행중인데 속성이 fieldname originalname encoding mimetype destination filename path size까지만 있고 buffer속성이 없네요... 어디갔죠 아무리 뒤져봐도 안나옵니다..
-
[리뉴얼] React로 NodeBird SNS 만들기
swr 구현 질문입니다.
const listFetcher = async (url) => { const res = await apiClient.get(url, { params: { siteKey: siteKey, keyword: searchData, page: page, size: 30, orderOption: sortModel.field || "createAt", orderSeq: sortModel.sort || "desc", }, }); console.log(res.data); return res.data; }; const { data: listData, error: listError, mutate: listMutate, } = useSWR(`/notices`, listFetcher); useEffect(() => { if (!listData) return; }, [listData]); useEffect(() => { listMutate(); }, [page, sortModel, selectBoxState, searchData]); 안녕하세요! 현재 next.js 프로젝트로 swr 구현중인데,현재는 useEffect로 mutate를 한번 더 하고 있어서 첫 렌더링 시, 총 2번의 api 호출이 되고 있습니다. 불필요한 api 중복 호출을 막기 위해첫 렌더링 시에는 한번만 api 호출이 되고, 변수의 state값이 변경될 때마다 api 호출을 하기 위해서는 어떻게 하는것이 나을까요..? ㅜ
-
하루만에 배우는 express with AWS
[강의 추가] 건의
삭제된 글입니다
-
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
힘이 듭니다
4장 보다가 코드리딩이 안되서 멘붕이 왔었습니다.6장에 이제 들어가는데 좀 더 잘되겠죠..? 힘을 주십시요 선생님
-
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Ubuntu 설치 시
안녕하세요. 강의 시작시, 사용중인 PC(노트북)의 OS를 Linux(Ubuntu)로 변경하는 게 조금 부담이 있어, Virual Machine 을 설치하여 해당 강의를 수강하여도 무방할까요?? 현재 PC(노트북)의 Memory는 16GB입니다.
-
[리뉴얼] React로 NodeBird SNS 만들기
최신 버전 업데이트 요청 건
안녕하세요. 이제 막 강의를 수강하려고 보고 있습니다. 1. 현재 강의에서 말하는 버전 next 9 버전이 실무에서 많이 사용되는 버전과 호환성에 문제가 없을까요? 2. next버전이 생각보다 낮던데, 리뉴얼 버전에서는 다 최신 버전을 사용하실 예정인가요? 3. 리뉴얼을 하신다면, 해당 강좌는 재구매를 해야하는 것인가요? 이상 질문 3가지 말씀 드렸습니다. 강의 감사하고 잘 듣겠습니다. 좋은하루 되세요.
-
[리뉴얼] React로 NodeBird SNS 만들기
[정보공유] next13일 경우 `className` did ont match. 오류 발생 시 해결법
결론: 루트 디렉토리에 next.config.js 파일 생성후설정에 compiler: {styledComponents: true} 추가 설명:스타일드 컴포넌트를 막 바꾼 뒤 저장을 했을 경우에는 오류가 발생하지 않습니다.하지만, ctrl+shift+R이나 F5 등 새로 고침을 했을 경우에 Prop className did not match. 라는 warning이 콘솔에 뜨면서 스타일이 적용이 되지 않을 경우가 있습니다. 해당 오류 발생 시에 저는 위 설정을 추가하니 해결되었습니다.
-
탄탄한 백엔드 NestJS, 기초부터 심화까지
cron, trigger
안녕하세요 강의 수강 후 팀원들과 웹 서비스 개발에서 백엔드를 맡고 있는 수강생입니다. 저희 서비스에서 db에 생성된 데이터가 생성될 때 지정한 날짜와 시간을 기준으로 24시간 후에 해당 데이터의 특정 컬럼 값의 상태가 변하는 제공되는 기능을 구현 중에 질문이 생겼습니다.해당 기능에서 cron 스케쥴러를 이용하는 것과 db단에서 trigger를 사용하여 처리하는 것 중 trigger를 사용할까 싶은데 trigger 사용시 db 복잡도가 너무 증가하지 않을까 싶어서 질문 드립니다. 참고로 db는 postgresql을 사용하고 typeorm 사용 중 입니다!
-
탄탄한 백엔드 NestJS, 기초부터 심화까지
중복코드 제거 공유
let error = exception.getResponse(); if (typeof error === 'string') { error = { error }; } response.status(status).json({ statusCode: status, timestamp: new Date().toISOString(), path: request.url, ...error, });문법공부는 따로 안해서, 더 좋은 방법이 있겠지만..
-
Express 튜토리얼 : 웹 서비스를 위한 핵심 API
[해결법] Error: req#logout requires a callback function
에러 나오는 이유passport.js 버전이 올라감에 따라 사용법에 변경이 있었기 때문입니다. 해결법아래와 같이 코드를 변경하면 정상동작합니다.router.get('/logout', (req, res, next) => { req.logOut(err => { if (err) { return next(err); } else { console.log('로그아웃됨.'); res.redirect('/'); } }); }); 자세한 설명https://medium.com/passportjs/fixing-session-fixation-b2b68619c51d위 포스트에서 내용 일부발췌하여 간단한 번역을 덧붙여둡니다. The other major change is that that req.logout() is now an asynchronous function, whereas previously it was synchronous. For instance, a logout route that was previously:이번 업데이트로 원래는 동기 함수였던 req.logout()이 비동기 함수가 됐습니다. 바로 아래의 코드는 동기함수였을 시절 쓰던 방식입니다.app.post('/logout', function(req, res, next) { req.logout(); res.redirect('/'); });should be modified to:이젠 위 코드처럼 쓰지 말고, 아래처럼 써야 잘 동작합니다.app.post('/logout', function(req, res, next) { req.logout(function(err) { if (err) { return next(err); } res.redirect('/'); }); }); ...This improves the overall security posture of any app using Passport for authentication.바뀐 사용법은 보안(security)상의 이점이 있습니다.
-
Express 튜토리얼 : 웹 서비스를 위한 핵심 API
[해결법] 'nodemon'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
nodemon을 글로벌(-g옵션)이 아닌 로컬(-g옵션 없이)에 설치한 경우package.json에서"main"값을 "index.js"로 하고scripts에 "watch" : "nodemon server"를 추가합니다.이후 터미널에서 npm run watch를 하시면 자동 재실행이 됩니다.{ ... "main": "index.js", "scripts": { "watch": "nodemon server" }, ... }https://oneroomtable.tistory.com/entry/Nodejs-%EC%97%90%EC%84%9C-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-%ED%95%98%EA%B8%B0
-
Express 튜토리얼 : 웹 서비스를 위한 핵심 API
[해결법] MongoClient.connect()가 콜백을 실행하지 않고 무한 대기하는 현상
초심자 입장에서 해결하기 어려웠던 문제가 있어 공유드립니다.선생님 혹은 잘 아시는 분들이 내용이 맞는지 검증해주시기를 부탁드립니다. 문제npm i mongodb로 설치하는 몽고디비 드라이버 버전이 5.0인 경우 connect()에 넣은 콜백함수가 실행되지 않는 현상이 있습니다. 이는 변경된 스펙때문인 것으로 보입니다.사진 좌측은 강의에 사용된 4.3이고, 우측은 제가 사용한 5.0입니다. 5.0에는 콜백을 인수로 받는 함수원형이 기재되어있지 않습니다. 해결해결 방법 예시 두 가지를 공유드립니다.아래와 같이 then-catch 합니다. (제가 이렇게 했습니다.) MongoClient.connect(MongoURL) .then(database => { app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); db = database.db('Express'); post = db.collection('posts'); }) .catch(err => { console.log(err); return; }) .finally(() => { console.log('끝'); }); 아래 가이드의 코드를 따라합니다.https://mongodb.github.io/node-mongodb-native/5.0/#connect-to-mongodb 감사합니다. 자세한 설명은 블로그에 달아두었습니다.https://velog.io/@yiwonjin/MongoClient.connect%EC%9D%98-callback%EC%9D%B4-%EC%8B%A4%ED%96%89%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%ED%98%84%EC%83%81