분류 전체보기
19_리액트 API연동
컴포넌트에서 API를 연동하는 방법에 대해 다뤄보겠다. 리덕스를 사용하지는 않겠다. Promise, async/await을 사용하여 구현해보겠다! 리액트 프로젝트를 하나만들고 yarn add axios axios 라이브러리를 설치해준다. REST API 클라이언트-서버가 소통하는 방식 GET POST PUT DELETE 예를들어 GET /users/1 이라고하면 아이디가 1인 계정을 찾아 반환하게 되고 POST/articles 라고 하면 기사글을 등록할 수 있는 API이다. axios 라이브러리를 사용하면 위 기능을 쉽게 사용할 수 있다. import axios from 'axios'; axios.get('/users/1'); https://jsonplaceholder.typicode.com/ JSONP..
1463_1로만들기
문제는 더보기! 더보기 문제 정수 X에 사용할 수 있는 연산은 다음과 같이 세 가지 이다. X가 3으로 나누어 떨어지면, 3으로 나눈다. X가 2로 나누어 떨어지면, 2로 나눈다. 1을 뺀다. 정수 N이 주어졌을 때, 위와 같은 연산 세 개를 적절히 사용해서 1을 만들려고 한다. 연산을 사용하는 횟수의 최솟값을 출력하시오. 입력 첫째 줄에 1보다 크거나 같고, 106보다 작거나 같은 정수 N이 주어진다. 출력 첫째 줄에 연산을 하는 횟수의 최솟값을 출력한다. 예제 입력 1 복사 2 예제 출력 1 복사 1 예제 입력 2 복사 10 예제 출력 2 복사 3 개인적으로 디게 어려운 문제였다... 삽질도 많이했고 풀이방법을 보면 우선 들어온 N+1만큼의 리스트를 만들어 둔다. 그래야 입력의 순서값과 index의 ..
JS_리액트_TodoList
리액트를 사용해서 TodoList를 만드는 소규모 프로젝트를 진행해보겠다. 패스트캠퍼스의 강의를 참조하였습니다! 리액트 프로젝트를 하나 만든 후에 2개의 라이브러리를 설치할 것이다. yarn add styled-components react-icons 여러 컴포넌트를 만들고 관리할 것인데 간단한 역할을 먼저 알아보자. TodoTemplate Todolist의 레이아웃을 담당하고 하얀색 테두리를 담당한다. TodoHead 날짜시간, 할일의 개수를 가진다 TodoList 할일에 대한 정보를 map내장함수를 사용하여 랜더링할것이다. TodoItem 할일을 표시한다. TodoCreate 새로운 할일을 등록할 수 있게 한다. 1. 회색배경화면 만들기 //App.js import React from 'react' ..
18_styled-components
CSS om JS 관련 라이브러리로, JS안에 CSS를 작성하는 요령이다. Tagged Template Literal const name 'react'; const message = `hello ${name}`; console.log(text); 위와같이 사용하는 문법이다. ` `사이로 온다. const object = {a : 1}; const text = `${object}` console.log (text) // "[object Object]" 하지만 안에 객체를 넣으면 위처럼 안의 내용이 제대로 표시되지 않는다. const fn = () => true const msg = `${fn}`; console.log(msg); // "() => true" 마찬가지로 함수를 넣어도 함수의 문자열 형태를 그..
17_리액트_CSS Module
className이 겹치지 않게 작성하는 팁 1. 컴포넌트 이름을 고유하게 지정 2. 최상위 엘리먼트의 클래스이름을 컴포넌트 이름과 똑같게 (대문자를 사용) 3. 그 내부에서 셀렉터 사용 CSS Module CSS Module을 이용하면 이름이 겹치는 현상을 완벽하게 방지할 수 있다. 파일명에 .module.css를 붙이면 사용할 수 있다. 이러면 고유한 파일명등의 해시태그등이 붙어서 네임명이 고유화되게 된다. 레거시 프로젝트에 리액트를 도입하거나 CSS클래스 네이밍 규칙을 만들기 귀찮을때 굉장히 유용하다. 간단한 예시를 보자. //CheckBox.js import React from 'react'; function CheckBox( {checked,children , ...rest} ) { return..
16_리액트_컴포넌트스타일링
컴포넌트를 스타일링 하는 가장 기본적인 방법은 아래처럼 css를 import하여 사용하는 것이다. import './App.css'; Sass(Syntactically awesome stylesheets) 이전에 배웠던 Sass와 Scss를 이용하여 간단한 프로젝트를 만들 것이다. Sass보다 Scss가 훨씬 편리하기에 Scss를 사용해보도록 하겠다. 먼저 아래와 같은 파일구조를 만든다 //Button.js import React from 'react'; import './Button.scss'; function Button({children}) { return ( {children} ); } export default Button; //App.js import React from 'react'; imp..