묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Do it! Node.js 프로그래밍 입문
function1, 2에 대한 질문
안녕하세요 자바 개발만 하다가 노드에 관심이 있어 공부하러 온 학생입니다.영상을 보다가 궁금한 점이 있어 질문 드리는데요.case 1 : function greeting(name){ console.log(`${name}님 안녕하세요.`);}case 2 : let greeting = function(name){ console.log(`${name}님 안녕하세요.`);}두 방법 동일하게 동작하는 것은 알겠는데case 1이 아닌 2번을 굳이 사용하는 이유를 잘 모르겠습니다.결국 선언된 함수의 호출은 동일하게 하는데let으로 함수를 선언하는 이유가 궁급합니다!!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect의 dependency array에 빈 배열
안녕하세요.10분 30초 쯤에useEffect(() => { }, [originData, isEdit]);여기서 만약 dependency array에 빈 배열을 전달해주면 구체적으로 어떤 문제가 생기나요?home에서 일기 수정하기 버튼이나 새로 만들기 버튼을 누를 때마다 DiaryEditor가 mount 된다고 생각하여 빈 배열을 넣어줘도 된다고 생각했는데, 그게 아니라 리렌더가 되는 건가요?
-
미해결
버튼 클릭 시 페이지가 로드되지 않는 문제 해결 방법 질문
개요로그인 성공 후 인덱스 페이지로 넘어갑니다.인덱스 페이지에는 "테스트 버튼" 이라는 버튼을 클릭하면, 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 까지 요청되지만, 정작 페이지는 불러와지지 않음 대체 제가 뭘 놓친 걸까요 ㅠㅠㅠㅠ 이거때문에 며칠 동안 머리 싸매고 있습니다,,, 제발 도와주세요,,,
-
미해결따라하며 배우는 자바스크립트 A-Z
해당 강의의 index.html 소스코드 파일을 받고 싶습니다!
올려주신 소스코드 파일을 찾아봐도 못 찾겠어서요 ㅠㅠ 어디에 있을까요?
-
해결됨Vue 3 시작하기
target[prop] 질문
target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
미로 탐색 문제 질문 있습니다.
미로 탐색에서 재귀에 진입하기 전 board에 표시를 할 때,boarr[nx][ny] = 1이 맞나요?해당 자리에 1로 표시를 해놓고 다음으로 넘어가는 개념이니까arr[x][y] = 1이렇게 하는게 맞지않나라는 생각이 드는데혹시 제가 잘못 이해를 한 걸까요?결과는 똑같이 나와서 의문이네요.// 강사님의 답 if(nx >= 0 && nx <= 6 && ny >= 0 && ny <= 6 && board[nx][ny] === 0){ board[x][y] = 1 DFS(nx,ny) board[x][y] = 0 } // 저의 답 if(nx >= 0 && nx <= 6 && ny >= 0 && ny <= 6 && board[nx][ny] === 0){ board[x][y] = 1 ★★★ DFS(nx,ny) board[x][y] = 0 ★★★ }
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 환불관련 문의드립니다.
안녕하세요. 선생님 제가 해당 강의를 유데미에서 수강중인 것을 모르고 실수로 또 구매를 했습니다. 현재 환불 기간이 지나 환불이 불가능한 것으로 확인되어 혹시 해당 강의를 한입 크기로 잘라먹는 타입 스크립트로 변경이 가능한지 문의드립니다. 해당 강의는 아직 수강하지 않았습니다. 제가 아마 할인 기간에 여러 강의 신청할때 같이 신청한거 같은데, 지금 보니 유데미에도 동일 강의를 신청했었네요. 필요시 유데미 강의 결제한 내역 인증도 가능합니다. 동일한 강의를 듣기에는 좀 부담이 있어서 혹시 넓으신 아량으로 강의 변경 또는 환불이 가능한지 문의드리겠습니다.환불이 될 경우 다시 한입 크기 타입 스크립트 강의를 신청하겠습니다.감사합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo-cil 설치
안녕하세요. 문의남깁니다.맥에서 expo-cil 설치가 안됩니다." zsh: command not found: npm " 요런 메세지가 나오는데 어떤 방법으로 진행해야하나요?
-
해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
white-space: pre 사용할때 왼쪽에 생기는 공백을 없앨수 있는 방법이 있을까요?
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 4:53분에 나오는 예시에서 pre로 설정한 부분들은 default랑 다르게 좌측이 띄어져서 나오는데 그 부분을 없애려면 어떤걸 바꿔줘야 하나요?
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
4.3. 강의와 깃헙 소스코드가 다른 부분
안녕하세요. 강의 잘 듣고 있습니다.다름이 아니라 강의와 깃헙 소스코드가 달라서 문의드려요. mocks/zustand.js의 코드인데요.const { create: actualCreate } = await vi.importActual('zustand'); import { act } from '@testing-library/react'; // 앱에 선언된 모든 스토어에 대해 재설정 함수를 저장 const storeResetFns = new Set(); // 스토어를 생성할 때 초기 상태를 가져와 리셋 함수를 생성하고 set에 추가합니다. export const create = createState => { const store = actualCreate(createState); const initialState = store.getState(); storeResetFns.add(() => store.setState(initialState, true)); return store; }; // 테스트가 구동되기 전 모든 스토어를 리셋합니다. beforeEach(() => { // 👈 이 부분 act(() => storeResetFns.forEach(resetFn => resetFn())); });깃헙 소스코드는 위와 같이 beforeEach를 사용하지만 강의에서는 afterEach로 설명해주시고 있습니다.주석도 마찬가지로 다릅니다.무엇이 맞는 걸까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
마지막 followee 감소 강의 누락
안녕하세요. 코드팩토리님강의 너무나 잘 들었습니다.허나 마지막 강의 followee 부분이 누락되었습니다.이 부분 추가 해주시면 감사하겠습니다. 이전에 질문이 된 기록을 확인해봤는데 11월 달에 같은 질문을 받으시고 바쁘셔서 잊어버리신것 같아요.
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
공용 컴포넌트 유닛 테스트 관하여 질문이 있습니다!
안녕하세요! 강의를 듣고 테스트 코드를 연습중에 질문이 있어서 글을 작성하게 되었습니다.제가 테스트 코드를 작성하려는 프로젝트에서 공용 컴포넌트 중 Pagination 컴포넌트에 유닛 테스트 코드를 작성하려고 합니다.제가 생각한 테스트 흐름은 실제 유저가 Pagination 컴포넌트의 화살표 버튼 클릭시 현재 페이지가 1이 증가하는 것처럼 테스트 코드를 구현하려고 했습니다.하지만 Pagination 컴포넌트에는 setCurrentPage 함수를 주입 받아서 처리하기 때문에 유닛 테스트에서는 클릭으로 current page 값이 증가하는 것을 확인할 수는 없고 spy 함수를 통해 setCurrentPage가 실행되는 것까지만 확인하는게 맞는건가요?? 두서없는 글 읽어주셔서 감사합니다!
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
react-cookie로 쿠키값 테스트코드로 가져오는 방법
describe('로그인이 성공했을 경우', () => { it('"아이디 저장" 체크박스를 체크했을 시 쿠키에 itall_admin 객체의 id key로 유저가 입력한 아이디를 저장한다.', async () => { const { user } = await render(<LoginPage />); const rememberIdCheckbox = screen.getByLabelText('아이디 저장'); const idInput = screen.getByPlaceholderText('아이디(이메일)'); const submitButton = screen.getByRole('button', { name: '로그인' }); const setCookies = vi.fn(); setCookies.mockReturnValueOnce('center.test@itall.com'); const cookieValue = setCookies(); await user.click(rememberIdCheckbox); await user.type(idInput, 'center.test@itall.com'); await user.click(submitButton); expect(cookieValue).toBe('center.test@itall.com'); }) })Forms.spec.ts파일에서 js-cookie 라이브러리 모킹해서 하시는 예시를 보고 react-cookie 사용한 프로젝트의 테스트코드를 작성중인데요. 혹시 라이브러리에서 제공하는 함수를 이렇게 setCookies라는 함수를 임의로 모킹해서 return값을 지정해서 저렇게 처리해도 되는걸까요..? 테스트는 당연히 통과되었습니다..
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
노션 링크는 어디에 있는지 문의 드립니다~
노션 링크는 어디에 있는지 문의 드립니다~
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
14-04 Redis에서 cacheModule을 위한 @nestjs/common버전 업데이트
다른분이 질문주셨던 'app.module.ts에서 redis연결하는데 @nestjs/common에 CacheModule이 없습니다' 에 대한 답변대로 "@nestjs/common": "^9.0.0" 버전으로 업데이트해서 node_modules도 yarn install 해서 설치했습니다. yarn.lock 확인했는데 버전이 바뀌지 않아 "@nestjs/common": "9.0.0" 로 바꿔서 다시 yarn install 했구요.그런데 @nestjs/common 버전을 9.0으로 바꾸면 계속 mybackend-1(백엔드컴퓨터)에서 오류가 생깁니다. 기존버전 10.0.0이었을 때는 오류가 발생하지 않았었습니다. 실은 강의를 들으며 코드를 따라 치다 마지막에 docker-compose build후 up 했을 때 어디서 오류가 발생하는지 모르겠어서 처음부터 yarn add로 redis랑 cache-manager라이브러리 설치하는 것 부터 docker-compose build,up 하면서 확인을 해봤었는데 @nestjs/common 버전을 9.0으로 바꿨을 때 위 사진처럼 오류가 발생했습니다. package.json파일도 올려보내드립니다.@nestjs/common 버전을 바꿔야 될까요? 아님 다른 오류 원인이 있을까요..?
-
미해결Vue.js 시작하기 - Age of Vue.js
다음 단계 강의는...?
완전 초보입니다. vue3 레벨1을 들어야했는데..ㅠㅠ잘 모르고 현재 강의인 vue2 레벨1을 들었네요...업데이트 된 내용이 많아도...뭐 기본적으로 동작원리는 비슷할거라 생각해서 우선 들었는데요.문제는 이 강의를 듣고나서 레벨2는 어떤걸 들어야하나 해서요.vue3의 레벨2를 들어도 상관없을지..아니면 vue3의 레벨1을 다시 듣고 vue3 레벨2를 들어야할까요? 바뀐 부분의 내용을 모르고는 vue3레벨2 강의 따라가기가 많이 힘들까요..?
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
4.4 통합테스트에서 정적 데이터로 테스트하는 대신 role 값을 미리 설정해 직접 돔에 접근하는 방식은 어떤가요?
안녕하세요우선 좋은 강의를 제작해주셔서 감사드립니다공식 문서만으로 테스트 코드 작성을 공부했다면 훨씬 시간이 많이 들었을 텐데한글로 설명을 듣고 문서를 보니 좀 더 빠르게 이해할 수 있는 것 같습니다. // answer 브랜치 코드 it('특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다', async () => { const { user } = await render(<ProductInfoTable />); const [firstItem] = screen.getAllByRole('row'); const input = within(firstItem).getByRole('textbox'); await user.clear(input); await user.type(input, '5'); // 2427 + 809 * 2 = 4045 expect(screen.getByText('$4,045.00')).toBeInTheDocument(); });궁금한 점은 현재 제공해주신 정답 코드에서는모킹 데이터의 결과 포맷을 알기 때문에 '$4,045.00' 이라는 텍스트 값이 dom에 마운트 되어야 테스트를 통과 시키는 방식인데요 it('특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다', async () => { const { user } = await render(<ProductInfoTable />); const [firstItem] = screen.getAllByRole('row'); const input = within(firstItem).getByRole('textbox'); // role은 price를 담는 div에 미리 추가했다고 가정 const price = Number(within(firstItem).getByRole('price').textContent); const value = 5; await user.clear(input); await user.type(input, value.toString()); const pricedResult = within(firstItem).getByRole('price').textContent; // 2427 + 809 * 2 = 4045 expect(priceResult.includes((value*price).toLocaleString())).toBe(true); });제가 작성한 방식은엘리먼트마다 role을 미리 지정해 둔 다음에테스트할 때마다 element들의 값에 접근해서 테스트를 진행하는 방식입니다.제가 생각했을 때에는 이 방식을 사용하면 element마다 role을 직접 설정해주어 element의 용도를 파악하기 더 쉽고 getAllBy... 메소드로 가져온 요소들에 대해 순회하여 테스트할 때 테스트 결과 값을 동적으로 생성하기 때문에 더 유연하지 않을까 라는 생각이 들었습니다. 궁금한 점은 제가 작성한 방식을 현업에서도 사용하는지잘 사용되지 않는 방식이라면 어떤 이유에서 잘 사용되지 않는지가 궁금합니다
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import에서 확장자 질문
[ React에서 배열 사용하기1 - 리스트 렌더링(조회) ] 사소한 질문이라 죄송한데, import DiaryEditor from './DiaryEdittor'는 확장자 .js를 붙이지 않고, 왜 import DiaryList from './DiaryList.js'는 확장자 .js를 붙이나요? .js를 없애보니까 오류가 나더라고요...서치를 해보니 그 이유가 나오진 않아서 질문해봅니다. 만약 답을 찾으면 이 질문은 지우도록 하겠습니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
typeorm primary key 커스텀 질문드립니다!
import { nanoid } from 'nanoid'; import { PrimaryColumn, CreateDateColumn, UpdateDateColumn, DeleteDateColumn, } from 'typeorm'; export abstract class BaseModel { @PrimaryColumn({ length: 21 }) id: string = nanoid(10); @CreateDateColumn({ name: 'created_at', type: 'timestamp' }) createdAt: Date; @UpdateDateColumn({ name: 'updated_at', type: 'timestamp', nullable: true }) updatedAt: Date | null; @DeleteDateColumn({ name: 'deleted_at', type: 'timestamp', nullable: true }) deletedAt: Date | null; } 기존 express 플젝이 pk가 nanoid라서 nest에서 똑같이 적용하려고 했지만 유저 생성 (save)까지는 nanoid가 잘 들어가지만 외래키로 연결된 role 테이블에 user id를 주입시키는 순간 Field 'id' doesn't have a default value 에러가 발생합니다. user 테이블 role 테이블 둘다 baseModel을 상속받아 구성했고 @PrimaryGeneratedColumn() 으로 변경하면 해결이 되긴 하는데... nanoid를 저렇게 주입시켜서 생기는 문제일까요?
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
물질을 클릭했을 때 이벤트
물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.
