inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

피그마 회원가입 만들기

해결됨

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

회원가입 css까지 다 완성했는데 비교해보니 비슷한 느낌은 나는것 같습니다. 혹시 코드 예제? 라던지 대표적인 완성코드를 볼 수 있는건 없나요?? 한번 비교해보고 싶어서요.. 추가로 남성/여성 부분 radio 동그라미가 피그마 원본? 상에는 크고 회색으로 칠해져 있는데 저건 어떻게 적용하나요?? 가입하기 버튼 위 구분선도 제게 사라졌는데 원인을 알수있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel = "stylesheet"> </head> <body> <div id="tBox"> <h2 id="title">회원 가입을 위해 <br/> 정보를 입력해주세요</h2> <input class = "underline" type="text" placeholder="*이메일"><br><br> <input class = "underline" type="text" placeholder="*이름"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호 확인"><br><br> <!-- <select> <option disabled="true" selected="true">지역을 선택하세요</option> <option>서울</option> <option>경기</option> <option>인천</option> <option>부산</option> <option>울산</option> <option>김해</option> </select> --> <div id = "gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="checkbox-container"> <input type="checkbox" id="terms"> <label for="terms">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</label> </div> <br> <div class = "register"> <button class = "button">가입하기</button> </div> <!-- <input type="button" value="가입하기"> --> </div> </body> </html> * { box-sizing: border-box; } #title { width: 466px; height: 94px; color: #0068ff; font-size: 32px; font-family: Noto Sans CJK KR; text-align: justify; } #tBox { width: 670px; height: 960px; border: 1px solid #aacdff; margin-top: 60px; margin-left: 625px; padding: 100px; box-shadow: 7px 7px 39px 0px #0068ff; border-radius: 20px; display: flex; flex-direction: column; align-items: center; } input[type="text"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } input[type="pw"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } button { padding: 10px 20px; color: #fff; background-color: #0068ff; border: none; border-radius: 5px; cursor: pointer; } input.underline { border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1px; } #gender { width : 140px; height: 23.94px; border : 1px solid #fff; display: flex; justify-content: space-between; } .checkbox-container { width: 466px; height: 21.06px; border: 1px solid #fff; border-radius: 3px; align-items: center; display : flex; } .checkbox-container input[type="checkbox"] { margin-right: 10px; } .register { border-top : 1px solid #e6e6e6; width: 470px; height: 1px; } .button { background-color: #FFFFFF; border :1px solid #0068FF; width: 470px; height: 75px; border-radius: 10px; font-size : 18px; color : #0068FF; text-align: center; font-weight: 400; line-height: 26.64px; font-family: Noto Sans CJK KR; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
민선 댓글 2 좋아요 0 조회수 313

페이지이동후 쿼리 질문있습니다

해결됨

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

페이지 이동후 url에 상품 id도 잘출력되고 graphql에 조회해봐도 제대로 조회가되는데 vscode로 실행하면 variables에서 null값이 출력되는데 아무리 찾아봐도 어디가 문제인지 몰라서 질문드립니다 ㅠㅠ

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

공부방식에 질문있습니다.

해결됨

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

일단 현재 라우팅수업 진행중입니다! 매 섹션 강의를 다 듣고나서 해당섹션 학습자료 복습 후 퀴즈와 포트폴리오 과제실습을 진행하는데 퀴즈와 포트폴리오를 진행할때마다 배웠던 코드구동원리는 이해는 했지만 실습할때마다 코드구성이 정확히 기억나지않아서 매번 이전 자료를 보면서 해당코드는 따라치고 조립하는 경향이있는데 이런식으로 공부해도 되는지 의구심이 들어서 질문드려요 가급적이면 코드구성도 다 외워서 아무것도 보지않고 해내는게 제일 바람직할까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
cyh1908 댓글 2 좋아요 0 조회수 233

prevState 관련 질문드립니다

해결됨

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

카운터만드는 부분은 이해가 갔는데 토글 만드는 부분에서 이런식으로 현재 state를 뒤집는것과 무슨 차이가 있는 건지 잘 이해가 가지 않습니다. const onToggleModal = () => { setIsOpen((perv) => !prev); }; const onToggleModal = () => { setIsOpen(!isOpen); };

  • react
  • node.js
  • seo
  • graphql
  • next.js
YJ J 댓글 2 좋아요 0 조회수 195

수정하기 기능

해결됨

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

이제 promise.all을 사용해서 이미지 미리보기는 가짜 URL로 보여주고 게시글 등록 mutation을 날릴때 이미지 upload 요청을 보내고 응답받은 url을 mutation을 날리고 있는데 수정하기할때도 uploadImage을 하기 위해서 코드의 양이 길어지는데 코드는 길더라도 이게 더 효율적인 방식인건가요?? 그리고 이렇게하면 fetchBoards의 결과로 받아온 결과는 string 타입이고 uploadImage에 사용하는 이미지는 FIle 타입이라서 creacteBoard처럼 각각 다른 배열에 담아서 보내기는 어렵고 만약 upload하고 응답받은 url이면 skip하고 File타입의 데이터라면 imageUpload를 실행시켜 url을 받아오와 배열에 추가해서 updateBoardInput 객체에 추가해서 mutation 보내려고 하는데 이런식으로 접근하는게 맞는지 궁금합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
박현민 댓글 2 좋아요 0 조회수 173

이모션에서 props전달시 화살표함수가 원래 이렇게 생겼나요?

해결됨

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

다른 부분에서 화살표함수 만들면 제대로 만들어지는데 이부분에서만 화살표함수 모양이 다릅니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
leeyunje96 댓글 2 좋아요 0 조회수 206

07-01 emotion에서 if문을 다 넣어도 노란색으로 변하질 않습니다.

해결됨

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

onChangeContents 함수 부분에 넣었을때 처음엔 버튼이 노란색으로 변했습니다만 이후 onChangeWriter 와 onChangeTItle 부분까지 넣은 후 버튼의 색이 변하지 않습니다. if문을 다 지우고 setIsActive(true)만 넣었을때는 작동이 됩니다..

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

리액트와 next.js 강의에 대해 여쭤볼게 있습니다.

해결됨

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

안녕하세요 우선 강의 열심히 잘 보고 있습니다. 다른게 아니라 리액트와 next.js 수업이 조금 헷갈리는데 섹션5부분만 리액트이고 그 뒤에는 next.js라고 보면 되나요? 강의를 보다가 어느순간 제가 알고있는 리액트의 폴더구조들이 조금 다르더라구요. 리액트에서는 폴더중에 App.js인데 _app.js 이런식으로 되어있고 또 마지막 포트폴리오 리뷰에서는 화면에 리액트 로고부분도 나와있어서 어디서부터 어디까지가 리액트이고 next.js 강의인지 알려주시면 너무 감사드리겠습니다 ^^ 마지막으로 포트폴리오 리뷰는 제가 어떠한걸 보고 만든 후 보는 영상인지 아니면 그냥 영상을 보고 같이 하는건지도 알고싶습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 1 좋아요 0 조회수 220

refreshToken 적용 이후

미해결

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

포트폴리오를 만드는중에 refreshToken을 이용해서 로그인 데이터를 저장한 후에 생긴 문제입니다. 게시글 조회 페이지에서 새로고침을 하면 fetchBoards와 fetchBoardCount 요청이 2번씩 나가고 뒤에오는 요청은 canceled 되는데 이런 경우는 어떤거 때문에 생기는건지 궁금합니다. localStorage로 되돌리면 다시 오류없이 잘 동작합니다 refreshToken을 사용하고 저 오류가 생기면 게시글 등록후에 간헐적으로 새로고침을 해야 refetch되는거 같습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
박현민 댓글 2 좋아요 0 조회수 206

상품등록 기능

해결됨

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

상품 등록시에 판매자 데이터를 넣는거같은데 gpl query문에서 seller, buyer를 어떤 형식으로 작성해야 되는지 모르겠습니다 데이터는 fetchUserLoggedin으로 넣는게 맞는지도 궁금합니다

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

데이터 통신 실습 부분에 대해 질문있습니다.

해결됨

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

안녕하세요 graphql 부분에서 조금 헷갈려서 질문을 드립니다. 1. 이 부분에서 왼쪽부분에서 판매자 이름이 철수이고 createProductInput은 마우스, 정말 좋은 마우스 그리고 가격을 사용자가 저렇게 마우스 가격등을 input에 작성하면 name, detail, price가 생성된다라는 뜻으로 이해하면 좋을까요? 그리고 그 밑에 _id는 윗부분에 마우스라고 생성해서 나온 마우스라는 제품의 id를 보낸다는 뜻인지도 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 216

변수, useState 부분 질문있습니다.

해결됨

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

안녕하세요 수업 너무 잘 듣고 있습니다. 수업을 듣다 궁금한점이 생겼는데 제가 인강을 보면서 변수 let, const와, 리액트에서 useState부분을 보고 이해는 갔지만 제가 막상 혼자 코드를 친다고 했을때 let, const와 useState를 언제 작성을 하면 되는지 잘 모르겠더라구요. 혼자 코드를 작성을 한다고 할때 변수와 useState를 언제 작성을 하면된다라고 이해를 하면 쉽게 이해할수있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 1 좋아요 0 조회수 149

리액트 설치에 대해 궁금한 점이 있습니다.

해결됨

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

현재 리액트부분을 시작했는데 리액트를 설치할때 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 이러한 명령어를 사용하는데 이렇게 설치하고 나니 제가 알고있는 폴더들이나 내용이 좀 다르더라구요. 제가 알고있는 건 npx create-react-app ./ 이러한 명령어로 리액트를 설치했는데 이거와 전혀 다른 명령어 인가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 264

yarn 설치가 되지않습니다.

해결됨

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

node.js와 npm은 --version을 이용하니 버전이 나오는데 yarn은 버전이 나오지 않아 npm install -g yarn 이라는 명령어를 하니 이미지처럼 에러가 나옵니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 598

섹션11 eslint 설치

해결됨

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

eslint 설치 시 3개 중에 마지막 3번째를 선택하라고 하는데 저는 선택지가 2개만 나옴니다. 2번째를 선택해서 설치해도 되나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
베이직 댓글 2 좋아요 0 조회수 463

TypeORM 데이터 조회

해결됨

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

안녕하세요! 개인 프로젝트를 진행 하면서 도저히 이해가 안되는 부분이 있어서 이렇게 글을 올려봅니다. userId 에 다대일로 User entity를 연결하고 사진과 같이 userId 에서 데이터를 불러온후 result 에서 조건에 맞게 데이터를 조회하려는데 타입이 맞지 않다면서 불러올 수 없었던 적이 많았습니다. 결국 방법을 찾지 못해서 쿼리빌더를 이용하여 데이터를 조회하는 방법으로 해결을 하고 있습니다. 타입이 맞지 않을때는 어쩔 수 없이 조회를 할 수 없는 것인지, 아니면 방법이 있는 것인지 궁금합니다!

  • nestjs
  • typescript
  • typeorm
  • graphql
Risha 댓글 1 좋아요 0 조회수 261

geolocation부분에 대해 질문있습니다.

미해결

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

geolocation부분에 const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation(); 이렇게 함수가 있는데 여기서 궁금한점이 askForLocation(); 함수 호출부분에 인자로 전달하는 것이 없는데 매개변수로 position에 위치정보 객체형식으로 콘솔에 나오는 이유가 뭔지 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 3 좋아요 0 조회수 293

함수, 변수의 호이스팅 부분 질문있습니다.

해결됨

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

함수, 변수의 호이스팅 강의 영상 부분에 if (storageData?.complete) { newLi.classList.add("complete"); } 이 코드에서 storageData 뒤에 ? 이 물으표가 없으면 매개변수를 받아오지 않게 되니 undefined라고 강사님이 말씀하시는데 이게 무슨 말인지 잘 모르겠습니다. 그리고 ToDoList에서 리스트에 추가를 하고 더블클릭 삭제, 전체 삭제까지는 어느정도 이해가 되는데 로컬스트리지 전체 부분이 조금 이해도 어려운데 어떻게 이해를 하면서 공부를 하면 좋을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 227

객체 localStorage 부분 질문있습니다.

미해결

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

현재 객체 localStorage저장 부분의 인강을 보다 궁금한점 있어 질문을 드립니다. const saveItemsFn = function () { const saveItems = []; for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), }; saveItems.push(todoObj); } localStorage.setItem("saved-items", JSON.stringify(saveItems)); }; 현재 자바스크립트 코드 제일 마지막 부분에 saveItemsFn함수가 저장하는 부분이니 이 함수안에 localStorage.setItem을 사용해서 로컬스토리지에 저장을 하는것까지는 이해가 되었는데 저장된걸 가져오기 위해 const savedTodoList = localStorage.getItem("saved-items"); localStorage.getItem을 사용하는데 여기서 첫번째로 이 코드 위치가 다시 제일 위쪽에 작성이 되었는지 궁금하고 두번째로 이 코드가 saveItemsFn 함수 안에 작성이 되지 않은 이유는 getItem이 저장하는 코드가 아니기때문에 saveItemsFn안이 아닌 따로 다시 작성이 된것인가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 1 좋아요 0 조회수 167

graphql codegen 설치

해결됨

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

섹션 10에서 graphql codegen 설치하려는데요 강의에서는 yarn add -D @graphql-codegen/cli 을 설치하라고 하는데 지금 설치하려고 사이트에 들어가니 yarn add --dev typescript @graphql-codegen/cli 로 되어 있는데 같은 건가요? 그냥 아래 명령어 실행해도 되나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
베이직 댓글 2 좋아요 0 조회수 264

인기 태그

인프런 TOP Writers

주간 인기글