Topic
-
알고리즘 수학, 순열과 조합, GCD / LCM, 멱집합, 정규표현식Topic/Data Structure 2022. 1. 19. 21:33
순열과 조합 ✔️ 순열 ☑️ 순서를 생각하며 결과를 만드는 경우의 수 5장에서 3장을 선택하는 모든 순열의 수 = 5P3 = (5 X 4 X 3 X 2 X 1) / (2 X 1) = 60 일반식: nPr = n! / (n - r)! 조합 ☑️ 순서를 고려하지 않고 결과를 만드는 경우의 수 순열로 경우의 수를 만든 경우에서 중복된 경우를 나누어주면 조합을 얻을 수 있다. 5장에서 3장을 무작위로 선택하는 조합에서 모든 경우의 수 = 5C3 = 5! / (3! * 2!) = 10 일반식: nCr = n! / (r! * (n - r)!) GCD / LCM ✔️ GCD ☑️ 최대 공약수: 둘 이상의 공약수 중에서 최대인 수 문제: Mask States 방역용 마스크를 제작/판매하는 Mask Man 사는 이례적인..
-
-
Linux 심화, Read, Write, Execute 권한, 환경변수, chmod, export, dotenvTopic/Linux 2022. 1. 17. 22:55
사용 권한 ✔️ ls -l : drwxrwxrwx // -rw-r--r-- d는 directory 폴더를 뜻하고 -는 파일을 뜻한다. read / write / execute 를 뜻하고 순서는 user, group, other // ugo~ chmod: 권한을 변경하는 명령어 chmod g-r filename // removes read permission from group chmod o+x filename // adds write permission to other 숫자로 표시가 가능한데, 숫자별 권한 # Sum rwx Permission 7 4(r) + 2(w) + 1(x) rwx read, write and execute 6 4(r) + 2(w) + 0(-) rw- read and write 5 ..
-
클라이언트 빌드 및 배포Topic/Node.js | server 2022. 1. 11. 16:58
SSR / CSR ✔️ SSR ( Server Side Rendering ) 웹 페이지를 서버에서 렌더링하는 방식 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 HTML 파일을 브라우저로 전송한다. 이 HTML파일이 브라우저에 도착하면 유저가 바로 볼 수 있다. 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 SSR이라 한다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다. 유저가 브라우저의 다른 경로로 이동할 때마다 서버는 리렌더링을 한다. 장점 1. 웹 페이지 로딩이 빠르다. // view를 서버에서 렌더링해 가져오기 때..
-
Redux, React, action, reducer, storeTopic/React | Redux 2022. 1. 7. 22:14
Redux ✔️ Redux는 자바스크립트 앱에서 예측 가능한 상태 관리를 해주는 컨테이너다. 리액트에서 state와 props를 통해 상태 관리를 하고 상위 컴포넌트에서 하위 컴포넌트로 인자들을 넘겨주었는데, 만약 컴포넌트 중첩이 100만 개라면 디버깅에도 불리하고, 관리에 어려움이 따른다. 그래서 Redux가 출현하게 되었고, 세 가지 원칙을 가진다. Single source of truth 데이터를 한 곳에서만 관리한다. State is read-only 리액트에서 setState()를 통해서 state를 변경했지만, Redux에서는 action이라는 객체를 통해 state를 변경할 수 있다. Changes are made with pure functions 변경은 순수 함수로만 가능하다.(reduc..
-
React, 컴포넌트, Autocomplete 기능, ClickToEdit 기능 구현Topic/React | Redux 2022. 1. 5. 21:41
Autocomplete (자동완성) 구현 ✔️ 테스트 케이스들을 다 통과하지 못해 아쉬웠지만 구현된걸 보니 유용하게? 쓰일 것 같다 ! import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1r..
-
React, 컴포넌트 디자인, styled-component 적용Topic/React | Redux 2022. 1. 4. 22:17
리액트 컴포넌트 디자인 실습 ✔️ 리액트 모달 창 띄우기 ☑️ 삼항 연산자를 이용한 조건부 렌더링을 활용한다. alert창과 다르게 어두운 배경 태그 내부에 창 태그를 삽입해 구현한다. import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 100%; position: relative; `; export const ModalBackdrop = styled.div`ㅁ ..
-
REACT 컴포넌트 디자인, CDD, Storybook, useRef, Styled-ComponentTopic/React | Redux 2022. 1. 3. 22:04
CDD(Component Driven Development) ✔️ 개발 방법 중의 하나로, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법이다. CDD가 트렌드가 되면서, 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다. Storybook ✔️ UI 개발 // Component Driven Development를 하기 위한 도구다. 각각의 컴포넌트들을 따로 볼 수 있어, 전체 UI를 한눈에 보고 개발할 수 있다. 재사용성을 확대하기 위해 컴포넌트를 문서화한다. 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 사전에 버그를 방지하며 테스트 및 개발 속도를 향상한다. 기본적으로 독립적인 개발환경에서 실행되기 때문에 ..