리알못 React: 7. 백엔드(Backend)

이 글은 Code with Mosh의 [Mastering React](https://codewithmosh.com/courses/enrolled/357787 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… React는 백엔드에 서비스 요청 시 개발자가 선호하는 라이브러리를 선택하여 사용하면 됩니다. 여기서는 Axios를 사용하여 백엔드에서 데이터를 가져오는 방법을 알아보겠습니다. JSON Placeholder JSON Placeholder는 Fake REST API를 제공하는 사이트입니다. 포스트, 이미지, 유저정보 등 다양한 가짜 API를 제공하여 백엔드 테스트용으로 […]

계속 읽기

리알못 React: 6. Forms

이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… Forms 여기서는 Bootstrap Forms를 사용하여 Username과 Password를 입력받아 로그인하는 컴포넌트를 만듭니다. 그리고 Joi를 사용하여 입력값을 검증하는 방법을 알아봅니다. Bootstrap을 이용한 기본적인 로그인 컴포넌트 만들기 React 프로젝트가 위치한 경로에서 npm i bootstrap 명령어로 Bootstrap 패키지를 설치한 후 index.js 파일에 […]

계속 읽기

리알못 React: 5. 라우팅(Routing)

이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 라우팅(Routing) 라우팅(Routing)이란 경로(URL)에 따라 페이지의 이동을 설정하는 것입니다. 여기서 알아볼 내용은 다음과 같습니다. 페이지 별 URL 설정 URL로부터 정보를 추출하기 위한 쿼리 스트링(Query String) 잘못된 URL로 접속 시 404 Not Found 페이지를 띄우기 위한 리디렉션(Redirection) 중첩 라우팅(Nested Routing) […]

계속 읽기

리알못 React: 4. 필터링 및 정렬(Filtering and Sorting)

이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 리알못 React: 3. 페이지 매기기(Pagination) 글에 이어 영화 정보를 장르에 따라 필터링하여 보여주거나 특정 컬럼(Column) 기준으로 정렬하는 방법을 한번 알아봅니다. 최대한 간단하게 필터링과 정렬 코드를 설명해보려 했지만 너무 복잡해졌습니다… 사전 준비 Bootstrap 설치 React 프로젝트 경로에서 npm i […]

계속 읽기

리알못 React: 3. 페이지 매기기(Pagination)

이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 사전 준비 Bootstrap 설치 npm i bootstrap@4.1.1 명령어로 React 프로젝트에 Bootstrap을 설치한 후 index.js 파일에 import 'bootstrap/dist/css/bootstrap.css';를 추가해줍니다. lodash 설치 lodash는 자바스크립트 유틸리티 라이브러리입니다. 여기서는 배열을 편집하기 위해 사용합니다. npm i lodash@4.17.10 명령어로 React 프로젝트에 lodash를 설치한 후 […]

계속 읽기

리알못 React: 2. 컴포넌트 구성

이 글은 Code with Mosh의 Mastering React 과정과 리액트를 다루는 기술(김민준 저) 책을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… Props Props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하기 위해 사용됩니다. 객체 데이터를 표시하거나 변경 사항 등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없습니다. 다른 컴포넌트에 값 전달 Props를 이용하여 전달 아래 예제는 […]

계속 읽기

리알못 React: 1. 컴포넌트 기초

이 글은 Code with Mosh의 Mastering React 과정과 리액트를 다루는 기술(김민준 저) 책을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 클래스형 컴포넌트 vs 함수형 컴포넌트 클래스형 컴포넌트는 말 그대로 클래스 형태로 구성된 컴포넌트를 말합니다. 클래스형 컴포넌트는 render() 함수가 꼭 있어야 하며, 이 함수는 JSX를 반환해야 합니다. 함수형 컴포넌트도 말 그대로… 함수 형태로 구성된 […]

계속 읽기

리알못 React: 0. 개발환경 구축 및 JavaScript ES6 Refresher

이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 개발환경 구축 NPM 설치 주소: https://nodejs.org create-react-app 다운로드 npm을 사용하여 create-react-app 패키지를 다운받습니다. 터미널에서 실행할 명령어는 npm i -g create-react-app 입니다. permission 오류가 발생하면 sudo npm i -g create-react-app 명령어를 실행합니다. 사용한 파라미터는 다음과 같습니다. i: install -g: […]

계속 읽기

MacOS에서 내장 및 외장 그래픽 유동적으로 전환하며 사용하기

외장 그래픽 프로세서가 달린 맥북을 쓰다 보면 어느 순간 배터리 잔량이 빠르게 소모되는 경우가 생깁니다. 내장 그래픽 프로세서가 외장 그래픽 프로세서로 전환되어 배터리 소모가 두 배 이상 빨라지기 때문에 발생하는 문제일 수 있는데요. 이런 경우 단순한 작업을 하고 있음에도 외장 그래픽 프로세서가 배터리를 쓸데없이 쪽쪽 빨아먹는 문제가 발생합니다. '이 Mac에 관하여' 메뉴에서 그래픽 프로세서가 Intel만 […]

계속 읽기

애알못 2020년 3분기 종영 애니메이션 감상평

이번에 감상평을 적어볼 애니메이션은 《데카당스》, 《부호형사 Balance:UNLIMITED》, 《갓 오브 하이스쿨》, 《천청난만!》, 《일본침몰 2020》 그리고 《히어로 써클》 총 6가지입니다. 이 중 개인적으로 스토리가 가장 뛰어난 것은 《데카당스》, 가장 익살스러운 것은 《부호형사 Balance:UNLIMITED》, 작화 및 연출이 가장 뛰어난 것은 《갓 오브 하이스쿨》이라고 생각합니다. 데카당스 서로 완전히 달라 보이지만 같은 애니메이션입니다(?) 애니메이션 《데카당스》는 거대 이동 요새에서 살아가는 인간들이 […]

계속 읽기

애알못 《부호형사 Balance: UNLIMITED》 감상평

이 글은 브런치에 기고한 글입니다. 사랑은 많은 것을 해내지만 돈은 모든 것을 해낸다는 영어 속담이 있듯, 돈으로 하지 못하는 것은 거의 없습니다. 우리 모두가 일을 하는 것, 복권을 사는 것, 재테크에 투자하는 것 모두 돈 때문일 것입니다. 내가 지금 행복하지 않다면 나에게 충분한 돈이 있는지 먼저 살펴봐야 하는 게 우스갯소리가 아닐지도 모릅니다. 애니메이션 《부호형사 Balance:UNLIMITED》는 […]

계속 읽기

애알못 《데카당스》 감상평

이 글은 브런치에 기고한 글입니다. 모든 옳고 그름, 혹은 선과 악을 구분할 수 있는 시스템이란 게 과연 존재할 수 있을까요? 만약 있다고 한다면 시스템에 반하는 것들은 무조건 배제되어야 하는 게 맞을까요? 흔히 프로그래밍(코딩) 도중 발생하는 버그는 무조건 옳지 않은 것일까요? 애니메이션 《데카당스》는 거대 이동 요새에서 살아가는 인간들이 미지의 생명체와 싸우는 모습을 그린 오리지널 애니메이션입니다. 아기자기한 […]

계속 읽기
error: 마우스 우클릭 금지 !!