inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

next.js 서버fetch 에러 fallback ui 구현 방법

해결됨

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

next 공식문서를 살펴보면 단순 서버 fetch (서버액션x) 관련 에러 핸들링 방법은 딱히 안나와 있는 것 같아 질문드립니다. 만약 SectionA, SectionB, SectionC 서버 컴포넌트 내에서 각각 서버 fetch가 일어난다 가정했을 때 SectionB에서만 요청이 실패했다면 SectionB 영역만 fallback ui를 띄우고 나머지 SectionA, SectionC는 정상적으로 데이터를 렌더링하도록 구현하는 방법이 없을까요? error-boundary 라이브러리는 클라이언트 환경에서만 사용가능해 서버 컴포넌트에선 사용할 수 없고 next 내부적으로 설계되어있는 에러 바운더리(error.js 등)는 전역에러를 캐치하는 걸로 알고있습니다. 때문에 페이지 내 특정 영역만 fallback ui를 띄우는 용도는 아닌 것 같더라구요. 혹시 다른 방법이 있나 궁금합니다 감사합니다!!

  • react
  • typescript
  • next.js
변재정 댓글 2 좋아요 0 조회수 233

rimraf 이후 npm i 진행 하니 앱이 구동이 안됩니다.

해결됨

React Native with Expo: 제로초에게 제대로 배우기

재설치, eas build 를 다시해도 아래와 같은 에러 문구가 계속 나오네요..

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
정채진 댓글 2 좋아요 0 조회수 97

counterReducer.ts

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

counterReducer.ts 파일은 왜 tsx파일이 아닌 ts인가요??

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
himy1114 댓글 2 좋아요 0 조회수 86

싸이월드2 관련 질문 드립니

해결됨

[코드캠프] 시작은 프리캠프

<body> <div class="wrapper"> <div class="wrapper__header"> <div class="contents__title"> <div class="title">Updated news</div> <div class="subtitle">TODAY STORY</div> </div> <div class="divideLine"></div> <div class="contents__body">오늘의 기분 너무 좋음</div> </div> <div class="wrapper__body"> <div class="contents__title"> <div class="title">My Video</div> <div class="subtitle">INTRODUCE YOURSELF</div> </div> <div class="body__video"></div> .contents__title{ display: flex; flex-direction: row; align-items: center; } .title { color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .contents__body{ font-size: 11px; color: gray; } .wrapper__body { width: 100%; height: 270px; background-color: aqua; } .body__video { width: 100%; height: 240px; background-color: #c4c4c4; } 피그마에서는 my video 밑 회색 부분이 사이즈가 width 464px height 240px 이길래 width는 100%로 주고 height 240px로 설정했는데, 이렇게 안맞길래, height 100%로 했더니 이렇게 됩니다.. 왜이렇게 될까요?? 100% 이면 파란 부분까지 회색 부분도 가야하는 것 아닌가요? 자식 클래스는 부모 클래스 따라오는 걸로 알고 있었는데 이상하게 되어서 당황스럽습니다.. 가르쳐주시면 감사드리겠습니다. My Video 라인에서 조금 떨어트리고 싶어서 .body__video { width: 100%; height: 100%; background-color: #c4c4c4; margin: 15px 0px 25px 0px; } margin 줬더니 padding은 먹지도 않는데.. 제가 뭘 잘 못 알았을까요ㅠㅠ?

  • HTML/CSS
  • javascript
유아람 댓글 3 좋아요 0 조회수 124

학습방법과 방향성을 잡아주시면 감사하겠습니다.

미해결

JavaScript 알고리즘 베스트 10

제가 문제를 풀때, 너무 하드코딩을 하는것 같이 느껴집니다. 우선 문제를 먼저 풀어보고, 강의를 듣고 있는데, 선생님이 푼 방법으로 풀려고 노력하는게 좋을까요? 아니면, 선생님이 푼 방법으로 바꾸려고 노력하는게 좋을까요?? 제가 짠 코드는 이렇습니다. function solution(data){ let answer = []; let rotten_carret = 0; let rotten_carret_count = 0; //일단 for문으로, carret 밭 전체 탐색 for(let i = 0; i < data.length; i++) { for(let j = 0; j < data[i].length; j++) { //#일때 썩은당근 갯수 ++ if(data[i][j] === '#') { rotten_carret++; } //만약 0이라면 if(data[i][j] === 0) { //빈곳에서 주변 탐색을 통한 썩은 당근 갯수 구하기 for문 for(let k = (i-1); k <= (i+1) && k < data.length; k++) { for(let f = (j-1); f <= (j+1) && f < data[i].length; f++) { if( (k >= 0 && f >= 0) && (k!==i || f!==j)) { if(data[k][f] === '#') { //console.log ${i},${j}일때 ${k},${f} 엔 ${rotten_carret_count} ); rotten_carret_count++; } } } } } } } answer.push(rotten_carret); answer.push(rotten_carret_count); return answer; } 어떤 방식으로 학습하는 것이 더 효율적일지 의문이 들어 이렇게 문의 드립니다.

  • javascript
  • 코딩-테스트
  • 알고리즘
머리가점점빠져요 댓글 1 좋아요 0 조회수 66

04-02 Next 페이지 이동

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

useState(0) 부분에서 오류가 나 실행이 안됩니다. 오류를 못찾겠어요ㅠㅠ 알려주세요

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
skykwj0422 댓글 2 좋아요 0 조회수 108

리퀘스트 메모이제이션은 클라이언트 컴포넌트에서도 동작하나요?

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. 정말 바보같은 질문이라고 생각하고 있는데요. 이런 질문 정말 죄송합니다. 리퀘스트 메모이제이션은 서버 측에서 렌더링하는 과정에서 일어난다고 하셨는데 클라이언트 컴포넌트도 서버 측에서 렌더링이 되긴 하니까 리퀘스트 메모이제이션이 가능하지 않을까 생각했습니다. 근데 useEffect에서 GET 요청으로 보낼 경우 서버측에서는 렌더링되지 않으니까 메모이제이션이 안 될 것으로 생각이 되었습니다. 클라이언트 컴포넌트에 리퀘스트 메모이제이션이 적용되지 않는다고 이해하면 될까요? 이런 리퀘스트 메모이제이션은 서버에서 일어나는거니까 당연히 Network 탭에서 확인이 불가능하겠죠? 그리고 병렬 라우트에서도 리퀘스트 메모이제이션이 동작하나요?

  • react
  • typescript
  • next.js
SUPER 댓글 1 좋아요 0 조회수 157

인가 코드 관련 질문

미해결

React Native with Expo: 제로초에게 제대로 배우기

제로초님 안녕하세요! const result = await kakaoLogin(); 로그인 했을때 받아오는 result 내부의 accessToken이 백엔드에 전달해야될 인가 코드라고 생각하면 될까요?? 백엔드 개발자분에게 인가 코드를 전해드려야하는데 저게 인가 코드인건지 궁금합니다..!!

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
댓글 2 좋아요 0 조회수 114

구글 OAuth 오류 ...

미해결

React Native with Expo: 제로초에게 제대로 배우기

추가로 npx expo start 해서 expo go 로 앱열면 이런 에러가나요.. 구글 OAuth 도전하다가 오류나는것 같은데.. 이제 메트로를 못쓰는건가요? development build로 들어가야하나요? › › Choose an app to open your project at http://192.168.10.54:8081/_expo/loading › Metro waiting on exp://192.168.10.54:8081 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS) › Web is waiting on http://localhost:8081 › Using Expo Go › Press s │ switch to development build › Press a │ open Android › Press i │ open iOS simulator › Press w │ open web › Press j │ open debugger › Press r │ reload app › Press m │ toggle menu › shift+m │ more tools › Press o │ open project code in your editor › Press ? │ show all commands iOS Bundled 539ms node_modules/expo-router/entry.js (1439 modules) WARN expo-notifications: Android Push notifications (remote notifications) functionality provided by expo-notifications was removed from Expo Go with the release of SDK 53. Use a development build instead of Expo Go. Read more at https://docs.expo.dev/develop/development-builds/introduction/ . WARN expo-notifications functionality is not fully supported in Expo Go: We recommend you instead use a development build to avoid limitations. Learn more: https://expo.fyi/dev-client . WARN Require cycle: services/notificationService.ts -> services/firebaseService.ts -> services/notificationService.ts Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. LOG Firebase Messaging not available in Expo Go LOG Firebase Messaging not available in Expo Go ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(auth)/login.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(auth)/signup.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/add-asset.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/add-book.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/add-category.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/add-transaction.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/advanced-stats.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/asset-detail.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/book-sharing.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/budget-settings.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/change-password.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/manage-categories.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/profile.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/select-book.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(modals)/user-id-code.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(onboarding)/create-first-book.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes WARN Route "./(tabs)/asset.tsx" is missing the required default export. Ensure a React component is exported as default. ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): WARN [Layout children]: No route named "profile" exists in nested children: ["about", "book-settings", "help", "index", "invite-code", "join-book", "notifications", "settings", "book/[id]", "book/[id]/budget", "friends/requests", "ledger/[id]"] WARN [Layout children]: No route named "add-transaction" exists in nested children: ["about", "book-settings", "help", "index", "invite-code", "join-book", "notifications", "settings", "book/[id]", "book/[id]/budget", "friends/requests", "ledger/[id]"] WARN [Layout children]: No route named "add-book" exists in nested children: ["about", "book-settings", "help", "index", "invite-code", "join-book", "notifications", "settings", "book/[id]", "book/[id]/budget", "friends/requests", "ledger/[id]"] WARN [Layout children]: No route named "add-category" exists in nested children: ["about", "book-settings", "help", "index", "invite-code", "join-book", "notifications", "settings", "book/[id]", "book/[id]/budget", "friends/requests", "ledger/[id]"] WARN [Layout children]: No route named "select-book" exists in nested children: ["about", "book-settings", "help", "index", "invite-code", "join-book", "notifications", "settings", "book/[id]", "book/[id]/budget",

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
윤형주 댓글 3 좋아요 0 조회수 187

IOS 빌드 오류...

미해결

React Native with Expo: 제로초에게 제대로 배우기

npm ls react npm ls react-native npm ls expo 버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다 .이런 빌드 오류가 발생합니다.. 이유가 무엇일까요? ㅠㅠ

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
윤형주 댓글 5 좋아요 0 조회수 157

에뮬레이터 에서 오류

미해결

React Native with Expo: 제로초에게 제대로 배우기

안녕하세요 푸쉬알림 카카오로그인 할때 엑스포 고우로 통해서 개발이 안되는걸로 아는데 그이후로부터는 빌드된 앱으로 들어가서 테스트 하는걸로 알고 있거든여 근데 빌든된 앱을 들어가서 ip주소 수동으로 쳐서 들어가려고 하는데 계속 에러가뜨네요 ping테스트 도 해보고 서버도 켜서 웹브라우저에서 번들 다운되는지도 확인했는데 에뮬레이터 접속이 안되네요

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
gkgkgk 댓글 2 좋아요 0 조회수 68

과제 모범답안 유무

해결됨

[코드캠프] 시작은 프리캠프

<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <style> * {box-sizing: border-box;} * {font-family: Noto Sans CJK KR;} .pb { position: relative; left: 625px; top: 60px; bottom: 60px; width: 670px; height: 960px; border: 1px solid #aacdff; border-radius: 10px; box-shadow: 7px 7px 39px 0px #0068ff40 ; } .pb2{ width: 470px; height: 818px; position: relative; top: 72px; left: 100px; } .sb1{ font-weight: 700; font-size: 32px; color: #0068ff; } .sb2{ display: flex; flex-direction: column; gap: 21px; position: relative; top: 60px; } .sb2 > div{ width: 466px; height: 80px; color: #797979; font-size: 13px; } .sb2 div { border-bottom: solid 1px #cfcfcf; } .sb2 div.email{ border-bottom: solid 1px #0068ff; } .sb2 div.radio { width: 90%; height: 23.94px; display: flex; flex-direction: row; justify-content: center; gap: 30px; margin-top: 50px; border: solid #ffff ; } .sb2 div.checkbox { position: relative; top: 50px; width: 454px; height: 21.06px; border: solid 1px #ffff; display: flex; flex-direction: row; justify-content: center; } .sb2 div.hr { position: relative; top: 60px; border: #ffff; } .sb2 div.last { width: 470px; height: 75px; border: 1px solid #0068FF; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 15px; color: #0068FF; } </style> </head> <body> <div class="pb"> <div class="pb2"> <div class="sb1">회원가입을 위해 <br> 정보를 입력해 주세요 </div> <div class="sb2"> <div class="email">*이메일</div> <div>*이름</div> <div>*비밀번호</div> <div>*비밀번호 확인</div> <div class="radio"> <label><input type="radio" name="gender"> 여성 </label> <label><input type="radio" name="gender"> 남성 </label> </div> <div class="checkbox"> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="hr"> <hr> </div> <div class="last"> 가입하기 </div> </div> </div> </div> </body> </html> 어찌저찌 하긴했는데, 억지로 끼워넣기 한 기분입니다.. 혹시 강사님이 해 두신 모범답안 이라던가 보고 참조할 수 있을만한 것이 있을까요?? 문제점이.. 스크롤이 되지 않습니다.. 그리고 pb를 relative로 해서 탑에서 60px 간격 두게 설정했는데 설정이 안먹는 느낌입니다. div 대부분 relative로 했는데, relative로 했을 때 바로 위 div 기준으로 하는것인가요? 하다 보면 이상하게 겹쳐서 전에 div에 선이 그어져있거나, 단어가 겹쳐 있거나 합니다 예) div class="hr" 로 했는데 위에 checkbox 란에 선이 이상하게 겹쳐있습니다 예2) div class="last"도 relative로 설정해서 figma에 나온대로 30px 간격두고 싶었는데 hr라인이랑 겹쳐서 "가입하기" 문구가 들어가 버리더라구요.. figma에 나온 수치대로 입력하니 사이트는 이상하게 되고 해서 제가 임의로 숫자를 늘리고 해서 야매로 만들었어요.. 더 좋은 script가 있으면 보고 참조하고 싶습니다. 부탁드립니다.

  • HTML/CSS
  • javascript
유아람 댓글 2 좋아요 0 조회수 130

IOS 빌드 시 팀정보를 회사로 등록해버렸어요.

미해결

React Native with Expo: 제로초에게 제대로 배우기

npm ls expo 버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. IOS 빌드 시 팀정보를 회사로 등록해버렸어요. 제 개인 애플 계정의 개인 personalteam으로 했어야하는데 회사 팀으로 해버렸어요 어떻게 수정해야할가요?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
윤형주 댓글 2 좋아요 0 조회수 93

과제 연습 질문

해결됨

[코드캠프] 시작은 프리캠프

계속 <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <style> * {box-sizing: border-box;} * {font-family: Noto Sans CJK KR;} .pb { width: 670px; height: 960px; border: 1px solid #aacdff; border-radius: 10px; box-shadow: 7px 7px 39px 0px #0068ff40 ; } .pb2{ width: 470px; height: 818px; position: relative; top: 72px; left: 100px; } .sb1{ font-family: Noto Sans CJK KR; font-weight: 700; font-size: 32px; color: #0068ff; } .sb2{ display: flex; flex-direction: column; gap: 21px; position: relative; top: 60px; } .sb2 > div{ width: 466px; height: 80px; color: #797979; font-size: 13px; } .sb2 div { border-bottom: solid 1px #cfcfcf; } .sb2 div.email{ border-bottom: solid 1px #0068ff; } .sb2 div.radio1 { width: 140px; height: 23.94px; display: flex; margin-top: 50px; border: solid #ffff ; } .sb2 div.radio { border: solid #ffff; </style> </head> <body> <div class="pb"> <div class="pb2"> <div class="sb1">회원가입을 위해 <br> 정보를 입력해 주세요 </div> <div class="sb2"> <div class="email">*이메일</div> <div>*이름</div> <div>*비밀번호</div> <div>*비밀번호 확인</div> <div class="radio1"> <div class="radio"> <input type="radio" name="gender"> 여성 <input type="radio" name="gender"> 남성 </div> <div> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> </div> </div> </div> </div> </body> </html> 뭐가 잘못되었는지 모르겠어요..ㅠㅠ....

  • HTML/CSS
  • javascript
유아람 댓글 2 좋아요 0 조회수 109

수정하기 구현 중 작성완료 버튼을 누르면 아무 리스트도 뜨지 않습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

제목 그대로 수정하기 기능 구현 중 작성완료 버튼을 누르면 리스트에 나와야 하는데 위의 그림처럼 빈 리스트가 나옵니다. 계속 강의와 코드를 번갈아가면서 보는데 오류를 잡기 쉽지 않습니다. 아래는 실습했던 소스코드입니다. https://github.com/PARKSUNJUNG/section12 무엇이 문제일까요?

  • javascript
  • react
  • node.js
박선정 댓글 3 좋아요 0 조회수 141

React.memo 컴포넌트 렌더링 최적화 미션 day16 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. 강사님. react day 16 미션 contactEditor onChange 이벤트 발생 관련 렌더링 질문이 있습니다. 아래와 같이 ContactList에도 React.memo 내장함수를 적용했음에도 불구하고 contactEditor에서 텍스트를 입력하면 같이 렌더링 되는 이유를 모르겠습니다. const ContactList = ({contacts, onDelete}) => { return ( <div className="ContactList"> <div className="title">Contact List</div> {contacts.map((contact) => { return <ContactItem key={contact.id} contact={contact} onDelete={onDelete}/>; })} </div> ) } export default memo(ContactList); const ContactItem = ({contact, onDelete}) => { const onDeleteButtion = () => { onDelete(contact.id); } return ( <div className="ContactItem"> <div className="name">{contact.name}</div> <div className="email">{contact.email}</div> <button onClick={onDeleteButtion} name="remove" >🗑️ Remove</button> </div> ) } export default memo(ContactItem);

  • javascript
  • react
  • node.js
유일용 댓글 2 좋아요 0 조회수 90

<style> 에 *와 div 차이

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요 부산사는 유아람이라고 합니다. 수업 잘 듣고 있습니다. 한 가지 궁금한 점이 있어서 이렇게 글을 작성합니다. *{} 가 전체 선택자이고 div {} 는 태그 선택자라고 가르쳐주셨는데, 마지막에 실험을 하는데서 궁금해서 말씀드립니다. <!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> * { box-sizing: border-box; } div { width: 80px; height: 80px; border: 1px solid red; padding: 10px; } /* #contentBox { box-sizing: content-box; } #borderBox { box-sizing: border-box; } */ </style> </head> <body> <div id="contentBox">박스 1</div> <div>박스 2</div> <div id="borderBox">박스 3</div> </body> </html> <body> <div>박스 1</div> 는 처음에 아무런 style을 지정하지 않았을 때, 박스로 나타나지 않고 그냥 텍스트 "박스 1"만 적혀있었는데, 이건 제 눈에 안보이는 박스가 이미 형성이 되어있는데 색이나 크기를 지정하지 않아서 그냥 텍스트로 보이는게 맞나요? div { width: 80px; height: 80px; border: 1px solid red; padding: 10px; } 이걸 지정하면서 보이지 않던 박스가 생긴걸까요? 밑에 설정을 한 div 전체니까 div{}로 하지않고 *를적용해서 <!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> * { box-sizing: border-box; } * { width: 80px; height: 80px; border: 1px solid red; padding: 10px; } /* #contentBox { box-sizing: content-box; } #borderBox { box-sizing: border-box; } */ </style> </head> <body> <div id="contentBox">박스 1</div> <div>박스 2</div> <div id="borderBox">박스 3</div> </body> </html> 이렇게 나오던데 이건 왜 이렇게 되는걸까요?

  • HTML/CSS
  • javascript
유아람 댓글 2 좋아요 0 조회수 114

[CSS&JS 마스터]공부하는 속도, 코드 리뷰

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

현재 군대 사지방에서 공부하고 있는 군인입니다. 지금 현재 [입중급]CSS&JS 마스터를 수강하고 있습니다. 섹션1을 마치고 과제1을 모두 마치는 데에 총 4일이 소요됐습니다. 매일 2시간 씩밖에 컴퓨터를 사용하지 못하는데 이정도 속도면 괜찮은지 여쭙고 싶습니다. 그리고 중간중간 코드 리뷰를 받고 싶을 때에는 어떻게 하면 될까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
ohwm 댓글 2 좋아요 0 조회수 110

URL에 따라 리스트 불러오기 - getSortBy()와 getSearchWord()를 활성화 하면 리스트가 사라집니다

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

const getSortBy = () =>{ if(window.location.search){ const sortText = window.location.search.split('sort=')[1].split('&')[0]; console.log(`getSortBy : ${sortText}`); return sortText; }; return 'total'; }; const getSearchWord = () => { if(window.location.search && window.location.search.includes('search=')){ return window.location.search.split('search=')[1]; }; return ''; }; ... this.state = { startIdx: 0, sortBy : getSortBy(), searchWord: getSearchWord(), region: "", cities: "",}; 일단 문제가 되는 코드는 이 부분 입니다. 이부분을 작성 한 이후로, 새로고침 하면 아래 시티리스트가 안나오다가 상단 sort 또는 search 를 주석처리 하면 리스트가 출력 됩니다 전체 코드는 아래 git 주소를 같이 봐주시면 감사하겠습니다. https://github.com/KimDay366/onebite_js/tree/main/section09/Trip-Wiki 한시간째 똑같은 코드만 보고 있는데, 계속 봐도 저는 뭐가 문제인지 모르겠네요 ㅠㅠㅠ

  • javascript
  • rest-api
  • spa
  • dom
kimday365 댓글 1 좋아요 1 조회수 68

상세페이지 구현 Author의 name 프러퍼티가 조회가 안됩니다.

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

아무리 해도 안되서, 기존 코드를 복붙하고 사용하고, 공식문서를 봐도 페이지 properties의 Author.people[0] 내부에는 { id: "0219380..." , object: "user" } 만 있습니다. 이마저도 문자열이라 name프로퍼티가 없습니다. 노션 템플릿도 author가 적용이 되어있는 걸 확인했는데요. 혹시 api가 변경이 된 것일까요?

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
SEONGHOON KIM (Ste 댓글 2 좋아요 1 조회수 91

인기 태그

인프런 TOP Writers

주간 인기글