173만명의 커뮤니티!! 함께 토론해봐요.
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요. 공유해주신 자료를 보다가 보니 사파리 브라우저에서는 첫번째 동영상 영역이 크롬 브라우저와 다르게 영상이 없거나, 화면 스타일이 다르게 노출되는 것 같아서요. 오류인지 문의드립니다. apple-clone-v11/@simple-version/index.html apple-clone-v11/@ipad-stroke-effect/index.html
미해결
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
안녕하세요, 강의 정말 잘 수강하고 있습니다. 강의 수강 중에 궁금한 점이 생겨 질문 드립니다. 강사님께서 말씀하신 것처럼 규모가 크고 복잡한 프로젝트의 경우는 컴포넌트의 양이 많아, 개발자가 이를 인지하지 못 하고 클라이언트 컴포넌트 아래에 서버 컴포넌트를 사용하는 경우가 자주 발생할 수 있을 것 같다는 생각이 들었습니다. 그렇다면 혹시 큰 프로젝트 내에서 이를 방지하기 위해 특별히 조치를 취하셨던 경험이나 팁이 있는지 알고 싶어서 질문드립니다. 예를 들면, 서버 컴포넌트와 클라이언트를 다른 폴더로 구분해서 분류하는 등 실무에서 실제로 사용되는 방법이 있는지 알려주시면 감사하겠습니다!
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 강사님, 'Static File Serving에서 옵션 추가하기' 강좌에서 @nestjs/serve-static 설치하는 과정에서 버전 문제 때문인지 의존성 충돌 문제가 일어나는 것 같습니다. 혹시라도 다른 분들도 저와 같은 문제 겪으실까봐 글 작성합니다. ----------------------------------- npm add @nestjs/serve-static 실행 ----------------------------------- - 오류: npm add @nestjs/serve-static npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cf_sns@0.0.1 npm error Found: @nestjs/common@10.4.17 npm error node_modules/@nestjs/common npm error @nestjs/common@"^10.0.0" from the root project npm error npm error Could not resolve dependency ----------------------------------- 2. npm install @nestjs/serve-static@4.0.0 // 버전 맞춰서 설치 ----------------------------------- - 브라우저 오류 발생: {"message":"Cannot GET /public/44f57f3f-7afa-4262-b2a3-13ee7053f920.jpg","error":"Not Found","statusCode":404} - npm run start: dev 오류 : no such file directory ~~\.index.html // 정확하지는 않지만 index.html 파일까지 찾아서 jpg 파일을 찾는 것 같아서 claude에게 물어봤더니... ----------------------------------- - 해결: @Module({ // 다른 모듈을 불러올 때 사용 imports: [ PostsModule, ServeStaticModule.forRoot({ rootPath: PUBLIC_FOLDER_PATH, serveRoot: '/public', serveStaticOptions: { index: false } }), 이렇게 하니 해결 됐습니다... 이게 맞는건지 궁금합니다!! 일단 브라우저 요청했더니 jpg 사진은 잘 나옵니다!! 코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요. 저는 이전 수업 기초 개념을 다 들었다고 생각했는데, 함수가 함수를 리턴하는 고차함수, 그 함수 호출한 내용을 변수에 넣는 것, 그걸 리턴값으로 대체하고.. 등등 내용 이해하기가 어렵습니다. 이 장에서 새롭게 배우는 내용이니 학습을 하면 되는걸까요 아니면 제가 이전 진도에서 뭔가 놓치는게 있는걸까요? 후자라면 어떻게 학습을 해야할까요? 감사합니다.
미해결
한 입 크기로 잘라먹는 Next.js
강의 파트 : 2.16)SSG 4.폴백옵션 설정하기. 질문 : SSG경로 생성은 /books/[id] 페이지 요청이 발생했을 경우 생성되어야 하는걸로 이해했지만, index page만 접속해도 index page에 노출되는 id 값을 가진 데이터들이 전부 /books/[id] 에 해당하는 SSG 파일이 생성되었습니다. (지금 추천하는 도서, 등록된 모든 도서) (위의 사진은 빌드 후, 인덱스 페이지 요청 시 생성된 SSG파일들 입니다.) (인덱스에서 스크롤 해보니 생성되는것을 확인했습니다.) 이 상황은 next의 LInk컴포넌트 frefetch와 연관있는 경우일까요?
미해결
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라 큐에 대기시간때문인 것 같은데.. 원래 이런건가요?
해결됨
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
버셀에 등록하는데 계속 에러가 나는데.. 어떤 방법으로 이 에러를 확인 할 수 있을까요?
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요! 다음과 같이 GET: http://localhost:3000/posts 아무런 파라미터 값 없이 요청을 실행했을 때 dto 객체의 기본 상태는 다음과 같고, 응답 결과로 아래와 같은 nextURL을 받을 수 있었습니다. "next": "http://localhost:3000/posts?page=undefined&order__createdAt=ASC&take=20&where__id__more_than=23" cursorPagination 이기 때문에 page를 사용하지 않지만 url에는 조립되는 이유가 로직에 값을 검증하는 부분이 없어서 그런 것 같은데요, 아래와 같이 값(dto[key])를 검증하는 것을 추가하니 문제 없이 동작하였습니다. if ( dto[key] // 값 검증 추가 && key !== 'where__id__more_than' && key !== 'where__id__less_than' ) { nextUrl.searchParams.append(key, dto[key]); } "next": "http://localhost:3000/posts?order__createdAt=ASC&take=20&where__id__more_than=23" 그런데 강사님께서는 따로 검증하지 않고 진행하셨음에도 nextUrl 쪽에 page가 따로 붙어나오진 않는 것 같은데요, 어떤 차이에서 발생한걸까요?.. ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데 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에서 경로 쓸 때 백틱금지 🤬
