next 공식문서를 살펴보면 단순 서버 fetch (서버액션x) 관련 에러 핸들링 방법은 딱히 안나와 있는 것 같아 질문드립니다. 만약 SectionA, SectionB, SectionC 서버 컴포넌트 내에서 각각 서버 fetch가 일어난다 가정했을 때 SectionB에서만 요청이 실패했다면 SectionB 영역만 fallback ui를 띄우고 나머지 SectionA, SectionC는 정상적으로 데이터를 렌더링하도록 구현하는 방법이 없을까요? error-boundary 라이브러리는 클라이언트 환경에서만 사용가능해 서버 컴포넌트에선 사용할 수 없고 next 내부적으로 설계되어있는 에러 바운더리(error.js 등)는 전역에러를 캐치하는 걸로 알고있습니다. 때문에 페이지 내 특정 영역만 fallback ui를 띄우는 용도는 아닌 것 같더라구요. 혹시 다른 방법이 있나 궁금합니다 감사합니다!!
제가 문제를 풀때, 너무 하드코딩을 하는것 같이 느껴집니다. 우선 문제를 먼저 풀어보고, 강의를 듣고 있는데, 선생님이 푼 방법으로 풀려고 노력하는게 좋을까요? 아니면, 선생님이 푼 방법으로 바꾸려고 노력하는게 좋을까요?? 제가 짠 코드는 이렇습니다. 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; } 어떤 방식으로 학습하는 것이 더 효율적일지 의문이 들어 이렇게 문의 드립니다.
안녕하세요. 정말 바보같은 질문이라고 생각하고 있는데요. 이런 질문 정말 죄송합니다. 리퀘스트 메모이제이션은 서버 측에서 렌더링하는 과정에서 일어난다고 하셨는데 클라이언트 컴포넌트도 서버 측에서 렌더링이 되긴 하니까 리퀘스트 메모이제이션이 가능하지 않을까 생각했습니다. 근데 useEffect에서 GET 요청으로 보낼 경우 서버측에서는 렌더링되지 않으니까 메모이제이션이 안 될 것으로 생각이 되었습니다. 클라이언트 컴포넌트에 리퀘스트 메모이제이션이 적용되지 않는다고 이해하면 될까요? 이런 리퀘스트 메모이제이션은 서버에서 일어나는거니까 당연히 Network 탭에서 확인이 불가능하겠죠? 그리고 병렬 라우트에서도 리퀘스트 메모이제이션이 동작하나요?
제목 그대로 수정하기 기능 구현 중 작성완료 버튼을 누르면 리스트에 나와야 하는데 위의 그림처럼 빈 리스트가 나옵니다. 계속 강의와 코드를 번갈아가면서 보는데 오류를 잡기 쉽지 않습니다. 아래는 실습했던 소스코드입니다. https://github.com/PARKSUNJUNG/section12 무엇이 문제일까요?
안녕하세요 부산사는 유아람이라고 합니다. 수업 잘 듣고 있습니다. 한 가지 궁금한 점이 있어서 이렇게 글을 작성합니다. *{} 가 전체 선택자이고 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> 이렇게 나오던데 이건 왜 이렇게 되는걸까요?
현재 군대 사지방에서 공부하고 있는 군인입니다. 지금 현재 [입중급]CSS&JS 마스터를 수강하고 있습니다. 섹션1을 마치고 과제1을 모두 마치는 데에 총 4일이 소요됐습니다. 매일 2시간 씩밖에 컴퓨터를 사용하지 못하는데 이정도 속도면 괜찮은지 여쭙고 싶습니다. 그리고 중간중간 코드 리뷰를 받고 싶을 때에는 어떻게 하면 될까요?
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 한시간째 똑같은 코드만 보고 있는데, 계속 봐도 저는 뭐가 문제인지 모르겠네요 ㅠㅠㅠ
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
아무리 해도 안되서, 기존 코드를 복붙하고 사용하고, 공식문서를 봐도 페이지 properties의 Author.people[0] 내부에는 { id: "0219380..." , object: "user" } 만 있습니다. 이마저도 문자열이라 name프로퍼티가 없습니다. 노션 템플릿도 author가 적용이 되어있는 걸 확인했는데요. 혹시 api가 변경이 된 것일까요?
안녕하세요 이전에 커리어에 관한 질문 드렸었습니다(아래링크) https://inf.run/N5Wz7 . 다름이 아니라 강사님의 강의가 저의 프론트엔드에 대한 시각을 완전히 바꿔 놓았음을 전하고자 이 글을 씁니다. 단순히 라이브러리 숙련도를 넘어, 자바스크립트를 통해 클라이언트 공통 스펙을 깊이 있게 다루는 강사님의 강의는 저에게 큰 울림을 주었습니다. 이는 언어의 경계를 넘어선, 클라이언트 개발의 본질을 꿰뚫는 강의라고 생각합니다. 현재 텐서플로우 강의를 제외한 대부분의 강의를 90% 이상 수강했으며, 앞으로 여러 번 반복해서 들으며 더 깊은 깨달음을 얻을 수 있으리라 확신합니다. 국내외를 통틀어 이처럼 프론트엔드 펀더멘털을 유일무이하게 다루는 강의는 없다고 생각하며, 앞으로도 많은 분께 클라이언트 개발자의 공통 교과목으로 강력히 추천할 것입니다. 강사님의 강의를 들으며 현업에서의 경험과 맞물려 많은 것을 느꼈습니다. 특히 현업 프론트, 백엔드 개발자들이 자신의 포지션에만 집중하여 발생하는 소통의 단절과 비효율성에 대해 깊이 공감하게 되었습니다. 한 프로젝트를 함께 완성해나가는 과정에서 각자의 파트에만 몰두하여 전체적인 흐름을 놓치고 소통이 원활하지 않은 모습들을 보며, 강사님의 강의가 제시하는 깊이 있는 이해의 중요성을 더욱 절감했습니다. 곧 프론트엔드 부트캠프에 참여하게 되는데, 강사님의 강의를 통해 얻은 통찰력이 큰 자산이 될 것이라 믿습니다. 앞으로도 변함없이 좋은 강의를 제공해주시기를 바라며, 늘 응원하겠습니다. 감사합니다.
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. recoil 이게 next에서 쓸 때에 따로 타입 에러 등 next가 recoil을 못 찾아내는 거 같은데, 강의 진행할때에는 recoil을 쓸거잖아요? 이럴때에는 어떻게 해야 하나요? 버전을 낮추어야 하나요? 낮춘다면 어디 버전까지 낮춰야 할까요?
안녕하세요 강의 잘 듣고 있습니다 좋은 강의 만들어주셔서 감사합니다! DOM API-2 1분54초 경 질문드립니다. let $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type); 이렇게 출력이 되고 div# type.info -item let $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type.outerHTML); 다음과같이 .outerHTML을 출력해야 강의와 같이 아래처럼 출력이 되는데 <div class="info-item" id="type">말티즈</div> 어떤 차이가 있는 걸까요? 환경설정을 어떻게 하면 강의처럼 그냥 console.log($type); 만 출력해도 <div class="info-item" id="type">말티즈</div> 와 같이 웹사이트 콘솔창에서 볼 수 있을까요? ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다! 안녕하세요. 강사님! 8.5) Read - 투두리스트 렌더링하기 강의에서 질문이 있습니다. 검색어로 필터링하는 기능이 List.jsx에 되어있는데요, 이 부분 관련해서 질문이 있습니다. 필터링이 App.jsx에서 필터링 하는 것과 어떤 차이가 있나요?? 어떤 이유에서 List.jsx에서 필터링하는지도 궁금합니다. (원본 데이터를 건들지않기 위함(?)일까요?) 그리고 어떤 컴포넌트에서 필터링 하더라도 리렌더링이 발생하는건가요? 감사합니다!
안녕하세요. 강사님. section 8-2 투두리스트 프로젝트 UI 구현하기에서 css 스타일에 대해서 질문이 있습니다. .List > input 과같이 중간에 > 연산이 있는 경우와 없는 경우의 차이는 무엇인가요? 미션 day15 ContactEditor css 스타일에서 .input_wrapper className이 이미 적용되어 있는데 아래와 같이 부모 속성인 .ContactEditor를 명시할 필요가 있는지도 궁금합니다. .ContactEditor .input_wrapper
