173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
질문 1. next/image는 (Image컴포넌트) 웹사이트의 로딩 성능에 많은 영향을 미치는 이미지를 사용하는 것만으로도 큰 개선을 볼 수 있도록 해주는 컴포넌트이라서 비용이 비싸다고 하는데 그렇다면 AWS로 배포했을 때 next/image 때문에 비용이 더 올라 가나요? 질문 2. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금 합니다.
미해결
Next + React Query로 SNS 서비스 만들기
뭔가요?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
private composeFindOptions<T extends BaseModel>( dto: BasePaginationDto, ): FindManyOptions<T> { /** * where, order, take, skip 반환 * skip-> page based pagination에서만 */ /** * DTO의 현재 생긴 구조는 아래와 같다. * * { * where__id__more_than: 1, * order__createdAt: 'ASC, * } * * 현재는 where__id__more_than / where__id__less_than에 해당하는 where 필터만 사용중이지만 * 나중에 추가적인 where 필터를 넣고싶어졌을 때 모든 where 필터를 자동으로 파싱할 수 있을만한 기능이 * 필요하다.. * * 1) where로 시작한다면 필터 로직을 적용 * 2) order로 시작한다면 정렬 로직을 정용한다. * 3) 필터 로직을 적용한다면 '__' 기준으로 split 했을 때 3개의 값으로 나뉘는지 2개인지 확인한다. * 3-1) 3개의 값으로 나뉜다면 FILTER_MAPPER에서 해당되는 operator 함수를 찾아서 적용한다. * ex) ['where', 'id', 'more_than'] -> more_than을 실제 typeorm-operator로 적용 * 3-2) 2개의 값으로 나뉜다면 정확한 값을 필터하는 것이기 때문에 operator 없이 적용한다. * ex) ['order', 'createdAt'] -> operator 필요 X * 4) order의 경우 3-2와 같이 적용한다. */ let where: FindOptionsWhere<T> = {}; let order: FindOptionsOrder<T> = {}; for (const [key, value] of Object.entries(dto)) { if (key.startsWith('where__')) { where = { ...where, ...this.parseWhereFilter(key, value), }; } else if (key.startsWith('order__')) { order = { ...order, ...this.parseWhereFilter(key, value), }; } } return { where, order, take: dto.take, skip: dto.page ? dto.take * (dto.page - 1) : null, }; } 여기서 함수가 실행되면 where, order은 빈 객체로 초기화 되는데 왜 for 문 안에선 ...where, ...order을 해주는건가요?
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
강의에서 데이터를 재검증하는 방법으로 route handler를 생성하고 그 안에서 revalidateTag 함수를 호출해서 캐시를 지우는 방법을 소개해주셨는데요! 그와 관련해서 궁금한게 세가지 있어서 질문 드립니다. 버튼과 같은 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요? 위의 방법으로 캐시를 지운 후 브라우저를 직접 새로고침해야 새로운 데이터를 가져와서 화면상에서 갱신이 되던데 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요? next.js에서도 react처럼 axios를 많이 사용하나요? 제가 지금까지 이해한 바로는 next.js는 여러가지 캐싱 기능을 fetch를 이용한 요청으로 제공하는 거 같더라구요. 그리고 공식문서나 다른 블로그 글들 혹은 강의를 봐도 데이터 패칭 및 캐시 부분에서는 fetch를 사용하는 예시만 나와서 next.js의 캐싱 기능을 활용하려면 fetch를 사용해야 하는건가 싶습니다. react를 이용할 때에는 보통 실무에서는 axios를 많이 사용한다고 들었었는데 next.js는 어떤지 궁금합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground에서 입력한 곳에 이상한 하얀색 코드를 없애는 법 좀 알려주세요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님 강의 잘 보고 있습니다. 다름이 아니라, 리액트 앱 생성시 Vite에서 프레임 워크: React 생성후 자바스크립트가 아닌 타입스크립트로 생성해도 강의를 수강하는데는 문제가 없는지 알고 싶습니다..!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 디자인 전공생입니다! 웹디자인 배우면서 html은 맛보기로 공부했었는데, 강의 듣고 깔끔하게 다시 한번 정리할 수 있어 좋았습니다. 혹시라도 코드에 보완할점이 있을까 싶어 올립니다!! 그리고 checkbox와 radio button에서 색이랑 테두리 등의 속성을 변경하고 싶을땐 어떻게 해야하는지 궁금합니다! <!DOCTYPE html> <html lang="ko"> <head> <title>과제</title> <style> .page{ width: 1920px; height: 1080px; display: flex; align-items: center; padding: 60px 625px 60px 625px; } .pb{ width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; background-color: #FFF; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); display: flex; flex-direction: column; justify-content: space-evenly; padding: 72px 100px 70px 100px; } h1{ color: #0068FF; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; } .name{ color: #797979; font-family: "Noto Sans CJK KR"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .gender{ text-align: center; } .agree{ text-align: center; font-size: 14px; border: 0; border-bottom: 1px solid #E6E6E6; padding: 0 0 24px 0; } button{ color: #0068FF; text-align: center; font-size: 18px; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFF; } input{ border: 0; font-size: 30px; padding: 0 0 12px 0; border-bottom: 1px solid #CFCFCF; } </style> </head> <body> <div class="page"> <div class="pb"> <h1>회원 가입을 위해<br> 정보를 입력해주세요</h1> <br><br> <div class="name">* 이메일</div><br> <input type="text"><br> <div class="name">* 이름</div><br> <input type="text"><br> <div class="name">* 비밀번호</div><br> <input type="password"><br> <div class="name">* 비밀번호 확인</div><br> <input type="password"><br> <div class="gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="agree"> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.<br> </div> <button>가입하기</button> </div> </div> </div> </body> </html>
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
지금 섹션 10?? 정도 듣고 있는데 docker-compose.yaml 파일 작성 하고 TypeOrmModule imports 해서 연결 하는 중인데 궁금한게 강의를 듣는 로컬 컴퓨터에도 postgres가 설치되어 있어야 하나요?? 영상에는 설치에 대한 부분이 없던것 같아서요 typeorm module 연결 하는 부분에서 database가 존재하지 않는다고 하는데 1번이 맞다면 postgres에서 db를 직접 만들어 준 다음에 typeormmodule 연결 해야 할까요?? << 이게 맞다면 영상이 누락된건가요?ㅠ 마침 pgadmin이 깔려 있고 postgres 14버전에 마침 postgres 라는 이름을 가진 db가 존재 해서 섹션9 POSTGRES_DB: postgres 실습 까지는 마친것 같은데 다음섹션에서 typeormstudy쪽은 이상하게 진행이 안되더라구요... 연구 결과 도커 컴포즈 파일의 ports 5432:5432중 앞의 포트는 로컬 컴퓨터의 포트이다. 로컬 컴퓨터에 postgres가 설치되어 있지 않다면 강의 영상처럼 따라하면 된다. 로컬 컴퓨터에 postgres가 설치되어 있다면 로컬 5432 포트를 postgres가 사용 중일 것이다. 3번이라면 5432 외의 다른 포트를 활용해 진행 하는 방법이 있고, postgres 설치 과정이 기억 난다면 app.module에서 typeorm 초기화 할때 설치하며 세팅했던 dbname, user, pwd 입력해 연결하면 된다. 끗 5432 포트 정보 확인 $ lsof -i tcp:5432 // mac기준 윈도우는 검색... ```
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 선생님 제가 설정이 뭔가 틀어졌는지 consol.log하면 선생님처럼 console창이 안뜨고 이렇게 뜨는데 어떻게 해결할 수 있는 방법이 없을까요? 선생님처럼 콘솔창이 떴으면 좋겠습니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 점점 npm run dev 할 떄마다 빌드 속도가 엄청 느려지는 것 같아서요 아래 단계에서만 한 5분 있어야 success 뜨더라구요 구글링, 지피티로도 알아보았지만 해결되지 않아 질문 드립니다 단서 될만할지는 모르겠지만 제 윈도우 pc 사양이랑 설치된 패키지 내역입니다 // package.json { "name": "sleact-ts-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack" }, "author": "ZeroCho", "license": "MIT", "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@loadable/component": "^5.16.4", "@mui/icons-material": "^5.16.5", "@mui/material": "^5.16.5", "@types/gravatar": "^1.8.6", "@types/react": "^18.2.42", "@types/react-dom": "^18.3.0", "autosize": "^6.0.1", "axios": "^0.26.1", "core-js": "^3.15.1", "cross-env": "^7.0.3", "gravatar": "^1.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.25.1", "react-router-dom": "^6.25.1", "socket.io-client": "^2.5.0", "swr": "^2.2.5", "typescript": "^4.4.2" }, "devDependencies": { "@babel/core": "^7.13.8", "@babel/preset-env": "^7.13.8", "@babel/preset-react": "^7.12.13", "@babel/preset-typescript": "^7.13.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", "@types/autosize": "^4.0.3", "@types/fork-ts-checker-webpack-plugin": "^0.4.5", "@types/loadable__component": "^5.13.9", "@types/node": "^16.11.26", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.0.3", "autoprefixer": "^10.4.19", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", "eslint": "^8.13.0", "eslint-config-prettier": "^8.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.35.0", "fork-ts-checker-webpack-plugin": "^7.2.3", "postcss": "^8.4.39", "postcss-loader": "^8.1.1", "prettier": "^2.2.1", "react-refresh": "^0.12.0", "sass": "^1.77.8", "sass-loader": "^15.0.0", "style-loader": "^3.2.1", "tailwindcss": "^3.4.4", "ts-node": "^10.0.0", "webpack": "^5.24.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^4.0.0" } }
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다. 기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다. 소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다. /api/auth/[...nextauth]/route.ts const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], callbacks: { async signIn({ account, profile }: any) { if (account.provider === "google") { const response = await fetch( `${process.env.GATEWAY_SERVER_URL}/auth/v1`, { method: "POST", headers: { "Content-Type": "application/json", devicetype: "1", }, body: JSON.stringify({ sns_type: "GOOGLE", key: 인가코드, }), } ); } return true; // Do different verification for other providers that don't have `email_verified` }, }, }; const handler = NextAuth(authOptions); export { handler as GET, handler as POST }; 하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다. 또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!
미해결
인터랙티브 웹 개발 제대로 시작하기
지금 카드를 3d로 뒤집는데 그냥 뒤집히는게아니라 카드의 뒷면이 무엇인지 왼쪽아래나 왼쪽면부터 조금씩 뒤집어지는 느낌으로 뒤집기 위해선 animation3에서 이미지를 나눠서 보여준것처럼 효과를 줘야할까요? 그냥 카드가 3d로 휙 뒤집히는게 아닌 책장넘길때처럼 구현하고싶은데 뒷면을 확인할때 긴장감을 주기위해서 혹시 어떤 방법이 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
인강듣기전에 학습자료를 보고 먼저 따라했는데요. 인강에선 <main> 이부분을 삭제를 안했는데, 학습자료에선 main을 다 삭제 했더라구요. 이부분에서 학습자료를 참고해도 될까요? 아님 다시 복구 해야하나요? 이 부분 뿐만아니라 인강에서는 삭제를 안했는데, 학습자료에선 삭제된 부분이 꽤 있어서 걱정이 되어 문의를 드립니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 2.2)단락 평가 11:28 인수 전달 관련하여 질문 드립니다. function printName(person){ const name= person && person.name; // const age = person && person.age; console.log(name || "person의 값이 없습니다.") // console.log(age || "나이를 추정할 수 없습니다.") } printName({name:"이정환"}); 객체 값을 인수로 전달했을 때 name 변수에 인수로 전달받은 객체 값들이 정상적으로 저장되고 콘솔 창을 통해 출력되잖아요. printName함수의 person라는 매개 변수 형식?을 어디에서도 선언, 정의하지 않았는데 객체 타입으로 함수 호출 시 정상 출력되는 점이 혼란스럽습니다. 이전에 학습한 7가지 Truthy 한 값들 중 객체가 속해 있기에 Truthy 가 나오고, 그런 성질을 이용하여 변수에 name : "이정환" 이 저장되어 콘솔창에서 확인 가능한 결과가 나온다고 이해하면 될까요? 친절히 설명해주셔서 감사합니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의 너무 잘 보고있습니다. ㅎㅎ 혹시 테스트 코드 이번강의에 넣지 않으신 이유가 있나요 ?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<div className="todos_wrapper"> {todos.map((todo) => { return <TodoItem {...todo} />; })} </div> 여기서 <TodoItem {...todo} /> <TodoItem todo= {...todo} /> 두개 차이가 뭘까요 >? import React from "react"; import "../TodoItem.css"; const TodoItem = ({ id, isDone, content, date }) => { return ( <div className="TodoItem"> <input checked={isDone} type="checkbox" /> <div>{id}</div> <div>{content}</div> <div>{isDone}</div> <div>{date}</div> </div> ); }; ({ id, isDone, content, date }) 여기 {}에 넣는거랑 {}을 뺴고 넣는거랑 차이가 뭔지 모르겠어요..
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코팩님 강의를 따라서 코드를 작성했는데, 강의 영상을 봐도 BasicTokenGuard 에서 AuthService 를 주입 못 하는 이유를 모르겠어요.. AuthModule에가 가서 imports이랑 provider에 BasicTokenGuard를 넣어도 해결되지 않네여.. 가드의 위치는 강의랑 똑같이 auth/guard 폴더 안에 위치하고 있어요.. 원인이 대체 뭘까요..?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠ db관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요? supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요? 답변 부탁드립니다..
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
현재는 public에서 아이콘을 가져오는데 assets에 가져올때는 어떻게 하나요? import type { Meta, StoryObj } from "@storybook/react"; import { IconButton } from "../../components/IconButton"; const meta = { title: "Buttons/IconButton", component: IconButton, parameters: { layout: "centered", }, tags: ["autodocs"], argTypes: { alt: { control: "text", description: "아이콘의 대체 텍스트" }, iconPath: { control: "text", description: "아이콘의 경로", defaultValue: "", }, onClick: { action: "clicked", description: "아이콘 클릭 시 호출되는 함수" }, }, } satisfies Meta<typeof IconButton>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { args: { alt: "아이콘", iconPath: "ic-delete-dark.svg", onClick: () => {}, }, };
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요. 강의 따라서 HelloWorld.vue파일을 브라우저에서 띄워줬을 때 vue가 인식되지 않는 현상(Vue.js not detected)이 있는데 왜 그럴까요?
