분류 전체보기
15_리액트_유용한 tool
Prettier 코드 스타일을 내 스타일대로 커스터마이징 할수 있는 기능 npx create-react-app useful-tools 위 기능을 테스트하기 위해 우선 새로운 리엑트 프로젝트를 하나 만들었다. vs코드에서 Prettier을 깔아주고, 프로젝트 root폴더에 .prettierrc파일을 만들어주자. 파일 내용은 아래 홈페이지를 참조해도 좋다 https://prettier.io/docs/en/configuration.html Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io { "trailingComma": "all", "tabWidth": 4, "semi": true, "singleQuote": true }..
14_리액트_클래스형 컴포넌트
class형 컴포넌트 함수형 컴포넌트와는 다른 방식으로 요즘에는 자주사용하지 않는 방식이나 알아둘 필요는 있다. class형 컴포넌트로만 가능한 기능이 한두어개 있기 때문 import React from 'react'; function Hello({color,name, isSpecial}) { return ( {isSpecial ? * : null} {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; //hello 컴포넌트를 만들어서 내보내겠다 color,이름을 받아와서 isSpecial값에 따라 앞에 *가 붙는 간단한 예제가 있다. 이 예제를 class형 컴포넌트로 바꾸어 보자. cl..
13_리액트_Context API,immer
Context API 이 전글의 예제에서도 그렇지만 리액트에서 여러개의 컴포넌트를 거쳐가면서 Props를 전달해줘야 하는 경우가 많다. 즉, A -> B -> C -> D 와같이 차근차근 Props를 넘겨주는 경우인데, 이를 A -> D로 한번에 넘길 수 있는 방법이 있다. //ContextSample.js import React, {createContext, useContext} from 'react'; function Child( {text} ) { return 안녕하세요? {text} } function Parent( { text }) { return } function GrandParent( { text }) { return } function ContextSample() { return } ex..
1932_정수 삼각형
문제는 더보기! 더보기 문제 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 위 그림은 크기가 5인 정수 삼각형의 한 모습이다. 맨 위층 7부터 시작해서 아래에 있는 수 중 하나를 선택하여 아래층으로 내려올 때, 이제까지 선택된 수의 합이 최대가 되는 경로를 구하는 프로그램을 작성하라. 아래층에 있는 수는 현재 층에서 선택된 수의 대각선 왼쪽 또는 대각선 오른쪽에 있는 것 중에서만 선택할 수 있다. 삼각형의 크기는 1 이상 500 이하이다. 삼각형을 이루고 있는 각 수는 모두 정수이며, 범위는 0 이상 9999 이하이다. 입력 첫째 줄에 삼각형의 크기 n(1 ≤ n ≤ 500)이 주어지고, 둘째 줄부터 n+1번째 줄까지 정수 삼각형이 주어진다. 출력 첫째 줄에 합이 최대가 되는 경로에 있는 수의 합..
종강..ㅎ
드디어 기다리던 종강을 하긴 했다... 다만 종강을 했는데 할게 많다. 항상 꾸준히 공부하는것만큼 노는것도 필요하다 하는 사람이기에 1월까지는 조금 쉬려한다. 물론 백준이나 프론트엔드 공부는 계속할것 같다.. 이번 학기도 나름대로 느낌이 괜찮았던것 같다. 학교공부에 웹공부에 연애에.. 이것저것 하느라 정말 바쁘긴 했는데 또 목표에 한발자국씩 나아가는게 기분이 나쁘지만은 않은것 같다. 웹공부나 임베디드 공부를 통해서 무언가를 만든다는건 참 보람차고 재미도 있는것 같다. 독학으로 최대한 기초를 다져둔 뒤에 실력을 펼칠 수 있는곳을 꼭 가고싶다는 생각이 들었다. 누구보다 잘할 수 있을거 같은데.. 라고 말은하지만 세상에 똑똑한 사람들이 정말정말 많다는걸 느낀다. 나는 정말 바보인가.. 공부를 하면서 드는 생각..
12_리액트_여러 Hook들
useEffect 처음 화면에 나타나게 되거나 사라질때, 업데이트될때 작업을 진행하게 할 수 있다. 간단한 예를 먼저한번 보자 //UserList.js import React, {useEffect} from 'react'; function User({user, onRemove,onToggle}) { const {username,email,id, active} = user; useEffect( () =>{ //mount console.log('컴포넌트가 화면에 나타남'); //props -> state //REST API return () =>{ //unmount console.log('컴포넌트가 화면에서 사라짐'); } //clearInternval,clearTimeout }, []) 위 코드는 이전에 ..