안녕하세요.면접준비에 도움이 될 거 같고 개념적으로도 궁금해서 질문드립니다.장바구니에서 삭제를 하면 갱신되는데에 동작원리에서 처음엔 router.replace(router.asPath) 때문에 url이 변경되진 않아도 단순하게 /cart로 이동이란 동작을 해서 페이지를 다시 그린다고 생각했습니다.CartList는 CartPage의 자식 컴포넌트이다.CartPage는 getServerSideProps로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList에게 전달해주고 있다.CartList는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다.장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제하고 router.replace를 통해(router.push도 동일) 현재 페이지(asPath)인 /cart로 이동한다./cart 페이지(즉, CartPage.jsx)가 리렌더링된다.리액트는 리렌더링되면 컴포넌트의 모든 코드를 다시 실행하게 된다.(고 알고 있습니다.)그로 인해 getServerSideProps가 다시 실행되고 갱신된(장바구니에서 상품을 삭제한) 데이터를 다시 CartPage에게 프롭스로 내려주게 된다.프롭스가 변경됐으니 자식 컴포넌트인 CartList도 리렌더링되어 모든 코드가 다시 실행된다.바뀐 장바구니 데이터로 보여지게 된다.라고 생각했는데요. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#behavior공식문서를 살펴보니 사용자가 Link 컴포넌트 또는 router를 통해 페이지를 방문할 때, Next.js는 서버에 API 요청을 보내 getServerSideProps를 실행합니다. 라고 되어있습니다. 이러면,현재 CartList는 CartPage의 자식 컴포넌트이다.CartPage는 getServerSideProps로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList에게 전달해주고 있다.CartList는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다.장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제한다.router.replace를 통해(router.push도 동일) 현재 페이지(asPath)인 /cart로 이동한다. router를 통해 페이지를 방문했으므로 CartPage의 getServerSideProps가 다시 실행되고 갱신된 데이터를 CartPage에게 프롭스로 내려주게 된다.프롭스가 변경됐으니 자식 컴포넌트인 CartList도 리렌더링되어 모든 코드가 다시 실행된다.바뀐 장바구니 데이터로 보여지게 된다.이렇게 이해하면 될까요?그리고, getServerSideProps가 있는 페이지 컴포넌트는 getServerSideProps가 재실행되면 자동으로 리렌더링되게 되는 구조인가요?설명해주셨는데 제가 놓친거면 죄송합니다.

범샘님! 빠른 답변 및 업데이트 감사합니다,답변해주신것처럼 section1, section4에서 스크롤문제가 발생합니다.이 부분은 질문드리기 전에 확인한 부분이라 해결하였으나,다만 답변해주신 두번째 경우는 제가 드린 질문의 방향과 조금 달라 재질문 드립니다. section4까지 스크롤을 내린후, 다시 section3까지 스크롤을 end-section3 지점까지 올리고, 다시 section4로 스크롤 할 경우 스크롤이 작동되지 않습니다.이 부분은 첫번째 질문 드린 경우와 비슷한 상황인거 같은데, 이번에는 반대로 스크롤하는 경우라 direction을 down으로 하는 조건문을 추가하면 되는건지, 조금 더 명확한 답변과 코드를 확인하고 싶어 다시 질문드립니다. 여러모로 바쁘실텐데, 감사합니다! 

변경된 api 주소를 사용하면 text가 안나오는데, 이럴 경우에는 이미지 위에 text가 나오도록 기능을 따로 만들어야 하나요?

안녕하세요, 쉬운 강의 덕분에 gsap 을 쉽게 접하고 사용할 수 있어서 감사합니다.근데 해당 부분 구현중에 범샘께서 작성하신 코드(ScrollTrigger-finished)에서 확인해보면1) section3 도달 후, section2로 스크롤을 올리는 경우2) section4 도달 후, section3에서 다시 section4 로 스크롤을 내리는 경우해당 2가지 경우에서 section03을 기준으로 스크롤이 위아래로 작동을 잘 하지 않습니다.if(currentPageIndex === 3) return;때문인 것 같은데, 스크롤을 자유롭게 올렸다 내렸다 하면서 페이지를 확인할 수 있도록 하려고 하는데 잘 안되네요.코드를 어떤 방식으로 수정해야할지 질문 남깁니다.감사합니다.

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 했는데 찾을수 없데요 ㅠ 왜이럴까요?...