묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
이미지가 왜 안뜨나 했더니 Ctrl + shift + I로 오류 찾았을 때Not allowed to load local resource가 뜨네요Html 문서와 같은 장소에 이미지 파일이 있거나그보다 하위 폴더에 있을 때만 이미지가 뜨고 상위 폴더에 있거나 절대 경로로 접근은 보안상의 이유로 차단되어있는 것 같네요 구글 이미지 링크주소 복붙은 정상적으로 되는데 간혹 안되는 이미지 파일도 있네요
-
미해결함수형 프로그래밍과 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로 풀려서 전달될 수 없을것 같은데 이 부분도 설명부탁드립니다.
-
해결됨진짜! 자바스크립트(Javascript) - 기초부터 고급까지
메모리에 변수 생성과 값을 할당할 때
지금 변수와 값을 생성하는 부분을 보고있습니다. 그런데 메모리에 변수와 값들의 주소를 가지는 포인터 변수를 가진다고 하신 부분에서 궁금증이 생겼는데 그러면 메모리의 값들은 이미 메모리 셀에 기존부터 가지고 있는 건가요? 아니면 그때마다 임의로 값을 메모리에 생성하는 건가요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
모든 Route 기본 Private로 만들고 IsPublic Annotation 작업하기 강의부분 질문드립니다
안녕하세요 너무 잘듣고있습니다 '모든 Route 기본 Private로 만들고 IsPublic Annotation 작업하기' 수업듣는 중 질문이있어 글남깁니다.POSTMAN에서 DELETE기능을 눌렀을때 에러가 발생합니다 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ[터미널에 나온 에러 내용][REQ] GET /posts?order__createdAt=DESC&take=5 2024. 3. 6. 오후 7:44:07[REQ] DELETE /posts/122 2024. 3. 6. 오후 7:44:32[Nest] 9576 - 2024. 03. 06. 오후 7:44:32 ERROR [ExceptionsHandler] update or delete on table "posts_model" violates foreign key constraint "FK_40cd89c6655ec7b102842feacab" on table "image_model"QueryFailedError: update or delete on table "posts_model" violates foreign key constraint "FK_40cd89c6655ec7b102842feacab" on table "image_model"at PostgresQueryRunner.query (C:\Users\manjin han\OneDrive\바탕 화면\flutter 폴더 및 파일\cf_sns\src\driver\postgres\PostgresQueryRunner.ts:331:19)at processTicksAndRejections (node:internal/process/task_queues:95:5)at DeleteQueryBuilder.execute (C:\Users\manjin han\OneDrive\바탕 화면\flutter 폴더 및 파일\cf_sns\src\query-builder\DeleteQueryBuilder.ts:77:33)at PostsService.deletePost (C:\Users\manjin han\OneDrive\바탕 화면\flutter 폴더 및 파일\cf_sns\src\posts\posts.service.ts:332:7) [postman 에러 내용]{ "statusCode": 500, "message": "Internal server error" } ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ강의상terminal창에, 이렇게 화면이 나와야하는데해당화면처럼 에러가 나오네요몇일 고민해도 안되서 질문 드립니다
-
미해결
버튼 클릭 시 페이지가 로드되지 않는 문제 해결 방법 질문
개요로그인 성공 후 인덱스 페이지로 넘어갑니다.인덱스 페이지에는 "테스트 버튼" 이라는 버튼을 클릭하면, test 로드하는 api 를 호출하도록 했습니다.그러나 api 요청만 진행되고, 페이지는 바뀌지 않습니다.개발자도구 메시지에 해당 페이지의 html 코드만 출력됩니다. 참고자료index.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>인덱스 페이지</title> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> </head> <body> <h1>환영합니다!</h1> <p>성공적으로 로그인하셨습니다.</p> <button id="logoutButton">로그아웃</button> <button id="testButton">테스트 버튼</button> <script> $(document).ready(function() { // 로그아웃 버튼 이벤트 $('#logoutButton').click(function() { // 로컬 스토리지에서 토큰 제거 localStorage.removeItem('accessToken'); // 로그인 페이지로 리다이렉션 window.location.href = '/login'; }); // 테스트 버튼 이벤트 $('#testButton').click(function() { // 로컬 스토리지에서 토큰 가져오기 const token = localStorage.getItem('accessToken'); if (token) { $.ajax({ url: '/api/test', // 요청할 서버의 URL type: 'GET', // HTTP 메서드 beforeSend: function(xhr) { // 요청 헤더에 토큰 추가 xhr.setRequestHeader('Authorization', token); }, success: function(data) { // 요청 성공 시 로직 console.log("테스트 요청 성공:", data); alert("테스트 요청 성공"); }, error: function(xhr, status, error) { // 요청 실패 시 로직 console.error("테스트 요청 실패:", xhr.responseText); alert("테스트 요청 실패"); } }); } else { alert("토큰이 없습니다. 다시 로그인해주세요."); } }); }); </script> </body> </html> 보이는 것처럼 로컬 스토리지에서 토큰을 가져온 후 요청 헤더에 다시 담아서 전송합니다.JwtAuthorizationFilter@Override protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain filterChain) throws ServletException, IOException { // 헤더에서 토큰 추출 log.info("헤더에서 토큰 추출"); String tokenValue = jwtUtil.getJwtFromHeader(req); log.info("토큰 : " + tokenValue); if (StringUtils.hasText(tokenValue)) { // 토큰 유효성 검사 if (!jwtUtil.validateToken(tokenValue)) { log.info("Token Error"); return; } Claims info = jwtUtil.getUserInfoFromToken(tokenValue); try { setAuthentication(info.getSubject()); } catch (Exception e) { log.error(e.getMessage()); return; } } else { log.info("토큰이 없습니다."); } filterChain.doFilter(req, res); } // 인증 처리 public void setAuthentication(String loginId) { log.info("인증 성공"); SecurityContext context = SecurityContextHolder.createEmptyContext(); Authentication authentication = createAuthentication(loginId); context.setAuthentication(authentication); SecurityContextHolder.setContext(context); } // 인증 객체 생성 private Authentication createAuthentication(String loginId) { log.info("인증 객체 생성"); UserDetails userDetails = userDetailsService.loadUserByUsername(loginId); return new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities()); }이렇게 JwtAuthorizationFilter 가 있을 때 헤더에서 토큰이 추출되는 거까지 로그에 다 출력되고, 인증 객체까지 생성되는 걸 확인했습니다. Console2024-02-26T14:31:24.699+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 토큰 : eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0NiIsImF1dGgiOiJPV05FUiIsImlhdCI6MTcwODkyNDY0NiwiZXhwIjoxNzA4OTI4MjQ2fQ.TLjHCc1_ZtTbzGb-2c0ueLmxgCyxQf1rUQs4DkqMv_c 2024-02-26T14:31:24.706+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 인증 성공 2024-02-26T14:31:24.706+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 인증 객체 생성 Hibernate: /* <criteria> */ select u1_0.id, u1_0.email, u1_0.login_id, u1_0.password, u1_0.role from users u1_0 where u1_0.login_id=? 2024-02-26T14:31:24.722+09:00 INFO 59767 --- [nio-8081-exec-3] TestController : test controller로그를 보면 test controller 를 호출하는 거까지 확인할 수 있었습니다.그러나 페이지는 로드되지 않고, 메시지에 html 코드만 출력이 됩니다. 자료 Test.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <title>Test Page</title> </head> <body> <h1>This is a test page.</h1> </body> </html> 정리로그인 성공 후 인덱스 페이지로 넘어감해당 인덱스 페이지에서 test 페이지로 넘어가고자 함인가 필터 모두 거치고, 토큰 값이 전달되는 거까지 확인했음test controller 까지 요청되지만, 정작 페이지는 불러와지지 않음 대체 제가 뭘 놓친 걸까요 ㅠㅠㅠㅠ 이거때문에 며칠 동안 머리 싸매고 있습니다,,, 제발 도와주세요,,,
-
해결됨Vue 3 시작하기
target[prop] 질문
target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
물질을 클릭했을 때 이벤트
물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.
-
미해결처음 만난 리액트(React)
그대로 넣으면 map을 찾지 못한다는 오류가 나옵니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이런 오류가 나오면서 따로 실행이 되지 않습니다
-
미해결따라하며 배우는 자바스크립트 A-Z
[Event Delegation] 요소의 id를 변수 선언 없이 바로 사용할 수 있는 이유?
예시<body> <div id="buttons"> <button class="buttonClass">Click Me</button> <button class="buttonClass">Click Me</button> </div> <script> console.log(`buttons`, buttons); </script> </body> Event Delegation 강의 약 8분 조금 지난 부분에서 궁금한 점이 있어 질문 드립니다!이벤트 등록을 buttonList가 아닌 buttons라는 곳에 등록을 했음에도 버튼 이벤트가 잘 작동하더라구요.선언하고 할당하지 않은 buttons라는 변수명?이 어떻게 id가 buttons인 div를 가리키는지 궁금합니다!
-
미해결비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
let current = this.head 질문 있습니다!
this.head 대신 let current = this.head 처럼 current변수에 할당하여 사용하는 이유가 무엇일까요?ㅠ변수에 할당하여 사용하지 않았을 때 값을 보니 값이 다르게 나와 문의드립니다. li.add(3)이 실행될때 첫번째 노드가 사라짐 정상출력
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
mocking과 spy함수가 헷갈립니다.
mocking과 spy함수가 조금 헷갈립니다. 아래와 같이 정리하면 될까요?- spy 함수 : 빈 함수인데, vitest에서 이 함수를 감지하고 있고 함수가 call 되었는지, 인자는 무엇이었는지 검증하는 가짜 함수.- mocking : 종속성이 있는 라이브러리를 복사해두고, 그 중 사용해야 할 함수나 기능을 spy 함수로 대체하여 call 했는지 검사할 수 있는 프로세스.그러면 mocking 자체는 spy 함수 없이 사용하는 것은 의미가 없다고 보면 될까요?
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
왜 {import.meta.env.VITE_SOME_KEY} 가 적용이 안될까요 ㅠㅠ
/src/.env 파일에 VITE_SOME_KEY = 123이렇게 설정하고, App.jsx에 function App() { return(<>{import.meta.env.VITE_SOME_KEY} <Counter/> </> )}export default App;이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
홈 화면 화살표 버튼 눌렀을때 1월에서 2월로 안 가고 3월로 갑니다 나머지 달은 잘 작동합니다.
안녕하세요 또 이렇게 질문을 해서 죄송합니다. 마지막 강의까지 다 듣고 배포까지 했는데 갑자기 홈 화면에 오른 화살표를 클릭을 하면 지금 1월 인데 누르면 3월로 이동 됩니다. 그런데 1월에서 2월 넘어갈때만 그래요 뒤로 가는건 잘 작동합니다. 홈 강의 다시 보고 틀린거 있나 확인했는데 못 찾아서 이렇게 연락드려요 https://github.com/jeain/Diary
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
SPA, MPA, 리액트 Hooks 등의 개념 어디서 참고하시나요?
강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.
-
미해결[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론
npm start 에러나와 문의드립니다.
https://github.com/photonstorm/phaser3-project-template 위 url로 이동해서 다운받았는데 아무래도 지난주에 소스가 수정된 것 같습니다. 다운 후 npm start 시 에러가 발생합니다. 어떻게 해야 할까요?url도 다른 소스로 이동하는 것 같습니다. - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
마크다운 이미지가 잘 작동안합니다.
제시해주신 방식대로는 마크다운으로 작성하는 이미지가 링크를 작성하기까지만 하고 나오지 않는 경우가 대부분입니다. 이유는 모르겠네요. 잠깐 나왔었는데.. 또 안나옵니다. 이유가 있을까요. 조건과 지시를 다양하게 걸었더니 제대로 답변을 못하네요. ^^; 특히 일기를 제멋대로 쓰는 부분이 있습니다. 어떤때는 내가쓴것처럼 잘 쓰는데 어떤때는 제멋대로 씁니다. ㅎㅎ 그래도 이런 시도를 해볼수 있어서 좋습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Router가 설치가 안됩니다.
npm i react-router-dom@6 로 설치하려하면 npm WARN EBADENGINE Unsupported engine {npm WARN EBADENGINE package: 'lru-cache@10.1.0',npm WARN EBADENGINE required: { node: '14 || >=16.14' },npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.1.0' }npm WARN EBADENGINE } 라 뜨는데요, 현재 노드버전이 v16.13 이라 그런것같은데이럴때는 어떻게 해야되나요?
-
미해결처음 만난 리액트(React)
내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다
기존 생성했던 npx create-react-app my-app 명령어로 생성했던 my-app 실제 경로로 들어가서 폴더 삭제하고npm uninstall -g create-react-appnpm install -g create-react-appnpx create-react-app my-app수행 시 C:\Program Files\nodejs>npx create-react-app my-appNeed to install the following packages:create-react-app@5.0.1Ok to proceed? (y) ynpm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.node:fs:1380 const result = binding.mkdir( ^Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\my-app' at Object.mkdirSync (node:fs:1380:26) at module.exports.makeDirSync (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\fs-extra\lib\mkdirs\make-dir.js:23:13) at createApp (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:257:6) at C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:223:9 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -4048, code: 'EPERM', syscall: 'mkdir', path: 'C:\\Program Files\\nodejs\\my-app'}Node.js v20.11.0 에러가 발생합니다.어떻게 조치해야할까요 ??
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
gateway level에서 filter도 잘 작동합니다!
@UsePipes( new ValidationPipe({ transform: true, transformOptions: { enableImplicitConversion: true, }, whitelist: true, forbidNonWhitelisted: true, }), ) @UseFilters(SocketCatchHttpExceptionFilter) @WebSocketGateway({ // ws://localhost:3000/chats namespace: 'chats', }) export class ChatsGateway implements OnGatewayConnection { constructor( private readonly chatsService: ChatsService, private readonly messagesService: ChatsMessagesService, ) {} ... }각각의 메소드마다 넣어주는것보다 나은것 같아서 공유 해보아요!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
length에서 min값만 설정하고 싶을 때 max 없이 validationOptions을 어떻게 전달할 수 있나요..?
length에서 max값을 전달 안해주고 min만 설정하고 싶을때if(args.constraints.length===2){} else}{ }여기서 else 가 실행되어야 하는데 max 값 없이 validationOptions만을 전달하면 validationOptions가 두번째 인자로 전달되는 것 아닌가요..? 이렇게 하면 에러 나는데.. max 값에 undefined나 null을 넣어도 안되는 것 같습니다. 어떻게 max 값 없이 validationOptions를 실행할 수 있나요..?
