template = [] template = ""문자열로 초기화 안하고 배열로 초기화 하는 이유가 뭔가요?

it('최소 가격 또는 최대 가격을 수정하면 setMinPrice과 setMaxPrice 액션이 호출된다.', async () => { const { user } = await render(<ProductFilter />); const minPriceInput = screen.getByPlaceholderText('최소 금액'); const maxPriceInput = screen.getByPlaceholderText('최대 금액'); await user.type(minPriceInput, '10'); await user.type(maxPriceInput, '10000'); expect(setMinPriceFn).toHaveBeenCalledWith('10'); expect(setMaxPriceFn).toHaveBeenCalledWith('10000'); }); 전 이런식으로 작성했습니다.단위 테스트에서 알려주신 AAA패턴을 해당 통합테스트에서도 적용하면 깔끔할 것 같아서 이렇게 작성했어요.어차피 검증할건 setMaxPriceFn & setMinPriceFn이 호출됐는지 여부라 최소금액 및 최대금액 인풋을 연속적으로 조작하게 했습니다.혹시 이렇게 하면 문제가 있는지 궁금합니다

현재 듣고 있는 강의 부분은 Guard chapter에서 basic, bearer guard를 적용하는 부분입니다. @Injectable() export class BearerTokenGuard implements CanActivate { constructor( private readonly authService: AuthService, private readonly usersService: UsersService, ) {} async canActivate(context: ExecutionContext): Promise<boolean> { const req = context.switchToHttp().getRequest(); const rawToken = req.headers['authorization']; if (!rawToken) { throw new UnauthorizedException('토큰이 없음'); } const token = this.authService.extractTokenFromHeader(rawToken, true); const result = await this.authService.verifyToken(token); // payload 반환 /** * req 객체에 넣을 정보 * 1) 사용자 정보 - user 객체 자체 * 2) token - token * 3) tokenType - access | refresh */ const user = await this.usersService.getUserByEmail(result.email); req.user = user; req.token = token; req.tokenType = result.type; return true; } } 제 개인적인 생각으로는 적어도 제목에 적힌 두 엔드포인트에 대해서는 현재의 BearerTokenGuard를 적용하는 것이 굳이 라는 생각이 듭니다. refreshToken을 이용하여 새로운 토큰을 발급받는 역할을 하는 두 엔드포인트에 대해 다른 줄은 다 문제가 크게 없다고 생각하지만 req.user = user;로 굳이 요청에 user 객체를 붙이는 것은 굳이라는 생각이 듭니다. 제 낮은 식견으로는 위 두 엔드포인트에 대한 guard는 또 따로 만들어야 한다고 생각이 드는데 강사님 생각이 궁금합니다.

2.5) 원시타입 VS 객체타입 약 08:50. 안녕하세요, 강사님의 강의를 만족하며 잘 듣고있는 수강생입니다.해당부분에 다소 오해의 소지가 될 내용으로 추가 강의 업데이트시 반영되었으면 하는부분이 있어서 올려봅니다.'객체의 참조값을 복사함' 이라는 문장은 맞다고 볼 수 있지만, 이를 얕은 복사라 부르기엔 오해의 소지가 많을것으로 보입니다. o2는 o1의 포인터값을 그대로 똑같이 가지고 있을 뿐, o2가 가리키는 값이 o1과 동일하게 '새로운 값이 만들어지지 않았기 때문' 입니다. 또한, '새로운 객체를 생성하면서 프로퍼티만 따로 복사함'이라는 문장또한 맞다고 볼 수 있지만, 이를 깊은 복사라 부르기엔 오해의 소지가 역시 많을것으로 보입니다.실제로 공식문서에서도 이를 논하기에는 쓸모없다고 얘기하고있지만, 그러면서 Shallow copy에 대해서 아래와 같이 강조하고있습니다.For shallow copies, only the top-level properties are copied, not the values of nested objects. 때문에, 추가적인 nested objects에 문제가 따르며 실제로 이때문에 이를 얕은복사라고 많은 개발자들이 소통하고 있는것으로 알고있습니다.특히, '원본 객체가 수정될 수 없어 안전함' 까지 있으니, 더욱더 top-level의 중요성이 강조되지 않는 것으로 보여 모호한것으로 보입니다. 평소 강사님의 강의, 강연등을 즐겨듣고 있는 수강생으로써 약간의 다소 오해의 소지가 있는부분을 언급해 볼 뿐이오니 너그러이 내용을 참조해주시면 감사하겠습니다. 항상 감사합니다.이상입니다.

 // PostListItem.jsx import React from "react"; import styled from "styled-components"; const Wrapper = styled.div` width: calc(100% -32px); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid grey; border-radius: 8px; cursor: pointer; background: white; :hover { background: lightgrey; } `; const TitleText = styled.p` font-size: 20px; font-weight: 500; `; // 글의 제목만 표시 function PostListItem(props) { const { post, onClick } = props; return ( <Wrapper onClick={onClick}> <TitleText>{post.title}</TitleText> </Wrapper> ); } export default PostListItem; // PostList.jsx import React from "react"; import styled from "styled-components"; import PostListItem from "./PostListItem"; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: center; :not(:last-child) { margin-bottom: 16px; } `; function PostList(props) { const { posts, onClickItem } = props; return ( <Wrapper> {posts.map((post) => { return ( <PostListItem key={post.id} post={post} onClick={() => { onClickItem(post); }} /> ); })} </Wrapper> ); } export default PostList;   안녕하세요, 소플님. mini-blog 프로젝트 실습 질문합니다.박스 테두리가 강의 영상과 다르게 나오는데 style부분에서 어느 파일을 고쳐야 할지 잘 모르겠습니다.좋은 강의 무료로 해주셔서 감사합니다!

unit-test-example에서 테스트를 실행하니 테스트코드 통과 여부에 관계없이 Test result not found만 뜨며 실패합니다. 이유를 모르겠어요ㅠㅠ Test result not found.If you set `vitest.commandLine` please check:Did you set `vitest.commandLine` to `run` mode? (This extension requires `watch` mode to get the results from Vitest api)Does it have the ability to append extra arguments? (For example it should be `yarn test --` rather than `yarn test`)Are there tests with the same name?Can you run vitest successfully on this file? Does it need custom option to run?  

리덕스나 리코일 등 상태관리 집중 교육은 계획이 없으신가요?

function 합계_구하기(숫자1, 숫자2, 숫자3) { const 최대값 = Math.max(숫자1, 숫자2, 숫자3); const 나머지_합계 = [숫자1, 숫자2, 숫자3] .filter(값 => 값 !== 최대값) .reduce((이전값, 현재값) => 이전값 + 현재값, 0); return 나머지_합계; } console.log(합계_구하기(6, 7, 11)); // 13 console.log(합계_구하기(13, 33, 17)); // 30한글로 하고 있는데 문득 왤캐 없어보이나 싶어서 글 올ㄹ미미미ㅠㅠㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

테스트는 내부 구현에 의존하지 않고 사용자 입장에서 작성하는게 좋다고 이해했습니다.그런데 ProductFilter 컴포넌트의 통합테스트를 작성하시면서 "상품명을 수정하는 경우 setTitle 액션이 호출된다", "최소 가격 또는 최대 가격을 수정하면 setMinPrice와 setMaxPrice 액션이 호출된다" 와 같이 사용자가 값을 변경할 때 특정 액션 함수가 호출되는지를 검증하셨는데, 이건 내부 구현에 의존적인 테스트라고 볼 수 없을까요?추후 Store 내부 구조가 바뀌거나 아예 Store를 사용하지 않는 식으로 구현 방법이 바뀌더라도 사용자 입장에선 달라지는게 없으니 테스트가 실패하지 않는게 좋은 테스트가 아닌지 궁금합니다.2. api를 호출하는 커스텀 훅을 사용하는 컴포넌트를 테스트하실 때 msw를 이용해 해당 api의 응답을 모킹하셨는데, 커스텀 훅 자체를 모킹해서 훅이 반환하는 값을 원하는대로 지정하는 것도 가능할 것 같습니다. 이렇게 api 대신 훅을 모킹하여 테스트하는 것에 대해 어떻게 생각하시는지 궁금합니다.

  라는 오류가 계속해서 뜨는데 DB버로는 정상적으로 접근이 됩니다. 포트도 제대로 열려있구요. 구글링해도 정확한 원인이 나오지 않아 질문해봅니다

안녕하세요. 프론트와 pub/sub 연결하는 부분 강의 듣다가 에러가 생겨 질문 드립니다ㅠ이렇게 favicon.ico 에러가 뜨면서 연결이 안되는데 어떻게 해결해야 할까요....?

안녕하세요 강사님.수업노트에 올려주신 iterator와 iterable 강의까지 들었는데 잘 이해가 안되는 부분이 있어 질문합니다. iterator와 iterable강의에서 'iterator 는 Collection이나 Aggregate 객체를 순횐하는 방법을 제공하는 것' 이라고 보았습니다. 구현 예제까지 본 후에는 '방법을 제공한다 = 어떤 동작을 제공한다 = 함수를 제공한다' 라고 생각했습니다. (예제에서는 hasNext(), next() 함수를 제공함)그런데 [추가섹션] 배열의 순회 강의에서 배열의 keys() , values() , entires() , [Symbol.iterator]() 함수를 사용하는 걸 보면 각 함수들이 반환하는 iterator들은 함수를 제공하지 않는 걸로 보여서요.이 함수들의 반환값이 for문으로 순회 가능한(iterable한) 객체들이고, 그럼 iterable한 객체를 만들어주는 keys()같은 함수들이 곧 'iterator'인게 아닌가 싶은데 왜 함수들의 반환값이 iterator가 되는 것인지 궁금합니다! 

깃 복붙도 해봤는데 계속 저래요... ㅜㅜ

학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

제 코드에서 잘못이 있어서 그런걸까요?....

로그인 하고 vercel login 했는데 찾을수 없데요 ㅠ 왜이럴까요?...

12.14)New 페이지 구현하기 2. 기능 강의를 따라 코드를 작성했는데작성 완료 버튼을 누르면 데이터가 추가되지 않고 아래 사진과 같은 에러가 뜹니다. 왜 그런지 이유를 몰라 질문 드립니다. 소스코드는 깃헙에 올려놨습니다!https://github.com/dooheeyaa/section12  

실제 일기장 프로젝트를 보면요 App.js 에 return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> );이렇게 되어있고 다른 페이지 ( Diary,Ediit,Home,New) 등 페이지에서는 Header 을 공통적으로 include 하고 있는데요 .혹시 이걸 시작하는 App에서다가 추가하고 실제 Diary에 적용되도록 하는 방법이 혹시 있을까요 ..? 먼가 페이지 마다 인클루드 할려니깐 .중복되는코드 같아서요

코드샌드박스애서 vue강의 따라 코딩하는게 가능할까요?npm설치에 문제가 있어서 강의를 못듣고 있거든요

우선, 강의대로 따라했을 때 index.html 에서는 헤더와 푸터 인클루드가 잘됩니다. 따로 test.html 을 만들어서 인클루드 해봐도 잘 됩니다.  하지만 html/class-detail.html 에 인클루드를 하면 헤더와 푸터가 인클루드 되지 않습니다. custom.js 의 경로를 바꿔봐도 안되네요 ㅜㅜ인클루드가 안되는 이유를 알 수 있을까요 ?