inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

<Editor onCreate={onCreate} />인 이유가 뭘까요

미해결

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

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • javascript
  • react
  • node.js
댓글 2 좋아요 1 조회수 242

섹션8 라이프 사이클 unmount 관련 질문

해결됨

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

import { useState } from 'react' import Viewer from './components/Viewer' import Controller from './components/Controller' import { useEffect } from 'react' import { useRef } from 'react' import Even from './components/Even' import './App.css' function App() { const [count, setCount] = useState(0); const [input, setInput] = useState(""); const isMount = useRef(false); //1. 마운트 : 탄생 useEffect(()=>{ console.log("mount") },[]) //2. 업데이터 : 변화, 리렌더링 useEffect(()=>{ if(!isMount.current){ isMount.current = true; return; } console.log("update") }) //3. 언마운트 : 죽음 //useEffect(()=>{console.log(count)},[count, input]) // 의존성 배열, dependency array, deps const onClickButton = (value)=>{ setCount(count + value); } return ( <div className='App'> <h1>Simple Counter</h1> <section> <input value={input} onChange={(e)=>{ setInput(e.target.value) }}/> </section> <section> <Viewer count={count}/> {count % 2 === 0 ? <Even/> : null} </section> <section> <Controller onClickButton = {onClickButton}/> </section> </div> ); } export default App import { useEffect } from "react"; const Even = () => { useEffect(() => { //클린업, 정리함수 return () => { console.log("unmount") }; }, []); return <div>짝수입니다</div>; }; export default Even; 새로고침이나 초기 호출시에도 unmount가 출력되고 홀수로 카운팅이 올라가 컴포넌트가 삭제되는 경우는 update이후 unmount가 정상적으로 출력되는 것을 확인할 수 있는데 짝수로 카운팅이 올라가 컴포넌트가 생성되는 경우는 unmount 이후 update가 됩니다. 컴포넌트가 삭제되는 경우에만 unmount가 진행되는 것으로 알고 있는데 혹시 코드에 문제가 있을까 질문드립니다.

  • javascript
  • react
  • node.js
정지원 댓글 2 좋아요 0 조회수 135

이 강좌를 들으면 좋은점이 뭔가요?

미해결

DOM 인터랙션

안녕하세요. 저는 서버개발자로 일을 하고 있지만, 영보님 강의를 모두 사서 듣고있는 주니어 개발자입니다. 우선 좋은 강좌를 만들어주셔서 너무 감사합니다. 앞으로도 좋은 강좌 많이 만들어 주시면 너무나도 감사할것같습 니다. 현재 돔 인터랙션이라는 강의를 듣고 있고 중반정도 달려왔는데 이 강의를 들으면 듣지 않은 사람들에 비해 어떤 경쟁력을 갖게 되는지 궁금합니다. 영보님께서 강의를 만드신 이유와 의도가 있었을 것 같은데 그 부분이 궁금합니다. 그리고 리액트 심화 강의도 혹시 출시 하실 생각이 있으신지 궁금합니다.

  • HTML/CSS
  • javascript
  • dom
bigger 댓글 1 좋아요 2 조회수 200

섹션 4 npm start 하면 빈 화면만 나옵니다

미해결

처음 만난 리액트(React)

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

  • HTML/CSS
  • javascript
  • react
민가 댓글 6 좋아요 0 조회수 323

섹션 4 jsx 코드 실습 부분 index.js에서 자꾸 오류납니다

미해결

처음 만난 리액트(React)

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

  • HTML/CSS
  • javascript
  • react
민가 댓글 5 좋아요 0 조회수 398

autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

autoAlpha : 0 이 css visibility : hidden, opacity 0 으로 설정해준다고 하고 css에 visibility hidden 을 제거해도 깜빡이는 현상은 안일어나더라구요! css에도 visibility:hidden을 작성하는 이유가 있을까요?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
rinrinhye 댓글 2 좋아요 1 조회수 282

memoizedDispatch 말고 MemoizedProvider

해결됨

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

const MemoizedProvider = React.memo(TodosStateContext.Provider); TodosStateContent가 컴포넌트이니까 memoizedDispatch의 useMemo말고 아예 React.memo를 사용해서 최적화 해도 되나요? 이렇게 하면 안에 있는 객체 {onCreate, onUpdate, onDelete}도 재생성 안되지 않을까요..?

  • javascript
  • react
  • node.js
2145007 댓글 2 좋아요 0 조회수 177

비동기 함수로 불러온 데이터를 화면에 렌더링

해결됨

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

강의 내용을 바탕으로 프로젝트를 하나 만들다 안되는 부분이 있어 질문드립니다. 제가 axios를 이용해서 데이터를 받는 함수를 만들었는데요 const [posts, setPosts] = useState(); const getAllPosts = async () => { try{ const {data} = await axios.get("/api/posts"); console.log("axios - getAllPosts: ", data); setPosts(data); } catch(error){ console.log("getAllPosts 에러: ",error); } } getAllPosts(); 이런 코드를 작성했을때 렌더링할때 axios를 이용해서 받은 데이터를 posts란 state에 저장하고 이를 리스트 형태로 렌더링하려고 하는데 저기서 그냥 getAllPosts(); 를 해버리면 콘솔창에 무한하게 posts 값이 찍히고 화면에는 렌더링이 되지 않더라고요 ㅠ 콘솔창에는 그래도 데이터가 찍히긴 하는데 말이죠..ㅠ getAllPosts메서드는 비동기 함수니깐 컴포넌트들이 렌더링되기 전에 실행되고 컴포넌트들이 렌더링되는거 아닌가요? 그럼 저 메서드를 호출하면 잘 렌더링이 되야하는거 아닌가요??ㅠㅠ 왜 저렇게 콘솔창에는 무한하게 데이터값이 찍히고 컴포넌트에는 왜 렌더링이 되지 않는건가요??

  • javascript
  • react
  • node.js
황지호 댓글 2 좋아요 0 조회수 153

useEffect 사이클

해결됨

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

function App () { const [ count , setCount ] = useState ( 0 ); const [ input , setInput ] = useState ( "" ); const isMount = useRef ( false ); // 1. 마운트 : 탄생 useEffect (() => { console . log ( "mount" ); }, []); // 2. 업데이트 : 변화, 리렌더링 useEffect (() => { if ( ! isMount . current ) { isMount . current = true ; return ; } console . log ( "update" ); }); // 3. 언마운트 죽음 const onClickButton = ( value ) => { setCount ( count + value ); // console.log(count + value); }; return ( ... ); } 위 코드를 작성하고 새로고침을 하면 위 처럼 콘솔에 모든 mount, unmount, update가 뜹니다....코드상 update도 안떠야하는데 왜 뜨는걸까요?

  • javascript
  • react
  • node.js
opop0421 댓글 2 좋아요 0 조회수 143

Parsing 오류

미해결

Vue 3 시작하기

axios로 할 때는 잘 되다가 setup을 사용한 순간부터 계속 오류가 납니다. 인터넷에 검색해봐서 나온 방법들을 적용 해봤는데도 해결이 안되네요..

  • javascript
  • vue.js
  • vue-3
ssjj3270 댓글 1 좋아요 0 조회수 193

users 안 보임

미해결

Vue 3 시작하기

똑같이 따라했는데 users가 보이지 않습니다..ㅠㅠ

  • javascript
  • vue.js
  • vue-3
ssjj3270 댓글 1 좋아요 0 조회수 184

상태관리와 SPA

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

자바스크립트로 SPA 하는법을 꼭 배우고싶었는데 강의가 너무 좋아요! 섹션8부터 상태관리하면서 SPA 방식으로 코드를 리팩토링하는데 강의에서 알려주시는 방법이 약간 리액트의 동작방식과 비슷하다고 봐도 되는걸까요?! 제가 리액트를 얼마전에 배웠는데 뭔가 리액트의 내부 동작을 구현하는 느낌으로 생각해도 되는건지.. 아니면 아예 다른 방식으로 하는건지 궁금해서 여쭤봅니다!!

  • javascript
  • rest-api
  • spa
  • dom
찹찹이 댓글 1 좋아요 1 조회수 177

url pattern관련 문의

해결됨

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

안녕하세요. urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 이런식으로 url패턴을 만들어주면 이렇게 (^media/(?P<path>.*)$)패턴이 생기는거 같고 그 다음 views.py 에서 해당 url을 처리할 로직을 만들어야하는걸로 아는데.. 이 경우는 어째서 예외인가요?

  • HTML/CSS
  • javascript
  • python
  • django
  • bootstrap
  • aws
  • docker
  • tdd
gonggong 댓글 2 좋아요 0 조회수 254

스웨거 문서에 Basic, Bearer를 적용하는 방법에 대해 질문 드립니다.

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

AccessToken, RefreshToken 강의 내용을 모두 마친 후에 스웨거 문서 작성 방법에 대해 궁금한 점이 있어 질문 드립니다. @Headers()를 사용하여 rawToken 값을 전달하는 경우 스웨거 문서에서는 다음과 같이 @ApiBasicAuth('basic'), @ApiBearerAuth('bearer') 형식을 작성을 해야하는지 질문 드립니다. import { Body, Controller, Headers, Post, UseGuards } from '@nestjs/common'; import { AuthFacade } from '@root/resource/auth/auth.facade'; import { BasicTokenGuard } from '@root/common/guard/basic-token.guard'; import { RefreshTokenGuard } from '@root/common/guard/bearer-token.guard'; import { IsPublic } from '@root/common/decorator/is-public.decorator'; import { ApiBasicAuth, ApiBearerAuth, ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger'; import { AccessAndRefreshTokenResponse, AccessTokenResponse, RefreshTokenResponse, } from '@root/resource/auth/dto/response/token-response.dto'; @ApiTags('Auth API') @Controller('v1/auth') export class AuthController { constructor(private readonly authFacade: AuthFacade) {} @ApiOperation({ summary: '로그인', description: 'Authorization Basic 이메일:비밀번호 방식으로 로그인합니다.' }) @ApiBasicAuth('basic') @ApiOkResponse({ type: AccessAndRefreshTokenResponse }) @IsPublic() @UseGuards(BasicTokenGuard) @Post('login') async login(@Headers('authorization') rawToken: string) { return await this.authFacade.loginWithEmail(rawToken); } @ApiOperation({ summary: '회원가입', description: '이메일, 비밀번호로 회원가입을 진행합니다.' }) @ApiOkResponse({ type: AccessAndRefreshTokenResponse }) @IsPublic() @Post('register') async register(@Body('email') email: string, @Body('password') password: string) { return await this.authFacade.registerWithEmail(email, password); } @ApiOperation({ summary: 'AccessToken 갱신', description: 'RefreshToken으로 AccessToken을 갱신합니다.' }) @ApiBearerAuth('bearer') @ApiOkResponse({ type: AccessTokenResponse }) @IsPublic() @UseGuards(RefreshTokenGuard) @Post('token/access') generateAccessToken(@Headers('authorization') rawToken: string) { return this.authFacade.generateAccessToken(rawToken); } @ApiOperation({ summary: 'RefreshToken 갱신', description: 'RefreshToken으로 RefreshToken을 갱신합니다.' }) @ApiBearerAuth('bearer') @ApiOkResponse({ type: RefreshTokenResponse }) @IsPublic() @UseGuards(RefreshTokenGuard) @Post('token/refresh') generateRefreshToken(@Headers('authorization') rawToken: string) { return this.authFacade.generateRefreshToken(rawToken); } }

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
airedu7269 댓글 2 좋아요 1 조회수 300

순수 CSS 선택자 중첩(Nesting) - 활용예제 (로그인폼)관련 질문있습니다.

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)

scss 작성하다가 궁금한 것이 있어 질문 남깁니다. scss를 작성할 때 띄어쓰기를 어떻게 해야할지 궁금합니다. 예를들어 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 선생님과 수업하면서 작성한 띄어쓰기 하지 않은코드인데요. 이쁘게 정렬하고 싶어서 alt + shift + f 를 눌러서 전체 정렬을 했더니 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 이렇게 자동으로 띄어쓰기게 되더라구요. 의미없는 띄어쓰기는 하지 않는게 좋다고 들었는데 띄어쓰기를 하지 않으면 scss nesting 특성상 괄호가 많아져서 알아보기 힘들고 비주얼 단축키로 정렬했을 때엔 알아서 띄어쓰게 해주는데, scss는 어떤식으로 코드를 작성해야할지 궁금합니다.

  • HTML/CSS
  • javascript
  • jquery
  • flex
  • 반응형-웹
gysutpflsy 댓글 2 좋아요 1 조회수 215

useEffect 가 정확히 언제 실행되는건지 헷갈립니다

해결됨

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

강의를 다 듣고 뭔가 아직 useEffect의 개념이 명확히 잡히지 않았는데요.. 바뀐 state 값을 바로 이용하려고 할때, 컴포넌트가 렌더링된 후에 사용한다고 하셨는데 그럼 만약 컴포넌트를 렌더링할때 바뀐 state값을 같이 렌더링해줘야 하는 경우에는 useEffect는 컴포넌트가 렌더링 된 이후에 사용하니깐 useEffect를 못쓰는건가요?? 여기서 useEffect가 컴포넌트가 렌더링 된 이후에 사용한다는게 모든 컴포넌트가 완전히 화면에 그려지고 나서 사용된다는 의미 맞나요??

  • javascript
  • react
  • node.js
황지호 댓글 2 좋아요 0 조회수 176

15강 오류질문

해결됨

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

15강 객체 강의 6분 let name = person . name ; 블록 범위 변수 'name'을 다시 선언할 수 없습니다 라고 나옵니다

  • javascript
  • react
  • node.js
댓글 2 좋아요 0 조회수 172

12.11 ) Home에서 getMontlyData 작성 중 오류 / 개발자도구 hooks Context 에서 객체가 아닌 함수로 출력됩니다

해결됨

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

안녕하세요, 강의 잘 듣고있습니다! 16분 쯤에 montlyData를 만들어서 호출하는 부분인데 개발자도구로 체크해봤을때 hooks가 선생님처럼 나오지 않고 저런 함수 형태?로 출력이 되어서 그런지 오류가 나서 진행이 되지 않습니다ㅜ 눈알빠지게 찾아봤는데도 잘 모르겠어서 글을 씁니다ㅠㅠ 한번 체크 부탁드립니다 //App.jsx 파일입니다 const mockData = [ { id: 1, createdDate: new Date("2024-09-30").getTime(), emotionId: 1, content: '1번 일기' }, { id: 2, createdDate: new Date("2024-09-29").getTime(), emotionId: 2, content: '2번 일기' }, { id: 3, createdDate: new Date("2024-08-02").getTime(), emotionId: 3, content: '3번 일기' } ]; function reducer(state, action) { switch (action.type) { case 'CREATE': return [action.data, ...state]; case 'UPDATE': return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item); case 'DELETE': return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: 'CREATE', data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch( { type: "UPDATE", data: { id, createdDate, emotionId, content, } }) } const onDelete = (id) => { dispatch( { type: "DELETE", id } ) } return ( <> <DiaryStateContext.Provider value={data}> <DiaryStateContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />}></Route> <Route path="/new" element={<New />}></Route> <Route path="/diary/:id" element={<Diary />}></Route> <Route path="/edit/:id" element={<Edit />}></Route> <Route path="*" element={<Notfound />}></Route> </Routes> </DiaryStateContext.Provider> </DiaryStateContext.Provider> </> ) } export default App

  • javascript
  • react
  • node.js
zha8248 댓글 2 좋아요 0 조회수 217

리액트로 로그인 부분 처리하는데 질문이 있습니다.

해결됨

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

리액트 강의를 듣고 스프링부트랑 연동해서 리액트 코드를 짜고 있습니다. 지금 로그인 부분 처리하다가 막혀서 정말 구글링도 해보고 며칠째 하다가 도저히 해결이 안돼서 질문 드립니다. 지금 로그인처리가 되면 sessionStorage에 로그인 회원 정보를 담고 navigate함수를 이용해 Main컴포넌트로 보냈습니다. 근데 다른 컴포넌트들에서도 이 로그인회원 정보를 사용하기 위해 최상위컴포넌트인 App컴포넌트에서 sessionStorage.getItem()해서 state값에 저장하고 그걸 context로 하위 컴포넌트들에게 제공했는데 로그인되고 navigate함수로 Main컴포넌트로 가면 context로 저장한 state값이 null이 되고 새로고침해보면 state값이 잘 들어오더라고요ㅠㅠ 비동기함수인것과 관련있을까요?? 새로고침없이 컴포넌트에서 바로 state값을 이용하고 싶으면 어떻할까요? state값 이용해서 바로 화면에도 렌더링도 해야하는 상황입니다 ㅠㅠ 강의와 관련된 내용은 아니지만 프로젝트를 혼자 만들다보니 잘 안되는 부분이 많아 질문드립니다 !

  • javascript
  • react
  • node.js
황지호 댓글 2 좋아요 0 조회수 328

인기 태그

인프런 TOP Writers

주간 인기글