후니's Blog

React/2022-上

Conditional-rendering (조건부 렌더링)

2022.03.27

Conditional-rendering(조건부 렌더링) Conditional-rendering(조건부 렌더링)란? 특정 조건에 따라 다른 컴포넌트를 렌더링 하는 것 예를 들어, 데이터가 로딩 중 일 때, 데이터가 없을때 등등 다양한 상황에서 조건식에 따라 다른 컴포넌트를 렌더링 할 때 사용 기본적인 자바스크립트에서 제공하는 조건문인 if/else, switch/case 등이 있음 조건부 렌더링 방법 ① if / else 가장 기본적인 방법 컴포넌트 props 값에 따라 리턴하는 리액트 컴포넌트를 분기 처리함 ② switch / case 조건이 다양할 때 사용 ③ 논리 연산자(&&) 논리 연산자 &&를 사용 ┌ ⓐ data가 참일 때 : && 뒤의 data.fetchProduct가 렌더링 됨 ├ ⓑ dat..

React/2022-上

Static, Dynamic Routing (정적 라우팅, 동적 라우팅)

2022.03.27

Static, Dynamic Routing Routing 이란? 목적지까지 갈 수 있는 여러 경로 중 한가지 경로를 설정해주는 과정을 의미 라우터 객체를 이용해 페이지를 이동하는 것 └ 라우터 객체 : 페이지 이동과 연관된 객체 라우팅의 종류에는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)이 있음 React에서 router를 사용하기 위해서는 위와 같이 useRouter를 사용해야 함 이는 react-hooks 기능을 사용한다는 뜻 Router 객체의 종류 router.push("이동할 페이지") : 지정 페이지로 이동 router.replace("이동할 페이지") : 지정 페이지로 이동하되, 현재 페이지 기록을 저장하지않음 router.back() : 이전 페이..

React/2022-上

try ~ catch

2022.03.26

try ~ catch try ~ catch란... 에러가 발생하게 되면 스크립트는 즉시 중단되고, 콘솔에 에러가 출력되지만, try ~ catch 문법을 사용하면 스크립트가 즉시 중단되는 것을 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 함 try ~ catch 동작 먼저, try { } 안의 코드가 실행됨 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜀 에러가 있다면, try 안 코드의 실행이 중단되고, catch(error) 블록으로 제어 흐름이 넘어감 따라서, try { } 블록 안에서 에러가 발생해도, catch에서 에러를 처리하기 때문에 스크립트는 중단되지 않음 ※ 변수 error(어떤 이름이든 사용 가능)는 무슨 일이 일어났는지에 대한 설..

React/2022-上

Async / Await

2022.03.26

Async / Await Async / Await 란? Promise를 통해서 비동기 처리를 하는 방법도 있지만, Promise의 단점을 해결하기 위해 ES7에서 async / await 키워드가 추가됨 async / await 키워드를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음 callback이나 promise와 같이 비동기 코드를 작성하는 새로운 방법 async는 함수 이름의 제일 앞에, await은 결과를 기다릴 함수 앞에 작성함 async는 함수에서 비동기 처리를 위한 promise 동작을 함 await은 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작을 함 ※ promise는 비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기..

React/2022-上

Rest-API vs GraphQL-API

2022.03.24

Rest-API vs GraphQL-API Rest API란 API(Application Programming Interface)란 └ 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환 가능 하도록 하는 것 REST API의 정의 └ REST 기반으로 서비스 API를 구현한 것 └ 최근 OpenAPI, Micro Service 등을 제공하는 업체 대부분은 REST API를 제공함 REST API의 특징 사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있음 REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있음 REST API를 제작하면 델파..

React/2022-上

Template Literals

2022.03.24

Template Literals Template Literals란? ES6에서 새로 도입된 문자열 표기법 백틱(backtick) ` 을 사용 ┗ 백틱은 키보드에서 숫자 1 왼쪽, tab키 위에 위치했음 / ' (작은 따옴표)와 헷갈리지 말것! 여러 줄에 걸쳐 문자열 작성 가능 └ 줄바꿈을 그대로 표현할 수 있음 특수 기호 $를 사용해서 변수 또는 식 포함 가능 기존 사용 방법 let a = 10; console.log("a의 값은 " + a + "입니다"); └ 위와 같이 + 를 이용해서 문자열을 이어 붙여 사용 Template Literals 사용 방법 let a = 10; console.log(`a의 값은 ${a}입니다); └ 위와 같이 백틱( ` )을 사용하여 기존 사용 방법과 다르게 +를 이용하지..

React/2022-上

Git

2022.03.23

Git Git이란 ? 무료, 공개 소프트웨어 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템 소스 코드 관리에 주로 사용됨 어떤 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있음 현재 가장 널리 쓰이는 분산형 버전 컨트롤 프로그램 중 하나 여러 곳의 원격 저장소를 등록하여 사용 가능 Git에서 일어나는 일, 주로 사용하는 용도 똑같은 환경에서 시작(환경 설정) └ 서버개발자 중 한명이 환경을 구성함 모두 같은 환경에서 개발하여 불필요한 시간을 없애고 서로 주고 받는 와중에 일어나는 충돌을 최소화함 Git의 장점 소스코드를 주고 받을 필요 없이, 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능 브랜치를 통해 개발..

React/2022-上

Import & Export

2022.03.22

Import Import의 뜻은 ? → Import의 사전적 의미 : ① 수입하다 ② (다른 프로그램에서 데이터를) 불러오다 React에서의 import 사용 방법 형태 의미 import 이름 from "위치" default 있이 export 해 줬을 때 사용 import { 이름 } from "위치" default 없이 export 해 줬을 때 사용 import * from "위치" 위치에 있는 모든 것을 갖고 올 때 사용 import * as 이름 from "위치" as 문법을 통해 이름을 임의로 설정할 수 있음 import { default as 이름 } from "위치" as 문법을 통해 이름을 임의로 설정할 수 있음 Export Export의 뜻은 ? → Export의 사전적 의미 : ① 수출(..

전체 글

Conditional-rendering (조건부 렌더링)

Static, Dynamic Routing (정적 라우팅, 동적 라우팅)

try ~ catch

Async / Await

Rest-API vs GraphQL-API

Template Literals

Git

Import & Export

티스토리툴바