묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 네이티브 기초
StyleSheet를 적용시키면 글자가 안 보입니다.
처음에 학습할 때 진행했던 파일에서는 정상적으로 작동되는데, 새로운 파일을 만들어서 적용시킬 때에는 글자가 안 보입니다. style={styles.container} 부분을 지우면 글자가 보이고, 다시 되돌리면 안 보이는 상황입니다 ㅠㅠ. 어느 부분이 잘못됐는지 알 수 있을까요?import { Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native' import React from 'react' const MainScreen = () => { return ( <SafeAreaView style={styles.container}> <StatusBar barStyle={'default'} /> <Text>Todo App</Text> <View> <Text>할 일</Text> </View> <View /> <View> <Text>완료된 일</Text> </View> </SafeAreaView> ) } export default MainScreen const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS === 'android' ? 20 : 10, backgroundColor: '#f8f8fa' } })
-
미해결생활코딩 - React
20.3 update에서 state변경이 안되는지 변경이 안됩니다
app.js import './App.css'; import { Component } from 'react'; import TOC from "./Components/TOC"; import ReadContent from "./Components/ReadContent"; import CreateContent from "./Components/CreateContent"; import UpdateContent from "./Components/UpdateContent"; import Subject from "./Components/Subject"; import Control from "./Components/Control"; class App extends Component { constructor(props){ super(props); this.max_content_id = 3; this.state = { mode: 'create', selected_content_id: 2, Subject: {title: "WEB", sub: "world wide web~~ hyun"}, welcome: {title: "Welcome", desc: "Hello, React~~"}, contents: [ {id:1, title:'HTML', desc:'HTML is for information'}, {id:2, title:'CSS', desc:'CSS is for Design'}, {id:3, title:'JavaScript', desc:'JavaScript is for interactive'} ] } } getReadContent() { var i = 0; while(i < this.state.contents.length){ var data = this.state.contents[i]; if(data.id === this.state.selected_content_id){ return data; break; } i = i + 1; } } getContent(){ var _title, _desc, _article = null; if(this.state.mode === 'welcome'){ _title = this.state.welcome.title; _desc = this.state.welcome.desc; _article = <ReadContent title={_title} desc={_desc}></ReadContent> }else if(this.state.mode === 'read'){ var _content = this.getReadContent(); _article = <ReadContent title={_content.title} desc={_content.desc}></ReadContent> }else if(this.state.mode === 'create') { _article = <CreateContent onSubmit = {function(_title, _desc){ // add content to this.state.contents this.max_content_id = this.max_content_id + 1; // this.state.contents.push ( // {id:this.max_content_id, title:_title, desc:_desc} // ); var _contents = this.state.contents.concat( {id:this.max_content_id, title:_title, desc:_desc} ) // var newContents = Array.from(this.state.contents); // newContents.push({id:this.max_content_id, // title:_title, desc:_desc}); this.setState ({ //contents:this.state.contents contents: _contents }); console.log(_title, _desc); }.bind(this)}></CreateContent> } else if(this.state.mode === 'update') { _content = this.getReadContent(); _article = <UpdateContent data={_content} onSubmit = { function(_id, _title, _desc){ // add content to this.state.contents // 14 line에 this.max_content_id = 3; 는 create에 사용된 것이므로 아래내용주석처리 // this.max_content_id = this.max_content_id + 1; //복제기능 수행 : 원본을 복사한 새로운 배열 생성 var _contents = Array.from(this.state.contents); //수정하고자하는 원소값과 같은 것을 찾는다. var i = 0; while(i < _contents.length){ //_contents[i].id갑과 입력한 id값이 같다면 if(_contents[i].id === _id){ _contents[i] = {id:_id, title:_title, desc:_desc}; break; } i = i + 1; } this.setState ({ //contents:this.state.contents //contents: newContents contents:_contents }); console.log(_id, _title, _desc); }.bind(this)}></UpdateContent> } return _article; } render() { console.log('App render'); return ( <div className="App"> <Subject title= {this.state.Subject.title} sub= {this.state.Subject.sub} onChangePage = { function () { this.setState({ mode:'welcome'}); }.bind(this)} > </Subject> <TOC onChangePage = { function (id) { this.setState({ mode:'read', selected_content_id:Number(id) }); }.bind(this)} data={this.state.contents}></TOC> <Control onChangeMode={function(_mode) { this.setState ({ mode:_mode }); }.bind(this)}></Control> {this.getContent()} </div> ); } } export default App; UpdateContent.js import { Component } from 'react'; class UpdateContent extends Component { constructor(props){ super(props); this.state = { id:this.props.id, title:this.props.data.title, desc:this.props.data.desc } this.inputFormHandler = this.inputFormHandler.bind(this); } inputFormHandler(e) { this.setState({[e.target.name]:e.target.value}); } render() { //this.props.title = 'hi; console.log(this.props.data); console.log('UpdateContent render'); return ( <article> <h2>Update</h2> <form action='/create_process' method='post' onSubmit={function(e){ e.preventDefault(); this.props.onSubmit( // state의 동기화 this.state.id, //e.target.title.value, // _title this.state.title, //e.target.desc.value // _desc this.state.desc ); }.bind(this)} > <input type="hidden" name="id" value={this.state.id}></input> <p> <input type="text" name="title" placeholder='title' value={this.state.title} //onChange = {this.inputFormHandler.bind(this)} onChange = {this.inputFormHandler} ></input> </p> <p> <textarea // onChange = {this.inputFormHandler.bind(this)} onChange = {this.inputFormHandler} name="desc" placeholder='description' value={this.state.desc}></textarea> </p> <p> <input type="submit" ></input> </p> </form> </article> ); } } export default UpdateContent;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
localstorage.setItem 위치 질문
수업에서는 '카운트다운 시작' 버튼 눌러서 Starter 함수가 실행되면 로컬 스토리지가 setInterval 함수로 인해 비워지기 때문에, CounterMaker 함수 내에 if문을 작성하여 해결하고 있습니다.저는 이 방법 말고 사진처럼 starter 함수 내부에서 setInterval 함수(clearTimer라고 작성한..) 호출 위치를 조정하여 해결하였는데, 이 방법에 문제가 있을지 궁금합니다!
-
미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
마지막 프로젝트 데모 페이지가 보이지 않습니다.
데모🎬 :https://noona-netflix-v2.netlify.app/클릭해도 Site Not Found 만 뜹니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
404 오류 관련 질문
05-05-dynamic-routing-board-mutation05-05-dynamic-routing-board-mutation-moved 계속해서 대조해보지만 게시글 등록하기를 누르고 moved 페이지로 넘어갈 때 404 오류가 뜹니다. catch에서 잡히지 않는걸로 보아 데이터 전송에서 문제가 있는건 아니지 않을까 싶은데, 아무리 봐도 해결책이 보이지 않아 질문 남깁니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
db 시퀄라이즈 관계 설정 및 백엔드 요청 질문입니다!
안녕하세요 제로초님, 강의 잘듣고잇습니다!!! db시퀄라이즈 관계 설정? 질문좀 드리려고요. 강의듣고 블로그를 만들어보려고 백/프론트 구상하고 있는데요, db table설정?을 어떻게 해야할지 헷갈려서요. 메인 페이지는 전체 post를 카테고리(메뉴)별로 나눠서 보여줍니다.메뉴[ study / TIL / portfolio ]를 클릭하면 해당 categories로 저장한 게시글을 보여줍니다 (노란화살표)포스트 작성할 때는 하나의 categories를 선택합니다. 각 게시글은 하나의 카테고리만 가집니다! 헷갈리는 부분은메뉴탭을 눌러서 study / TIL 로 이동했을 때, 전체 post를 가져오는 게 아니라 해당 categories의 post만 가져오고 싶은데, db를 활용해야 하는건지, 백엔드에서 필터링 과정을 해야 하는건지, 헷갈립니다이때 categories를 관계형 테이블?로 만들어서 해당 카테고리로 post를 가져올 수 있나요????백엔드가 전체 db에서 post를 findAll로 가져와, 카테고리로 필터링해서 프론트로 넘겨줘야 하나요?서버에서 전체 post를 받아서 프론트에서 필터링해서 각 컴포넌트에서 사용해야 하나요?? 흠. 뭔가 여러 방법이 떠오르긴 하는데 아직 시도해보지는 않았고 ㅎㅎㅎ 효율적인 방법이 뭔지 알고싶어요!! 제로초님이라면 어떤 방법을 사용하시나요?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
학습자료 관련해서 질문있습니다.
안녕하세요.인제 부트캠프를 하고 거의 끝나가면서 부족함을 느껴서 강의를 신청하게 되었는데요. 강의자료를 다운로드 받아서 설치해보니 아마 완성본(?) 인것 같더라구요. 그래서 route 설정할때 폴더 트리를 보고 내용도 지우고 진행하려고 합니다. 혹시 이렇게해도 앞으로 강의 나가는데 문제가 없을까해서 문의드립니다.예를 들면 현재 이런 상태입니다.
-
미해결Next + React Query로 SNS 서비스 만들기
서버 컴포넌트에서 Server Actions 사용하기
깃허브에 올려놓은 소스(next-app-router-z /ch3-1)을다운받은후에 403 에러발생을 확인하기 위해서아래의 주석을 해제했습니다.src/mocks/handlers.ts http.post('/api/users', async ({ request }) => { console.log('회원가입'); return HttpResponse.text(JSON.stringify('user_exists'), { status: 403, }) }) }), PostMan 에서 http://localhost:9090/api/users?id=js&password=pass&name=js7777호출을 하면 status 값이 의도한 대로 403 Forbidden 이 출력이 됩니다.그런데, 브라우저 개발자모드 Network 에서 보면 Status 값이 200 으로 출력됩니다.서버에서는 분명 403 상태로 보냈고, PostMan에서도 403으로 상태값이 넘어오는데, 왜? 개발자 도구(Network)에서만 상태값이 200으로 출력되는지 모르겠습니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
메모리 효율성을 개선한 버전 질문 있습니다.
for chunks in get_chunks(zipcode_list, chunk_size=1000): print("chunk size:", len(list(chunks))) ZipCode.objects.bulk_create(chunks)https://gist.github.com/allieus/f16d5d35b84d418cbabcfed8e69b96e2깃허브 Gist에 올라온 코드를 그대로 복사 붙여넣기 하고 마이그레이트를 했더니 데이터 베이스에 데이터가 삽입이 안되었습니다.그래서 디버깅을 해보았는데 위에 해당 코드블럭 부분에서 print("chunk size:", len(list(chunks)))은 그저 디버깅을 위한 코드일텐데 해당 구문이 bulk_create 보다 먼저 선언 되어있다면 데이터 삽입이 이루어지지 않습니다.Django 버전 문제인가 싶어서 5.0.4에서 4.2.7로 버전을 내린 다음 해봐도 결과는 같네요. 제너레이터 문법은 이번 강의에서 처음 접하였는데 해당 문법과 연관이 있는것인가요?
-
미해결Next + React Query로 SNS 서비스 만들기
추천탭 게시글작성 오류
추천탭에서 게시글을 작성하면 새로고침 시 사라져버리고 추천탭에서 게시한 게시글이 "팔로우 중" 탭에서 존재하여 좋아요 버튼을 클릭하면 새로고침 시 다시 추천탭에도 해당 게시글이 나타납니다.도무지 뭐가문제인지 모르겠네요ㅠㅠ"use client" import { MouseEventHandler } from 'react'; import style from './post.module.css'; import cx from 'classnames'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { Post } from '@/model/Post'; type Props = { white? : boolean; postId: number; } export default function ActionButtons({white, postId}: Props) { const queryClient = useQueryClient(); const commented = true; const reposted = true; const liked = false; const heart = useMutation({ mutationFn: () => { return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/${postId}/heart`, { method: 'post', credentials: 'include', }) }, // 클릭한 하트 상태를 실시간으로 true로 만들어줌 // post에서 검색결과,추천,팔로잉,답글 등등 쿼리키가 다양한대 어떤 쿼리키인지 무슨상황인지 알 수가 없다. // 그래서 전부 다 해줘야 한다. onMutate() { const queryCache = queryClient.getQueryCache(); const queryKeys = queryCache.getAll().map(cache => cache.queryKey); console.log('queryKeys',queryKeys); queryKeys.forEach((querykey) => { if(querykey[0] === 'posts') { const value:Post | Post[] | undefined = queryClient.getQueryData(querykey); // 게시글 console.log(value) // 싱글포스트 일 수도 있기때문에 조건문 걸어줌. if(Array.isArray(value)){ const index = value.findIndex((v) => postId == v.postId); // 찾고자 하는 게시글이 있는지 확인 if(index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], } // 옅은 복사해준것을 쿼리에 전송 queryClient.setQueryData(querykey, shallow); } }else { // 싱글 포스트인 경우 } } }); }, onError() { }, onSettled() { } }) // 댓글 const onClickComment = () => {} // 리트윗 const onClickRepost = () => { } // 좋아요 const onClickHeart:MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); if(liked){ // unheart.mutate(); }else{ heart.mutate(); } } return ( <div className={style.actionButtons}> <div className={cx(style.commentButton, { [style.commented]: commented }, white && style.white)}> <button onClick={onClickComment}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path> </g> </svg> </button> <div className={style.count}>{1 || ''}</div> </div> <div className={cx(style.repostButton, reposted && style.reposted, white && style.white)}> <button onClick={onClickRepost}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"></path> </g> </svg> </button> <div className={style.count}>{1 || ''}</div> </div> <div className={cx([style.heartButton, liked && style.liked, white && style.white])}> <button onClick={onClickHeart}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path> </g> </svg> </button> <div className={style.count}>{0 || ''}</div> </div> </div> ) }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 연결 후 게시글 작성..
안녕하세요 도메인 연결 후 로그인과 로그아웃이 잘 되고, 새로고침 시에도 유지가 되는데요~게시글이 작성은 안됩니다 ㅠㅠ 회원가입은 되구요!이 다음 강의 S3를 연결하면 게시글이 작성이 되는게 맞을까요? 아니면 현재 오류가 있는건가여..
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
웹사이트에서 바로 한글로 번역되는거 어떤 프로그램쓰시는건가요?
안녕하세요. 처음 15초쯤에 nextjs소개하면서 나오는 번역프로그램은 어떤걸 쓰시는건가요? 편리해보여서요~
-
미해결웹 게임을 만들며 배우는 React
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
안녕하세요 예전에 리액트 강좌를 수강하고 취업뒤에 다시 강좌를 찾아보게 되었습니다.요즘 공부방법에 대해서 고민이 많이 되는데 공식문서를 펼쳐놓고 공부하게 되면 이걸 어디에 적용하나 의문이 들면서 어디에 적용할지 모르니 이론만 알고 넘어가는데 이런식으로 넘어가는 개념은 시간이 지나면 다 까먹어버려서 밑빠진 독에 물을 붇는 느낌이 계속 납니다. 그래서 저도 다른분에게 조언을 들었을때, 프로젝트 중심으로 공부하라고 하셔서 한달동안 프로젝트 중심을 공부도 해봤습니다. 장점은 바로바로 실습을 적용하니 기억에도 잘남고 기술이 내것이 되는 느낌이 들어서 자신감이 생기는게 좋았습니다. 그런데 단점은 대부분 쓰던 기술만 계속 사용하게 되고 프로젝트에 따라서 안사용하는 기술도 많아서 그런 기술에 대해 모를때 불안감이 생깁니다. 또 전체적으로 이론을 정리하고 들어가는게 아니라 파편화된 지식을 필요할때마다 배워서 적용하는거라 정리가 필요하지 않나? 생각도 들고요.그래서 두가지 방법다 뭔가 정체되어있는 느낌이 많이 들어서 제로초님한테 조언을 얻고 싶습니다. 덕분에 취업도 하고 업무적으로 힘든것도 없는데 오히려 그래서 불안감이 많이 드는 요즘입니다. ㅎㅎ 항상 건강하세요. 감사합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
[View 함수를 통한 요청 처리] 챕터 아카이브 관련 질문 있습니.
<div> <h3>Nav</h3> <div class="alert alert-info"> 지난/다음 달 context data를 지원 </div> <div class="btn-group d-flex w-100"> {% if previous_month.year and previous_month.month %} <a href="{% url 'hottrack:song_archive_month' previous_month.year previous_month.month %}" class="btn btn-primary"> 지난 달 </a> {% endif %} {% if next_month.year and next_month.month %} <a href="{% url 'hottrack:song_archive_month' next_month.year next_month.month %}" class="btn btn-primary"> 다음 달 </a> {% endif %} </div> </div>2014-02 , 2023-09 release_date의 최소, 최대 구간에서 조회시 에러가 납니다. 깃허브 및 강의 내용 확인 결과 처리하는 부분이 반영이 안되어있는거 같습니다./hottrack/archives/2020/week/35/2020년 35주, 2020년 23주, 2020년 14주, 2019년 39주, 2014년 7주다른 부분은 정상 작동 되지만 해당 부분에서 에러가 납니다.2020의 35주는 8월24일, 2014년 7주는 2월10일 부터인데 데이터 베이스에서 조회 할때는 확인 됩니다.매번 장고 프로젝트를 생성하고 환경설정 하는게 번거로워서 미리 초기 세팅을 해놓은 프로젝트에 깃허브 저장소에서 mydjango03-hottrack에서 hottrack 앱을 복사하였고 [View 함수를 통한 요청 처리]의 내용을 그대로 따라 진행했습니다.git clone으로 저장소에서 mydjango04를 받고 테스트 해보려 했었는데 env 파일이 없어서 에러가 나기에 테스트를 못해봐서 왜 저 부분에서만 에러가 나는것인지 궁금해서 질문드립니다.버전 호환성에 따라 문제가 될 수 도 있을거 같아서 제가 설정한 초기 세팅 부분은 혹시 모르니 첨부 해놓았습니다.Pipfile[[source]] url = "https://pypi.org/simple" verify_ssl = true name = "pypi" [packages] django = "*" djangorestframework = "*" djangorestframework-simplejwt = "*" django-filter = "*" django-extensions = "*" django-environ = "*" django-cors-headers = "*" django-template-partials = "*" django-htmx = "*" psycopg2-binary = "*" pillow = "*" markdown = "*" ipython = "*" black = "*" requests="2.31.0" pandas = "2.1.3" django-bootstrap5 = "*" [dev-packages] pytest-django = "*" django-debug-toolbar = "*" httpie = "*" [requires] python_version = "3.12"Env# 암호키 SECRET_KEY=django-insecure-sf($0b=0xjgkzmsyu%*bn6cx9$_b%*rz=%$whp8(-^_q+ # 데이터 베이스 DATABASE_ENGINE=django.db.backends.postgresql DATABASE_HOST=localhost DATABASE_PORT=5432 DATABASE_NAME=mydb4 DATABASE_USER=myuser4 DATABASE_PASSWORD=mypw4 # 코어스 ALLOWED_HOSTS=localhost,127.0.0.1 CORS_ALLOWED_ORIGINS=http://127.0.0.1:3000,http://localhost:3000 CORS_ALLOW_CREDENTIALS=True # 타임존 LANGUAGE_CODE=ko-kr TIME_ZONE=Asia/Seoul USE_TZ=False # 디버그 DEBUG=True INTERNAL_IPS=127.0.0.1
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
11-07 htmx를 이용한 logout 구현 toast_messages.js 에러
hx-post 형식으로 logout을 구현하면서 body가 업데이트 되었을 때 .toast-container를 찾지 못해 에러가 나는 것 같습니다. 해당 강의 영상에서도 오류가 발생 한것으로 보이는데 해결방법을 물어뵈도 될까요? 에러가 발생하는 부분은 core/static/toast-messages.js 파일이며 const container = document.querySelector(".toast-container"); container.insertAdjacentHTML("afterbegin", html);이 부분에서 에러가 발생합니다. 콘솔 출력 오류는 아래와 같습니다. VM31 toast-messages.js:38 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML') at HTMLBodyElement.<anonymous> (VM31 toast-messages.js:38:15) at Object.ce [as trigger] (VM27 htmx.min.js:1:27036) at <anonymous>:6:18 at <anonymous>:7:13 at At (VM27 htmx.min.js:1:23205) at Nt (VM27 htmx.min.js:1:23332) at VM27 htmx.min.js:1:10573 at VM27 htmx.min.js:1:45022 at oe (VM27 htmx.min.js:1:4868) at s (VM27 htmx.min.js:1:44997)
-
미해결처음 만난 리액트(React)
챕터 6 Notification 만들기 실습 질문입니다.
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot교수님 코드르 따라가면서 공부하고 있습니다.Lifecycle method의 호출 확인을 위해 console 창에 들어갔는데 제일 위에 저 경고가 떠있는데 왜 그런건가요??
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
무한스크롤 강의 관련 질문입니다.
export const randomize = ({ min = 0, max = 0, step = 1, }: { min: number; max: number; step: number; }) => { if (max < min || max - min < step) throw Error('wrong arguments'); const num = Math.random() * (max - min) + min; return Math.max(Math.floor(num / step) * step, min); };1. src/service/util.ts 파일에서 randomize 함수를 보면 위와 같습니다.num 값을 구하는 표현식이 min 이상 max 이하가 되려면 다음과 같이 바뀌어야 할 것 같습니다.const num = Math.floor(Math.random() * (max - min + 1)) + min; -> const num = Math.floor(Math.random() * (max - min + 1) + min)export type Datum = { index: number; id: string; title: string; description: string; }; export type FetchState = 'loading' | 'fetched' | 'idle' | 'error'; export type State<T> = { data: T[][]; state: 'loading' | 'fetched' | 'idle' | 'error'; };src/components/07_infiniteScroll/vanilla/infiniteFetcher.ts 에서 FetchState 타입을 활용하여 리팩토링 할 수 있을 것 같습니다.export type State<T> = { data: T[][]; state: FetchState; };
-
해결됨Next + React Query로 SNS 서비스 만들기
리액트쿼리 prefetch 시에 QueryClient 생성에 대해 질문드립니다.
csr 에서는 useQueryClient로 생성된 QueryClient를 가져와 사용하는 반면에ssr 에서 prefetch 할 때에는 QueryClient 를 새로 생성해서 사용하시더라구요.그럼 ssr에서 생긴 QueryClient csr에서 생긴 QueryClient 두개가 존재하게 되는데, 리액트쿼리가 hydrate 하는 과정에서 알아서 합쳐주는 건지 그 원리가 궁금합니다. 2. prefetch를 할 때마다 QueryClient를 새로 생성해야 하는지 아니면 ssr에서 사용할 QueryClient를 하나 생성해서 공유하는 방식으로 사용해야 하는 것인지, 또 공유해서 사용한다면 예제가 있을까요? 만약 prefetch 할 때마다 QueryClient를 새로 생성해야 한다면 성능상에 문제는 없을까요? prefetch를 난발하는 것을 멈추고 조심히 사용해야 할까요?강의 덕분에 많이 배웠습니다. 좋은 강의 감사합니다.
-
미해결웹 게임을 만들며 배우는 React
react devtool이 enable 않됩니다.
노땅 개발자 입니다. 백엔드만 하다가 이번에 프런트 학습 중입니다. 감사합니다. 질문은 말씀하신 대로 React devtools 을 설치했습니다. 그리고 소스는 제로님 깃에서 react18을 zip으로 받아서 압축 풀고 vscode에서 압축 푼 폴더 오픈해서 파일 수정하고 있습니다. 수정하고 나서 파일 실행은 현재 구구단 아래 like-button-jsx.html을 크롬에서 끌어당겨서 실행중 입니다. 그롬 url 보면 file:///C:/Users/CHY/react_project/react-webgame-react18/1.%EA%B5%AC%EA%B5%AC%EB%8B%A8/like-button-jsx.html 이렇게 url 표시됩니다. 강의영상을 보면 제로님 개발툴에는 node-modules 폴더가 있던데 혹시 깃파일 앞축 풀고 1~8 개임폴더별 노드 설치해야 하는것인지요?그래서 그런 것인지 *.html 파일이 실행은 되는데 react devtool이 enable 되지 않고..."This is a restricted browser page. React devtools cannot access this page." 메시지가 출력됩니다. 동영상은 자세히 보면 제로님 실행 하실 때 url에 localhost...라고 나오던데 어떻게 실행하면 되는지요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
백틱 적용이 안 돼요..
위 화면과 같이 백틱으로 감싸서 사용할 때, 적용이 안 되는데, 서칭을 해보면 Browser 호환 문제라는 말들이 있습니다. 영상에서와 같은 Chrome을 통한 Console창에서 실습 중인데 무엇이 문제일까요?