화성갈끄니까아

API (Application Programming InterFace) 란? 사전적인 의미로는 응용프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있는 인터페이스를 의미한다. 사전적인 의미로 이해하기란 어렵기 때문에 비유를 통하여 정리하였다. 컴퓨터에 텍스트를 작성하거나 코드를 작성하기 위해서는 반드시 키보드가 필요합니다. 사용자가 키보드를 누르면 컴퓨터에 전달하고 그 후의 동작은 컴퓨터가 알아서 처리하게 됩니다. 여기서 키보드가 API라고 생각하면 된다. API는 다시 말해서 한 소프트웨어가 다른 소프트웨어로 지정된 형식으로 요청 및 명령을 받을 수 있는 수단이다. 즉 소프트웨어들이 서로 상호작용하는 것을 도와주는 매개체라고 볼 수 있다. 왜 API를 사용하는가..

Side Effect useEffect를 알아보기 전에 부작용(Side Effect) 먼저 알아보자. 부작용은 일반적으로 부정적인 의미로 사용된다. 하지만 프로그래밍 측면에서는 부수적인 작용이라는 의미로 사용되기 때문에 오해하지 않도록 한다. let count = 0; function greetWithSideEffect(name) { count = count + 1 // Side Effect return `${name}님 안녕하세요!` // output } 다음과 같은 코드는 부작용(Side Effect)이 존재한다라고 말할 수 있다. 외부에 있는 코드를 접근하거나 수정, 읽는 경우 부작용(Side Effect)이 있는 코드가 되는 것이다. sideEffect는 랜더링을 막기(block)때문에 랜더링을 ..

Styled-components css 파일 없이 style을 적용시키는 방법이다. How to use styled-components 우선 import가 필요하다. import styled from 'styled-components' 다음의 구조와 같이 styled-components를 선언한다. styled 컴포넌트는 해당 컴포넌트에만 적용이 가능한 특징을 가지고 있다. 따라서 해당 컴포넌트의 모든 div태그는 배경색은 빨간색, 패딩값은 20px, 글자색은 하얀색으로 적용이 된다. styled 속성을 작성을 완료하였으면 변수에 담아 이러한 구조로 사용한다. styled-components는 컴포넌트이기 때문에 반드시 앞에 대문자를 사용해야한다. *대문자를 사용하지 않으면 인식이 안되는 경험을 했다ㅠㅠ..

map 함수를 왜 사용할까? 반복되는 데이터에 대해서 for문을 사용해도 되는데 사용하지 못하는건가? 리엑트의 jsx에서는 if문과 같이 for문도 사용할 수 없다. 따라서 리엑트에서 반복문을 사용하려면 map함수를 쓸 수 밖에 없다...! * if문도 불가능하기 때문에 삼항연산자를 사용해요! map 함수의 기본 구조 배열.map(callback함수, index) callback함수는 새로운 배열의 요소를 생성하고 index는 현재 처리하고 있는 요소의 값을 뜻한다. 배열.map(function(a, index)) a의 역할은 배열의 원소 하나 하나씩 접근한다. index는 반복문이 실행될 때 마다 0부터 1씩 증가하는 정수이다. const str = ['a','b','c','d','e'] const m..

State와 Props를 알기 전에 Hook에 대하여 먼저 알아보자! React Hooks 리엑트 v16.8부터 새롭게 도입된 기능으로써 과거에는 클래스형 컴포넌트를 사용하였다. 클래스의 사용은 코드의 재사용과 구성을 어렵게 만들었으며 Reloading의 신뢰성을 떨어뜨리는 단점이 존재하였다. 따라서 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있는 훅이 탄생하였으며 대표적으로 useState와 useEffect를 사용하여 lifecycle과 연동 같은 기능을 사용 가능하게 함으로써 리엑트에서 가장 중요한 기능 중 하나가 되었다. Before Using Hooks 훅은 함수 컴포넌트 내에서 항상 최상단에 호출해야 한다. 리엑트 함수 컴포넌트 내에서만 훅을 호출해야하며, 일반 자바스크립트 함수에..

Saas란? 웹 디자인 공부를 시작하다보면 CSS는 흔히 접하고 있을 것이다. CSS 코드가 길어질수록 복잡해지며 수정작업이 필요할 경우 매우 불편하다는 점이 있다. 동일한 코드를 재사용 하려면 복사/붙여넣기의 방법 뿐이며 실수를 유발할 수 있는 가능성이 아주 높은 단점이다. 따라서 Saas는 이를 보완하기 위하여 탄생하였다. Saas는 컴파일 과정에서 CSS파일을 생성해주는 전처리기 역활로써, 안정적이고 확장성이 좋은 특징을 가지고 있다. Saas 사용 다음 명령어를 통해 Saas를 우선 설치해주자 npm install sass * 설치 명령어를 입력한 뒤 항상 package.json파일에서 설치가 되었는지 확인하자! CSS파일의 확장자를 .scss로 변경하자 -> 아이콘이 바뀌는 것을 발견할 것이다...

라우팅(Routing)? 라우팅은 경로에 따라 다른 화면을 보여주는 것이다. 리엑트는 단일 페이지(SPA) 형식이기 때문에 여러 개의 페이지를 보여주기 위해선 다른 페이지로의 이동이 계속해서 필요한 것이다. 리엑트에는 이러한 기능이 없기 때문에 라우터를 따로 설치해야 한다! 이러한 점에서 확실히 리엑트는 프레임워크가 아닌 라이브러리라는 것을 알 수 있다! 리엑터 라우터? 앞서 언급하였듯이 라우팅을 위해서 리엑터 라우터를 설치해주자! 다음 예시와 같은 명령어로 리엑터 라우터 설치가 가능하다. 라우터 컴포넌트 연결 라우터 컴포넌트 구성은 다음과 같다. 사용되지 않은 컴포넌트는 주석처리 하였다. index.html에서 화면을 보여주고 있는 js파일에 컴포넌트 사용과 동일한 방법으로 을 하게되면 라우터가 가리키..