172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해당 강의 3분 30초 이후부터 컴포넌트 창에 들어가서 DiaryList 컴포넌트의 DiaryItem들을 확인하는 장면이 나와있습니다. 강사님의 화면에서는 키값들이 0부터 잘 출력되지만 저는 아래와 같이키값들이 20부터 39까지 출력됩니다. useEffect를 건들이기 전 일기를 추가하는 부분에서는 키값들이 0부터 잘 출력되는 것을 보아 이번 강의에서 건들인 부분이 문제인것 같아 강사님이 올려주신 App.js 코드를 복붙하여 실습해보아도 해당 현상이 일어납니다. 그 이유를 알 수 있을까요?
해결됨
[React 1부] 만들고 비교하며 학습하는 React
안녕하세요. 강사님께서 TabLabel을 아래와 같이 작성하셨는데, Key에 []가 들어가 있는 경우는 처음 보아서요. const TabLabel = { [TabType.KEYWORD]: "추천 검색어", [TabType.HISTORY]: "최근 검색어", }; Key를 배열로 선언하신 것인가요? 이와 관련된 문법은 어디서 찾아볼 수 있을까요?
해결됨
[React 1부] 만들고 비교하며 학습하는 React
안녕하세요. storage를 동적으로 변경하는 경우 현재 기준으로 어떤 부분의 코드를 변경하는 것이 좋을지 문의드립니다. 현재 코드에서는 아래와 같이 정적인 데이터(storage.js)를 main.js에서 주입해주는데요. // main.js import Store from "./store.js"; import storage from "./storage.js"; function main() { const store = new Store(storage); new Controller(store, views); } 만약 storage 데이터를 ajax를 통해 동적으로 받아온다면, main.js와 Controller.js는 그대로 두고 Storage.js와 storage.js 파일만 변경하면 되나요? 즉, 아래 코드 주석처럼 하면 될까요? 또한, AJAX 요청은 Controller와 Storage 중 어느 부분에 작성하는 것이 일반적인가요? // Controller.js // 변경 없음 export default class Controller { constructor(store, { searchFormView, searchResultView }) { this.store = store; this.searchFormView = searchFormView; this.searchResultView = searchResultView; this.subscribeViewEvents(); } subscribeViewEvents() { this.searchFormView .on("@submit", (event) => this.search(event.detail.value)) // } search(searchKeyword) { this.store.search(searchKeyword); } } // storage.js // 데이터를 빈 배열로 변경 const storage = { keywordData: [], historyData: [], productData: [], }; export default storage; // Store.js export default class Store { constructor(storage) { if (!storage) throw "no storage"; this.storage = storage; this.searchKeyword = ""; this.searchResult = []; } search(keyword) { this.searchKeyword = keyword; this.searchResult = // 여기서 AJAX 요청을 통해 storage.js의 상태 관리? 아니면 Controller에서 AJAX 요청? } }
미해결
(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
const getCurrentLocation = () => { navigator.geolocation.getCurrentPosition((position)=>{ console.log('위치', position.coords.latitude, position.coords.longitude); // 위치 37.4838677 126.902839 getWeatherByCurrentLocation(position.coords.latitude, position.coords.longitude); }); } const getWeatherByCurrentLocation = async(latitude, longitude) => { let apiKey = '0619cf6a981bec8d01375e5576139e86'; let apiUrl = `https://api.openweathermap.org/data/3.0/onecall?lat=${latitude}&lon=${longitude}&appid=${apiKey}`; let response = await fetch(apiUrl); let data = await response.json(); console.log('data', data); } useEffect(()=>{getCurrentLocation()}, []); 이렇게 작성해서 돌려보니 이런식으로 401에러가 납니다....원인을 잘 모르겠어요!ㅠㅠ
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
안녕하세요 리액트로 웹개발 시작한 6개월차 신입개발자 입니다. 강의 정말 잘 보고있는데 너무 감사하게도 우연히 저희 안건과 개발환경이 많이 겹쳐서 큰 도움받고있습니다! 현재 안건에서 쓰는 리액트버전이 15.6.1인데 이번에 최신버전 v18.2.0로 업데이트하는 미션 이 떨어졌는데어떻게 헤쳐나가야할지 너무 답답해서 고민끝에 질문드립니다... 현재 안건의 스펙입니다. ・안건종류: 데이트 매칭 어플 ・메인언어: react ・상태관리: redux ・프레임워크 : koa ・미들웨어: redux-thunk ======== 개요 ======== 일단 검색으로는 잘 정리된곳 찾기가 어려워서 리액트공식문서와 책 위주로 참고해서 정리중인데요, 우선 큰 틀을 짜고 문제점들을 세분화하면서 틀을 좁혀가려고합니다.. react, react-dom 최신버전 인스톨후 에러를 우선순위별로 리스트화 하기 ・ ReactDOM.render is no longer supported in React 18. Use createRoot instead. ・Warning: componentWillMount has been renamed, and is not recommended for use. ・ componentWillReceiveProps has been renamed ・You have triggered an unhandledRejection, you may have forgotten to catch a Promise rejection 공동작업을 위한 규칙 리스트화 하기 ・class 컴포넌트 → function 컴포넌트로 변경 ・life cycle → useEffect 로 처리, 또는 커스텀 hook ・react-redux 의 connect 함수 → useSelector, useDispatch Hooks로 리덕스와 컴포넌트 연동 ・state 업데이트시 불변성을위한 spread 연산자, immer 사용 ・코드 스플리팅: 라우팅에 React.lazy or Suspense 적용 ・react-redux 디렉토리 구조: 일반구조(component, container, reducer)-> ducks 패턴 사용해서 파일 모듈화 의존중인 라이브러리및 패키지 업데이트 2와 3을 진행하며 기타 에러를 해결 ======== 질문 ======== 3번의 [공동작업을 위한 규칙 리스트화]의 경우, 검색과 에러기준으로 만들고있는데 너무 부족한것같습니다. 프로젝트 버전 업그레이드시, 기준이 되는 컨텐츠가 있는지 궁금합니다. 현재 리액트 구버전 15부터 16,17,18 최신버전까지의 모든 업데이트 변경점을 체크해서 일일이 적용해야하는지(←React공식문서블로그에서), 단순히 15->18로 점프해서 바뀐사항만 적용해도되는지 현재 구버전에서 사용중인 각종 패키지, 라이브러리 업데이트는 어떤 방향으로 진행해야할지-> 이부분이 제일 손대기 어려울정도로 막막합니다. 리액트버전업뎃처럼 똑같이 최신버전인스톨, 에러체크, 버전별 변경점 체크후 적용및 수정 하면 될까요? 입사 3개월차에 선배나 가이드없이 진행중이라 정말 고민끝에 질문드립니다… 혹시 시간나실때 답변이나 조언해주시면 정말 감사하겠습니다……(살려주세요…..) 잘부탁드려요 ! (제발 구원의 손길을 ㅠㅠㅠ) package.json (react만 최신인스톨) "dependencies": { "@paypal/paypal-js": "4.1.0", "babel-runtime": "^6.25.0", "chart.js": "^2.6.0", "classnames": "^2.2.3", "es6-promise": "^4.1.1", "exif-js": "^2.2.1", "firebase": "^7.7.0", "history": "^3.3.0", "koa": "^1.2.0", "koa-static": "^2.0.0", "lodash.reverse": "^4.0.1", "lodash.sortby": "^4.5.0", "lodash.throttle": "^4.0.0", "lodash.uniqby": "^4.5.0", "moment": "^2.17.0", "moment-timezone": "^0.5.13", "node-fetch": "^2.6.6", "normalizr": "^2.3.0", "object-assign": "^4.0.1", "pm2": "^2.6.1", "prop-types": "^15.5.10", "react": "^18.2.0", "react-chartjs-2": "^2.5.6", "react-dom": "^18.2.0", "react-ga": "^2.1.2", "react-helmet": "^5.1.3", "react-infinite-scroller": "^1.2.4", "react-redux": "^5.0.2", "react-router": "^3.0.5", "react-router-redux": "^4.0.1", "react-router-scroll": "^0.4.1", "react-scroll": "1.5.4", "react-slick": "^0.14.5", "react-swipeable": "^4.0.1", "react-textarea-autosize": "^5.0.6", "redux": "^3.7.2", "redux-actions": "^2.2.1", "redux-api-middleware": "^1.0.3", "redux-logger": "^3.0.6", "redux-thunk": "^2.4.0" }, "devDependencies": { "babel-cli": "^6.7.5", "babel-eslint": "^8.2.3", "babel-plugin-espower": "^2.3.1", "babel-plugin-module-resolver": "^4.1.0", "babel-plugin-transform-async-to-generator": "^6.24.1", "babel-plugin-transform-class-properties": "^6.6.0", "babel-plugin-transform-export-extensions": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.3.13", "babel-register": "^6.7.2", "babelify": "^7.3.0", "browserify": "^13.0.0", "css-mqpacker": "^6.0.1", "csswring": "^6.0.0", "envify": "^4.1.0", "eslint": "^4.19.1", "eslint-config-tapplint": "^2.0.1", "eslint-config-tapplint-react": "^1.0.0", "eslint-plugin-react": "7.4.0", "gulp": "^3.9.0", "gulp-consolidate": "^0.2.0", "gulp-htmlmin": "^3.0.0", "gulp-iconfont": "^8.0.0", "gulp-imagemin": "^3.3.0", "gulp-notify": "^3.0.0", "gulp-plumber": "^1.0.1", "gulp-postcss": "^6.4.0", "gulp-rename": "^1.2.2", "gulp-sketch": "^1.0.5", "gulp-sourcemaps": "^2.0.0", "husky": "^0.14.3", "karma": "^1.1.0", "karma-browserify": "^5.0.5", "karma-chrome-launcher": "^2.2.0", "karma-mocha": "^1.0.1", "karma-mocha-reporter": "^2.0.3", "lint-staged": "^7.2.2", "lodash": "^4.11.1", "md5-file": "^4.0.0", "mocha": "^3.5.0", "postcss": "^5.2.17", "postcss-cssnext": "^3.1.1", "postcss-import": "^10.0.0", "postcss-media-variables": "^2.0.0", "postcss-nesting": "^2.3.1", "power-assert": "^1.4.4", "react-addons-test-utils": "~15.6.0", "react-prefixr": "^0.1.0", "require-dir": "^0.3.2", "stylelint": "^7.13.0", "stylelint-config-standard": "^16.0.0", "stylelint-order": "^0.5.0", "tapplint": "^0.9.0", "terser": "^4.6.11", "uglifyify": "^5.0.2", "watchify": "^3.7.0", "yargs": "^6.0.0" }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 노드 버전이 올라가서 노드도 16.17로 내리고 나머지도 다 버전 내려서 버전에 맞게 설정하고 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 까지 했는데 노션에 있는 것 처럼 페이지와 api 여러 등등이 뜨지 않습니다 뭐가 문제일까요?ㅠㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
post 로 id, password 전송시 => 크롬 개발자 도구, 네트워크, Request 에 보면 id, password 가 그대로 노출되는데 숨길순 없나요? 브라우저를 사용하는 유저가 보낸 거기 때문에 보안을 안해도 상관없을까요?
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
제공해주신 예제 파일에서는 performance tab으로 돌려보면 어떤 컴포넌트의, 어떤 메서드인지 알 수 있는데 vue app을 실행시키고 똑같이 돌려보면 "컴파일 코드" 라고만 되어 있어서 이게 어떤 메서드인지 알 수가 없습니다. 이런 경우에는 어떻게 식별할 수 있을까요? 혹은 어떤 설정을 바꾸면 될까요?
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). registerPage에서 넘어가지 않고 이런 오류가 계속 뜨는데 아무리 찾아봐도 안 나오네요,,
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 후 localhost :3000으로 접속하면 404 에러가 뜹니다 어떻게 해결 할 수 있을까요?
해결됨
따라하며 배우는 리액트 테스트 [2023.11 업데이트]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 안녕하세요! 강의 너무 잘 듣고 있습니다! 감사해요 오류를 잡으려고 노력해봤는데도 잘 안돼서 질문 남깁니다 calculate.test.js파일의 toHaveTextContent()부분에서 모두 오류가 나고 있습니다. 선생님이 주신 소스코드와 제 코드를 모두 비교해봤는데 다 똑같더라구요. 제가 인지하지 못한 오류가 있는지 한 번 봐주실 수 있으실까요? 부탁드립니다ㅜ 오류 부분 calculate.test.js import { render, screen } from "../../../test-utils"; import userEvent from "@testing-library/user-event"; import Type from "../Type"; import OrderPage from "../OrderPage"; test("update products total when products change", async () => { render(<Type orderType="products" />); const productsTotal = screen.getByText("상품 총 가격: ", { exact: false }); expect(productsTotal).toHaveTextContent("0"); // 아메리카 여행 상품 한개 올리기 const americaInput = await screen.findByRole("spinbutton", { name: "America", }); userEvent.clear(americaInput); userEvent.type(americaInput, "1"); // 이 상품을 하나 산다는 뜻 expect(americaInput).toHaveTextContent("1000"); }); - Type.js import React, { useContext, useEffect, useState } from "react"; import Products from "./Products"; import axios from "axios"; import ErrorBanner from "../../components/ErrorBanner"; import Options from "./Options"; import { OrderContext } from "../../contexts/OrderContext"; const Type = ({ orderType }) => { const [items, setItems] = useState([]); const [error, setError] = useState(false); const [orderDatas, updateItemCount] = useContext(OrderContext); // OrderContext.js의 return [{ ...orderCounts, totals }, updateItemCount]; 을 구조분해 useEffect(() => { loadItems(orderType); }, [orderType]); const loadItems = async (orderType) => { try { let response = await axios.get(`http://localhost:5000/${orderType}`); setItems(response.data); } catch (error) { setError(true); } }; if (error) { return <ErrorBanner message="에러가 발생했습니다" />; } const ItemComonents = orderType === "products" ? Products : Options; const optionItems = items.map((item) => ( <ItemComonents style={{ border: "2px solid red" }} key={item.name} name={item.name} imagePath={item.imagePath} updateItemCount={(itemName, newItemCount) => updateItemCount(itemName, newItemCount, orderType) } /> )); let orderTypeKorean = orderType === "products" ? "상품" : "옵션"; return ( <div> <h2>주문종류</h2> <p>하나의 가격</p> <p> {orderTypeKorean} 총 가격: {orderDatas.totals[orderType]} </p> <div style={{ display: "flex", flexDirection: orderType === "options" && "column", // }} > {optionItems} </div> </div> ); }; export default Type; orderContext.js import { createContext, useState, useMemo, useEffect } from "react"; export const OrderContext = createContext(); const pricePerItem = { products: 1000, options: 500, }; function calculateSubtotal(orderType, orderCounts) { let optionCount = 0; for (const count of orderCounts[orderType].values()) { optionCount += count; } return optionCount * pricePerItem[orderType]; } export function OrderContextProvider(props) { const [orderCounts, setOrderCounts] = useState({ products: new Map(), options: new Map(), }); const [totals, setTotals] = useState({ products: 0, options: 0, total: 0, }); useEffect(() => { const productsTotal = calculateSubtotal("products", orderCounts); const optionsTotal = calculateSubtotal("options", orderCounts); const total = productsTotal + optionsTotal; setTotals({ products: productsTotal, options: optionsTotal, total, }); }, [orderCounts]); const value = useMemo(() => { function updateItemCount(itemName, newItemCount, orderType) { const newOrderCounts = { ...orderCounts }; const orderCountsMap = orderCounts[orderType]; orderCountsMap.set(itemName, parseInt(newItemCount)); setOrderCounts(newOrderCounts); } return [{ ...orderCounts, totals }, updateItemCount]; }, [orderCounts, totals]); return <OrderContext.Provider value={value} {...props} />; }
미해결
따라하며 배우는 리액트 네이티브 기초
안드로이드 에뮬레이터를 실행하려고하는데 에러가 나서 첨엔 adb 명령어도 안되서 brew install android-platform-tools 명령어로 설치한담에 위 제목같이 명령어 실행후 다시 해봤는데도 안되네요. 어떻게 해야 에뮬레이터가 실행 될까요? ㅠㅠ -> 아예 지우고 2강 전부터 다시 만들어서 실행하니 되는거같네요 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그대로 따라한거 같은데 태그마다 빨간 줄이 있는 이유가 뭔지 모르겠어요 ㅜ 작동은 잘 됩니다! 항상 감사합니다
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
안녕하세요, 강의를 시작할려고하는 학생입니다!! 현재 lecture-1 강의를 clone 받고 실행을 시킬려고 하는데 Error: error:0308010C:digital envelope routines::unsupported 해당 오류 코드를 뱉으면서 npm run start가 되지가 않습니다. 현재 mac, node v18.12.1을 사용하고 있는데 node 버전을 맞춰야 하는건가요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
tdd 앱 개발 초입 강의에서 질문 있습니다. App.test.js에서는 screen.getByTestId("counter")를 했고, App.js 에서는 <h3> 내부에 data-testid="counter" 라고 되어 있는데요. 어떻게 App.js 내부의 <h3> 태그의 data-testid가 getByTestId로 불릴 수 있는지 궁금합니다..! 그리고 넘어간 정보가 왜 0이 아니라 TextContent가 맞는걸까요?
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import "reflect-metadata"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 해당 에러 발생 후 , package.json 파일에 type 을 추가 후 실행 하였더니, 충돌 에러가 발생합니다 ㅠ 어떻게 해결 해야 하는지 조언좀 부탁드립니다. https://github.com/bottlesun/study/tree/master/09-redditClone-nextjs
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
const subs = await AppDataSource.createQueryBuilder() .select( `s.title,s.name,${imageUrlExp} as "imageUrl", count(p.id) as "postCount"` ) .from(Sub, 's') .leftJoin(Post, 'p', `s.name = p."subName"`) .groupBy('s.title, s.name, "imageUrl"') .orderBy(`"postCount"`, 'DESC') .limit(5) .execute(); 위의 코드에서 백틱 ``과 따옴표들 '', "" 사용방식들에대한 기초적인 지식을 쌓으려면 어떻게 검색해보면될까요? 일단 제 나름대로 접근식으로는 .from이나 .orderBy 이런건 typeORM 문법인거같아서 찾아보니 문서에는 백틱은 안적혀있는거같고 따옴표로만 작성해준거같아서요.. 혹시 변수가 들어가있으면 ``를써주는게맞나요? 근데 .orderBy부분에서 `"postCount"`, 이부분이 좀 이해가 안가는게 백틱에 또 큰따옴표를 감싸주셔서..
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn add node-sass를 실행했을 때 gyp 에러가 발생합니다.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
profile의 저장되어있는 first_name의 키 값을 찾아내려고 하니깐 해당 오류가 발생합니다. 어떻게 접근해서 가져와야할까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { try { const cookie = req.headers.cookie; console.log(req.headers.cookie); // 쿠키가 없다면 에러를 보냄 if (!cookie) throw new Error('Missing auth token cookie'); // 쿠키가 있다면 그 쿠키를 이용해서 백엔드에서 인증 처리하기 await axios.get('/auth/me', { headers: { cookie } }); return { props: {} }; } catch (error) { // 백엔드에서 요청에서 던져준 쿠키를 이용해 인증 처리할 때 에러가 나면 // login 페이지로 이동 res.writeHead(307, { Location: '/login' }).end(); return { props: {} }; } }; axios.get에 파라미터로 헤더.쿠키 로 넣어준걸까요? 근데 순서대로 코드가 동작하게되면 if문에 걸려서 영원히 쿠키가 없어 페이지가 로그인페이지로 이동될텐데 제가 잘못생각한걸까요? 두번쨰로 리턴 props:{}로 해주신 이유에대해서 궁금합니다. 다른식으로 그냥 return; 이렇게 작성하고 끝내도 괜찮을까요?
