I'm a Fig, Not a Pig

목차 1. useCallback과 Memoization 2. useCallback 구조와 특징 3. useCallback 사용하기 1. useCallback과 Memoization useCallback은 Memoization 기법으로 컴포넌트의 성능을 최적화시켜주는 도구이다. Memoization 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야한다면 이전에 이미 계산해둔 값을 캐싱해서 메모리에서 꺼내서 재사용하는 최적화기법이. 필요할때마다 매번 계산을 하는 것이 아니라 useMemo를 통해 캐싱해둔 값을 메모리에서 꺼내와서 재사용할 수 있다 아래와 같이 useMemo의 인자로 콜백함수를 넣어주면 이 함수가 return하는 값을 Memoization 해준다. useMemo(() => { retur..

1. node js 사용자 버전 설치2. 바탕화면, 내문서 등 원하는 곳에서 새로운 폴더 생성(이름: react-for-beginners)3. vscode에서 해당 폴더 열어줌4. vscode 상단 메뉴에서 Terminal - New Terminal 클릭 (명령어로 vscode 제어 가능)5. node -v 입력 후 현재 버전이 표시되면 node js 설치 성공한 것6. create-react-app 으로 리액트 프로젝트 생성    terminal에 npm init react-app 혹은 npm init react-app .을 입력하고 엔터(현재 폴더에 개발환경을 셋팅하겠다는 뜻)*이 때 뭐 설치하겠냐고 하면 y 눌러서 설치해주시면 됩니다.7. Success!가 뜨면 설치 완료8. 개발모드..

[동향]IT 실패의 10가지 요인은 무엇일까? (kisti.re.kr) [동향]IT 실패의 10가지 요인은 무엇일까? 일반적으로 독창적인 정보기술(IT)이 사업적으로, 조직적으로, 또는 문화적인 이유로 실패하는 사례를 많이 접했을 것이다. 물론 새로운 기술의 도입에는 부작용이 따르기 마련이라는 사실에 동 scienceon.kisti.re.kr IT 프로젝트를 망치는 방법들 (slideshare.net)

목차 1. useMemo 2. useMemo 구조 3. useMemo 예제1 3. useMemo 예제2 컴포넌트 최적화를 위해 사용되는 대표적인 hook은 useMemo와 useCallback이다. 오늘은 중에서useMemo에 대해 공부해보려고 한다. 1. useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산..

목차 1. 동기 (Synchronous)와 비동기(Asynchronous) 2. 동기와 비동기의 장단점 3. 동기적 처리 4. 비동기적 처리 1. 동기 (Synchronous)와 비동기(Asynchronous) 동기(synchronous) : 동시에 일어나는 동기는 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이므로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어저야 한다. 비동기(Asynchronous) : 동시에 일어나지 않는 비동기는 동시에 일어나지 않는다는 뜻이다. 요청과 그 결과가 동시에 일어나지 않을 것이라는 약속이다. 2. 동기와 비동기의 장단점 - 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있..

목차1. OAuth란? 2. OAuth 참여자 3. Client 등록 4. OAuth 2.0의 동작 메커니즘 5. OAuth 2.0의 스코프 1. OAuth란?OAuth: 구글, 페이스북, 트위터와 같은 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제3자 클라이언트(우리의 서비스)가 사용자의 접근 권한을 위임(Delegated Authorization)받을 수 있는 표준 프로토콜쉽게 말해, 우리의 서비스가 우리 서비스를 이용하는 유저의 타사 플랫폼 정보에 접근하기 위해서 권한을 타사 플랫폼으로부터 위임 받는 것이다. 2. OAuth 참여자OAuth 동작에 관여하는 참여자는 크게 세 가지로 구분할 수 있다. 1. Resource OwnerClient가 제공하는 서비스를 통해 로그인하는 실제 유저 ..

목차 1. useReducer 훅이란? 2. useReducer 구성요소 2-1) useReducer 함수 2-2) dispatch 함수 2-3) 3. reducer 함수 1. useReducer 훅이란? useRedcuer Hook은 react가 상태관리를 위한 reducer function에 접근할 수 있게 해준다. useState Hook과 매우 비슷한데, 차이점이라면 useReducer는 좀 더 복잡한 로직과 상태관리에서 사용되는 경우가 많다. 2. useReducer 구성요소 1. useReducer 함수 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init..

1. behance https://www.behance.net/ Search Projects | Photos, videos, logos, illustrations and branding on Behance www.behance.net 퀄리티 높은 참고자료 찾을 수 있는 사이트. 해외 자료가 필요하거나 영감을 받고 싶을 때 보기 좋은 사이트이다. 2. dribbble https://dribbble.com/shots Dribbble - Discover the World’s Top Designers & Creative Professionals Mobile IOS App Design for Tesla | UX Design | UI Design dribbble.com behance와 유사한 사이트. 3. awww..

목차 1. 자바스크립트의 드래그 앤 드롭 API 2. draggable 항목의 이벤트 3. drop target에 대한 이벤트 4. dataTransfer 객체를 활용한 자료 전송 5. 예제 6. 드롭 타겟의 이벤트 제어하기 1. 자바스크립트의 드래그 앤 드롭 API HTML5는 공식적으로 드래그 앤 드롭 스팩을 공개했다. 대부분의 최신 웹 브라우저는 HTML5 스팩을 기반으로 네이티브 드래그 앤 드롭 기능을 구현 할 수 있다. 기본적으로 이미지와 텍스트만 끌 수 있으며 이미지를 끌려면 마우스 버튼을 누른 상태에서 이동하면 된다. 텍스트를 끌려면 일부 텍스트를 하이라이트 해놓고 이미지를 끌 때와 같은 방식으로 끌어다 놓으면 된다. 요소를 끌기 위해서는 HTML 태그에 draggable=true 속성을 넣..

목차 1. 무한 스크롤이란? 2. 구현 방식 3. 자바스크립트 fetch API 4. async / await 5. 구현 과정 6. 전체 코드 1. 무한 스크롤이란? 컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해 맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다. 2. 구현 방식 스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(append)하는 방식으로 구현했다. 3. 자바스크립트 fetch API 자바스크립트에서는 fetch로 리소스를 비동기 요청을 할 수 있다. 주로 API를 호출하고 응답 데이터를 받아오는 데에 주로 사용한다. fetch("https://jsonplaceholder.typicode.com/posts") .then(function(res)..