분류 전체보기 (65) 썸네일형 리스트형 [패스트캠퍼스 수강후기] 프론트엔드 강의 41회차 미션 이번 강의에서는 리액트 프로젝트에서 타입스크립트를 사용하는 법에 대해서 수강했다 (36. 모던 리액트 : 타입스크립트와 리액트 함께 사용하기-10개 클립) 소개 타입스크립트를 사용하는 이유 1. IDE 를 더욱 더 적극적으로 활용 (자동완성, 타입확인) 자동완성이 잘 돼서 해당 함수가 필요로 하는 파라미터, 어떤 값을 반환하는지 알 수 있음 2. 실수방지 자바스크립트는 위클리타입언어, 변수에 문자열, null, 배열 다 넣을 수 있음 코드가 실행되어야 실수한 부분이 있는지 알 수 있는데 타입스크립트는 사용하면 이런 함수, 컴포넌트 등의 타입 추론이 되다보니, 코드를 실행하지 않더라도 IDE 상에서 실수를 바로 알 수 있음 3. 자바스크립트를 알고 있다면, 금방 배운다 타입스크립트 연습 자바스크립트 프로젝.. [패스트캠퍼스 수강후기] 프론트엔드 강의 40회차 미션 오늘은 35. 7장 | 벨로퍼트와 함께 하는 모던 리액트 : 리덕스 미들웨어 강좌에서 나머기 12개 클립을 수강했다 API 재로딩부분이 너무 복잡해서 몇번을 다시봤는지 모르겠다... API 재로딩 문제 해결하기 *포스트 목록 재로딩 문제 해결하기 (1) 만약 데이터가 이미 존재한다면 요청을 하지 않음 에서 이부분 수정 useEffect(() => { if (data) return; dispatch(getPosts()); }, [data, dispatch]); (2)로딩중... 을 띄우지 않는 것, 뒤로가기를 통해 다시 포스트 목록을 조회 할 때 최신 데이터를 보여줄 수 있음 부분 수정 export const handleAsyncActions = (type, key, keepData = false) => .. [패스트캠퍼스 수강후기] 프론트엔드 강의 39회차 미션 오늘은 35. 7장 | 벨로퍼트와 함께 하는 모던 리액트 : 리덕스 미들웨어 강좌에서 11개 클립을 수강했다 * 리덕스 미들웨어 리덕스가 지니고 있는 핵심 기능, Context API 또는 MobX를 사용하는것과 차별화가 되는 부분 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업가능 (1)특정 조건에 따라 액션이 무시되게 만들 수 있습니다. (2)액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다. (3)액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. (4)특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다. (5)특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다. 주로 비동기.. [패스트캠퍼스 수강후기] 프론트엔드 강의 38회차 미션 오늘은 34강 리덕스 부분에 대해서 수강했다 끊임없이 업데이트 되는 부분이라 많이 쓸일은 없다지만, 과거의 작품들이 있어서 쓸 줄은 알아야 한다는 게 이 강의에선 참 많다 ... *리덕스(redux) 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있음 리액트에서 사용하기 위해 만들어진 라이브러리이지만, JavaScript 환경에서 사용 할 수도 있음 (많이 씀) * 리덕스를 사용하는 것 과 Context API를 사용하는 것의 차이 1. 리덕스에는 미들웨어가 있음 액션 객체가 리듀서에서 처리되기 전에 원하는 작업들을 수행 할 수 있음 주로 비동기 작업을 처리 할 때 많이 사용 (1)특정 조건에 따라 액션.. [패스트캠퍼스 수강후기] 프론트엔드 강의 37회차 미션 오늘은 33강 router에 대해서 수강했다 33. 5장 | 벨로퍼트와 함께 하는 모던 리액트 : Router 중간에 갑자기 사이트가 다운되서 한동안 에러페이지가 뜨다가... 완료 * react-router 를 통한 리액트 싱글 페이지 애플리케이션 만들기 SPA (Single Page Application) : 페이지가 1개인 어플리케이션, 예전에는 여러 페이지로 구성되어 유저가 요청할 때마다 페이지가 새로고침되며 로딩할 때마다 서버로부터 리소스를 전달받아 해석 후 렌더링 라우팅 : 어떤 주소에 어떤 UI를 보여줄지, 다른 주소에 따라 다른 뷰 이전에는 라우팅을 클라이언트가 담당, 이제는 유저가 담당 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하게 하고, 우선 어.. [패스트캠퍼스 수강후기] 프론트엔드 강의 36회차 미션 오늘은 투두리스트 만드는 법이랑 API연동하는 법에 대해서 수강했다 31. 멋진 투두리스트 만들기 32. API 연동 좀 길고 어려웠지만, 다음주에 바쁠 것 같아서 미리 더 들었다... 투두리스트 (해야할 일 목록)을 위해 만들어야 할 5개 컴포넌트 1. TodoTemplate : 투두리스트의 레이아웃을 설정하는 컴포넌트, 페이지 중앙에 그림자가 적용된 흰색 박스 2, TodoHead :오늘의 날짜와 요일, 앞으로 해야 할 일이 몇 개 남았는지 3. TodoList : 할 일에 대한 정보가 들어있는 todos 배열을 내장함수 map 을 사용하여 여러개의 TodoItem 컴포넌트를 렌더링 4. TodoItem :각 할 일에 대한 정보를 렌더링해주는 컴포넌트, 좌측에 있는 원을 누르면 할 일의 완료 여부를 .. [패스트캠퍼스 수강후기] 프론트엔드 강의 35회차 미션 오늘은 30. 2장 | 벨로퍼트와 함께 하는 모던 리액트 강좌를 수강했다 자바스크립트 배울때보단 훨씬 더 지루했다 * sass .scss가 있는데 .scss가 더 많이 쓰여서 그 위주로 배울 것 * Button 컴포넌트 만들기 import React from 'react'; import './Button.scss'; function Button({ children }) { return {children}; } export default Button; $blue: #228be6; // 주석 선언 .Button { display: inline-flex; align-items: center; // 추가로 입력해야 텍스트가 버튼의 중앙으로 justify-content: center; color: white; f.. [패스트캠퍼스 수강후기] 프론트엔드 강의 34회차 미션 오늘은 29. 1장 | 벨로퍼트와 함께 하는 모던 리액트 : 리액트 입문 부분에서 14개의 클립을 듣고 완강했다 * UserList는 함수의 중간다리 역할, 해당 함수를 직접 사용하는 일도 없음 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업을 리액트에서 간단하게 하려면? (1) Context API (2) dispatch * Context API : 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있음 값 : 상태, 함수, 라이브러리 인스턴스, DOM… * Context API 함수 : React.createContext() (예)const UserDispatch = React.createContext(null); createContext 의 파라미터에는 Contex.. 이전 1 2 3 4 5 6 7 ··· 9 다음
