HTTP:! HTTP:!

https://react.semantic-ui.com/ Introduction - Semantic UI React Semantic UI React is the official React integration for Semantic UI . Installation instructions are provided in the Usage section. jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representat react.semantic-ui.com 기계가 이해할 수 있는 웹페이지(웹 접근성을 높이자) 설치 npm install semantic-u..

https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design index.js에서 css를 import 시켜줘야한다. import 'antd/dist/antd.css'; //혹시 위가 안되면 아래껄 사용하자 import 'antd/dist/antd.min.css'; less 기반으로 작성된 라이브러리

https://onsen.io/ Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools Native look and feel with lots of ready-to-use components and automatic styling A rich variety of UI components specially designed for mobile apps. Onsen UI provides tabs, side menu, stack navigation and tons of other components such as lists and forms. Th onsen.io 모바일에 특화된 라이브러리 npm으로 설치후, index.js에 css 스타일을 넣어줘..

css 문제점 Global Namespace, Dependencies, Dead Code Elimination Minification, Sharing Constants ..... 글로벌 변수를 지양해야하는 JS와 대치 css간의 의존관리 안쓰는 css 인지 어려움 클래스 이름 최소화 JS의 코드와 값을 공유하고 싶음 파일 로드 타이밍 이슈 1. styled-component 자동 관리 되며, 지우기 쉽다. (css문제점 해결, 스타일을 분리) https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps withou..

1. 라이브러리란? 라이브러리 = 개발편의를 위한 도구 모음, 공구 framework = 기반 구조까지 잡혀 있는것, 공장 React도 도구모음 이미 잘 만들어둔 도구를 가져다가 쓰면서 React 생태계의 이점을 누리자 필요 > 검색 > 사용법 파악 > 적용 필요 특정 기능이 필요해짐 (직접 구현하기에는 벅참) 더 나은 도구가 필요해짐 검색 필요 그대로를 검색 github, npm trends, 커뮤니티, 기술 블로그 유사한 라이브러리를 검색 사용법 파악 공식문서 github code 검색 기술 블로그 검색 적용 POC(proof of concept) 부분을 적용해보고, 전체를 고민하자 2. moment react보다 사이즈가 큰 라이브러리....왠만하면 사용하지 말자...(Luxon, dayjs등을 사..

JS와 React를 개발하다보면 UI에서 Error가 난 경우에는 아무것도 보여지지 않는다. Error가 발생하기 전까지는 그려져야할것 같은데, JS나 React에서는 그렇지 않다. (왜인지는 모르겠다.) 이번에 다룰 내용은 UI에서 Error가 났을 때, 해당 컴포넌트만 Error를 처리하는 방법이다. 여기서 참고했다.. https://ko.reactjs.org/docs/concurrent-mode-suspense.html#handling-errors 기본 코드 App과 Child Component가 있고, Child에서 Error를 발생시켜보자 더보기 기본 Error 발생 시키기 console에 Error가 나오며, 브라우저에는 아무것도 나오지 않는다. 더보기 Child안에서 'throw new Er..

숫자 배열이 주어지고, 사용할 수 있는 연산자의 갯수도 주어진다. 예를 들어서 [1,2,3,4,5,6] 이고 [2,1,1,1]이면 '+'를 2개, '-' 1개, '*' 1개, '%' 1개를 이용할 수 있다. 조금 더 작은 수를 예제로 들어보자 숫자 : 3 4 5 사용할 수 있는 연산자 : 1 0 1 0 나올 수 있는 조합은 3+4*5, 3*4+5 이 있다. 여기서 최댓값, 최솟값을 구하는 문제이다. 나올 수 있는 숫자는 11개이며, 연산자는 10개이다. 즉 10개의 연산자를 순서대로 배치하면 된다. 문제에서는 숫자 6개에 연산자 5개일때, 경우의 수가 60가지라고 표현을 했다. 왜 그러냐면 같은것을 하나로 보기 때문이다. 만약 최악의 경우 11개의 숫자가 들어온다면 '+' 3개, '-' 3개, '*' 2..

https://www.acmicpc.net/problem/1339 1339번: 단어 수학 첫째 줄에 단어의 개수 N(1 ≤ N ≤ 10)이 주어진다. 둘째 줄부터 N개의 줄에 단어가 한 줄에 하나씩 주어진다. 단어는 알파벳 대문자로만 이루어져있다. 모든 단어에 포함되어 있는 알파벳은 최대 www.acmicpc.net 그리디로 찾아가면서 푸는 문제이다. 최대 10개와 문자 길이는 8이 최대이므로 전체를 다 돌려봐도 되고, 긴 순서대로 정해주면서 아래로 내려가면 될거라 생각했다. 1) 1차 코딩 dictionry에 값을 저장해두고, 계산하는 방법이다. 2차원 배열을 열로 돌면서 Dict에 값을 저장하고, 이미 나온 값은 Dic에서 가져오는 방법이다. 결과는 실패 코드 더보기 arr = [['.' for i ..