173만명의 커뮤니티!! 함께 토론해봐요.
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요. 이벤트 위임 연습하다가 변칙적으로 연습하고 있는데요. 동적으로 html 생성 된 후에 버튼에 ''-active"클래스 추가 하면 실제로 클래스가 추가가 안되네요. 그런데 elem을 consol 창에 찍어보면 "-avtive"클래스가 추가된 요소로 나오는데 이건 무슨 문제일까요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>스크립트 연습</title> <style> *, *::before, *::after {margin:0; padding:0; box-sizing:border-box;} h1 {padding:20px 0;} h2 {padding-bottom:20px;} li {list-style:none;} .container {max-width:1000px; margin:0 auto; padding:0 20px; background-color:#f1f1f1;} .wrap {padding:40px; border:1px solid #888;} .wrap + .wrap {margin-top:50px;} .btn-list {display:flex; justify-content:space-between; gap:20px; width:100%; padding:20px; background-color:dodgerblue;} .btn-list li {width:calc(100% / 3);} .btn-list__item {width:100%; padding:10px;} .btn-list__item.-active {background-color:darkkhaki;} </style> </head> <body> <div class="container"> <h1>스크립트 연습</h1> <section class="wrap btn-wrap"> <h2>버튼 연습</h2> <ul class="btn-list"> <!-- <li class="asdf"><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> --> </ul> </section> <script> window.addEventListener('DOMContentLoaded', initHandler) function initHandler() { buttonListHandler(); } function buttonListHandler() { const btnWrap = document.querySelector('.btn-wrap'); const btnList = document.querySelector('.btn-list'); let currentItem = null; function clickHandler(el) { let elem = el.target; while (!elem.classList.contains('btn-list__item')){ elem = elem.parentNode; // console.log(elem) if(elem.nodeName === 'BODY'){ elem = null; return; } } if(currentItem){ currentItem.classList.remove('-active'); } if(elem.classList.contains('btn-list__item')){ elem.classList.add('-active'); currentItem = elem; } console.log(elem); } btnWrap.addEventListener('click', ()=> { const htmlStr = ` <li><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> `; btnList.innerHTML = htmlStr; }) btnWrap.addEventListener('click', clickHandler); } </script> </div> </body> </html>
HTML/CSS javascript 인터랙티브-웹
김재환
2024-06-14T05:23:46.660Z
댓글 1
좋아요 0
조회수 294
미해결
Next + React Query로 SNS 서비스 만들기
next에서 msw사용이 애매하다는 것이 무슨뜻인지 그럼 react에서는 사용방법이 다른 것인지 궁금합니다
react next.js react-query next-auth msw
i1004gy
2024-06-14T02:48:51.404Z
댓글 1
좋아요 0
조회수 456
해결됨
Vue.js 끝장내기 - 실무에 필요한 모든 것
Delete ␍ 오류나면 prettier/prettier 쪽에 아래것 추가 ,endOfLine: 'auto',
Myung Lee
2024-06-14T01:47:23.266Z
댓글 1
좋아요 1
조회수 208
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 실무에서 인터셉팅 라우팅 활용 빈도가 잦을까요? 클론코딩이라 x.com 에서 사용한 방식 그대로 만들기 위한 학습인지 아니면 실무에서도 사용빈도가 높은지 궁금합니다 강의는 들어서 인터셉팅 라우팅을 이해하긴 했지만 실무에서는 로그인, 회원가입 팝업 띄울때 인터셉팅 라우팅을 사용하지 않을것같은 생각이 들어서 질문드립니당 감사합니다
react next.js react-query next-auth msw
wkdejrtlr
2024-06-13T14:14:56.897Z
댓글 1
좋아요 0
조회수 236
미해결
인터랙티브 웹 개발 제대로 시작하기
오른쪽 벽에서 transform을 아래와 같이 설정하면 브라우저를 통해 보여지는 길이가 다릅니다. 이유가 뭘까요? transform: rotateY(-90deg) translateZ(400vw);
HTML/CSS javascript 인터랙티브-웹
ddd
2024-06-13T12:55:06.236Z
댓글 1
좋아요 0
조회수 226
해결됨
Next.js 시작하기
안녕하세요! Link 컴포넌트의 prefetching 기능에 대해 궁금한 점이 있어 질문 남깁니다. 뷰포트에 들어오는 Link 영역에 대해 미리 데이터를 끌어온다고 하셨는데, 어느 정도 범위까지 데이터를 끌어오는걸까요? 만약 그 링크로 연결된 페이지가 서버 사이드 렌더링을 이용하는 페이지라면 페이지를 미리 그려서 HTML 파일을 완성하는 수준까지 prefetching을 하는 걸까요?
신원세
2024-06-13T08:40:37.795Z
댓글 1
좋아요 1
조회수 290
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강사님 😎 유저 프로필 페이지의 팔로우 버튼을 구현 중에 있었습니다. 예제를 따라하던 중 아래 캡처 이미지와 같이 API /api/users/{id} 의 응답 데이터에 Followers 객체가 없는걸 확인했습니다.. Followers 정보가 없어 세션과 비교하여 팔로잉 여부를 체크할 수가 없네요. 제가 API나 코드를 잘 못 구현하고 있는걸까요?ㅠㅠ (스웨거 및 query-devtool) 강의 영상에는 존재하고요. 추가질문 공부를 집에서는 데스크탑, 카페에서 노트북으로 하다보니 서버를 각각 피씨에 띄우는게 번거로워 하나의 서버를 바라보게 하려고 했습니다. 그래서 개인 서버에 docker형태로 BE서버를 동작시켜 사용하려고 했습니다. 서버는 정상적으로 구동했으나 API 중 인증(로그인)이 필요한 API는 모두 403으로 응답이 오네요ㅠㅠ 방식. 로컬next( localhost:3000 ) -> 외부.BE 서버(be-server:9090) 호출 nest를 알지 못해 깊게 분석은 못해봤고 소스의 logged-in-guard.ts 에 request를 로그로 찍으니 cookie부분이 가 비어 있습니다. import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common'; import { Observable } from 'rxjs'; @Injectable() export class LoggedInGuard implements CanActivate { canActivate( context: ExecutionContext, ): boolean | Promise<boolean> | Observable<boolean> { const request = context.switchToHttp().getRequest(); console.log(request) return request.user?.id && request.isAuthenticated(); } } 간단하게 해결이 가능하면 조언부탁드리며 아니면 무시해주셔도 됩니다. 🙏
react next.js react-query next-auth msw
홍홍
2024-06-13T08:03:57.402Z
댓글 1
좋아요 0
조회수 225
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
실수로 style.css파일을 지워서 다시 만들려고 style.scss에 watch sass를 눌렀는데 css파일이 다시 생기지가 않아요.. 해결 방법이 없을까요...? ㅠㅠ
HTML/CSS javascript sass jquery scss
망고19
2024-06-13T07:30:44.187Z
댓글 1
좋아요 1
조회수 215
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의 잘 듣고 있습니다. 아래 이미지와 같은 오류가 뜨면서 여러가지(db 삭제, Docker 재 시작, 서버 재 구동, debugger 로 확인..등) 해 봤는데, 원인을 찾을 수가 없어 강사님께 도움 청합니다. 이 전까지 잘 진행되고 있었고, 현재 진행하는 강좌도 반복해 확인 해 봤는데... 위와 같은 이미지 내용만 봐서 찾기 힘드시겠지만, 혹시 하는 심정으로~~ 도움 부탁 드립니다. 꾸~벅.
javascript typescript rest-api nestjs backend
SY. Jeoung
2024-06-13T06:14:11.411Z
댓글 3
좋아요 0
조회수 469
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님! 강의 잘 듣고 있습니다. 화면이 mount 되었을 때는 최상단에 존재하는 page.tsx에 의해 localhost:3000 URL가 나오고 있는 상황입니다. 그런데 처음 mount 되었을 때 localhost:3000/login 형태의 URL을 가지려고 한다면 어떤 방법으로 해야할지 궁금합니다! 제가 생각한 방법은 아래와 같은데 좀 더 좋은 방법이 있을까요? 1. 최상단에 존재하는 page.tsx에서 useEffect 내부에 router.push('/login') 을 한다. next 에서 제공하는 redirect 기능을 사용한다.
react next.js react-query next-auth msw
bj2525
2024-06-13T04:46:12.490Z
댓글 1
좋아요 0
조회수 226
해결됨
만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
이 에뮬레이터 사용하지 않고 터미널 이용해도 수업 진행에 지장 없을까요?
design_team
2024-06-13T02:24:27.204Z
댓글 1
좋아요 1
조회수 225
해결됨
한 입 크기로 잘라 먹는 리액트(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
조회수 493
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 부분에서 화살표함수 만들면 제대로 만들어지는데 이부분에서만 화살표함수 모양이 다릅니다.
react node.js seo graphql next.js
leeyunje96
2024-06-12T12:44:59.598Z
댓글 2
좋아요 0
조회수 206
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
onChangeContents 함수 부분에 넣었을때 처음엔 버튼이 노란색으로 변했습니다만 이후 onChangeWriter 와 onChangeTItle 부분까지 넣은 후 버튼의 색이 변하지 않습니다. if문을 다 지우고 setIsActive(true)만 넣었을때는 작동이 됩니다..
react node.js seo graphql next.js
leeyunje96
2024-06-11T15:05:56.872Z
댓글 1
좋아요 0
조회수 247
미해결
비전공자의 전공자 따라잡기 - 자료구조(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
조회수 253
미해결
[코드팩토리] [초급] 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
