inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

useState를 사용하는 이유가 무엇인가요?

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요? 제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
kms930322 댓글 2 좋아요 0 조회수 1228

실습 파일 링크

미해결

Do it! HTML+CSS+자바스크립트 웹 표준의 정석

예제 파일 링크를 못찾아서 출판사 사이트에서 직접 찾았네요. 깃헙 링크: https://github.com/Eun-Sook-Kim/doit_html_css_javascript

  • HTML/CSS
  • javascript
  • dom
Hanna Go 댓글 1 좋아요 6 조회수 929

api 질문입니다.

해결됨

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

포토폴리오 마이페이지 - 내포인트 부분을 작업하는 도중 api 질문입니다. fetchPointTransactionsOfBuying 이 내포인트 -> 구매내역 api로 알고있습니다. 피그마를 보면 거기서 판매자 데이터를 가져오고있는데 오류가 뜨네요.ㅠ 판매자 데이터를 가져오고 싶은데 여기서 seller {name} 이부분을 넣으면 데이터가 안가져오네요.. 판매자데이터가 없어서 그런건지 왜 그런지와 어떻게 해야하는지 두가지 모두 알고싶습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
임프런 댓글 2 좋아요 0 조회수 381

강의 구매 후 권한때문에 한 달째 강의를 못듣고 있습니다..

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

(전에 추가 해주셨는데 clone 받으려니 Repository not found 라 현출되어 재신청드립니다.) 인프런 아이디 : jsmlady@naver.com 인프런 이메일 : jsmlady@naver.com 깃헙 아이디 : jsmlady@naver.com 깃헙 Username : DavidJung1460

  • javascript
  • vue.js
  • es6
  • vuex
정희진 댓글 1 좋아요 1 조회수 570

최종변환?

해결됨

처음 만난 리액트(React)

jsx강의 에서는 jsx는 내부적으로 html/xml코드를 자바스크립트로 변환하는 과정 을 거치게 된다. 그래서 최종적으로는 자바스크립트 코드로 나오게 된다. 이렇게 말씀해주시고 jsx코드를 자바스크립트 코드로 변환하게 해주는 것이 react.createElement라고 하셨는데, 여기 강의 에서는 5분 35초 부근에 react.createElement 내부에 리액트 컴포넌트를 적어도 되고 모든 리액트 컴포넌트는 최종적으로는 html 태그를 사용하게 돼있다라고 하셨습니다. react.createElement를 통해서 최종적으로 자바스크립트가 된다는건가요? 아니면 html 코드가 된다는건가요,,?ㅠㅠ

  • HTML/CSS
  • javascript
  • react
sohee 댓글 1 좋아요 0 조회수 449

개인 프로젝트 관련 질문

해결됨

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

안녕하세요 드디어 강의 완강했습니다!!^^ 뒷부분 부터는 퀴즈가 없어서 비교적 빨리 수강했네요. 강의 후에 해봐야 할 것들을 생각해보았는데 조언을 듣고 싶어서 질문남깁니다. 일단은 지금 것 했던 "나만의 ~~프로젝트"를 리팩토링(성능/안정성/가독성/로직개선)하고 api기능추가, 테스트코드 작성, DB쿼리성능개선등을 해보고자합니다. 전부 다 하려면 시간이 오래걸리겠지만(ㅠ) 마지막에 취업준비강의에서 말씀하신 3년차개발자로 생각되기 위해선 해야할게 많은 것 같습니다..ㅎㅎ(3년차 같은 신입을 뽑는다니!!ㅠㅠ) 그래서 일단 목표는 실제 현업에서 하는 것처럼 코드를 작성해보고자 하는데요, 막상 하려니 좀 막막하네요. 질문은: 지금 제 생각은 현업에서 쓰는 좋은 코드를 보고 어떤 식으로 설계했는지 테스트코드는 어떻게 작성했는지 등등 참고하고 분석하고 공부해서 제 나름대로 프로젝트를 리팩토링해보고 싶은 생각입니다. 그게 가장 실력도 늘 것 같구요. 그래서 혹시 관련 코드나 책이나 자료등이 있으면 추천해주시면 감사하겠습니다. 아! 그리고 백엔드 심화강의에서 마이크로큐와 await의 관계를 굉장히 감명깊게 들었습니다. 비동기과정이 정말 헷갈렸는데 속이 시원해졌습니다.ㅎㅎ 혹시 이런 자바스크립트 원리나 cs관련내용도 추천해주실만한 책이나 자료 있으면 알려주시면 감사하겠습니다. 일단 방향은 이렇게 잡았는데 조언해주시면 참고하겠습니다!! 끝으로 제가 지금것 들었던 개발강의중 가장 자세하고 친절하고 이해도 잘되고 재밌는 강의였습니다!! 퀴즈 할때나 버그나 에러날때 힘들긴 했지만, 그래도 개발이 점점 더 재밌어지고 더 잘하고 싶네요. 궁금한 것있으면 또 질문해도 되겠죠?^^;;; 감사합니다!!

  • javascript
  • node.js
  • express
  • docker
  • tdd
  • rest-api
  • nestjs
nya 댓글 2 좋아요 0 조회수 476

노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.

미해결

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

https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d 노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. .. 제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠... 진도를 나갈 수가 없어요. ㅠ.ㅠ 확인부탁드립니다.

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

wsl2를 사용하여 windows에 ubunto20.04설치

해결됨

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

아직 프리캠프부분 수강중인데 혹시 완전히 운영체제를 지우지 않고 위와 같은 방식을 사용하면 이후 진도를 나가는데 있어 문제가 생기나요?

  • javascript
  • node.js
  • express
  • docker
  • tdd
  • rest-api
  • nestjs
신정환 댓글 1 좋아요 1 조회수 451

라이브러리 질문

미해결

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

혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
웹개바르르 댓글 2 좋아요 1 조회수 448

싸이월드 실습 4탄 질문이요 ㅠㅠ

미해결

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

싸이월드 실습 4탄 하는 중인데 LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠ game__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; 가 들어있고 lotto__text부분에도 display: flex; flex-direction: column; align-items: center; justify-content: space-between; 를 넣어봤으나 아무 변화가 없었습니다 ㅠ game.html: <!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html> game.css: * { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 471

async await

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요. banner.js에서 질문이 있습니다 이 부분에서 왜 async await를 사용하셨는지 궁금합니다! const fetchData = async () => { // 현재 상영중인 영화 정보를 가져오기(여러 영화) const request = await axios.get(requests.fetchNowPlaying); // 여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; // 특정 영화의 더 상세한 정보를 가져오기(비디오 정보도 포함) const { data : movieDetail } = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); }

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
puding0712 댓글 1 좋아요 0 조회수 372

프로젝트 생성시 javascript resources가 생성안됨

미해결

실전 JSP (renew ver.) - 신입 프로그래머를 위한 강좌

해당 폴더가 없어서 여기저기 뒤져봤는데 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=nateen7248&logNo=220684958878 이 방법으로도 안되더라구요 2번에 javascript 보면 자동으로 체크되어있어서 체크 해제하고 적용하고 체크 한다음에 다시 적용하고 이클립스 껐다 켜봐도 안나타나요 이클립스는 2020-06버전이고 eclipse IDE for enterprise hava developers 로 받았는데 뭐가 문제인걸까요

  • java
  • jsp
  • javascript
pchsmje 댓글 1 좋아요 0 조회수 925

next.js의 "_buildmanifest.js" 파일의 경로 유출(?)은 괜찮은 걸까요?

미해결

소스코드에서 _buildmanifest.js에 들어가보면 모든 경로가 표시되던데 이러면 관리자 페이지의 모든 경로도 볼 수 있어서 어느정도 앱 규모(?)를 알 수 있다는 건데 이거 보안적으로 괜찮은걸까요? 관리자 페이지는 따로 만들어야 하는 건지 아니면 slug 경로를 이용해서 안 보이게 해야하는 건지 갑자기 머리가 복잡해지네요😂 다른 분들은 어떻게 하시는지 궁금합니다.

  • next.js
웹나그네 댓글 1 좋아요 0 조회수 432

Javascript Exercise Problem List 문

해결됨

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

안녕하세요? 코드캠프 강의로 열심히 공부 중입니다. 좋은 커리큘럼 제공해 주셔서 감사해요. 제가 훈훈한 자바스크립트 강의를 복습중인데요. 노션에 있는 Javascript Exercise Problem을 풀고 있어요. 그런데 막히는 부분이 생겼어요. 01_variable,function,type > 06_addnumber function addNumber() { let result; // 숫자 9와 숫자 7을 더했을 때의 결과값을 result에 할당하세요. // 여기에 코드를 작성하세요. result = 9 + 7; return result; } addNumber(); 이 문제를 풀고 있는데 output이 14가 나와야 정답이라고 써있는데요. 아무리 해도 답이 16으로 나와요. 아직 애송이라 제가 놓친 게 있는지 해서요 ㅠㅠ

  • javascript
빙봉빙봉 댓글 1 좋아요 0 조회수 389

비동기를 동기로 처리하는 이유

해결됨

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

비동기 함수를 왜 굳이 동기처럼 실행시키기 위해 await을 사용하는 건가요? 처음부터 함수를 만들때 동기로 만들면 되는거 아닌가요? 동기, 비동기가 잘이해가 안가네요..

  • javascript
  • react
  • node.js
조우현 댓글 1 좋아요 0 조회수 2196

예제 코드 받을 수 있을까요??

해결됨

프로젝트 만들기

코드 제공 부탁드려도 될까요??

  • javascript
  • vanilla-javascript
aegis0918 댓글 1 좋아요 0 조회수 254

제가 이해한 C.Reduce와 Reduce의 동작 차이 정리

미해결

함수형 프로그래밍과 JavaScript ES6+

Concurrency Reduce와 Strict Reduce의 동작 차이 정리 _.reduce 와 C.reduce의 차이는 [...iter]로 제너레이터를 한번에 돌려 프로미스들을 동시에 평가 ( 프로미스의 평가 == 프로미스 객체 반환, 콜백함수 즉시실행 ) 하는데에 있다. _.reduce 만약 [... ]형태로 전개하지 않는다면 reduce의 while문에서 next()를 하여 yield 로 반환하는 값을 하나씩 빼 올 것이고, 이 과정에서 프로미스는 뽑힌다면 (=평가된다면) 뽑히는 과정에서 비로소 콜백을 실행 할 것이다. 그러나 전개하지 않은 상태에서는 이런 뽑히는 과정이 순차적이므로, '프로미스를 뽑아서 콜백을 실행 시켜준 후, reduce 자체를 return 하여 콜백이 완료될 때 까지 기다리고 다시 recur 재귀함수를 통해 이어서 진행하는 과정' 을 프로미스가 뽑힐 때마다 해주어야 하는 것이다. C.Reduce 반면에 [...] 형태로 전개하여 사용하면, yield로 반환될 모든 값이 배열에 담긴다. 이 과정에서 뽑힌 프로미스는 콜백이 바로 실행될 것이고, 만약 제너레이터에 여러 프로미스들이 존재한다면 제너레이터의 next()가 연속적으로 동작함에 따라 콜백도 주르륵 병렬되게 실행 될 것이다. 이런 프로미스를 포함한 배열을 받은 reduce는 then()을 통해서 reduce를 종료하고 프로미스를 반환한다. 콜백이 완료되면 then(recur)에 의해 재 실행된다. 여러 프로미스들이 거의 동시에 자신의 콜백을 실행시켰기 때문에, reduce 입장에서는 전체 시간이 가장 오래걸리는 놈 만큼만 소요다는 것이다. 마치 Promise.all() 이 동작하는것 처럼 말이다

  • javascript
  • 함수형-프로그래밍
yus 댓글 3 좋아요 2 조회수 830

개인공부

해결됨

처음 만난 리액트(React)

안녕하세요! 리액트를 처음접하고 공부하고 있는 사람입니다.. 강의 해주신 내용이 너무 깔끔하고 좋아서 강의보면서 실습해보고, 복습개념으로 블로그에 글을 정리하려고 하는데 괜찮을까요?? 출처는 당연히 남기고, 광고나 이런거는 전혀없고 그냥 개인 공부하는 블로그입니다..!!

  • HTML/CSS
  • javascript
  • react
히수 댓글 1 좋아요 0 조회수 580

깃헙 권한 요청드립니다.

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

.

  • javascript
  • vue.js
  • es6
  • vuex
댓글 1 좋아요 1 조회수 269

깃헙 권한 요청 드립니다!

미해결

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

권한 요청 드립니다. 인프런 아이디 : choigy0331@naver.com 인프런 이메일 : choigy0331@naver.com 깃헙 아이디 : choigy1001 깃헙 Username : Keun young

  • javascript
  • vue.js
댓글 1 좋아요 1 조회수 374

인기 태그

인프런 TOP Writers

주간 인기글