묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 네이티브 기초
강의에서 InputForm.js에서
pressable 자동으로 import되는데 어떻게 하는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 관련 질문드립니다.
24년 12월에 결제하여 수강 중입니다올해 [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 강의가 오픈 된 것을 보았는데, 강의 간 내용에 많은 차이 점이 있을까요? 신규 강의를 수강하려면 재결제 하는 방법밖에 없을까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
동적페이지 로드밸런서 연결
AWS HTTPS 적용하는 부분에서과정대로 2번 따라했는데똑같이 해당 에러가 나서 https로 접속이 안 되네요 ㅜㅜ이유가 먼지 알 수 있을까요?!
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
todo / react 붙이는 깃주소를 받고 싶습니다.
안녕하세요.수강생입니다.이부분을 5번은 넘게 들은거 같은데 어려워요.깃주소주신것도 가서 봤는데구조도 잘 이해가 안되고todo 와 react만 연동되는 코드를 따로 깃에 주시면 안될까요?todo따로 react따로 폴더를 만들어주신거 같은데myreact01-cra 온전히 todo를 리엑트에 붙이는 깃주소를 따로 만들어주셨으면해서요.전부 한군데에 있어서 분석해보면서 하고는 있는데 저위의 3개의 카테고리중에2개만이라도 되고 싶은데다 합해서 20분수업도 안되는데 전 2분도 못쫓아가고 있어요.리엑트도 어느정도안다고 생각하고장고도 어느정도 안다고 생각하는데도어렵습니다. 흑....소스코드를 받고 싶습니다.인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
섹션3. 스프링부트와 API서버에서 부트 프로젝트 생성 및 확인 강의에 관한 겁니다.
해당 강의 1:51에서 갑자기 데이터베이스 익스플로러용 데이터그립 툴이 나오는데 이에 대한 설정은 어느 강의에서 확인할 수 있는 거죠? 느닷없이 나와서 혼동스럽기만 하네요. 섹션 1의 MariaDB와 부트 프로젝트생성에서도 하이디sql 툴 설정만 하셔서 데이터그립 툴은 어디에서 나온 건지 모르겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의 쿠폰 관련 문의드립니다
안녕하세요! 비슷한 유형의 질문글을 보고 늦었지만 문의드리게 되었습니다. 공지를 늦게 확인하여 쿠폰을 받지 못했는데 혹시 지금이라도 발급이 가능할까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vsCode 저장 시 코드 정렬? 에 관한 질문
코드를 치고 control + s를 눌렀을 때 <button> 내부의 요소들이 정환님의 화면처럼 코드들이 세로 일렬로 되도록 세팅하고 싶은데 저는 가로 일렬로 배치가 돼요. 혹시 이 부분 세팅은 어떻게 하는지 알려주실 수 있으실까요?
-
해결됨Next.js 시작하기
EsLint flat config format 으로 만들어질 때 참고
import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; import prettierPlugin from "eslint-plugin-prettier"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); const eslintConfig = [ ...compat.extends("next/core-web-vitals"), ...compat.extends("plugin:prettier/recommended"), { files: ["**/*.js", "**/*.jsx"], plugins: { prettier: prettierPlugin, }, rules: { "no-undef": "error", "prettier/prettier": [ "error", { singleQuote: true, semi: true, tabWidth: 2, trailingComma: "all", printWidth: 80, bracketSpacing: true, arrowParens: "avoid", }, ], }, }, ]; export default eslintConfig;
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
빨간 밑줄 질문이요..
위와 같이 해당 변수나 값을 선언한거를 사용하지 않으면 이렇게 빨간 밑줄이 생기는데요. 이거 없앨수 없나요? 거슬리네요..ㅠ
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
NoReverseMatch at /hottrack/archives/2023/
NoReverseMatch 자체가 되돌아갈 곳이 없다는 오류인 것은 알겠으나,왜 song_archive_year를 못찾는지 모르겠습니다. Viewclass SongYearArchiveView(YearArchiveView): model=Song date_field="release_date" # make_object_list = Trueurls.pyurlpatterns = [ ... path(route="archives/<int:year>/", view=views.SongYearArchiveView.as_view(), name="song_archive_year"), ] --- 혹시나 해서 View를 다음과 같이 했는데class SongYearArchiveView(YearArchiveView): model = Song date_field = "release_date" # 조회할 날짜 필드 make_object_list = True def get_queryset(self): year = self.kwargs['year'] # URL에서 'year' 값을 가져옴 return Song.objects.filter(release_date__year=year) 인지는 하는 것 같아요. 그런데 버튼은 없군요.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
book/[id] 과 같은 동적경로에 대응하는 페이지가 어떻게 풀라우트캐시가 동작할 수 있죠?
선생님 강의 5-3) 9분 10초를 보다가 궁금한 것이 있습니다~generateStaticParams으로 지정했던 id값이 아닌4번페이지에 접속했을 때 해당 페이지가 실시간으로 다이나믹하게 페이지가 생성되고 풀라우트캐시에 저장된다고 하셨는데요 풀라우트캐시는 static페이지에서만 동작한다고 알고 있고, [id]컴포넌트에서 fetch함수에 캐싱 옵션으로 'force-cache'을 설정한 것도 아닌데 어떻게 풀라우트 캐시가 동작할 수 있나요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
타입스크립트 강의 할인 쿠폰 문의
리액트 종강으로 얻은 타입스크립트 할인 쿠폰인데 입력하니까 이렇게 뜨는데 그럼 못받는건가요 ㅜㅜ
-
미해결Next + React Query로 SNS 서비스 만들기
질문
쌤하트나 리포스트를 누를 때 마다가끔씩TypeError: data.pages.map is not a function 이런 에러 PostRecommend 섹션에 뜨는데 이런 경우가 종종 발생할까요 ?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 컴포넌트 라이프 사이클 중 update 관련 질문
안녕하세요 강사님! 항상 좋은 강의 감사합니다:)강의를 보던 중 강사님 께서는 update 단계에서 useEffect의 두번째 인수 deps를 생략하라고 하셨는데 아래와 같이 deps에 state값들(count, input)을 주고 변화 시켜도 콘솔에 생략했을 때와 똑같이 update가 출력되는 것을 확인했는데 무슨 차이인지 궁금합니다! <deps 생략 코드> useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }); <deps 추가 코드>useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }, [count, input]);
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
moveToList 질문드려요
상품쪽 moveToList에서 page하고 size추가 안해도 useCustomMove 이쪽에const page = getNum(queryParams.get('page'), 1) const size = getNum(queryParams.get('size'), 10)이렇게 되어있어서 따로 moveToList에서page하고 size를 안넣어도 잘 이동이 되던데잘못된걸까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 수정 content 기본 값이 원래 일기 내용으로 안보이고..
제가 1번 일기 수정을 누르고 수정 페이지에 들어가면1번일기의 오늘의 일기 기본값으로 "1번 일기 내용"(원본 content) 있어야 하잖아요? 근데 content 표기는 안되고 placeholder만 보입니다.. 아래는 코드입니다import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Button from "./Button"; import "./Editor.css"; import EmotionItem from "./EmotionItem"; const emotionList = [ { emotionId: 1, emotionName: "완전 좋음" }, { emotionId: 2, emotionName: "좋음" }, { emotionId: 3, emotionName: "그럭저럭" }, { emotionId: 4, emotionName: "나쁨" }, { emotionId: 5, emotionName: "끔찍함" }, ]; const getStringedDate = (targetDate) => { // 날짜 -> YYYY-MM-DD let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if (month < 10) { month = `0${month}`; } if (date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; }; const Editor = ({ initData, onSubmit }) => { const [input, setInput] = useState({ createdDate: new Date(), emotionId: 3, content: "", }); const nav = useNavigate(); useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, []); const onChangeInput = (e) => { let name = e.target.name; let value = e.target.value; if (name === "createdDate") { value = new Date(value); } setInput({ ...input, [name]: value, }); }; const onClickSubmitButton = () => { onSubmit(input); }; return ( <div className="Editor"> <section className="date_section"> <h4>오늘의 날짜</h4> <input name="createdDate" onChange={onChangeInput} value={getStringedDate(input.createdDate)} type="date" /> </section> <section className="emotion_section"> <h4>오늘의 감정</h4> <div className="emotion_list_wrapper"> {emotionList.map((item) => ( <EmotionItem onClick={() => onChangeInput({ target: { name: "emotionId", value: item.emotionId, }, }) } key={item.emotionId} {...item} isSelected={item.emotionId === input.emotionId} /> ))} </div> </section> <section className="content_section"> <h4>오늘의 일기</h4> <textarea name="content" value={input.content} onChange={onChangeInput} placeholder="오늘은 어땠나요?" ></textarea> </section> <section className="button_section"> <Button onClick={() => nav(-1)} text={"취소하기"} /> <Button onClick={onClickSubmitButton} text={"작성완료"} type={"POSITIVE"} /> </section> </div> ); }; export default Editor;
-
미해결실무 중심! FE 입문자를 위한 React
[2-1] 강의링크 메모용
https://codesandbox.io/p/sandbox/2-1-29k09?file=%2Fsrc%2Findex.js%3A9%2C1
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onSubmit 함수안에서 입력 했는지 판별하기
const onSubmit = () => { if (input.name === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } };위 코드는 강사님께서 알려주신 onSubmit함수인데 콘솔에 하나하나 찍어가면서 공부하다 보니까 inputRef.current가 가리키는 것이 input 태그여서 아래와 같이 조건문의 조건을 바꿔서 돌려봐도 잘 나오는데 input.name과 inputRef.current.value가 같은 것을 가리켜서 그런건지 궁금합니다! const onSubmit = () => { if (inputRef.current.value === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } }; 혹시 몰라서 input태그도 올립니다!<div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder="이름" /> </div>
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
userRef를 활용한 Validation 활용법
특정 요소의 입력검증을 위해 useRef()를 생성하고해당 element tag에 ref={inputRef}를 생성한 이후에onSubmit()에서 강의대로 입력확인 처리를 하였습니다.const onSubmit = (e) => { console.log(input.name, input.birth) if(input.name === "") { console.log(inputRef.current) inputRef.current.focus() return } if(input.birth === "") { console.log(birthRef.current) birthRef.current.focus() return } }질문의 bith에 대한 입력검증을 하고자 하면신규로 birthRef = useRef()를 생성하고element tag에 ref={birthRef}를 추가 /onSubmit에서 해당 로직을 적용해야 하는 건가요? 총 4개 입력항목(이름, 생년월일, 국가, 자소개)이면useRef()를 4개 생성해서 엘리먼트별 입력확인을하는구조로 개발이 되어야 하는건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이벤트 객체값 확인관련 - console.log
onChange 이벤트에서 입력값 확인을 console.log에서확인시 아래와 같이 확인이 되어집니다.input(type=date포함), textarea 궁금한 사항은 select 에서 선택된 값은 어떻게 확인해야할까요? 실제 target부분에 아래와 같이 표시가 되어집니다.select와 option의 값이 출력이 되고input의 입력값을 볼수있는 형태가 아닌select tag에서 정의한 값이 보입니다.실제 선택한 값을 어디서 확인할 수 있을까요?