173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. Route 부분에 오류가 생겼는데 어떤 부분이 잘못되었는지 모르겠어서 질문 남깁니다. Route 함수에 path 경로를 설정할 때, 동적경로를 설정하고 싶으면 ":"과 함께 파라미터의 값을 적어주는 것으로 압니다. 강사님께서 적은 코드와 제 코드가 다른 점이 없는데, 저는 해당 url에 접근했을 때 url경로에 ':'이 포함되어서 나옵니다. 구글링+gpt를 사용해서 해당 오류를 고치려고 해보았지만 찾을 수 없는 상태입니다. 어떤 부분이 문제일까요? import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; import Home from "./Pages/Home"; import New from "./Pages/New"; import Diary from "./Pages/Diary"; import Edit from "./Pages/Edit"; import Notfound from "./Pages/Notfound"; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.data.id)); default: return state; } } const mockData = [ { id: 1, createdData: new Date("2024-06-12").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdData: new Date("2024-06-11").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createdData: new Date("2024-05-11").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); // 새로운 일기 추가 const Create = (createdData, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdData, emotionId, content, }, }); }; // 기존 일기 수정 const Update = (id, createdData, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdData, emotionId, content, }, }); }; // 기존 일기 삭제 const Delete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ Create, Update, Delete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App;
focus0007
2024-06-13T02:04:24.103Z
댓글 2
좋아요 0
조회수 235
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
nestjs 자료 다운로드 받을 수 있다고 하는데, 찾아봐도 도저히 못찾겠네요 어디서 찾을 수 있나요?
javascript typescript rest-api nestjs backend
wooong
2024-06-13T00:27:57.890Z
댓글 1
좋아요 0
조회수 278
해결됨
Vue.js 끝장내기 - 실무에 필요한 모든 것
jest.config.js 파일에서 preset 밑에 transformIgnorePatterns: ['node_modules/(?!axios)'], 이거 한 줄 추가해주시면 됩니다.. 이유는 axios 버전이 높아서 jest에서 es6를 인식 못하는것이 문제라고 합니다.. 감사합니다..
루나
2024-06-12T17:14:08.077Z
댓글 2
좋아요 2
조회수 492
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
학습 목표 - 배열 치트키 자료구조가 아닌 연결 리스트를 이용하여 queue 자료구조를 구현하자. - 삽입과 삭제를 시간복잡도 O(1)가 되게 해야됨. - queue은 FIFO이기 때문에 삭제시 첫번째를 삭제해야됨. class Node { constructor(value) { this.value = value; this.next = null; this.prev = null; } } class LinkedList { constructor(length = 0) { this.length = length; this.head = null; this.tail = null; } add(value) { const newNode = new Node(value); if (this.head === null) { this.head = newNode; this.tail = newNode; } else { newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } // 스택 구현시 삭제 메서드 removeLast() { const value = this.tail.value; this.tail.prev.next = null; // 제일 마지막 이전의 next의 좌표를 null로 변경해줌 this.tail = this.tail.prev; // 마지막을 tail의 이전 노드로 변경 해줌 return value; } // 큐 구현시 삭제 메서드 removeFirst() { const value = this.head.value; this.head.next.prev = null; // 제일 첫번째 다음의 이전 좌표를 null로 변경해줌 this.head = this.head.next; // 첫번째를 head next 노드로 변경 해줌 return value; } } // 숙제2 연결리스트로 큐 만들기 class Queue { linkedList = new LinkedList(); add(value) { return this.linkedList.add(value); } shift() { return this.linkedList.removeFirst(); } get top() { return this.linkedList.head.value; } get length() { return this.linkedList.length; } } const queue = new Queue(); console.log(queue.add(1)); // 1 console.log(queue.add(3)); // 2 console.log(queue.add(5)); // 3 console.log(queue.top); // 1 console.log(queue.length); // 3 console.log(queue.shift()); // 1 결과 head의 value값이 3, prev가 null이 되고 next가 value가 5인 노드를 가르킴
rhkdtjd_12
2024-06-11T08:02:56.576Z
댓글 1
좋아요 0
조회수 269
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
학습 목표 - 배열 치트키 자료구조가 아닌 연결 리스를 이용하여 stack 자료구조를 구현하자. - 삽입과 삭제를 시간복잡도 O(1)가 되게 해야됨. - stack은 FILO이기 때문에 삭제시 마지막을 삭제해야됨. class Node { constructor(value) { this.value = value; this.next = null; this.prev = null; } } class LinkedList { constructor(length = 0) { this.length = length; this.head = null; this.tail = null; } add(value) { const newNode = new Node(value); if (this.head === null) { this.head = newNode; this.tail = newNode; } else { newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } removeLast() { const value = this.tail.value; this.tail.prev.next = null; // 제일 마지막 이전의 next의 좌표를 null로 변경해줌 this.tail = this.tail.prev; // 마지막을 tail의 이전 노드로 변경 해줌 return value; } } // 숙제 1 연결리스트로 스택 만들기 class Stack { linkedList = new LinkedList(); add(value) { return this.linkedList.add(value); } pop() { return this.linkedList.removeLast(); } get top() { return this.linkedList.head.value; } get length() { return this.linkedList.length; } } const stack = new Stack(); console.log(stack.add(1)); // 1 console.log(stack.add(3)); // 2 console.log(stack.add(5)); // 3 console.log(stack.top); // 1 console.log(stack.length); // 3 console.log(stack.pop()); // 5 결과 디버거 결과를 확인 해보면 최종적으로 tail의 value는 3이고 next는 null prev는 value1의 노드를 가르키고 있는걸 알 수 있다.
rhkdtjd_12
2024-06-11T07:51:23.160Z
댓글 1
좋아요 1
조회수 280
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
const solve = (arr) => { let count = 0; let u = 0; let r = 0; let d = 0; let l = 0; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length; j++) { let my = arr[i][j] u = i !== 0 ? arr[i - 1][j] : 0 r = j !== arr.length - 1 ? arr[i][j + 1] : 0 d = i !== arr.length - 1 ? arr[i + 1][j] : 0 l = j !== 0 ? arr[i][j - 1] : 0 if (my > u && my > r && my > d && my > l) { count += 1 } } } return count }
hollis9797
2024-06-11T07:49:50.825Z
댓글 1
좋아요 0
조회수 252
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
typeORM은 0.3.17 입니다. 말 그대로 UserModel 에서 OneToOne 의 relation option "'onDelete: CASCADE'" 로 profile entity 를 삭제했을때 UserModel 이 삭제되지 않고, profile 이 null 로 표기되는 현상입니다.
javascript typescript rest-api nestjs backend
김찬기
2024-06-11T06:40:31.559Z
댓글 2
좋아요 0
조회수 342
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
8.4) Create - 투두 추가하기 강의를 들으며 4분대 경 코드를 작성 중입니다. import "./Editor.css"; import { useState } from "react"; const Editor = ({ onCreate }) => { const [content, setContent] = useState(""); const onChangeContent = (e) => { setContent(e.target.value); }; const onSubmit = () => { onCreate(); }; return ( <div className="Editor"> <input value={content} onChange={onChangeContent} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor; 이 부분에서, input에 들어가는 content는 추가 버튼을 클릭할 때만 value를 setContent로 해줘도 될 것 같은데요, 왜 onChangeContent로 값이 바뀔 때마다 밸류를 저장해주는지 궁금합니다. 타이핑할때마다(값이 바뀔 때마다) 저장할 필요없이 마지막에 추가할 때만 저장되어도 되지 않나 싶어서 궁금해졌습니다.
ryucream612
2024-06-11T05:49:51.751Z
댓글 1
좋아요 0
조회수 370
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
const solve = (arr) => { const result = [] for (let i = 0; i < arr.length; i++) { let count = 1 for(let j = 0; j < arr.length; j++) { if (arr[j] > arr[i]) { count += 1; } } result.push(count); } return result } 조금 간단...해..보이게..? 처음에 count 를 1로 줘서 1등으로 시작하고 풀이해주신 부분과 비슷하지만 살짝은,, 다르게 풀어봤습니다.
hollis9797
2024-06-11T03:26:14.862Z
댓글 1
좋아요 0
조회수 183
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 강의 잘 듣고 있습니다. 액세스 토큰이 만료되었다고 가정했을 때 프론트에서 특정 API(예시. post 조회)를 호출하면 토큰이 만료되었다는 에러 메시지를 받죠. 그러면 앱에서 토큰만료 리스폰스가 도착하면 토큰을 재발급 받은 후 다시 post를 조회하는 API를 호출하는건가요?? 고객의 입장에서는 위 내용을 알 필요가 없을 것 같아서요. (c. 클라이언트, s.서버) C.API 호출 -> [ S.만료되었다는 익셉션 -> C.재발급 요청 -> S.토큰 재발급 -> C.다시 API호출 ] -> S.응답 반환 위 순서도에서 대괄호 친 부분은 클라이언트에서 알아서 다시 처리하는건지 궁금합니다.
javascript typescript rest-api nestjs backend
Jin Su Yu
2024-06-09T11:11:40.252Z
댓글 1
좋아요 0
조회수 555
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
다른것은 다 문제가 없다만, 업로드 public/post파일에 이미지가 안들어옵니다일부러 폴더이름과 변수명은 다르게 했습니다 @Module({ imports: [ TypeOrmModule.forFeature([Event]), MulterModule.register({ fileFilter: (_req, file, cb) => { extname(file.originalname) return cb(null, true) }, storage: multer.diskStorage({ destination: (_req, _res, cb) => { cb(null, EVENT_IMG_PATH) }, // 파일 이름이 겹치지않게 고유한 uuid값을 이미지 고유 이름 앞에 붙여줌 filename: (_req, file, cb) => { cb(null, `${uuid()}${extname(file.originalname)}`) } }) }) ], controllers: [EventController], providers: [EventService] }) export class EventModule {} import { join } from 'path' //서버 프로잭트 루트 폴더 export const ROOT_PATH = process.cwd() // 외부에서 접근가능한 파일들 모아둔 폴더 이름 export const PUBLIC_FOLDER_NAME = 'upload' //위클 이벤트 사진들이 저장된 폴더 이름 export const EVENT_FOLDER_NAME = 'event' //실제 공개폴더의 실제 위치 export const PUBLIC_FOLDER_PATH = join( ROOT_PATH, PUBLIC_FOLDER_NAME ) //위클 이미지를 저장할 폴더 export const EVENT_IMG_PATH = join( PUBLIC_FOLDER_PATH, EVENT_FOLDER_NAME ) // upload/event/이미지 export const EVENT_PUBLIC_IMG_PATH = join( PUBLIC_FOLDER_NAME, EVENT_FOLDER_NAME )
javascript typescript rest-api nestjs backend
임상현
2024-06-08T18:59:34.259Z
댓글 1
좋아요 0
조회수 209
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
@Module({ imports: [ TypeOrmModule.forFeature([Event]), MulterModule.register({ fileFilter: (_req, file, cb) => { extname(file.originalname) return cb(null, true) }, storage: multer.diskStorage({ destination: (_req, _res, cb) => { cb(null, EVENT_IMG_PATH) }, // 파일 이름이 겹치지않게 고유한 uuid값을 이미지 고유 이름 앞에 붙여줌 filename: (_req, file, cb) => { cb(null, `${uuid()}${extname(file.originalname)}`) } }) }) ],
javascript typescript rest-api nestjs backend
임상현
2024-06-08T18:50:57.014Z
댓글 1
좋아요 0
조회수 183
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
안녕하세요. 강의를 듣고 지난달부터 필요한 웹화면을 만들어서 거의 완성을 했습니다. 현재는 테스트버전으로 만든 상태이나 그럭저럭 동작들이 잘 돌아가기는 하는데 코드도 좀 지저분하다는 생각이 들고.. 여러모로 관련이 있는 강의부분들을 다시 들어보며 가다듬고 있습니다. 처음 들었을 때는 무작정 주입식으로만 생각하고 받아들였었는데... 직접 만들면서 고민을 했던 부분들이 강의내용에 있는 것들이었네요.. 역시 다시 들어볼 수록 그때는 무슨 말인지 잘 모르고 넘어갔었는데 이제사 이해가 가면서 새삼 명강의라는 걸 느낍니다. 암튼... 궁금한 게 있습니다. promise . then .catch 구문에서 promise를 생략하고 .then .catch 를 해도 돌아가기는 하는데 혹시 이러면 문제가 있을까요??
류재안
2024-06-08T11:32:22.411Z
댓글 1
좋아요 0
조회수 242
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 vercel에 정상 배포한 후 확인해보았는데 src/pages/Diary.jsx 에 존재하는 if (!curDiaryItem) { return <div>데이터 로딩중...</div>; } 이렇게 설정한 부분만 보이고 기존에 보여져야 할 것들이 모두 안보이는데 이유를 모르겠습니다 ㅠ 그리고 <meta property="op:image" content="/thumbnail.png" /> 로 지정해주었는데 왜 이것만 잘 안되는지 모르겠습니다.. 현재 vercel 주소입니다. https://emotion-diary-sable-theta.vercel.app/ github repo주소입니다. https://github.com/jjacksang/one-bite-react-v2
진상우
2024-06-07T15:37:34.664Z
댓글 1
좋아요 1
조회수 717
해결됨
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
// 숙제1 next가 아닌 이전것 prev를 구하기 // 숙제2 삽입이 시간복잡도가 O(n)인데 O(1)으로 변경하기 (hint tail) class Node { constructor(value) { this.value = value; this.next = null; this.prev = null; } } class LinkedList { constructor(length = 0) { this.length = length; this.head = null; this.tail = null; } add(value) { const newNode = new Node(value); if (this.head === null) { this.head = newNode; this.tail = newNode; } else { /* 수정 const [prev] = this.#search(this.length - 1); this.tail.prev = prev; this.tail.next = newNode; newNode.prev = this.tail; this.tail = newNode; */ newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } search(index) { return this.#search(index)[1]?.value; } prevSearch(index) { return this.#search(index)[0]?.value; } currentAndPrevNode(index) { return this.#search(index); } #search(index) { let count = 0; let prev; let current = this.head; while (count < index) { prev = current; current = current?.next; count++; } return [prev, current]; } remove(index) { const [prev, current] = this.#search(index); if (prev && current) { if (!current.next) { // 마지막 노드 삭제일경우! prev.next = null; // 마지막 노드 삭제일때 이전 노드의 next를 null로 만들어주면 끝 this.tail = prev; // 마지막 노드를 삭제 했기 때문에 tail을 이전 노드로 바꾸어주어야 한다. } else { // 중간 삭제 일때 prev.next = current.next; current.next.prev = prev; // 현재 노드의 next노드의 이전 노드 prev를 prev 노드로 변경 } this.length--; return this.length; } else if (current) { // index 0일 때 this.head = current.next; this.length--; return this.length; } else { // 삭제하고자 하는 대상이 없을 떄 // 아무것도 안함 } } } const linkList = new LinkedList(); linkList.add(1); // 삭제 linkList.add(2); linkList.add(3); linkList.add(4); linkList.add(5); // 삭제 linkList.add(6); linkList.add(7); linkList.add(8); // 삭제 console.log(linkList.search(6)); // 7 console.log(linkList.prevSearch(2)); // 2 console.log(linkList.tail.prev.value); // 마지막 꼬리의 이전이니까 7 console.log(linkList.remove(0)); // 첫번째 삭제 7 console.log(linkList.prevSearch(2)); // 3 console.log(linkList.tail.prev.value); // 마지막 꼬리의 이전이니까 7 console.log(linkList.remove(6)); // 마지막 삭제 6 console.log(linkList.tail.prev.value); // 삭제후 꼬리 이전이니까 6 console.log(linkList.tail.next); // null console.log(linkList.remove(3)); // 5 const [prev, cur] = linkList.currentAndPrevNode(3); // 첫번째 튜플은 이전노드 두번째 튜플은 현재 노드 console.log(prev.value); // 4 console.log(prev.next.value); // 6 console.log(cur.value); // 6 console.log(cur.prev.value); // 4 ::) prev와 tail을 추가 하였고 add 메서드와 remove 메서드를 수정 하였습니다. 질문1) 연결리스트 구현 숙제에 해당하는 정답 코드인지 리뷰 부탁드려도 될까요? 질문2) tail만 사용 했을때는 O(1) 시간복잡도를 가지게 add 메서드를 구현했었는데 prev가 추가되면서 const [prev] = this. #search (this.length - 1); 로직을 추가하여 prev를 구해서 O(1)가 아니게 된것 같은데 무언가 더 좋은 방법이 있을것 같습니다! (저는 고민 해봤는데 모르겠습니다)
rhkdtjd_12
2024-06-07T03:04:02.207Z
댓글 2
좋아요 1
조회수 373
미해결
김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정
시중 서점에 판매되는 책중에, 이 강의를 따라 배우며 같이 볼 수 있는 교재 있으면 알려주시면 좋겠습니다.
2024-06-06T13:03:26.829Z
댓글 1
좋아요 0
조회수 188
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Image 의 특정 컬럼만 select 하고 싶어서 find 옵션에 아래와 비슷하게 적용했더니, transform 데코레이터가 적용이 되지 않네요. chatGPT 에게 물어보니 transform 데코레이터 적용을 받으려면 QueryBuilder 를 쓰라는데, 가독성이 떨어질 것 같아서 찜찜하네요. 다른 방법은 없을까요? 아니면 일단 그냥 인강대로 쭉 진행한 다음 Prisma 로 빠르게 마이그레이션 한 다음에 이런 고민을 진행하는 게 나으려나요? export const POST_FIND_OPTIONS: FindManyOptions<PostsModel> = { select: { id: true, ..., images: { path: true } }, relations: ['images', 'author'], };
javascript typescript rest-api nestjs backend
sangyun lee
2024-06-06T09:54:51.898Z
댓글 1
좋아요 0
조회수 208
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
좋은 강의 감사합니다! DB에는 파일명만 저장되어있고 post POST 요청보낼때도 파일명만 보내는데, 어떻게 post get요청을할때 public/posts가 붙는건가요?
javascript typescript rest-api nestjs backend
이북자
2024-06-06T06:41:04.766Z
댓글 1
좋아요 1
조회수 250
미해결
Only Javascript만으로 배우는 하이브리드앱 패키징
window.plugins.OneSignal.setAppId(); 위 코드 입력 시 화면이 black screen으로 표시됩니다. 하지만 onesignal 연동도 잘되고 푸시 메시지 발송되 잘 됩니다. 원인이 무엇일까요? android 구버전과 최신버전 모두에서 그렇습니다.
javascript ios android 하이브리드-앱 cordova
늅늅
2024-06-06T04:44:12.127Z
댓글 2
좋아요 1
조회수 315
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
제목 그대로입니다. 출처 명시하여 요약된 내용을 정리해서 올려도 될까요 ?
aa pp
2024-06-04T15:57:31.616Z
댓글 1
좋아요 0
조회수 350
