173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(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; } }
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 작은 따옴표와 백틱을 구분하여 사용해야 하나요? 백틱을 써야하는데 작은 따옴표를 쓰면 오류가 나거나 그 반대 상황에서도 오류가 나는 경우가 있을까요?큰 따옴표도 궁금합니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
섹션 5 4.2 첫 React App 생성하기 - 3분 3초 npm create vite@latest 입력 시 아래와 같은 에러가 납니다. 예전에 vue 프로젝트를 만들 때도 똑같은 에러가 났는데 구글에 검색하고 생성형 AI에 물어봐도 해결이 안 돼서 질문 드립니다,, 에러 코드: $ npm create vite@latest > npx > create-vite npm error code 3221225477 npm error path C:\Onebite_React npm error command failed npm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-vite npm error A complete log of this run can be found in: C:\Users\조현희\AppData\Local\npm-cache\_logs\2024-12-20T17_22_12_873Z-debug-0.log /c/Program Files/nodejs/npm: line 65: 1280 Segmentation fault "$NODE_EXE" "$NPM_CLI_JS" "$@"
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
윈도우 해결법은 있는데, Mac 해결법은 없는 것 같아서 공유 합니다. 터미널에 아래 명령어 입력하시구, mkdir ~/.npm-global export NPM_CONFIG_PREFIX=~/.npm-global export PATH=$PATH:~/.npm-global/bin echo -e "export NPM_CONFIG_PREFIX=~/.npm-global\nexport PATH=$PATH:~/.npm-global/bin" >> ~/.bashrc npm install -g vercel 입력하시면 정상 설치됩니다~!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
어제까지도 같은 디렉토리에 토이 프로젝트 새로 생성하면서 잘 진행하고있는데, 오늘 카운터앱 진도 나가면서 새로운 프로젝트 생성하는데, 생성하고 빌드시 이런 에러가 뜹니다. { "name": "section06", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.17.0", "@types/react": "^18.3.17", "@types/react-dom": "^18.3.5", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.17.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.13.0", "vite": "^6.0.3" } } package.json이구요 버전 체크 전부 해봤는데 어제 만든 잘 작동되는 프로젝트랑 아예 버전 차이도 없고, 생성후에 npm install 외에 아예 건든것도 없는데 npm run dev또는 npm run build 하면 저런 에러가 뜨네요.. 새로 다시 만들어도 에러고, 다른 디렉토리에 만들어봐도 똑같습니다. 이거땜에 1시간은 날린거같은데, 이럴 경우에 어떻게 해결해야하는게 좋을까요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 이번 강의 4분 10초에 나오는 state 값 content를 사용자에게 값을 입력받는 input의 value로 아래 코드와 같이 작성해주시는 이유는 무엇일까요?? value는 어떤 용도로 사용되며 content를 넣어주면서 어떤 변화가 생기는건지 이해가 잘 안되어서 질문드립니다! <input value={content} placeholder="새로운 Todo..." />
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 useMemo에 대한 강의를 보고 있습니다. 강의를 볼 땐 어느 부분의 코드가 계속 렌더링이 되기 때문에 불필요한 부분이라 최적화를 해주기 위해 useMemo를 사용한다라고 이해는 하지만 막상 혼자 어떤걸 만들어볼땐 어느 부분의 코드가 계속 렌더링이 되고 불필요한 코드인지 몰라 useMemo를 이용하기가 많이 어렵더라구요. 어떻게 하면 쉽게 이해해서 혼자 코드를 작성할 때 잘 이용할 수 있는지 궁금합니다 ^^
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
글 수정기능을 추가하고 useReducer로 바꿔서 했는데 글을 추가해도 새로운 내용이 나타나지 않고, 마지막 요소가 다시 추가되었습니다. [{content:"To1"}, {content:"To1"}] 확인해보니 컴포넌트에서 받은 props를 useState초기화값으로 넣으면 바뀌지 않는 사실을 알게되었습니다. 하지만 이부분을 useEffect형식으로 바꿔 적어주니 새로운 내용으로 바뀌는 것을 확인했습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } //////////////////////////////////////////// // useEffect 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(""); useEffect(() => { if (content) { setUpcontent(content); } }, [content]); ... } useReducer를 적용하지 않을때 props를 useState초기화값을 넣어도 잘 구동되었습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } 이것이 리액트 라이프 사이클 때문에 이러한 현상이 발생한것인가요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
초기값이 '' 이여서 강의에서는 value 값을 맨뒤로 넣고 input 태그에 닫힘을 작성하지 않음으로, 동작하게 하였는데 다른 방법으로는 <input type="text" placeholder="Search" id="search" value="${searchWord}" autocomplete="off"/> 로 작성하였습니다, value 를 싱글쿼터나 더블쿼터로 감싼다음 ${} 를 사용하시면, 뒤에다가 다른 속성을 넣거나 닫아도 정상 동작합니다. 참고 하실분 참고하셔도 좋습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 현재 useReducer를 이용하여 투두리스트 업그레이드 부분중에 몇가지 질문이 있습니다. useReducer에 대해서 어느정도 이해는 했지만 dispatch는 어느 부분에 작성을 해야되는지 조금 헷갈리는데 이 강의에서는 onCreate 함수안에 dispatch를 작성했는데 이 함수에 dispatch를 사용한 이유가 조금 헷갈립니다. 그리고 useRudcer는 비슷한 기능을 하는 함수들을(업데이트, 삭제) 좀 더 간단하게 만들기 위해 사용한다라고 이해하고 있으면 되는지도 궁금합니다. 마지막으로 리덕스와 조금 비슷한것같은데 useReducer와 리덕스는 완전 다른 개념인건가요?
미해결
Vue 3 시작하기
버튼 클릭을 해 이벤트를 발생시켰음에도 불구하고 개발자도구에는 No events라고 뜹니다. Timeline에서 record 버튼 눌러 record on 했음에도 마찬가지입니다. 해결방법을 아실까요? ㅠㅠ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두리스트를 만들고 있는데 여기서 만약 삭제버튼 옆에 수정버튼을 추가하여 todo list에 입력한 content 내용을 수정할 수 있는 기능을 추가하려면 todolist 내용 요소를 div요소에서 input text 요소로 바꾸고 보이기는 input value사용하고, 수정은 OnChange 이벤트를 사용하면 될까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 작성한 일기를 언제 작성했는지 필터링 하기 위한 getMonthlyDate 함수에 대해 질문이 있습니다. 강의 내용에서는 작성한 일기가 언제 작성했는지를 알기 위해서 beganTime, endTime을 두고 시간까지 비교를 하였는데요. 간단하게 getMonth()를 활용해서 작성한 일기를 해당하는 '월'로만 비교를 할 수는 없는 건지 궁금합니다!
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 basic, bearer 토큰을 이미 범용적으로 널리 사용된다고 하셨는데 궁금한점이 로그인할 때 id/pw 를 header 에 넣어서 보낸다고 하셨는데 패킷을 탈취하면 너무 취약할 것 같아서요. 제가 웹개발자가 아니라 실무에선 실제로 어떻게 쓰는지 알고싶어서 질문남깁니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의 내용처럼 그대로 따라 했을 때 다음과 같이 됩니다. 1. 아래 사진 처럼 breakpoint 설정 시 빨간색이 아니라 빈원이 나옵니다. 실제 실행하였을 경우 break가 걸리긴 하는데 ts파일이 아닌 compile된 js 파일로 넘어갑니다. 인터넷 찾아보고 sourceMap 관련된거 같아서 tsconfig 파일에 sourceMap: true 넣고 launch.json에 sourceMaps: true 넣어봤는데도 변함이 없네요 어떤 부분을 확인해봐야할까요?
미해결
TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
class의 메서드는 선언식으로 쓰는걸 좋아하는데 bind는 쓰기 싫어서 bind 필요한것만 arrow function 쓰면 클래스 메서드가 선언식이랑 표현식 섞인게 뭔가 일관성이 없어보이더라구요.. (섞어쓰면 나중에 이거 bind 필요한 메서드였나? arrow function으로 했었나? 헷갈릴것같기도 하고?)
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.3) React.memo와 컴포넌트 렌더링 최적화 강의를 보고, 투두 리스트 아이템에 체크박스를 클릭했을 때, Header 컴포넌트 외에 Editor 컴포넌트도 불필요하게 리렌더링이 되고 있어 리렌더링 되지 않도록 코드를 수정하였습니다. 코드를 수정해서 더 이상 리렌더링이 되지 않고 있는데 이러한 성능 최적화가 정말 필요한 건지에 대한 의문이 듭니다. 거대한 컴포넌트의 경우 불필요한 리렌더링을 막는 것은 정말 필요하고 좋을 것 같은데 Editor 컴포넌트나 Header 컴포넌트 정도의 작은 컴포넌트의 리렌더링도, 불필요하게 일어난다면 막는 것이 좋은 건지 아니면 굳이 최적화가 필요 없는 지 실무 관점에서 궁금합니다.
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000); }); promise .then((value) => { console.log(`${value} 번째 Promise 의 then`); return new Promise((resolve, reject) => { setTimeout(() => { resolve(2); }, 1000); }); }) .then((value) => { console.log(`${value} 번째 Promise 의 then`); return new Promise((resolve, reject) => { setTimeout(() => { reject(new Error('강제 에러')); }, 1000); }); }) .catch((error) => { console.log(error); }); 이런 형태로 then 과 catch 를 메서드 체이닝할 수 있는 이유는 then 과 catch 메서드가 Promise 를 반환하기 때문이라고 이해를 했습니다. 그런데 then() 메서드에 전달하는 콜백 함수에서 return new Promise() 를 하여 Promise 를 반환하면 해당 Promise 가 반환된다고 이해를 했는데 어떻게 그것이 가능한 지 잘 이해가 안됩니다. then 은 동기적으로 실행되고 then 메서드에 전달된 콜백은 마이크로 태스크 큐에 등록된 후에 콜스택이 모두 비어졌을 때 호출된다고 이해를 했는데... 연결고리가 이어지지 않는 느낌입니다.
