inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

카카오맵API 지도 관련

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

.category-item에서 width를 24%로 해야 4등분이 되고 25%로 하면 3등분이 됩니다. 이건 제가 질문하려는 내용과 뭔가 관련이 있는 것 같아서 말씀드리는거고 css #map에서 height를 픽셀로 안하면 지도가 나오지도 않고 픽셀로 해도 지도가 일부분만 나옵니다. 지도자체를 인용하는거는 문제가 없어보이는데 왜 안나올까요? @font-face { font-family: 'ChosunCentennial'; src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2'); font-weight: normal; font-style: normal; } *{ padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: 'ChosunCentennial'; } nav{ background-color: white; } .nav-container{ padding: 1rem 0; display: flex; flex-direction: row; justify-content:space-between; align-items: center; } .nav-title{ font-size: 3rem; } .nav-contact{ font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title{ font-size: 3.5rem; } .category-item{ width: 24%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner{ padding: 0 1.5rem; } @media all and (min-width: 1024px){ .inner{ max-width: 1024px; margin: 0 auto; } } /*카카오맵 css*/ body{ height: 100vh; } nav{ height: 59px; } main{ padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map{ flex-wrap: 1; width: 100%; height: 100px; }

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
거북이 댓글 1 좋아요 0 조회수 194

오류

해결됨

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

아직 사용하기 전에 변수들이 있는 경우 아래 사진과 같이 표시되는데 오류가 발생하지 않도록 설정은 어떻게 하나요?

  • react
  • typescript
  • next.js
Full Stack 개발자 댓글 1 좋아요 0 조회수 80

name을 넣지 않을 경우 input에 입력되지 않는 이유

해결됨

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

안녕하세요 강사님 수업 도중에 input 태그에 name을 넣지 않을 경우 아무런 입력이 되지 않는걸 확인했습니다. 그래서 onChange 함수에서 에러가 발생해서 이벤트가 도중에 끊겼을 것이라고 예상하고 try catch로 감았는데도 exception이 발생하지 않더라구요. 혹시 왜 입력이 되지 않는 것인지 알 수 있을까요? 감사합니다~~! import { useState } from "react"; const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "" }) const onChange = (e) => { try { setInput({ ...input, [e.target.name]: e.target.value }) } catch (err) { console.log(err); } // setInput({ // ...input, // [e.target.name]: e.target.value // }) } //const onChangeName = (e) => { // setInput({ // ...input, // name: e.target.value // }) //}; //const onChangeBirth = (e) => { // setInput({ // ...input, // birth: e.target.value // }) //}; //const onChangeCountry = (e) => { // setInput({ // ...input, // country: e.target.value // }) //}; //const onChangeBio = (e) => { // setInput({ // ...input, // bio: e.target.value // }) //}; return ( <div> <div> <input // name="name" value={input.name} //onChange={onChangeName} onChange={onChange} placeholder={"이름"} /> {input.name} </div> <div> <input name="birth" value={input.birth} //onChange={onChangeBirth} onChange={onChange} type="date" /> {input.birth} </div> <div> {/* <select value={input.country} onChange={onChangeCountry}> */} <select value={input.country} name="country" onChange={onChange}> <option value=""></option> <option value="kr">한국</option> <option value="us">미국</option> <option value="uk">영국</option> </select> {input.country} </div> <div> {/* <textarea value={input.bio} onChange={onChangeBio} /> */} <textarea value={input.bio} name="bio" onChange={onChange} /> {input.bio} </div> </div> ); }; export default Register;

  • javascript
  • react
  • node.js
강프로그래머 댓글 2 좋아요 0 조회수 275

만약 구현해야 할 페이지가 많아지면 Router를 효율적으로 사용하는 방법이 있나요?

해결됨

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

안녕하세요. 좋은 강의 공유해주셔서 감사합니다. 덕분에 실무에 잘 활용하고 있습니다. 12.4) 페이지 라우팅 강의를 듣던 중 궁금한 점이 생겨 질문 드립니다. 예시 프로젝트엔 페이지가 3개로 비교적 적은 페이지수라서 App 컴포넌트 밑에 Router 로 경로를 지정해줄 수 있지만 몇 십개씩 혹은 몇 백개씩 넘어가는 페이지를 만들어야 할 때는 Router를 어떻게 활용해야 하나요? Router가 아닌 다른 방법이 있나요?

  • javascript
  • react
  • node.js
codinging0326 댓글 3 좋아요 0 조회수 167

03-02 회원가입 질문

해결됨

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

왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?

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

03-02 회원가입 피그마에 나온거 처럼 만드는문제

미해결

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

섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??

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

PPR 적용 후 여전히 SSG로 배포되는 이슈

미해결

손에 익는 Next.js - 블로그 만들기

안녕하세요 조은님!! 😀 강의 너무 잘봤고 완강 후 질문 남깁니다! 마지막 기능인 PPR와 Suspense를 적용한 이후에 html에서 확인해봤을 때 동적인 요소로 채워지고 있는 것을 확인할 수 있었습니다. 그런데 Vercel에서 Build Logs 를 확인해보면 ◐ (Partial Prerender) 으로 뜨는 것이 아니라 여전히 ● (SSG) prerendered as static HTML 으로 뜨는데요, PPR 적용이 잘 된게 맞을까요? Suspense가 적용이 잘 되는데 PPR은 적용이 안된걸까요? 코드 작업 후 적용결과 첨부하겠습니다!

  • react
  • 블로그
  • next.js
dayeon Kim 댓글 3 좋아요 0 조회수 291

.

미해결

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

.

  • javascript
  • typescript
  • 객체지향
  • 디자인-패턴
  • canvas
댓글 1 좋아요 0 조회수 124

perspective 문의

미해결

인터랙티브 웹 개발 제대로 시작하기

perspective : 800px을 .stage에 넣으면, 다르게 회전이 되어야 하는데 저는 .door에 넣은 것처럼 똑같이 일정하게 회전 됩니다. 이유를 모르겠어요~

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
RooRoo 댓글 1 좋아요 0 조회수 126

web APIs 랑 web API랑 혹시 다른 말일까요?

해결됨

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

뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.

  • javascript
  • react
  • node.js
bestoon 댓글 1 좋아요 0 조회수 161

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?

미해결

애플 웹사이트 인터랙션 클론!

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요? 선생님은 <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> 이렇게 주셨는데 만약 제가 따로 실습할때의 이미지 최대크기가 1280x720 이라면 캔버스 width 크기를 1280으로 해줘야하는게 맞나요? 예제 코드 그대로 쓰고 캔버스 width값 1920하니까 이미지가 왼쪽으로 좀 치우쳐져 있어서 어제오늘 계속 애쓰다가 캔버스 width값을 이미지 최대크기값만큼 1280으로 주니까 해결이됬어요.. 그러면 이제 궁금한게 모바일일때 화면에 꽉 채우게하고싶은데 어떻게 줘야할지 감이안잡힙니다 ㅠ-ㅠ

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
반가우면반갑다고해 댓글 0 좋아요 0 조회수 148

강의노트

미해결

만들면서 배우는 리액트 : 기초

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안 보이는데 어디서 찾을 . 수있나요?

  • javascript
  • react
이연서 댓글 1 좋아요 0 조회수 164

npx create-react-app my-app

미해결

처음 만난 리액트(React)

npx create-react-app 까지는 잘 되는데 그 밑으로는 이런 오류가 뜨면서 되지가 않습니다. .

  • HTML/CSS
  • javascript
  • react
a김메린 댓글 2 좋아요 1 조회수 504

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

미해결

처음 만난 리액트(React)

ERROR in ./src/chapter_03/Library.jsx 5:0-24 Module not found: Error: Can't resolve 'Book' in '/../my-react1/src/chapter_03' Did you mean './Book'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /../my-react1/node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too. 어떻게 해야 할까요?

  • HTML/CSS
  • javascript
  • react
noel75 댓글 3 좋아요 1 조회수 418

ssr질문

해결됨

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

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 2.11 번 강의에서 ssr 듣다가 궁금한점이 있어서요 ssr은 두번 렌더링이 일어난다고 하셧느데 그러면 첫번째 서버에서 렌더링된 뒤에는 undefined이고 두번째 하이드레이션이 일어나고 그 뒤에는 window가 있으니 밑에처럼 했을때에는 콘솔이 나온느게 맞을까요 ?(하이드레이션 적용된 뒤에가 맞을까요 ?) if (typeof window !== "undefined") { console.log("window.location", window.location); }

  • react
  • typescript
  • next.js
aso 댓글 2 좋아요 0 조회수 250

하이라이트 변경이 없는데요?

해결됨

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

메모를 적용 하기 전의 화면(대략 1분55초 정도) 에서의 하이라이트와 적용한 후(대략 4분45초 정도)의 하이라이트에 무슨 차이가 있나요? 저만 그런가요? 테스트 작성한 로컬에서도 하이라이트 변화는 없는데요?

  • javascript
  • react
  • node.js
민경언 댓글 2 좋아요 0 조회수 402

SessionProvider을 사용해도 하위 컴포넌트가 서버 컴포넌트로 유지되는 것 같은데 이유가 궁금합니다.

미해결

Next + React Query로 SNS 서비스 만들기

SessoinProvider을 사용할 경우 SessionProvider로 감싼 하위 컴포넌트는 모두 클라이언트 컴포넌트가 되는 걸로 알고 있고 클라이너트 컴포넌트의 자식으로써는 서버 컴포넌트가 올 수 없다고 본 것 같은데 코드를 보니까 SessionProvider의 하위 컴포넌트도 서버 컴포넌트로 잘 작동 되는 컴포넌트가 있는 것 같아요. 혹시 제가 잘못알고 있는지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
쾌할한 전복 댓글 2 좋아요 0 조회수 110

인기 태그

인프런 TOP Writers

주간 인기글