전체 글(182)
-
프로젝트 기초공사2
보호되어 있는 글입니다.
2022.11.24 -
[React] 프로젝트 기초공사1
보호되어 있는 글입니다.
2022.11.24 -
[React] 페이지 라우팅2 - React Router 응용
보호되어 있는 글입니다.
2022.11.24 -
[React] 페이지 라우팅1 - React Router 기본
보호되어 있는 글입니다.
2022.11.21 -
[JS] 자바스크립트의 Intl API
1. Intl API 소개 여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정을 국제화(internalization) 자바스크립트에서는 이러한 데이터 포멧팅 문제를 해결해주기 위해서 Intl API를 제공하고 있다. 2. Intl.DateTimeFormat Intl API의 Intl.DateTimeFormat를 사용하면 날짜나 시간 데이터를 쉽게 국제화를 할 수 있다. 포멧팅 옵션으로 dateStyle과 timeStyle이 자주 사용되는데 full, long, medium, short 중 하나로 설정할 수 있다. > new Intl.DateTimeFormat("ko", { dateStyle: 'full' }).format(new Date()) '2022년 3월 8일 화요일' ..
2022.10.12 -
[vue] 컴포넌트에서 watch() 사용하여 router 이동 감지하기
보호되어 있는 글입니다.
2022.09.14 -
[Vue] router
보호되어 있는 글입니다.
2022.09.14 -
[React] useReducer - 복잡한 상태 관리 로직 분리하기
보호되어 있는 글입니다.
2022.08.12 -
[React] useCallback
보호되어 있는 글입니다.
2022.08.10 -
[React] 최적화1 - useMemo : 함수의 결과값을 memorized
1. 불필요하게 자꾸 호출되는 문제 발생 // 감정분석 const getDiaryAnalysis = () => { console.log('감정분석') const goodCount = data.filter((item) => item.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio } } const { goodCount, badCount, goodRatio } = getDiaryAnalysis(); 감정을 계산하는 함수를 만들었는데, 우리가 일기를 수정할 때 마다 콘솔에 계속 찍히게..
2022.08.04 -
[React] API 호출하기
1. jsonplaceholer JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com 2.App.js const getDate = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/comments') .then((res) => res.json()); const ..
2022.08.04 -
[React] lifeCycle 제어하기 - useEffect
1. useEffect 훅 이란? 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. side Effect React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문입니다. 2. 선언방법 첫번째 인자(effect)는 함수 두번째 인자는 배열(deps) import react, { u..
2022.08.03 -
[React] 배열 사용하기4 - 데이터 수정하기
보호되어 있는 글입니다.
2022.08.02 -
[React] 배열 사용하기3 - 데이터 삭제하기
보호되어 있는 글입니다.
2022.08.01 -
[React] 배열 사용하기2 - 데이터 추가하기
보호되어 있는 글입니다.
2022.08.01 -
[React] 배열 사용하기1 - 리스트 렌더링(조회)
보호되어 있는 글입니다.
2022.07.29 -
[React] Console.log 두 번
vue에서는 console.log가 두번 찍힌적이 없었는데 React에선 중복으로 찍히는거다.. 파일 전체에서 console.log 쓴 곳 검색해도 분명하나 밖에 없는데 말이지!!! 그래서 구글링1초만에 알아냈다. 갓구글 1. src > index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //
2022.07.29