173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요, 수업 잘 듣고 따라가고 있습니다~~!! 다름이 아니라 , 아무래도 graphQL를 이용한것보다 취직하고싶은 회사에서 대부분 REST API를 사용하는거같아 혹시 fetch 또는 axios를 사용하는 방법은 강의에 추가할 계획이 없으실까요? 그리고 nextjs에서는 axios를 사용하는 대신에 fetch를 사용하는것이 맞을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 프로젝트에서 error.tsx 를 띄우는 예시로, 백엔드 서버를 종료하여 데이터를 받아오지 못하게 함으로써 error.tsx 가 표시되는 경우를 다루셨습니다. 이때, "백엔드 서버를 종료해서 데이터를 받아오지 못하게 함"을 "페이지가 렌더링되지 못하게 함"으로 이해해도 괜찮은지 궁금합니다. 이 질문을 드리게 된 이유는, 프로젝트에서 에러를 처리할 때 error.tsx 나 에러 페이지를 띄우는 것 외에도 다양한 방식으로 에러를 처리할 수 있기 때문입니다. 예를 들어, 에러 모달을 띄운다거나, 다른 페이지로 이동시키는 등의 방법도 있습니다. 그래서 error.tsx 가 어떤 종류의 에러에 대한 대비책인지 명확히 이해하고 싶습니다. 저는 error.tsx 가 예상치 못한 500번대 서버 에러와 같은 페이지나 컴포넌트 렌더링 실패 를 처리하는 페이지라고 이해하고 있는데, 제 이해가 맞는지 궁금합니다.
미해결
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
인프런 닉네임: 놀란 호랑이 인프런 이메일: madeleineluv@kakao.com 깃 이메일: apple380g@gmail.com 깃 닉네임: Hell0Stranger 깃 권한 요청드려요 :)
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 ! 해당 강의를 듣고 기능은 비슷한데 내용은 조금 다른 홈페이지를 제작해보고 싶어져서 질문 드립니다 ! API를 호출하는 기능은 이해했는데, 강사님이 만드신 API 처럼 저도 직접 간단한 정보를 담은 api 를 만들어보고 싶은데 이 부분은 어떻게 제작하는 지 알 수 있을까요?!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 ! 해당 리액트 강의에서 했던 실습에서는 기능위주? 로 진행해서 궁금증이 생겼습니다 ! 만약 리액트를 사용해서 간단한 정보 공유 웹 사이트를 만든다면 텍스트의 양이 많아지는데 이런 경우에는 파일 내부에 내용을 작성하면 코드가 길어지니, 직접 api 제작하고, 연동하는 게 맞는 거겠죠!?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의 구매 할인 어떻게 진행하면 되는건가여ㅛ? 방법을 몰라서 문의드립니다.,
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 citiList 에 더보기 버튼이 있는데 handleLoadMore 함수가 더보기 버튼을 클릭했을 때 동작하는 함수인 것 이해했습니다. 근데 해당함수는 citiList 컴포넌트에서만 사용하니까 CitiList.js 에 작성할것으로 예상했는데 App.js 에 작성하셔서 App.js 에서 작성하고 CitiList 로 전달하는 이유가 궁금합니다!
해결됨
한 입 크기로 잘라먹는 Next.js
7-1 서버 액션 강의를 수강하는 중 page.tsx:75 Server Error: Route "/book/[id]" used params.id . params should be awaited before using its properties. 라는 문구와 함께 book > [id] 폴더의 page.tsx에서 404 오류가 발생하여 화면이 보여지지 않아 해결을 위해 다양한 시도를 해보던 중 해당 강의의 예제 코드(section7 - chapter1)를 가져와 사용했더니 (with-searchbar) > error.tsx에서 (0 , util_ delay__WEBPACK_IMPORTED_MODULE_3__.delay) is not a function Error 위 와 같은 오류가 뜹니다. 어떻게 해결해야할까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 섹션4의 next-auth 를 수강하고있습니다. next-auth를 사용하는 이유가 무엇인가요? 보통 백엔드에서 로그인 기능을 구현하는 것이 일반적이라고 알고 있습니다. next-auth는 백엔드가 로그인 기능을 구현하지 않았을 때 사용하는 것인가요? 아니면 이미 백엔드에서 구현한 로그인 API를 사용하기 위해서도 next-auth를 사용하는 경우가 있나요?
미해결
처음 만난 리액트(React)
23번 줄에 왜 에러가 뜨는지 이유를 모르겠습니다 npm을 실행하면 react 창에 다음과 같이 표출됩니다 vscode를 껐다 켜도 동일한 상황이 발생해요
미해결
입문자를 위한, ES6+ 최신 자바스크립트 입문
어느 순간부터 이렇게 뜨면서 prettier가 적용이 안되는데 어떻게 해결할 수 있나요? Error: Cannot find Prettier package.json
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! Next 강좌를 보던 중 헷갈리는게 있어 질문을 올리게 되었습니다! 다름이아니라, 현재 next15에서 getServerSideProps 등이 사라진걸로 알고있는데 그럼 서버사이드 렌더링을 서버 컴포넌트로 대체하는건지 여쭤보려고 합니다! 서버사이드 렌더링과 서버 컴포넌트는 다른 개념이라고 알고있는데 결국 서버사이드 렌더링을 서버 컴포넌트를 이용해서 구현하는 것인지,, 그게 궁금합니다!
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요, 혹시 최초 프로젝트 생성할때, nextjs15버전으로 설정되었는데 괜찮을까요? 14로 다운그레이드 해야할까요?
미해결
Next + React Query로 SNS 서비스 만들기
회원가입후 회원가입완료되면 자동으로 메인페이지 이동해야 하는데, 라이디렉트가 안되고 있습니다. db는 확인해보니 제대로 전송되고 있고요. 데이터 또한 정상적으로 200 떠서 넘김 처리한거 같은데 뭐가 말썽인지 모르겠습니다. 기존꺼 듣다가 15로 업데이트 해서 패키지로 기존에 싹다 날리고, npm i로 다시 설치 했습니다. 그래도 안되서 문의드려요. 1. env, 2.handler, 3.browser, 4.https, 5.auth 6.기타 컴포넌트 그대로 복사해서 붙여놨는데도 문제가있네요. 그리고 추가로 가입하기 버튼후 새로고침 안하면 계속 대기중으로 표시되는것 같습니다. 회원가입 시 프론트서버 회원가입 시 백엔드 서버(npm run start:dev) 회원가입시 브라우저콘솔( 이부분은 확인해보니 매우느리게 status가 200으로 처리가 되었네요) 확인사항: 방금 https://github.com/ZeroCho/next-app-router-15 으로 그대로 zip파일열어서 그대로 실행시켜 봤는데 제 코드랑 같은 현상이 일어나는걸로 봐서는 백엔드 혹은 백엔드와 상호작용에서 뭔가 문제가 있는것 같은데 혹시 문제해결을 알수있을까요? *추가로 새로보시는 분들은 상관없는데, 기존에 보시다가 변경되신 분들은 지금 강의 너무 혼란스럽습니다. 진행자 입장에서는 크게 변한게 없다고 하겠지만, 시청하는 입장에서는 패키지 버전부터, 기타 등등 이 바꼈고, 이해안가는 부분만 해당 강의를 시청할려고 다시 듣는데 기존꺼랑 새로운거랑 그냥 아예 섞여버려서 강의가 가독성이 지금 너무 떨어지고있습니다. 인트로부분에 15버전수정은 15버전이라고 기재한다고 했는데, 그것도 일부분만 하고 나머지도 슬쩍 변경이 됬는데, 아예 기존것처럼 해놔서 더 혼동이 오네요. 차라리 업데이트를 한번에 하시지 왜 진행도중에 하시는지 ..조금 불편합니다.. 나중에 참고해주시면 감사하겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
antd 편해서 적용하려는데 문제없나요? styled component 문제있다하셔서 css module로 커스텀하려는데 인라인 스타일로 커스텀하면되나요?
해결됨
한 입 크기로 잘라먹는 Next.js
한입 잘라먹는 NEXT.JS 강좌 풀라우트 캐시 2 4분 30초 쯤에 Suspense 를 사용하여 next run build 를 하는 과정이 있습니다 그런데 Type error: Type '{ searchParams: { q?: string | undefined; }; }' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 32 | 33 | // Check the prop type of the entry function > 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) { 계속 이런 에러가 발생해서 구글링 해서 찾아보면 components 및 해당 app 폴더 안에 중첩되는 page.tsx 나 layout.tsx 가 존재하면 이러한 에러가 발생할수도 있다고 하여 각 폴더 마다 파일명을 변경하고 계속 빌드를 시도했지만 에러문구는 해결이 되지않고 있네요... 위의 사진은 제가 현재 문제가 발생하고 있는 프로젝트의 전체 폴더 및 파일 구조입니다. 어디가 문제일까요...ㅠ 답변 부탁드리겠습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 현재 Context분리하기 부분의 강의를 듣고 있습니다. Provider를 사용하면 onCreate, onUpdate, onDelete에서 사용한 useCallback이 되지않는 것을 볼 수있는데 이 이유는 Provider도 컴포넌트이고 이 안에 onCreate, onUpdate, onDelete 객체들이기 때문에 주소값이 바뀌므로 전부 재렌더링이 되어서 useCallback이 되지 않는다..... 이렇게 이해를 했는데 이렇게 이해를 하는게 맞는건가요? 그리고 TodoDispatchContext에서 onCreate, onUpdate, onDeleterk 변경되지 않는 값이라고 나오는데 할일을 추가하면 추가한 내용이 나오고 업데이트도 변경되고 삭제부분도 삭제를 하면 해당내용이 없어지기 때문에 변경이 되는데 이 변경되지 않는 값이라는게 정확히 어떤말인지 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
7:45에서 ref={inputRef} 코드가 보이는데요, console에 출력되는 input요소가 단순 모양만 같은 <input... > 인것인지, 아니면 현재 페이지의 input 요소인건지 궁금합니다. 만약 후자라면 똑같이 생긴 input 요소를 2개 만들어도 정확히 원하는 요소를 가리키겠지만, 전자라면 버그가 발생하지 않을까? 하는 생각이 들었어요. 그리고 만약 지금 name 말고 다른 input들도 유효성 검사를 하고 싶다면.. ref를 여러개 만들어야하나요?? 질문이 너무 뒤섞여있네요 하하
미해결
자바스크립트로 알아보는 함수형 프로그래밍 (ES5)
강의의 내용과 FxTS를 보면 주로 iterable(generator)에 대해 다루는 것으로 이해가 됩니다. 그런데 범용적인 프로그래밍에 있어 iterable에 대해서만 주로 다루는 FxTS는 기능이 부족하다는 생각이 듭니다. (예를들어 iterable이 아닌 일반 객체를 FxTS로 다루기 힘듭니다. 만약 억지로 객체를 length가 1인 iterable로 변환한다고 해도 체이닝 과정에서 결국 적절한 모나드가 없어 중간에 체이닝이 끊어지는 일이 쉽게 발생할 것 같습니다.) FxTS를 마치 RxJS와 같이 특정 문제에 대한 해결을 목적으로 만들었는지, 그리고 실무에서 코드를 주로 함수형으로 작성한다면 FxTS만으로 하는지 아니면 다른 도구를 추가로 사용중인지도 궁금합니다. 좋은강의 감사드립니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 코드팩토리님 NestJS에 관심이 생겨 최근 강의를 듣고 있습니다. OneToOne 에서 onDelete 설정을 했을 때 계속 profile이 null 값으로만 변경되는데 제 코드에 문제가 있는지 궁금합니다. 검토 한 번 부탁드려요. 감사합니다!! // user.entity.ts export class UserModel { // 자동으로 ID 생성 @PrimaryGeneratedColumn() id: number; @Column() email: string; @Column({ type: 'enum', enum: Role, default: Role.USER, }) role: Role; // 데이터가 생성되는 날짜와 시간이 자동으로 찍힌다. @CreateDateColumn() createdAt: Date; // 데이터가 업데이트되는 날짜와 시간이 자동으로 찍힌다. @UpdateDateColumn() updatedAt: Date; // 데이터가 업데이트 될 때마다 1씩 올라간다. // 처음 생성되면 값은 1이다. // save() 함수가 몇번 불렸는지 기억한다. @VersionColumn() version: number; @Column() @Generated('uuid') additionalId: string; ////////////// 이 부분 ///////////// @OneToOne(() => ProfileModel, (profile) => profile.user, { // find() 실행 할 때마다 항상 같이 가져올 relation을 정할 수 있다. eager: true, // 저장할 때 relation을 한번에 같이 저장 가능하게 한다. cascade: true, // null 값이 가능하게 한다. nullable: true, // on: ~했을 때 // 관계가 삭제 됐을 때 // no action => 아무것도 안함 // cascade => 참조하는 Row도 같이 삭제 // set null => 참조하는 Row에서 참조 id를 null로 변경 // set default => 기본 세팅으로 설정 (테이블의 기본 세팅) // restrict => 참조하고 있는 Row가 있는 경우 참조 당하는 Row 삭제 불가 onDelete: 'RESTRICT', }) profile: ProfileModel; ////////////// 이 부분 ///////////// @OneToMany(() => PostModel, (post) => post.author) posts: PostModel[]; } // app.controller.ts import { Controller, Delete, Get, Param, Patch, Post } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; import { Role, UserModel } from './entity/user.entity'; import { Repository } from 'typeorm'; import { ProfileModel } from './entity/profile.entity'; import { PostModel } from './entity/post.entity'; import { TagModel } from './entity/tag.entity'; @Controller() export class AppController { constructor( @InjectRepository(UserModel) private readonly userRepository: Repository<UserModel>, @InjectRepository(ProfileModel) private readonly ProfileRepository: Repository<ProfileModel>, @InjectRepository(PostModel) private readonly PostRepository: Repository<PostModel>, @InjectRepository(TagModel) private readonly TagRepository: Repository<TagModel>, ) {} @Get('users') getUsers() { // OntToOne에 eager: true 설정을 하면 relations 옵션을 여기에서 넣어주지 않아도 된다. return this.userRepository.find({}); } @Delete('user/profile/:id') async deleteProfile(@Param('id') id: string) { await this.ProfileRepository.delete(+id); } @Post('user/profile') async createUserAndProfile() { const user = await this.userRepository.save({ email: 'asdf@naver.com', profile: { profileImg: 'asdf.jpg', }, }); // cascade: true 설정을 하면 relation을 한번에 같이 저장하게 되서 더 이상 두번 save 할 필요가 없음 // const profile = await this.ProfileRepository.save({ // profileImg: 'asdf.jpg', // user, // }); return user; } }
