inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

CSS 첫번째 과제 관련 질문입니다!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

html css 안녕하세요! 얼마 전부터 강의 결제해서 보고 있는 코린이입니다. 언제나 도움 많이 받고 있습니다. css 첫번째 과제로 웹페이지 구현하던 중 질문이 생겼는데요, 전화번호 사이에 들어가는 '-' 부호는 어떻게 코드를 작성하면 될지 알 수 있을까요? 픽셀 크기가 지정되어있어 뭔가 코드를 쓰는 것 같기는 한데 감이 안 오더라구요ㅠㅠ 그리고 지금까지 구현한 내용도 이 김에 검토 받고 싶습니다! 확인해주시면 감사하겠습니다 :)

  • react
  • node.js
  • seo
  • graphql
  • next.js
edo020424 댓글 1 좋아요 0 조회수 312

엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

선생님 안녕하세요. 좋은강의 너무 감사드립니다! 다름이 아니라 이번 강의에서 MapSection.tsx에서 const MapSection = () => { const { initializeMap } = useMap(); const onLoadMap = (map: NaverMap) => { initializeMap(map); }; return ( <> <Map onLoad={onLoadMap} /> // 이부분 <Markers /> // 이부분 </> ); }; export default MapSection; 이런식으로 return값에 위에 Map 컴포넌트, 아래에 Markers컴포넌트가 왔잖아요. 그래서 저는 맵위에 마커들을 덮어씌우는(?)형식으로 나오게 될 줄 알았습니다. 그런데 결과를 보니, 이렇게 map div밑에 자식으로 들어가있더라구요. 어떻게 이렇게 되는지 설명해주시면 감사하겠습니다!!

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
google_user 댓글 1 좋아요 1 조회수 413

onLoad함수 (script태그의 onLoad X)

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

Map.tsx에서 //Map.tsx if (onLoad) { onLoad(map); } 이 구문은 왜 쓰인걸까요?? MapSection.tsx 에서 Map을 부르는 부분을 봐도 // MapSection.tsx import Map from "./Map"; const MapSection = () => { return ( <Map onLoad={() => { console.log("load!"); }} /> ); }; export default MapSection; 별다른 기능을 하는 것 같지는 않아서요. onLoad를 정의하고 있는 Map.tsx의 Props에서도 type Props = { mapId?: string; initialCenter?: Coordinates; initialZoom?: number; onLoad?: (map: NaverMap) => void; }; 변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데, 혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요?? ++ 추가로, const map = new window.naver.maps.Map(mapId, mapOptions); 이렇게 했을 때, 어떻게 <div id={mapId} style={{ width: "100%", height: "100%" }} /> 이 태그에 Map이 들어가는지 궁금합니다!

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
google_user 댓글 1 좋아요 1 조회수 445

dynamic에 대한 질문

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

NoSSR도 useEffect와 같이 실행되는 건가요? 선생님 안녕하세요. 좋은강의 너무 잘 듣고있습니다. 감사합니다. 윈도우 크기를 변경했을 때, width의 값이 같이 변경되는게 신기해서 질문드립니다. useEffect안의 math.random()의 값이 변경되는 타이밍에 window의 width값도 같이 변경되더라구요. 제 생각에는, 랜덤값이야 useEffect안에서 setData를 통해 계속 바꿔주고 있으니 변경되는게 맞다고 생각했지만, window값은 처음 값을 받아오면 새로고침을 해주기 전까지는 값이 변경되지 않을줄 알았거든요. 그런데 랜덤값이 변경될 때 값이 같이 변경되더라구요. 그래서 혹시 이게 dynamic이 useEffect와 같은 역할을 한다면, window크기를 변경할 때마다 width의 값이 바로바로 바껴야 할 텐데, 그건 또 아니고 랜덤값이 바뀔때 같이 바뀌니까, 이게 어떤식으로 실행되는건지 알고싶어서 질문드립니다. import { NextPage } from "next"; import dynamic from "next/dynamic"; import { useEffect, useState } from "react"; // import NoSSR from "@/components/section1/NoSSR"; const NoSSR = dynamic(() => import("@/components/section1/NoSSR"), { ssr: false, }); const Example: NextPage = () => { const [data, setData] = useState(0); useEffect(() => { const delayInSeconds = 10; new Promise<number>((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ).then((result) => setData(result)); console.log("NoSSR : ", NoSSR); }); return ( <main> <h1>Client - Side data fetching</h1> <p>값 : {data}</p> <NoSSR /> </main> ); }; export default Example; 위 코드는 강의 보면서 따라치고, 궁금해서 로그를 찍어본 코드입니다. 딜레이를 10초로 주고, 그 안에서 윈도우 크기를 계속 바꿔봤는데, 윈도우 크기를 바꾼다고 해서 바로바로 변경되는 게 아니라, 10초가 지나고 랜덤값이 바뀔 때, 같이 바뀝니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
google_user 댓글 1 좋아요 1 조회수 469

types.ts 파일 생성이 안됩니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

설치 항목을 전부 설치하고 다시 설치하고 주소도 바꿔서 해봤는데 types.ts 파일이 생성되지 않는 이유를 알려주세요 ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
productechcenter 댓글 1 좋아요 1 조회수 340

typscript 설치과정중 질문드립니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 typescript 설치과정에서 말씀주신대로 다 따라했는데 안되네요 ㅜㅜ 제가 따라한 부분은 일단 node_modules 지우고, yarn.lock 파일 지우고 말씀주신대로 17.0.2 버전으로 변경다했습니다. 그리고 난후에 tsconfig.json 빈파일로 만들고 yarn install 후 yarn dev 하면 다음과 같이 yarn add --dev @types/react 명령어 입력하라고 나오는데 어떻게 해야할지 모르겠네요.. ㅜㅜ package.json.lcok 파일도 지워봤는데 똑같습니다 tsconfig.json파일을 지우면 괜찮은데 tsconfig.json만 빈파일로 만들면 에러가 나오네요

  • react
  • node.js
  • seo
  • graphql
  • next.js
정민기 댓글 1 좋아요 0 조회수 263

별점 수정 초기화를 막고 싶습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

수정 버튼을 클릭하면 기존 값의 작성자와 내용이 작성되어 있는데 별점도 똑같이 유지 시키고 싶어서 다음과 같이 작성 했습니다. <S.Star onChange={props.setStar} value={props.star !== 0 ? props.star : props.el?.rating ?? 0} /> 별점을 선택하고 댓글 등록하기 클릭하면 함수를 통해 setStar(0) 초기화도 해주었고 수정 아이콘을 클릭했을 때 기존 등록한 별점도 유지되게 했는데 수정하기 버튼을 클릭하면 별점이 0으로 수정이 됩니다. 여기서 어느 부분을 건들어야 할지 모르겠어요.

  • react
  • node.js
  • seo
  • graphql
  • next.js
초무 댓글 2 좋아요 0 조회수 395

삭제하기 기능 구현 레퍼런스 코드는 없을까요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

게시글 상세 화면에서 삭제하기 기능을 구현해주세요. 이부분에 대한 레퍼런스 코드가 깃허브에 등록된 내용에는 나오지 않는데 알고 싶습니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
손성오 댓글 2 좋아요 0 조회수 503

css in js 관련 질문드립니다!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 현재 리액트 초반부 강의 수강중에 있습니다. 포트폴리오 코딩중에 있는데 css in js 에서 일반적인 css에서 처럼 전체선택자 *를 사용하여 box-sizing: border-box; 로 하고싶은데 검색하봐도 방법이 나오지 않습니다.. css in js 에서 전체선택자는 어떤식으로 사용할 수 있을까요? MDN 처럼 css in js 관련 아카이브가 따로 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
티몬 댓글 1 좋아요 0 조회수 277

.eslintrc.js module 키워드에 빨간밑줄

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

위와 같은 에러가 생기는데 규칙을 검사하는 건 문제가 없긴합니다. 에러 내용을 번역해서 봤는데도 무슨 말인지 잘 모르겠고 어떻게 해결해야하는지 감도 안옵니다..

  • react
  • node.js
  • seo
  • graphql
  • next.js
joka 댓글 1 좋아요 0 조회수 295

27:25초에 나의그래프큐엘셋팅 파일로 이동하는방법

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

27:25초에 나의그래프큐엘셋팅 파일로 바로 이동해지는데 어떻게 하는걸까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
손성오 댓글 1 좋아요 0 조회수 233

mac 환경에서 실습할 경우

해결됨

Airflow 마스터 클래스

안녕하세요 mac 환경에서 강의를 수강하려고 합니다. 이러한 경우 wsl 설치 없이 다음 강의로 넘어가면 될까요??

  • python
  • 데이터-엔지니어링
  • airflow
lucli 댓글 1 좋아요 0 조회수 533

theme 적용이 되지 않습니다.

해결됨

실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit

theme 적용시, 강사님께서 말씀해주신 것처럼 작업 폴더에 .streamlit 폴더를 만들고, 그 안에 config.toml 파일을 만들어 테마 적용을 했지만, 아래의 문구가 발생하며, 태마가 적용이 되지 않습니다. The page that you have requested does not seem to exist. Running the app's main page. 어떤 이유 인지 알려주세요.

  • python
  • streamlit
동현고 댓글 1 좋아요 0 조회수 495

포트폴리오 31-1 과제 중 오류, password is not defined

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 과제 중, 게시물을 등록하고 수정할 때 비밀번호를 똑같이 입력했는데 저런 오류가 뜹니다 ....ㅠ 해결방법을 잘 모르겠습니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
naeun 댓글 1 좋아요 0 조회수 231

newAccessToken 이 바로 적용되지 않습니다

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

const errorLink = onError(({ graphQLErrors, operation, forward }) => { //1. 에러 캐치 if (typeof graphQLErrors !== "undefined") { for (const err of graphQLErrors) { //1-2. 해당 에러가 토큰만료 에러인지 체크 if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( //2. refreshtoken으로 accessToken을 재발급 받기 getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); //3. 재발급 받은 accesstoken 으로 방금 실패한 쿼리 실행하기 operation.setContext({ header: { ...operation.getContext().headers, //기존의 authorization: Bearer '만료된 토큰' Authorization: `Bearer ${newAccessToken}`, //3-2 authorization 만 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); //3-3 방금 수정한 쿼리 재요청하기 } } } }); 수업이랑 동일하게 코드를 작성하였으나 버튼을 눌러도 재발급된 accessToken 이 들어가지 않아 error 가 발생하고 2번이상 눌러야지만 accesstoken 이 제대로 수정되서 정상적으로 실행됩니다. 어디가 문제일까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 3 좋아요 0 조회수 448

완전탐색 1090번 시간초과

미해결

2주만에 통과하는 알고리즘 코딩테스트 (2024년)

예제 문제는 잘 풀리는데 백준에 제출하니까 시간초과가 뜹니다 강의 자료랑 큰 차이는 없어 보이는데 어느 부분을 고쳐야 시간 안에 계산 가능할까요? #include <iostream> #include <cstdlib> using namespace std; int main(int argc, char **argv) { int n; int minX, minY, maxX, maxY; cin >> n; int arr[n][2]; for(int i=0; i<n; i++){ cin >> arr[i][0] >> arr[i][1]; } minX = arr[0][0]; maxX = arr[0][0]; minY = arr[0][1]; maxY = arr[0][1]; for(int i=1; i<n; i++){ if(arr[i][0]>maxX){ maxX = arr[i][0]; } else if(arr[i][0]<minX){ minX = arr[i][0]; } if(arr[i][1]>maxY){ maxY = arr[i][1]; } else if(arr[i][1]<minY){ minY = arr[i][1]; } } int arr_answer[n]; int arr_dis[n]; for(int i=minY; i<=maxY; i++){ for(int j=minX; j<= maxX; j++){ for(int l=0; l<n; l++){ int subY= 0, subX=0; subY = i-arr[l][1]; subX = j-arr[l][0]; arr_dis[l] = abs(subX) + abs(subY); } int sum = 0; for(int k=0; k<n; k++){ sum+=arr_dis[k]; if(i==minY && j ==minX){ arr_answer[k] =sum; } else if(sum < arr_answer[k]){ arr_answer[k] = sum; } } } } for(int i=0; i<n; i++){ cout << arr_answer[i] << " "; } return 0; }

  • python
  • 코딩-테스트
  • 알고리즘
yongyong213 댓글 2 좋아요 1 조회수 616

리액트 깃허프

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

리액트 작업을 컴퓨터 이동하면서 하고싶은데 usb론 너무오래걸려서 깃헙으로 하고싶은데 깃헙에 빌드해서 올리면 다시 받을때 어떻게 받아서 작업해야할까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
주재 댓글 1 좋아요 0 조회수 241

동시성 부분 추가 공부하면서 헷갈리는 부분 질문 드립니다.

해결됨

넓고 얕게 외워서 컴공 전공자 되기

안녕하세요 선생님! 동시성과 병렬성 관련해 기초가 약해 해당 강의를 들으면서 OS 부족한 부분을 많이 알게되어 도움이 많이되고 있습니다. 다름이 아니라 해당 강좌 범위는 벗어나지만.. 구글링해도 명확하게 해결되지 않아 질문 드립니다. 동시성을 구현하는 방법으로 멀티쓰레드 나 코루틴 방법으로 구현을 할 수있고 멀티쓰레드 방법에서 쓰레드 전환 간 context switch가 많기 때문에 오버헤드도 많아 Coroutine 방법을 많이 쓰고 또한 유저가 이벤트루프(스케쥴링)을 app에서 관리한다는 측면에서 디버그가 유용하다 정도로 이해하고 있습니다. 많은 블로그에서 멀티쓰레드보다 코루틴을 소개하면서 동시성 구현시 코루틴을 더 상위(혹은 좋은) 방법으로 서술이 많이 되어 있더라구요. I/O작업이 빈번할 경우 코루틴이 더 유리하다는 이해가 됩니다. 싱글스레드 + async 싱글스레드 멀티스레드 + async 멀티스레드 2개의 구현방법이 레이어가 다르다(thread와 task)보니 4가지 경우의 수를 적용할 수 있는데 실제 동시성을 적용해야되는 상황이면 어떻게 판단하고 최적의 구현방법(4가지 중 선택)을 적용할 수 있을까요? (파이썬 스택을 쓰고 있으며 GIL도 이해하고 있는 상태입니다.) 다시한번 해당 강의와 조금 벗어난 질문드려 죄송합니다. ( _ _ )

  • python
  • 동시성
  • 병렬성
권설민 댓글 1 좋아요 0 조회수 431

스터디 관련 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 해당 강의를 통해 프론트엔드 기술을 학습 중인 취준생입니다. 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리하는 것이 문제가 되는 사항인지 여쭤봅니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
현정 댓글 3 좋아요 0 조회수 542

Server Cannot be Reached

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

vscode에서 계속 오류 떠서 playground에서 보내보았는데 server cannot be reached가 계속 뜨면서 docs도 무한 로딩중이에요 ㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
김무연 댓글 1 좋아요 1 조회수 257

인기 태그

인프런 TOP Writers

주간 인기글