분류 전체보기 (42) 썸네일형 리스트형 Mac M1 Visual Studio Code 설치 VSCode 설치! 공식홈페이지 접속! Stable 아래 다운로드 모양 클릭! 참고로 Insiders는 Stable 버전보다 더 최신버전이지만 아직 안정화 단계가 완료되지 않은버전! Stable을 사용하는 것을 추천한다! M1 MacBook Homebrew 설치 Homebrew? Homebrew는 Apple(또는 Linux 시스템)에서 제공하지 않는 유용한 패키지 관리자를 설치합니다. 공식 홈페이지를 참고하여 아래 명령어를 터미널에 입력! /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 명령어를 입력하면 아래와 같은 화면을 볼수있다! mac 부팅시 입력하는 password를 똑같이 입력 후 엔터! 뭐라고 뭐라고 와앙! 설치되는 내용이 출력되다가! 이런 화면을 만나게 된다! 태연하게 엔터! 다시 와앙! 출력되다가 Xcode 관련 Command Line까지 설치하더니 다시 한번 password를 입력하라고 한다. 입력 후 엔터! 이런 화면을 만.. 4-2. React에서 Axios 사용하기 Axios 추가 yarn add axios Axios의 장점 Axios의 인스턴스를 생성 할 수 있다! baseUrl, headers, timeout 등을 axios의 instance로 생성하여 여러곳에서 반복해서 작성할 필요가 없다! instance에 작성할 수 있는 항목은 axios깃헙을 참고하면 된다! 그럼 앞서 알아본 the movie db api를 사용하기 위한 instance를 생성해보자! (api.js 를 생성해 따로 작성하였다) import axios from "axios"; const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: api_key: "${api_key}", // 각자 발급받은 api key값을 .. [M1 MacBook] Rosseta2 설치 Rosseta란? Rosetta 2는 Intel 프로세서가 장착된 Mac 컴퓨터 전용으로 제작된 앱을 사용할 때마다 백그라운드에서 작동하며, Apple Silicon에서 사용할 수 있도록 앱을 자동으로 변환합니다. 설치 방법 1. Intel만 지원가능한 앱을 실행하고자 하면 아래와 같은 창이 뜬다고 한다. 이때 [설치] 버튼을 클릭해 설치! 설치 방법 2. 터미널을 이용하기! 로제타를 설치하는 기본 명령어! 아래 명령어로만 설치할 경우 라이센스 동의를 과정을 거쳐야하는 것 같다. softwareupdate --install-rosetta 라이센스 동의까지 한방에 진행할 수 있는 명령어도 소개하고 있다. /usr/sbin/softwareupdate --install-rosetta --agree-to-lic.. 4-1. The Movie DB API The Movie DB API 사용하기 Nomflix 앱을 만들기 위한 데이터는 어떻게 가져올 수 있을까?! TMDB 가 우리가 필요로 하는 데이터를 제공해준다! https://www.themoviedb.org/?language=ko The Movie Database (TMDb) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 회원가입 후 로그인하고 나면 "설정" 메뉴로 이동할 수 있다 [설정]의 API 메뉴로 이동해 API 키를 발급받아야 한다 click here → Developer 선택! 약관 동의 후 어플리케이션 개요를 너무 짧게 입력하니 유효성에서 걸린다. 그래서 넷플릭스 같은.. 3-6. 현재 위치에 특정 스타일 넣기 (withRouter 사용하기) 현재 위치에 특정 스타일 넣기 - withRouter 사용하기 Header의 메뉴 중 현재 선택된 메뉴에만 다른 css를 적용하고 싶다! react-router-dom 의 withRouter를 활용해보자! withRouter는 컴포넌트를 감싸는 형태로 사용하고, Router에 대한 정보를 감싼 컴포넌트에 전달해준다! 기존의 작성했던 Header 컴포넌트에 withRouter를 적용한 모습이다! export default withRouter((props) => ( {...생략} )); withRouter로 전달받을 수 있는 props를 확인하고 활용하기 위해 Header 컴포넌트 내에서 console.log(props)를 통해 withRouter의 props를 출력해보면 아래 이미지와 같다 Header 컴.. 3-5. Styled-components에 Props 활용하기 Styled-components에 Props 활용하기 styled-components를 이용해 css를 지정하고자 할때 props를 활용해야 할 때가 있다! styled-componets로 작성된 컴포넌트들로 구성된 아래와 같은 컴포넌트가 있다 export default() => ( Item1 Item2 Item3 Item4 ); 만약 Item 들에 각각 다른 background-color를 적용하고 싶다면? 어떻게 해야할까!!? 적용하고 싶은 background-color 를 Item에 props로 전달, styled-components로 선언한 Item에서 이 props를 받아주면 된다! const Item = styled.li` (...생략) border-color: ${props => props... 3-4. Global Styles In React React에서 Global Style 적용하기 global style 이 필요한 이유는? 전체 사이트 혹은 프로젝트에 공통적으로 적용할 css가 있을때! (ex: 폰트, 브랜드 컬러 등) global style을 적용하기 위해 설치해야 할 것이 있다. yarn add styled-reset npm install styled-reset 설치 완료! 위 이미지와 같이 GlobalStyles.js 를 만들어주고 global style 지정을 위해 아래 두 가지 import ! import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; global style은 아래와 같이 방금 import 한 createGlob.. 이전 1 2 3 4 ··· 6 다음
