sucoding
@sucoding
Students
5,066
Reviews
296
Course Rating
4.9
Posts
Q&A
심플갤러리 만들기에서
안녕하세요!인프런 AI 인턴 답변이 정확하네요.질문해주신 내용은 인프런 AI 답변 참고해보시면 도움이 될 듯합니다.추가로 궁금한 게 있으시면 다시 물어봐주세요!감사합니다.
- 0
- 2
- 18
Q&A
10-6 실습 할 수 없습니다..
안녕하세요![섹션 1.준비하기 > 2. 소스 코드 다운로드 및 활용법] 강의에 최신 코드 다시 업로드해놨습니다.소스 코드를 다시 다운로드 받으시면 됩니다!불편을 드려서 죄송합니다!
- 0
- 1
- 41
Q&A
그림 예제는 따로 제공이 안되나요?
안녕하세요.말씀해주신 부분은 참고하겠습니다. 😊그림 자료는 제공된 예제 코드의 SECTION03/03-03/.excalidraw 파일에 포함되어 있습니다.VS Code에서 excalidraw 확장 프로그램을 설치하신 후, 해당 파일을 더블클릭해 열어보시면 내용을 확인하실 수 있습니다.(사진)감사합니다.
- 0
- 1
- 48
Q&A
useOptimistic 실전-1 useState
안녕하세요.해결하셨다니 다행입니다. 😀
- 0
- 2
- 40
Q&A
cacheLife에 대한 질문입니다
안녕하세요.말씀해주신 것처럼 3월 3일에 스펙이 변경되어,현재 default 프리셋의 expire 값은 never로 설정되어 있습니다.따라서 이해하신 바와 같이, 해당 값은 만료되지 않으며 revalidate에 의해서만 주기적으로 갱신된다고 보시면 됩니다.
- 0
- 1
- 43
Q&A
margin, padding 사용 시기
안녕하세요.심플 랜딩 페이지를 구현하는 과정에서 느끼신 것처럼 margin과 padding은 겉보기 결과가 비슷해 보일 때가 많지만, 실제 역할과 사용 목적은 분명히 다릅니다. 이 둘의 차이를 이해하면 언제 어떤 속성을 써야 할지 자연스럽게 판단할 수 있습니다.우선 h1과 h2 사이 간격을 만들 때 margin-bottom: 40px과 padding-bottom: 40px이 비슷하게 보이는 이유는, 두 경우 모두 결과적으로 아래 요소(h2)를 아래로 밀어내기 때문입니다. 하지만 의미적으로는 차이가 있습니다. margin은 요소의 바깥 여백을 조절하여 다른 요소와의 거리를 만드는 속성이기 때문에, 제목과 제목 사이처럼 요소 간 간격을 만들 때는 margin을 사용하는 것이 올바른 방식입니다. 반면 padding은 요소 내부의 여백을 늘리는 것으로, 콘텐츠와 경계 사이의 공간을 확보할 때 사용하는 속성입니다.다음으로 margin-top: 380px이 기대와 다르게 동작하고 padding-top은 정상적으로 보였던 이유는, CSS의 margin collapse(마진 병합) 현상 때문입니다. 이는 부모 요소와 자식 요소의 위쪽 또는 아래쪽 margin이 겹칠 때 하나로 합쳐지는 동작으로, 특히 부모에 padding이나 border가 없을 경우 자식의 margin-top이 부모 바깥으로 튀어나가 버릴 수 있습니다. 이 때문에 실제로는 요소가 내려가지 않은 것처럼 보이는 상황이 발생합니다. 반면 padding은 항상 요소 내부에서 처리되기 때문에 이러한 영향을 받지 않고 의도한 대로 동작합니다.결론적으로 기준을 정리하면, 요소와 요소 사이의 간격을 조절할 때는 margin을 사용하고, 요소 내부의 공간을 조절하거나 콘텐츠와 경계 사이 여유를 줄 때는 padding을 사용하는 것이 적절합니다. 다만 margin-top이나 margin-bottom이 예상과 다르게 동작할 경우에는 버그라기보다 margin collapse 현상일 가능성이 크므로, 부모 요소에 padding을 주거나 display: flex와 같은 레이아웃 방식을 사용하는 등 구조적인 해결 방법을 고려하는 것이 좋습니다.이 기준을 익혀 두시면 단순히 “어느 쪽이 더 잘 먹히는가”가 아니라, “의미에 맞는 속성”을 선택하는 방향으로 코드를 작성할 수 있게 됩니다.
- 0
- 2
- 32
Q&A
(제보) 쿠키를 브라우저 개발 환경에서 직접 삽입했을 때 나오지 않는 현상
안녕하세요 😀코드적인 처리를 통해서 직접 심으셔도결과는 같습니다.잘되시는 방법으로 진행하시면 되겠습니다.감사합니다!
- 0
- 2
- 46
Q&A
discord 초대장 갱신이 필요한거같습니다.
안녕하세요. 제가 최초 공유드린 링크가 7일 제한이 있다는 것을 몇 일전에 알게 되어서모든 강의에 새로운 링크를 다시 올려 둔 상태입니다.https://discord.gg/2ByaMfUumy위 링크로도 접속이 불가능하실까요?확인 부탁드리겠습니다.감사합니다!
- 0
- 1
- 46
Q&A
디스코드 채널 초대 링크
안녕하세요!디스코드 운영은 처음이라서 초대 링크가 7일 유효기간이 있는 것을 몰랐네요 ㅠ다시 생성해서 공유드립니다.https://discord.gg/2ByaMfUumy감사합니다!
- 0
- 1
- 58
Q&A
revalidatePath 질문 있습니다.
안녕하세요.이 내용을 이해하려면 먼저 몇 가지 배경 지식이 필요합니다.우선 revalidatePath()는 데이터를 즉시 무효화하는 함수가 아닙니다. 해당 경로는 다음 방문 시점에 재검증되도록 설정하는 함수입니다.다만, 서버 액션(Server Action) 안에서 revalidatePath()를 호출하면, 서버 액션이 내부적으로 router.refresh()와 유사한 동작을 수행하기 때문에 같은 페이지에 머물러 있어도 데이터가 즉시 변경된 것처럼 보일 수 있습니다. 이 점을 먼저 이해하는 것이 중요합니다.revalidatePath 함수는 두 개의 매개변수를 받습니다.첫 번째는 경로(path)이고, 두 번째는 무효화 타입(type)입니다.두 번째 매개변수가 "layout"인 경우, 첫 번째 매개변수로 전달한 경로에서 사용 중인 layout.tsx를 사용하는 모든 경로가 함께 무효화됩니다. 따라서 해당 레이아웃을 공유하는 페이지들의 데이터가 일괄적으로 갱신됩니다.반면, 두 번째 매개변수가 "page"인 경우에는 첫 번째 매개변수에 해당하는 경로의 page.tsx와 그 페이지가 사용하는 layout.tsx가 무효화 대상이 됩니다.예를 들어, /about 경로에서 revalidatePath("/about", "page")를 호출하면 /about/page.tsx와 해당 페이지가 사용하는 /about/layout.tsx가 무효화됩니다. 서버 액션에서 호출한 경우에는 즉시 반영된 것처럼 보이게 됩니다.하지만 /about/detail 경로에서 revalidatePath("/about", "page")를 호출하면 상황이 달라집니다. 현재 위치한 경로와 첫 번째 인자로 전달한 경로가 다르기 때문에, 즉시 무효화가 일어나지 않고 다음에 /about을 방문할 때 재검증이 수행됩니다. 따라서 /about/detail에서는 변화가 보이지 않지만, 이후 /about으로 이동하면 /about/page.tsx의 데이터가 새로 갱신됩니다.여기서 한 가지 더 이해해야 할 부분은 라우터 캐시(router cache)입니다./about/page.tsx와 /about/detail/page.tsx는 모두 공통으로 /about/layout.tsx를 사용합니다. 이 레이아웃 파일은 기본적으로 라우터 캐시에 의해 재사용됩니다. 즉, 한 번 렌더링되면 특별한 경우(예: router.refresh() 호출)가 아니면 다시 렌더링되지 않습니다.따라서 /about 경로에서 무효화를 수행하면 서버 액션이 router.refresh()와 같은 효과를 내므로 about/layout.tsx도 함께 재렌더링됩니다.그러나 /about/detail에서 /about 경로를 무효화한 경우에는 즉시 아무 일도 일어나지 않다가, 이후 /about으로 이동하면 그때 재검증이 이루어집니다. 다만 이때도 layout.tsx는 라우터 캐시에 의해 재사용되기 때문에 값이 바로 변경되지 않을 수 있습니다.하지만 브라우저를 새로고침하면 라우터 캐시가 초기화되므로, 그 시점에는 about/layout.tsx 역시 함께 무효화되어 데이터가 갱신되는 것을 확인할 수 있습니다.이처럼 revalidatePath의 동작은 서버 액션 여부, 현재 경로, 무효화 타입, 그리고 라우터 캐시의 동작 방식에 따라 다르게 보일 수 있습니다.더 궁금한 점이 있다면 언제든지 질문해주세요.
- 0
- 2
- 53




