묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
안녕하세요!어제오늘 이틀내내 구글링도 해보고 이렇게 저렇게 다 시도해봤는데 결국 실패하고 질문드려요..! 포트폴리오 PDF파일의 예시처럼 실전퍼블리싱 파트를탭메뉴 안에 slick slider로 해서 넣고싶은데탭버튼과 컨텐츠를 pos:r 과 pos:a으로 하면 높이값이 사라지면서 슬라이더가 깨지고,input버튼으로 하면 1번 탭버튼 컨텐츠는 잘 적용되지만2번째 탭버튼부터는 슬라이더가 깨지면서 너비값이 0이 됩니다ㅠㅠ 어떻게 코드를 짜야 pdf파일처럼 나올 수 있나요?ㅠㅠ제가 참고하고 싶은 구성입니다. 처음 탭메뉴에서는 잘 배치가 되는데두번째 탭메뉴부터 이렇게 깨져요...!! html은 이렇게 구성되어있어요..!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
JSX에서 CSS파일 연결하는게 안됩니다
안녕하세요 선생님강의 잘 듣고 있습니다! 다름이 아니라 선생님 강의 중 'JSX로 UI 표현하기' 편을 듣고 있는데import를 이용해서 CSS파일을 연결하는 부분에서 막혔습니다강의와 똑같이 작성했는데 스타일 적용이 안되는 이유가 뭘까요?화면에 오류 표시도 안뜨는데 코드에 문제가 있는지 궁금합니다
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
상태 검증과 행위 검증에 대해서 질문이 있어 남기게 되었습니다!
현재 하고 있는 프로젝트에 테스트 코드를 연습하고 있는데 상태 기반 검증은 보통 "custom hook"과 같이 비즈니스 로직에 하고, 행위 검증은 컴포넌트의 이벤트 처리와 같은 상황에 하고 있는데 이렇게 진행하는게 맞는 건지에 대해서 궁금해서 질문을 남기게 되었습니다!vitest에서는 stub과 mock과 같은 테스트 더블을 완벽하게 구별짓지 않는다고 생각하고 있는데 맞을까요? 추가적으로 공부를 해보았을 때 상태 기반 검증은 stub, fake 행위 기반 검증은 mock, spy로 하는 것이라고 나누었는데 이것이 맞는 내용인가요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
class 내의 함수를 화살표 함수로 쓰는 이유가 있나요??
안녕하세요.class 내에 함수는 function을 적지 않아서 더 간단하게 작성이 가능한데, 화살표 함수를 사용하시는 이유가 있을까요?? class Monster { power = 10 constructor(qqq){ this.power = qqq } attact = () => { console.log("공격하자!!"); console.log("내 공격력은" + this.power + "야!!!"); } run(){ console.log("도망가자!!"); } } // 둘의 차이는??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
section 10-01 실습중에 DB연결 및 생성이 안되서 질문드립니다.
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { ConfigModule } from '@nestjs/config'; import { GraphQLModule } from '@nestjs/graphql'; import { TypeOrmModule } from '@nestjs/typeorm'; import { BoardsModule } from './apis/boards/boards.module'; @Module({ imports: [ BoardsModule, ConfigModule.forRoot(), GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: process.env.DATABASE_TYPE as 'mysql', host: process.env.DATABASE_HOST, port: Number(process.env.DATABASE_PORT), username: process.env.DATABASE_USERNAME, password: process.env.DATABASE_PASSWORD, database: process.env.DATABASE_DATABASE, // env파일에서 수정 entities: [__dirname + '/apis/**/*.entity.*'], // 수정 synchronize: true, logging: true, }), ], }) export class AppModule {} 위와같이 코드 작성했고터미널에서 yarn start:dev 할경우아래와 같이 오류가 떠서 작동이 되지않습니다.어떻게하면 될까요?[Nest] 13226 - 2024. 03. 15. 오전 10:07:01 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...MissingDriverError: Wrong driver: "undefined" given. Supported drivers are: "aurora-mysql", "aurora-postgres", "better-sqlite3", "capacitor", "cockroachdb", "cordova", "expo", "mariadb", "mongodb", "mssql", "mysql", "nativescript", "oracle", "postgres", "react-native", "sap", "sqlite", "sqljs", "spanner". at DriverFactory.create (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/src/driver/DriverFactory.ts:72:23) at new DataSource (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/src/data-source/DataSource.ts:149:43) at createTypeormDataSource (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:164:23) at /home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/@nestjs/typeorm/dist/typeorm-core.module.js:169:36 at Observable._subscribe (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/rxjs/src/internal/observable/defer.ts:55:15) at Observable._trySubscribe (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/rxjs/src/internal/Observable.ts:244:19) at /home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/rxjs/src/internal/Observable.ts:234:18 at Object.errorContext (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/rxjs/src/internal/util/errorContext.ts:29:5) at Observable.subscribe (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/rxjs/src/internal/Observable.ts:220:5) at subscribeForRetryWhen (/home/seasnake/CODECAMP-BACKEND-CLASS/class/section10/10-01-mysql-relation/node_modules/rxjs/src/internal/operators/retryWhen.ts:74:25)
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
오픈채팅방 추가 개설 문의
안녕하세요 강사님오픈채팅방 정원이 다 차서 접속이 불가하네요 ㅠㅠ혹시 오픈 채팅방 추가 개설 예정은 없으실까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
refresh token 관련
안녕하세요 강의 잘듣고 있습니다!refresh token의 재발급 로직에서 궁금한 점이 생겼는데요,accessToken과 refreshToken이 모두 만료돼었을때 (오랫만에 앱을 들어간 경우) 만료된 refreshToken을 통해서 다시 refreshToken을 재발급 받는게 맞을까요?^ 위의 Guard가 들어가 있고 ^ Guard안에는 verifyToken이 들어 있어 accessToken을 발급받기위한 만료되지 않은 refreshToken이 들어있을땐 문제가 없지만 만료된 refreshToken이 들어가면 에러가 발생합니다.혹시 제가 강의중 놓친것이 있다면 알려주시면 감사하겠습니다!
-
미해결처음 만난 리액트(React)
Event의 정의 및 Event 다루기 설명 확인 요청
강의에서 컴퍼넌트 이벤트 콜백에 Bind 해주는 내용이 나옵니다.함수 내에서 사용하는 this 스코프를 정하기 위해 bind를 하는 거로 알고 있는데요. 괄호로 설명하는건 맞지 않는것 같습니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
8.4) Create - 투두 추가하기 부분에서 SyntheticBaseEvent가 저장됩니다.
투두 리스트 실습하고 있는데, 입력폼을 통해 입력한 항목이 State에 저장되지 않고, SyntheticBaseEvent가 저장되어 있네요84) Create - 투두 추가하기 7:21 부분에서 INPUT에 항목을 입력하고 [추가] 버튼을 누르면 content 부분에 입력 텍스트가 아닌 합성이벤트 객체가 저장되는데 무슨 문제인지 궁금합니다. 덧. 다시한번 작성해보니 OnCreate 함수를 전달받아 추가 버튼을 눌러 onSubmit 할때 파라미터로 content 스테이트값을 전달했네요 -_-);; 해결되었습니다만, 이 과정에서 어떤 문제가 있었나 보네요, content를 다시한번 참조하는 상태가 된건가요? 값을 전달한게 아니라 참조가 전달된거라고 보면 될려나요.. [ -------SyntheticBaseEvent가 생성된 코드-------]const onSubmit = (content) => {onCreate(content);}
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
vue3 에러 메세지...
piniaData.jsimport { defineStore } from 'pinia'; import { fetchAskList, fetchJobsList, fetchNewsList, fetchUserInfo, fetchItem, fetchList } from '../api/index'; export const usePiniaStore = defineStore('listData', { state: () => { return { news: [], ask: [], jobs: [], user: {}, item: {}, loading: true, list: [], } }, getters: { fetchedNews(state) { return state.news }, fetchedAsk(state) { return state.ask }, fetchedJobs(state) { return state.jobs }, fetchedUser(state) { return state.user }, fetchedItem: (state) => state.item, fetchedList: (state) => state.list }, actions: { async FETCH_NEWS(){ try { this.loading = true; const res = await fetchNewsList(); this.news = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_ASK(){ try { this.loading = true; const res = await fetchAskList(); this.ask = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_JOBS(){ try { this.loading = true; const res = await fetchJobsList(); this.jobs = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_USER(id){ try { this.loading = true; const res = await fetchUserInfo(id); this.user = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_ITEM(id){ try { this.loading = true; const res = await fetchItem(id); this.item = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, async FETCH_LIST(pageName){ try { this.loading = true; const res = await fetchList(pageName); this.list = res.data; return res; }catch(error){ console.error(error); }finally{ this.loading = false; } }, } }) CreateListView.jsimport { h } from 'vue'; import ListView from './ListView'; import { useRoute } from 'vue-router' import { usePiniaStore } from '../store/piniaData' export default function createListView(componentName) { return { name: componentName, setup() { // store 를 쓰기위함 const store = usePiniaStore(); // store에 우리가 만든 state를 사용하고, api요청 함수를 사용하기 위해 const { FETCH_LIST } = store; const routeName = useRoute().name; FETCH_LIST(routeName). then(() => { console.log('fetched') }); return { routeName } }, render() { // ListView 컴포넌트를 렌더링하는 렌더링 함수 return h(ListView); } } } 로 작성을 해서 기능은 다 작동하는데요... 콘솔창에[Vue warn]: Property "name" was accessed during render but is not defined on instance. at <ListItem> at <ListView> at <NewsView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {_pStores: {…}, …} > > at <BaseTransition appear=false persisted=false mode=undefined ... > at <Transition name="page" > at <RouterView> at <App>에러가 계속나오는데 어떻게 해결할 수 있는지 알 수 있을까요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이렇게 풀어도 괜찮을까요? sort와 map, while을 이용하여 풀었습니다.
<html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(arr) { let answer = []; let arrCopy = arr.map((item) => item); let corrarr = arrCopy.sort(function (a, b) { return b - a; }); for (let i = 0; i < arr.length; i++) { let j = 0; while (j < corrarr.length) { if (arr[i] == corrarr[j]) { answer.push(j + 1); break; } j++; } } return answer; } let arr = [87, 89, 92, 100, 76, 89]; console.log(solution(arr)); </script> </body> </html>이렇게 풀면 문제가 있을까요??
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
이미지가 왜 안뜨나 했더니 Ctrl + shift + I로 오류 찾았을 때Not allowed to load local resource가 뜨네요Html 문서와 같은 장소에 이미지 파일이 있거나그보다 하위 폴더에 있을 때만 이미지가 뜨고 상위 폴더에 있거나 절대 경로로 접근은 보안상의 이유로 차단되어있는 것 같네요 구글 이미지 링크주소 복붙은 정상적으로 되는데 간혹 안되는 이미지 파일도 있네요
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
docker-compose 실행시 volume 연결 문제
[질문]postgres-data 연결이 안됩니다. 검색과 질문들을 통해 바인드 마운트라는 걸 알게되었습니다.현재 상황입니다.이전에 postgreSQL 설치를 했었던 적이 있어서, 완전 삭제 하고, 포트번호 변경, 절대경로, 폴더권한(윈도우라서 살짝만..), 재설치, 검색 등을 해보았지만, 주변지식을 얻을 수 있었지만, 해결책을 찾지는 못했습니다.강사님 help me~ 윈도우 11 homevscodenodejs 20docker desktop 4.28 (wsl 2) docker-compose.yaml 실행 로그nestjs 실행 로그폴더
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Link 적용하기 관련 문의드립니다.
Link 수업 듣는 중에 아래 질문과 같이 동일한 문제가 발생했는데요(상품 클릭 시, 링크 변경은 되는데 페이지 이동이 안되는 현상)https://www.inflearn.com/questions/645148/link-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B4%80%EB%A0%A8%EC%A7%88%EB%AC%B8 질문 확인하고<React.StrictMode> 을 제거하기 전에는 상품카드를 클릭했을때 url만 변경되고 페이지가 새로고침되지 않았습니다.<React.StrictMode> 제거해야지만 클릭시 url변경 + 페이지 새로고침까지 되었습니다강의와 동일하게 작성하였는데 왜 <React.StrictMode> 제거 후 문제가 해결된걸까요?
-
미해결함수형 프로그래밍과 JavaScript ES6+ 응용편
fxjs 라이브러리 takeL 관련하여 질문드립니다.
안녕하세요기본편 부터 응용편 까지 천천히 학습하고 있습니다.응용편 부터는 라이브러리를 가져와서 강의를 진행하시는데 강의 수강 중 궁금한 사항이 있어 질문드립니다. github에 올려주신 오픈소스를 참조하는데 takeL 부분이 이해가 되지 않아 문의드립니다. L.take = curry(function* (l, iter) { let prev = null; iter = iter[Symbol.iterator](); for (const a of iter) { if (a instanceof Promise) { yield (prev = a.then((a) => (--l > -1 ? a : Promise.reject(nop)))); prev = prev.catch(noop); } else { yield (--l, a); } if (!l) break; } }); L.take를 이렇게 표현하면 앞선 Promise가 resolve 되길 기다리는 Promise를 그대로 이어가면서 전달 가능한데 yield (prev = (prev || Promise.resolve()) .then((_) => a) .then((a) => (--l > -1 ? a : Promise.reject(nop)))); 이렇게 표현하신 이유가 어떤이유인지 알고싶습니다. 또 제가 작성한 수정한 부분에 문제가 있다면 알려주시면 감사하겠습니다. 또 궁금한 내용이 오픈소스에 for of 아래 a.catch(noop); Promise를 catch 하는 코드가 추가되어 있는데 이 부분 역시도 어떤의도로 구현한 것인지 궁금합니다. 수업내용에서는 비동기/동시성을 통해 한번에 Promise 콜백이 병렬적으로 평가되면서 배열에 담기는 시점에 콜스택에서 에러가 출력되지 않기 위해 사용하는 트릭으로 알고있는데요, L.take 에서 a.catch가 실행되는 시점에는 Promise가 reject로 풀려서 전달될 수 없을것 같은데 이 부분도 설명부탁드립니다.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
해쉬에서 맵을 쓰는 이유?
function solution(s) { let answer = s[0]; let count = {}; for (const i of s) { if (count[i]) count[i] += 1; else count[i] = 1; } for (const i in count) { if (count[i] > count[answer]) answer = i; } return answer; } let str = "BACBACCACCBDEDE"; console.log(solution(str)); 혼자서 풀어봤을 때는 맵을 쓰지는 않았는데, 혹시 해쉬 구조에서 객체 대신 맵을 사용해서 얻을 수있는 이점이 어떤 게 있을까요? 또, 위와 같은 방법으로 풀었을 때 문제는 없을까요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
debug
강의중 debug 내용이 너무 좋아보여서실행하려고 하는데, 첫 step 부터 문제가 생겼습니다.말씀하신 대로에서 create a launch.json file 을 클릭했는데위 이미지 처럼 nodejs 가 나오지 않습니다. 몇시간 동안 검색을 했지만, 추가하는 방법을 찾지 못해 질문드립니다.혹시 수강생 중에 비슷한 상황을 겪어 보신 분..해결방법을 아시는 분 도움을 부탁드립니다.^^ [1] node -vv20.11.0v18.19.0 모두 테스트 해봤습니다.[2] 혹시나 해서 vscode 새로 설치도 해봤습니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
매개변수를 넣는 이유
안녕하세요, 강사님~자바스크립트 책과 강의에 많이 투자했는데 강사님 강의만큼 명료하고 쉬운 게 없어서 다른 것 재쳐두고 계속 이것만 정주행 하고 있습니다.입문자들의 희망이 되어 주셔서 정말 감사합니다! 다름이 아니라 단락평가 공부 중 쓸 데 없는 궁금증이 생겼는데검색을 해봐도 해소가 안 돼서 질문드립니다.function printName(person) { const name = person && person.name; console.log(name || "person의 값이 없습니다."); } let person = { name: "이정환", }; printName(person);강의 중에 이런 예시가 나왔었는데첫 줄에서 printName이라는 함수를 선언하면서 매개변수로 (person)을 받도록 했고, 마지막에 함수를 실행할 때도 (person)이라는 인수를 넣어서 실행하셨는데요,이유가 무엇인가요?여기서 person이라는 매개변수의 역할이 무엇인지 이해가 되질 않아서 빼보니 빼봐도 잘 작동하는데넣은 거랑 뺀 것이랑 어떤 차이일까요? 완전 초보라서... 기초적인 질문해봅니다!
-
미해결코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)
javascript 자동완성 안됨
vscode에서 html은 자동완성이 되는데 javascript 자동완성이 안됩니다. 해결방법이 있나요?
-
미해결진짜! 자바스크립트(Javascript) - 기초부터 고급까지
메모리에 변수 생성과 값을 할당할 때
지금 변수와 값을 생성하는 부분을 보고있습니다. 그런데 메모리에 변수와 값들의 주소를 가지는 포인터 변수를 가진다고 하신 부분에서 궁금증이 생겼는데 그러면 메모리의 값들은 이미 메모리 셀에 기존부터 가지고 있는 건가요? 아니면 그때마다 임의로 값을 메모리에 생성하는 건가요?