173만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라먹는 Next.js
강의 파트 : 2.16)SSG 4.폴백옵션 설정하기. 질문 : SSG경로 생성은 /books/[id] 페이지 요청이 발생했을 경우 생성되어야 하는걸로 이해했지만, index page만 접속해도 index page에 노출되는 id 값을 가진 데이터들이 전부 /books/[id] 에 해당하는 SSG 파일이 생성되었습니다. (지금 추천하는 도서, 등록된 모든 도서) (위의 사진은 빌드 후, 인덱스 페이지 요청 시 생성된 SSG파일들 입니다.) (인덱스에서 스크롤 해보니 생성되는것을 확인했습니다.) 이 상황은 next의 LInk컴포넌트 frefetch와 연관있는 경우일까요?
미해결
React Native with Expo: 제로초에게 제대로 배우기
13강 강의 예제로 진행중 AnimatedTabBarButton에서 type을 BottomTabBarButtonProps로 사용했을때, <Pressable {...restProps} /> 부분에서 PressableProps type과 불일치 에러가 발생해요. type assertion으로 {...restProps as PressableProps} 처리를 하면 에러 표기는 안나긴하지만 찝찝해서요. 강사님의 IDE와는 다르게 에러가 발생하는데 의존성 version 달라서 발생할 수도 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
서버 액션을 사용하면 api 설정을 좀 더 간단하게 해줄 수 있다는 것은 이해했습니다. 근데 그럼 이러한 서버 액션은 AppRouter에서 대부분의 api를 완전히 대체할 수 있는 걸까요? 아니면 상황에 따라서 서버 액션을 사용하기도 하고 api를 따로 만들어서 사용하기도 하고 그런건가요? 프로젝트를 만드려고 하는데 어떤 부분에서 서버 액션을 사용해야할지 정확히 감이 안잡혀서 질문 드립니다..!
미해결
React Native with Expo: 제로초에게 제대로 배우기
eas build --platform android --profile development 위 eas 빌드 명령어를 실행했는데 거의 30분째 Build in progress... 문구만 보이네요, 좀 찾아봤더니 Free Tier라 큐에 대기시간때문인 것 같은데.. 원래 이런건가요?
해결됨
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
버셀에 등록하는데 계속 에러가 나는데.. 어떤 방법으로 이 에러를 확인 할 수 있을까요?
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요! 다음과 같이 GET: http://localhost:3000/posts 아무런 파라미터 값 없이 요청을 실행했을 때 dto 객체의 기본 상태는 다음과 같고, 응답 결과로 아래와 같은 nextURL을 받을 수 있었습니다. "next": "http://localhost:3000/posts?page=undefined&order__createdAt=ASC&take=20&where__id__more_than=23" cursorPagination 이기 때문에 page를 사용하지 않지만 url에는 조립되는 이유가 로직에 값을 검증하는 부분이 없어서 그런 것 같은데요, 아래와 같이 값(dto[key])를 검증하는 것을 추가하니 문제 없이 동작하였습니다. if ( dto[key] // 값 검증 추가 && key !== 'where__id__more_than' && key !== 'where__id__less_than' ) { nextUrl.searchParams.append(key, dto[key]); } "next": "http://localhost:3000/posts?order__createdAt=ASC&take=20&where__id__more_than=23" 그런데 강사님께서는 따로 검증하지 않고 진행하셨음에도 nextUrl 쪽에 page가 따로 붙어나오진 않는 것 같은데요, 어떤 차이에서 발생한걸까요?.. ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데 figma 처럼 라디오버튼의 기본 색상을 회색으로 변경할 수 있을까요? css 파일에서 반복되어 사용되는 속성, 값들이 있는데 이런 값들은 공통적으로 사용하는 것이 구조적으로 좋을까요? 예) 아래 코드에서 .inputEmail과 .input에 설정하는 css 값들이 유사하지만 분리해서 작성 아래는 과제 관련 코드입니다! 미리 답변 감사합니다. <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet"> </head> <body> <div class="background"> <div class="signup"> <h2 id="title">회원 가입을 위해<br>정보를 입력해주세요<br></h2> <div> <span><br>* 이메일<br><br></span> <input class="inputEmail" type="text"> </div> <div> <span><br>* 이름<br><br></span> <input class="input" type="text"> </div> <div> <span><br>* 비밀번호<br><br></span> <input class="input" type="password"> </div> <div> <span><br>* 비밀번호 확인<br><br></span> <input class="input" type="password"> </div> <br><br> <div class="radioGender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <br><br> <div> <input class="agreement" type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <br> <hr id="line"> <br> <div> <button class="signupBtn">가입하기</button> </div> </div> </div> </body> </html> * { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; } .background { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px 0px #0068FF40; display: flex; justify-content: center; align-items: center; } .signup { width: 470px; display: flex; flex-direction: column; } .signup span { color: #797979; } .inputEmail { width: 100%; border: none; border-bottom: 1px solid #0068FF; } .input { width: 100%; border: none; border-bottom: 1px solid #CFCFCF; } .radioGender { display: flex; justify-content: center; align-items: center; gap: 30px; accent-color: #D2D2D2; } .agreement { font-size: 14px; } .signupBtn { width: 100%; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFFFFF; color: #0068FF; font-size: 18px; } #title { font-size: 32px; color: #0068FF; } #line { width: 100%; height: 1px; border: none; background-color: #E5E5E5; }
미해결
리액트 기초 (Introduction to React)
이미지 파일이라던지 json 파일이라던지.. 다운받아서 쓰라고 하셨는데 어디있는지 못찾겠어요...
해결됨
한 입 크기로 잘라먹는 Next.js
book 페이지는 일부는 정적으로 실행되고, 일부는 동적으로 실행되는 걸로 알고 있습니다. generateStaticParams에 설정된 id는 정적으로, 설정되지 않은 id는 동적으로 실행된 후 이후부터 정적으로 실행됨 위와 같이 알고 있는데 만약 이러한 페이지에 loading.tsx를 만들어서 적용한다면, 새로운 id로 요청할 때만 스트리밍이 적용되는 것이라고 이해하면 될까요? 이전 강의에서 generateStaticParams에 설정된 id는 fetch와 같은 동적 함수가 있더라도 정적 페이지처럼 저장된 데이터를 가져온다고 기억해서요
해결됨
애플 웹사이트 인터랙션 클론!
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
에러 어떻게 고치나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
yarn codegen 명령어 실행 시, ✖ Failed to load schema from http://main-practice.codebootcamp.co.kr/graphql : Unexpected response: "unconditional drop overload" 이와 같은 에러가 뜨네요. 혹시 서버가 지금 잠시 닫힌걸까요? graphql로도 접속이 안되어서 문의드립니다.
해결됨
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
혹시 헤메시는 분들을 위해 next.js nest.js 모두 기본 포트를 3000번 사용합니다. 간단하게 수정하시려면 backend/main.ts 파일에서 app.listen(port)를 변경 하셔서 사용하시면 됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
확장프로그램 설치, "vscode-styled-components" ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ import styled from에서 경로 쓸 때 백틱금지 🤬
미해결
React Native with Expo: 제로초에게 제대로 배우기
안녕하세요 강사님 강의 15회차입니다. npx expo install 명령어를 통해서 expo-location 설치했고, 정상적으로 import * as Location from "expo-location"으로 정상 import 되었고 Node_modules의 expo-location으로도 잘 이동됩니다. Node_modules도 전부 삭제했다가 깔아보고 빌드도 다시 해봤는데 ERROR Error: Cannot find native module 'ExpoLocation', js engine: hermes 에러가 발생하고, 이 에러발생시에 WARN Route "./modal.tsx" is missing the required default export. Ensure a React component is exported as default. warn도 함께 나옵니다.(import가 제대로 되지않아 코드 하단부를 expo에서 안읽는것 같습니다) 해결방법좀 부탁드립니다.
미해결
웹 게임을 만들며 배우는 React
import React, { useState } from "react"; const Test = () => { const [counter, setCounter] = useState(0); const shouldComponentUpdate = (nextProps, nextState, nextContext) => { if (counter !== nextState.counter) { return true; } return false; } const onClick = () => { setCounter(); } console.log('렌더링'); return ( <div> <button onClick={onClick}>클릭</button> </div> ); } export default Test; 클래스로 작성해주셨는데, 제가 Hooks로 변경해서 작성해봤습니다. 클래스와 똑같이 테스트 되는거를 보고싶은데 테스트 결과가 다릅니다. 제가 잘 못 짠게 있다면 확인부탁드립니다.!
해결됨
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요~선생님 강의 잘 따라하고 있는데요, SEO 제안이 아닌, 다른걸로도 한번 만들어 봤는데, (node.js로)... 조금 복잡한거라 그런지 1000여개의 파일이 만들어 지더라구요. 그래도 콘솔에서 실행도 잘되고 에러도 없어서. 이번 장의 깃허브에 올리는걸 실험해볼려고 했는데, 파일이 U -> A로 변동이 되었는데 대부분의 파일이 U에서 A로 바뀌지 않더라구요. 그래도 이니셜 업로드는 되던데, u로 되어 있는것들이 어떤건지 찾아볼려고 해도 안보이더라구요. 그래서,,, 예를 들어 .env 파일처럼 올려서는 안되는 파일들이 u로 남아 있는건지요? 그렇다면 .env 하나야 복사해서 올리면 되는데, .env 파일처럼 실행에 필요한 중요한 파일들이 안올라가면, 나중에 깃허브에서 클론하고 가져왔을때(내 동료나 또는 내가 집에서 하고 싶을때) 실행에 어떤 파일이 필요한건지 알수 있나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
entity 등으로 생성된 tpye 에서 강의에서 사용된 코드로 예시를 들면 # product.entity.ts @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[]; 위와같이 nullable 을 사용하여 #schema.gql type Product { productId: String productName: String! description: String! productPrice: Int! isSoldout: Boolean! productSalesLocation: ProductSalesLocation productCategory: ProductCategory user: User productTags: [ProductTag!] } productTags: [ProductTag!] 와 같이 할 수 있었습니다. 위에서 productTags: [ProductTag!] 를 productTags: [ProductTag] 와같이 변경 해보려고합니다. 방법이 있나요? @Field(() => [ProductTag, { nullable: true }], { nullable: true }) 에러는 발생하지 않지만 안됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
yarn start:dev 를 할 경우 Many to Many 로 자동으로 생성되는 table이 자꾸 문제를 일으키네요. 서버 재 실행시 기존에 만들어진 중간테이블 강의에서는 상품_상품태그 테이블이 되겠네요. 해당 테이블을 삭제후 실행하지 않으면 에러발생시키네요. 원인을 찾아보면 아래 코드의 주석된 custom join table 이 문제였는데요. 기본 @JoinTable 사용시 문제는 사라집니다. // @JoinTable({ // name: 'PRODUCT_TO_PRODUCT_TAG', // 원하는 중간 테이블명 // joinColumn: { // name: 'PRODUCT_ID', // Product 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productId', // Product 엔티티의 실제 ID 컬럼명 (기본값은 PrimaryColumn 이름) // }, // inverseJoinColumn: { // name: 'PRODUCT_TAG_ID', // ProductTag 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productTagId', // ProductTag 엔티티의 실제 ID 컬럼명 // }, // }) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[]; 질문 1. 위의 문제를 해결할 수 있는 방법입니다. 질문 2. DB 컬럼에는 UPPER_CASE (SCREAMING_SNAKE_CASE) 로 작성하지 않나요? 그렇기 때문에 custom / 각 컬럼마다 @Column({ name: 'BOARD_TITLE', type: 'varchar', length: 50, nullable: false, }) @Field(() => String) boardTitle: string; 위와 같이 컬럼명을 하나하나 지정해줬습니다. typeorm 또는 요즘 실무 컨벤션에서는 강의에서처럼 카멜표기법으로 사용하나요? Node 강의지만 Java기준 스프링 기본설정에서 카멜케이스조차도 스네이크로 자동 변환하는데 말이죠! msa 구조에서는 테이블은 공통된걸 사용할수도 있으니 궁금해서 질문 드립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
제목과 같습니다 클라이언트 컴포넌트는 서버에서 함수가 아예 실행되지 않고 빈영역의 HTML을 건네주며, FCP 때의 ui는 모두 서버 컴포넌트 또는 정적 페이지라고 이해했는데 사실인가요??
