묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
유저정보 수정 후 서버세션 업데이트할 수 있는 방법이 있을까요?
안녕하세요 선생님여쭤보고 싶은 부분이 있습니다. 유저정보 수정 후 서버세션을 업데이트하려는데검색해도 생각처럼 잘 되지 않더라구요.혹시 업데이트 방법을 아실까해서 문의드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
08-01-map-fruits 실무 효율적인 렌더링 예제
데이터를 bbb 같은 데이터에 담고 그걸 presenter에 담으면 presenter에서 데이터를 알아보기 어려우니까 3번과 같이 map 자체를 <div> 에 담아서 렌더링 한다고 말씀하셨는데요, 그렇다면 3번과 같은 렌더링은 컨테이너의 return에 적는걸까요 아니면 presneter의 return에 적는걸까요?
-
미해결Next + React Query로 SNS 서비스 만들기
root layout 질문
안녕하세요. beforeLogin과 afterLogin 둘다 layout.tsx를 가지고 있는데, localhost:3000에서 beforeLogin의 layout.tsx를 렌더하는 이유가 궁금합니다. page.tsx가 있으면 그쪽을 인식하는 건가요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
tno값 초기화
제목 그대로 tno값은 어떻게 초기화 시키나요? testDelete 함수를 이용해서 삭제후 다시 testInsert 함수를 이용해서 1 ~ 100까지 만들고 싶은데, tno값은 1부터 시작하는게 아닌, 기존의 tno값부터 1씩 증가됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마 회원가입 만들기
회원가입 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
onClickRedo 질문
componentDidUpdate를 사용하지 않고this.componentDidMount()를 다시 불러와서 실행시켜도정상적으로 작동하는데 이건 권장하지 않는 방법인가요?혹시 그 이유가 더 긴 라이프 라이클을 갖게 돼서 그런가요? onClickRedo = () => { this.setState({ winNumbers: lottoNumbers(), winBalls: [], bonus: null, redo: false, }) this.timeout = []; this.componentDidMount(); }
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
화면이 안보여요
5강까지는 문제없이 보였는데6강부터 수파베이스 관련된 마지막 강의까지 화면이 검정색으로 아무것도 안보이는데 혹시 저만그런건가요?? 이런적이 처음이라 어떻게 해야할지 모르겠어요 수파베이스 다음 강의부터는 또 잘 나오는거 같아요 지금 그냥 건너뛰고 뒤에 강의 듣고있는데 또 비슷한 현상이 나타나네요 ;;;;;;;; 화면이 까맣게 안나오고 목소리만 들려요,,,
-
미해결Next + React Query로 SNS 서비스 만들기
export const dynamic = "force-dynamic"이 적용된 page.tsx는 모든 요청을 캐싱하지 않는다?
Next.js는 라이브러리에서 보내는 요청까지 캐싱해버리는데,export const dynamic = 'force-dynamic'해당 문구를 page.tsx에 넣어주면 해당 페이지에서 보내는 모든 요청을 캐싱하지 않음. => export const dynamic = 'force-dynamic'를 적용한 page.tsx는 써드파티 라이브러리의 백엔드 요청 캐싱을 무시한다.또한, 모든 요청을 캐싱하지 않기 때문에 react query나 fetch 함수의 요청도 모두 캐싱을 하지 않는다.라고 이해했는데 잘 이해한 것인지 모르겠어서 질문 올리게 되었습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
페이지이동후 쿼리 질문있습니다
페이지 이동후 url에 상품 id도 잘출력되고graphql에 조회해봐도 제대로 조회가되는데vscode로 실행하면 variables에서 null값이 출력되는데아무리 찾아봐도 어디가 문제인지 몰라서 질문드립니다 ㅠㅠ
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
dropdown 내부에서 data의 타입을 알아야 할까요?
앞선 질문들에서 친절하게 답변주셔서 감사합니다! 항상 많이 배우고 있습니다 <Dropdown.Provider> <Dropdown.Container> <DropDown.Trigger> <Dropdown.List> {data.map((item) => ( <Dropdown.Item key={item.key} /> )} </Dropdown.List> </Dropdown.Container> </Dropdown.provider>가독성이 조금 떨어지지만 createDropdown을 만들지 않아도 되고, 제네릭으로 타입을 복잡하게 주지 않아서 이 방법도 괜찮을 것 같은데 어떨까요?!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
공부방식에 질문있습니다.
일단 현재 라우팅수업 진행중입니다!매 섹션 강의를 다 듣고나서 해당섹션 학습자료 복습 후퀴즈와 포트폴리오 과제실습을 진행하는데퀴즈와 포트폴리오를 진행할때마다 배웠던 코드구동원리는 이해는 했지만 실습할때마다 코드구성이 정확히 기억나지않아서매번 이전 자료를 보면서 해당코드는 따라치고 조립하는 경향이있는데 이런식으로 공부해도 되는지 의구심이 들어서 질문드려요가급적이면 코드구성도 다 외워서아무것도 보지않고 해내는게 제일 바람직할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
prevState 관련 질문드립니다
카운터만드는 부분은 이해가 갔는데 토글 만드는 부분에서 이런식으로 현재 state를 뒤집는것과 무슨 차이가 있는 건지 잘 이해가 가지 않습니다. const onToggleModal = () => { setIsOpen((perv) => !prev); }; const onToggleModal = () => { setIsOpen(!isOpen); };
-
미해결Next.js 시작하기
API Routes를 사용하는 기준과 장/단점에 대해서 알고 싶습니다!
안녕하세요, 강사님 좋은 강의 감사합니다!! 시간 가는지 모르고 빠르게 완강을 하게 되었습니다.API Routes 부분이 조금 헷갈려, 이 부분에 대한 궁금증이 생겨 질문을 남기게 되었습니다.Next.js를 사용하여 API 라우트를 통해 클라이언트에서 서버로 직접 데이터베이스나 외부 서버에 접근하여 클라이언트 단에서 사용할 수 있다는 것을 알게 되었습니다.API 라우트를 통한 외부 서비스 URL 숨기기 서버의 env 사용, 외부 서비스 안전하게 접근.일반, 서버 DB에 접근해서, 사용하는 것보다 어떤 부분에서 장점이 있는지 크게 와닿지 않아서, 혹시 조금 더 구체적인 실무에서의 API Routes를 활용하는 예시를 좀 더 자세하게 알 수 있을까요? 이를 사용했을 때 서버 DB에 직접 접근했을 때 얻는 것에 비해 가질 수 있는 장점과 단점에 대해 알고 싶습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
서버 로그인 방식과 결합
안녕하세요! 개인 프로젝트에서 백엔드 먼저 개발 후 프론트를 Next로 개발하면서 강의를 통해 next-auth를 접했는데요. 저는프론트에서 로그인을 하면 해당 로그인 request가 서버로 전달되고, 서버에서 jwt access, refresh token을 발급해프론트에 전달하고 저장하는 기존의 서버 로그인 방식으로 설계를 하였습니다. 또한 서버의 protected request에 대해 위에서 발급한 access token을 활용하여 유효한지 검증 후 진행하도록 하고자 하는데요. next-auth부분을 보며 현재의 공식 문서와도 조금 다르고 제가 원하는 방식과 통합하여 구현이 가능한지 잘 이해가 안가더라구요ㅠ혹시 이러한 방식으로도 서버에서 얻은 jwt토큰을 next-auth에 삽입이 가능할까요? 대략적인 흐름은 어떻게 진행될까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩마켓 웹 화면 구현하기 코드
섹션 2HTML & CSS 기본그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요?컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정하기 기능
이제 promise.all을 사용해서 이미지 미리보기는 가짜 URL로 보여주고게시글 등록 mutation을 날릴때 이미지 upload 요청을 보내고 응답받은 url을 mutation을 날리고 있는데수정하기할때도 uploadImage을 하기 위해서 코드의 양이 길어지는데 코드는 길더라도 이게 더 효율적인 방식인건가요?? 그리고 이렇게하면 fetchBoards의 결과로 받아온 결과는 string 타입이고 uploadImage에 사용하는 이미지는 FIle 타입이라서 creacteBoard처럼 각각 다른 배열에 담아서 보내기는 어렵고 만약 upload하고 응답받은 url이면 skip하고 File타입의 데이터라면 imageUpload를 실행시켜 url을 받아오와 배열에 추가해서 updateBoardInput 객체에 추가해서 mutation 보내려고 하는데 이런식으로 접근하는게 맞는지 궁금합니다
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
api repository 폴더 안에 있던 search 폴더가 안보여요
안녕하세요 Section2-5 강의 "Querydsl설정하기" 강의에서는 분명repository 폴더 안에 search 폴더가 있었는데 강의를 듣다보니 강사님 화면에서는 search 폴더가 어느새 사라져있습니다.. 강의화면만 보고 어디있는지 알수가 없어서요ㅠ 어느 폴더로 이동해갔는지 알려주시면 감사하겠습니다. 그리고 강사님 화면을 보다가 발견했는데 config 폴더 아래에 RootConfig 파일이 새로 생겨있고,깃 파일을 확인해보니 modelMapper를 사용하여 DTO 와 entity를 변환해주고 있는데,앞에 강의에서 제가 듣기론 funciton을 이용해서 변환해주고RootConfig 파일을 따로 만든 기억이 없습니다ㅠ교육 뒷 부분에 새로 생기는 건가요?
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
4.4 getBy~, queryBy~ 질문입니다
마지막, 삭제 버튼 테스트Q. 삭제 버튼을 누르면 TableRow가 사라지니까 queryByText('text').not.toBeInTheDocument()를 사용해서 유무를 확인 하셨는데getByText('text').not.toBeInTheDocument()를 사용해서 해당 텍스트가 있는 요소가 없으면 에러가 나타나도록 유도해서 테스트 검증할 수도 있지 않나요?? 가능은 한건지, 권장이 되지 않는건지 질문 드립니다
-
미해결Next + React Query로 SNS 서비스 만들기
next에서 msw사용이 살짜 애매하다는게 무슨 뜻인지 궁금합니다
next에서 msw사용이 애매하다는 것이 무슨뜻인지그럼 react에서는 사용방법이 다른 것인지 궁금합니다
-
미해결Next + React Query로 SNS 서비스 만들기
인터셉팅 라우터 활용도
안녕하세요. 실무에서 인터셉팅 라우팅 활용 빈도가 잦을까요?클론코딩이라 x.com에서 사용한 방식 그대로 만들기 위한 학습인지 아니면 실무에서도 사용빈도가 높은지 궁금합니다강의는 들어서 인터셉팅 라우팅을 이해하긴 했지만 실무에서는 로그인, 회원가입 팝업 띄울때 인터셉팅 라우팅을 사용하지 않을것같은 생각이 들어서 질문드립니당감사합니다
