173만명의 커뮤니티!! 함께 토론해봐요.
미해결
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요 갓영한님 자바에서 이렇게 그룹핑 하는 경우도 있을까요 ? 실무에서 보통 쿼리쪽에서 하지않나용??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
궁금한 점이 2가지 있는데요 1. Header 컴포넌트에 div 말고 애초에 button를 넣으면 안 되나요? Header.jsx const Header = ({ title, leftChild, rightChild }) => { return ( <header className="Header"> <button className="header_left">{leftChild}</button> <div className="header_center">{title}</div> <button className="header_right">{rightChild}</button> </header> ); }; App.jsx <Header title={"Header"} leftChild={"Left"} rightChild={"Right"} /> 이런 식으로 헤더 컴포에 처음부터 버튼 태그를 넣으면 될 것 같은데 왜 div로 감싸는 건가요? 음.. 그냥 css 편의상 이유일까요? 2. 저는 css를 배울 때 처음에 charset "utf-8"; 을 항상 입력하라고 배웠는데 리액트 강의에서는 항상 안 사용하시더라구요. 리액트에서는 원래 안 쓰는건가요, 아니면 그냥 강의에서는 굳이 필요없어서 쓰지 않는건가요?
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요 선생님.. 선생님 강의를 따라하다가, 회원 가입한 사람 모두가 글을 쓸수 있는 낚서장 같은 블로그를 만들었는데, 회원 가입 페이지나 등록 등을 커서에서 만들어서 잘 동작하는것 같고, 수파베이스에서도 세팅을 해주었는데, 회원가입에서 이메일과 비번을 입력하면 제게 확인 메일이 와야 하는데 오질 않네요. 이거 혹시 smtp 서비스를 추가해야 되는건가요?
미해결
한 입 크기로 잘라먹는 Next.js
아래 동일한 문제로 고통받는 분들이 계시는 것 같아서 깔끔하게 정리해서 올려드립니다. 1.운영체제 및 환경설정 -맥북 m1, 윈도우 11 2.이슈발생 -터미널 내 npx prisma db push 입력 시, 아래 오류 발생 -오류코드 : 아래 문자열 3.해결방안 -여러가지 해결방안이 있겠지만, 저는 아래와 같이 해결했습니다. -prisma 폴더 > schema.prisma 파일 > 14번째 줄, directUrl 삭제 (*아래처럼) 변경 전 변경 후 -.env 파일 > directURL 설정하지 않기 (*아래처럼!!! / 단, keyword는 본인 키워드로 변경 필수!) 그리고, npx prisma db push 입력 시, 문제없이 실행!! 4.원인분석 -아마도 DATABASE_URL과 DIRECT_URL을 둘 다 사용할 때, 뭔가 문제가 발생했던 것 같습니다. 물론 .env 파일 내 DIRECT_URL 키 생성 후 정상적인 값을 입력해보기도 했지만, 저는 계속 동일한 문제가 발생했기 때문에 그냥 서버 연결 방식을 1개만 선택했는데, 이 방법으로는 잘 되었습니다. 혹시나 저와 동일한 문제로 고민하실까 해서 완벽하지는 않지만, 공유드립니다. 감사합니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
최신 cursor에는 project rules 작성 시에 타입을 정할 수 있는데 4가지 중에 어떤 타입으로 하면 되는지, 패턴 "app/**/*.{ts,tsx}"은 어디에 넣어야할지도 같이 업데이트 해주시면 좋을 것 같습니다 !
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 ~ 해당 수업 그대로 했는데 실행시 헤더만 보이고 page.tsx 에 작성된 <div>내용입니다 ~</div> 네 줄 내용이 안나옵니다. 수업 두세번 보면서 점검을 했는데 ..어디를 수정해야 할지 모르겠습니다. 아래는 제 코드 캡처해서 올립니다. 실행시는 아래처럼 내용이 안뜹니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 싸이월드 만들기 1탄 피드백 부탁 드립니다. 과제 완성 후 레퍼런스 코드를 참고해서 확인도 하였는데 궁금한 점이 있습니다. figma에 있는 '오늘의 기분' select 박스 화살표 모양을 따라해 보고 싶어 아이콘을 사용했는데 아래 코드에서 select 태그 위에 아이콘이 잘 겹치도록 하는 부분이 어려운 것 같습니다. 이렇게 두 요소를 겹치도록 할 때 크기, 위치 같은 요소를 어떻게 계산하여 맞게 지정할 수 있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>정현아님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/f9748babc2.js" crossorigin="anonymous"></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <div class="today"> <!-- 각각의 span 박스를 만들어서 관리 --> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="left__body__profile__content"> <i class="fa-regular fa-face-smile"></i> 이름 </div> <div class="left__body__profile__content"> <i class="fa-solid fa-envelope"></i> Phone </div> <div class="left__body__profile__content"> <i class="fa-solid fa-phone"></i> E-mail </div> <div class="left__body__profile__content"> <i class="fa-solid fa-star"></i> 인스타그램 </div> </div> <div class="left__body__body"></div> <div class="left__body__footer"> <div class="left__body__footer__title"> 오늘의 기분 </div> <div class="left__body__footer__box"> <select class="left__body__footer__select"> <option selected="true">기쁨 😊</option> <option>슬픔 😢</option> <option>화남 😠</option> <option>행복 🥰</option> </select> <span class="left__body__footer__icon"><i class="fa-regular fa-square-caret-down"></i></span> </div> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html> * { box-sizing: border-box; margin: 0px; /*위 옆 공백 제거*/ } .background { width: 1024px; height: 600px; /* background-color: bisque; */ background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; /*위 오른쪽 아래 왼쪽 - 시계방향*/ } .outerbox { width: 808px; height: 544px; /* background-color: tomato; */ background-image: url("../images/outerbox.png"); } .wrapper{ display: flex; flex-direction: row; /* background-color: rebeccapurple; */ padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; /* background-color: bisque; */ display: flex; flex-direction: column; } .wrapper__left__header { width: 100%; height: 30px; /* background-color: aqua; */ display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { font-size: 9px; } .wrapper__left__body { width: 100%; height: 100%; /*형제 속성을 제외한 나머지만 가져감*/ /* background-color: steelblue; */ border: 1px solid grey; border-radius: 15px; background-color: white; display: flex; flex-direction: column; align-items: center; padding: 20px 30px; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: grey; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; /*상하여백 좌우여백*/ } .left__body__profile { width: 100%; display: flex; flex-direction: column; } .left__body__profile__content { height: 12px; font-size: 10px; /* margin: 0px 0px 8px 0px; */ margin-bottom: 10px; color: #999999; } .left__body__footer { /* padding: 110px 0px 0px 0px; */ width: 100%; margin-top: 100px; } .left__body__footer__title, .left__body__footer__select { font-size: 11px; } .left__body__footer__box { position: relative; margin-top: 5px; } .left__body__footer__select { width: 141px; appearance: none; } .left__body__footer__icon { position: absolute; width: 18px; height: 18px; top: 2px; right: 2px; pointer-events: none; /* 아이콘을 클릭해도 뒤의 select가 반응하도록 설정 */ } .wrapper__right { width: 524px; height: 472px; /* background-color: violet; */ }
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 강의 정말 잘 수강하고 있습니다. 강의 수강 중에 궁금한 점이 생겨 질문 드립니다. 강사님께서 말씀하신 것처럼 규모가 크고 복잡한 프로젝트의 경우는 컴포넌트의 양이 많아, 개발자가 이를 인지하지 못 하고 클라이언트 컴포넌트 아래에 서버 컴포넌트를 사용하는 경우가 자주 발생할 수 있을 것 같다는 생각이 들었습니다. 그렇다면 혹시 큰 프로젝트 내에서 이를 방지하기 위해 특별히 조치를 취하셨던 경험이나 팁이 있는지 알고 싶어서 질문드립니다. 예를 들면, 서버 컴포넌트와 클라이언트를 다른 폴더로 구분해서 분류하는 등 실무에서 실제로 사용되는 방법이 있는지 알려주시면 감사하겠습니다!
미해결
한 입 크기로 잘라먹는 Next.js
강의 파트 : 2.16)SSG 4.폴백옵션 설정하기. 질문 : SSG경로 생성은 /books/[id] 페이지 요청이 발생했을 경우 생성되어야 하는걸로 이해했지만, index page만 접속해도 index page에 노출되는 id 값을 가진 데이터들이 전부 /books/[id] 에 해당하는 SSG 파일이 생성되었습니다. (지금 추천하는 도서, 등록된 모든 도서) (위의 사진은 빌드 후, 인덱스 페이지 요청 시 생성된 SSG파일들 입니다.) (인덱스에서 스크롤 해보니 생성되는것을 확인했습니다.) 이 상황은 next의 LInk컴포넌트 frefetch와 연관있는 경우일까요?
해결됨
김영한의 실전 자바 - 고급 3편, 람다, 스트림, 함수형 프로그래밍
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? - 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? - 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? - 예 [질문 내용] 안녕하세요, 강의 즐겁게 듣고 있습니다. 강의: 섹션 13. 병렬 스트림 - 병렬스트림 사용시 주의점1 질문: 강의 내용 중 'Fork/Join 프레임워크를 I/O 바운드 작업에는 사용하지 않는다'는 내용에서 I/O 바운드 작업을 '소요시간이 긴 작업'으로 이해해도 될까요? 세부 I/O 바운드 작업을 공용 풀에서 처리할 경우 발생하는 문제들이 I/O 작업 자체보다는 긴 시간이 소요되는 작업으로 풀의 한정된 수의 스레드를 점유하는 것이 원인이라 이해했는데 강의내용이 I/O 바운드 작업에 초점을 맞추어 제 이해에 오해가 있는가 싶습니다. 병렬 스트림 등의 기능을 통해 공용 풀에서 I/O 바운드 작업이 처리되면 스레드 블로킹에 의한 CPU 낭비, 스레드 수를 증가시킨다면 컨텍스트 스위칭 오버헤드 증가, 작업 훔치기 기법 무력화 등의 부작용이 있는데 이는 긴 시간이 소요되는 작업으로 풀의 한정된 수의 스레드가 오래 점유되면서 발생하는 문제로 이해했습니다. CPU 바운드 작업이라도 소요시간이 길다면 CPU 낭비를 제외하고 위와 같은 문제가 발생되리라 생각합니다. (I/O 바운드 작업이 긴 시간 CPU를 사용하지 않으면서 스레드를 점유한다면 무거운 CPU 바운드 작업은 긴 시간 CPU를 사용하면서 스레드를 점유, 이로 인해 공용풀의 스레드를 늘린다면 컨텍스트 스위칭 오버헤드 증가, CPU 바운드 작업이더라도 작업이 빨리 끝나지 않아 훔치기 기법 무력화 등) 일반적으로 I/O 바운드 작업은 CPU 바운드 작업보다 긴 시간이 소요되는 것이 경험적/현실적 가정으로 알고 있습니다. 이런 일반적인 현상을 전제로 I/O 바운드 작업을 '소요시간이 긴 작업'을 대표하는 의미로 사용하신 것인지, 아니면 제가 놓친 다른 의미, I/O 바운드 작업만이 가지는 특징을 염두에 두신 것인지 궁금합니다. 좋은 5월 보내시길 바랍니다. 감사합니다.
미해결
React Native with Expo: 제로초에게 제대로 배우기
13강 강의 예제로 진행중 AnimatedTabBarButton에서 type을 BottomTabBarButtonProps로 사용했을때, <Pressable {...restProps} /> 부분에서 PressableProps type과 불일치 에러가 발생해요. type assertion으로 {...restProps as PressableProps} 처리를 하면 에러 표기는 안나긴하지만 찝찝해서요. 강사님의 IDE와는 다르게 에러가 발생하는데 의존성 version 달라서 발생할 수도 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
서버 액션을 사용하면 api 설정을 좀 더 간단하게 해줄 수 있다는 것은 이해했습니다. 근데 그럼 이러한 서버 액션은 AppRouter에서 대부분의 api를 완전히 대체할 수 있는 걸까요? 아니면 상황에 따라서 서버 액션을 사용하기도 하고 api를 따로 만들어서 사용하기도 하고 그런건가요? 프로젝트를 만드려고 하는데 어떤 부분에서 서버 액션을 사용해야할지 정확히 감이 안잡혀서 질문 드립니다..!
미해결
React Native with Expo: 제로초에게 제대로 배우기
eas build --platform android --profile development 위 eas 빌드 명령어를 실행했는데 거의 30분째 Build in progress... 문구만 보이네요, 좀 찾아봤더니 Free Tier라 큐에 대기시간때문인 것 같은데.. 원래 이런건가요?
해결됨
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
버셀에 등록하는데 계속 에러가 나는데.. 어떤 방법으로 이 에러를 확인 할 수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데 figma 처럼 라디오버튼의 기본 색상을 회색으로 변경할 수 있을까요? css 파일에서 반복되어 사용되는 속성, 값들이 있는데 이런 값들은 공통적으로 사용하는 것이 구조적으로 좋을까요? 예) 아래 코드에서 .inputEmail과 .input에 설정하는 css 값들이 유사하지만 분리해서 작성 아래는 과제 관련 코드입니다! 미리 답변 감사합니다. <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet"> </head> <body> <div class="background"> <div class="signup"> <h2 id="title">회원 가입을 위해<br>정보를 입력해주세요<br></h2> <div> <span><br>* 이메일<br><br></span> <input class="inputEmail" type="text"> </div> <div> <span><br>* 이름<br><br></span> <input class="input" type="text"> </div> <div> <span><br>* 비밀번호<br><br></span> <input class="input" type="password"> </div> <div> <span><br>* 비밀번호 확인<br><br></span> <input class="input" type="password"> </div> <br><br> <div class="radioGender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <br><br> <div> <input class="agreement" type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <br> <hr id="line"> <br> <div> <button class="signupBtn">가입하기</button> </div> </div> </div> </body> </html> * { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; } .background { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px 0px #0068FF40; display: flex; justify-content: center; align-items: center; } .signup { width: 470px; display: flex; flex-direction: column; } .signup span { color: #797979; } .inputEmail { width: 100%; border: none; border-bottom: 1px solid #0068FF; } .input { width: 100%; border: none; border-bottom: 1px solid #CFCFCF; } .radioGender { display: flex; justify-content: center; align-items: center; gap: 30px; accent-color: #D2D2D2; } .agreement { font-size: 14px; } .signupBtn { width: 100%; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFFFFF; color: #0068FF; font-size: 18px; } #title { font-size: 32px; color: #0068FF; } #line { width: 100%; height: 1px; border: none; background-color: #E5E5E5; }
미해결
리액트 기초 (Introduction to React)
이미지 파일이라던지 json 파일이라던지.. 다운받아서 쓰라고 하셨는데 어디있는지 못찾겠어요...
해결됨
한 입 크기로 잘라먹는 Next.js
book 페이지는 일부는 정적으로 실행되고, 일부는 동적으로 실행되는 걸로 알고 있습니다. generateStaticParams에 설정된 id는 정적으로, 설정되지 않은 id는 동적으로 실행된 후 이후부터 정적으로 실행됨 위와 같이 알고 있는데 만약 이러한 페이지에 loading.tsx를 만들어서 적용한다면, 새로운 id로 요청할 때만 스트리밍이 적용되는 것이라고 이해하면 될까요? 이전 강의에서 generateStaticParams에 설정된 id는 fetch와 같은 동적 함수가 있더라도 정적 페이지처럼 저장된 데이터를 가져온다고 기억해서요
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
에러 어떻게 고치나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
yarn codegen 명령어 실행 시, ✖ Failed to load schema from http://main-practice.codebootcamp.co.kr/graphql : Unexpected response: "unconditional drop overload" 이와 같은 에러가 뜨네요. 혹시 서버가 지금 잠시 닫힌걸까요? graphql로도 접속이 안되어서 문의드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
확장프로그램 설치, "vscode-styled-components" ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ import styled from에서 경로 쓸 때 백틱금지 🤬
