분류 전체보기32 Redux 세 가지 원칙 1. Single source of truth The state of your whole application is stored in an object tree within a single store. 어플리케이션 내의 state는 단일한 store안에 있는 객체 트리에 저장된다. - 서버에서 가져온 state를 클라이언트쪽에 나열하거나 흡수시킬때 별다른 추가적인 코딩 없이 쉽게 쓸 수있다. - 디버깅이 쉬워진다. - 개발 사이클이 더 빨라진다. (undo/redo 등의 조금 어려웠던 작업들이 간단하게 해결가능해진다.) console.log(store.getState()) /* Prints { visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using.. 2020. 2. 18. 문자열로 나타낼 수 있는 순열의 개수(경우의 수) "duck"이라는 글자로 만들 수 있는 순열의 개수는 어떻게 구할 수 있을까? 수학적으로 생각해본다면 duck으로 만들 수 있는 순열의 개수는 첫 자리에 올 수 있는 글자 4개(d,u,c,k), 두번째 자리에 올 수 있는 글자 3개 ... 이렇식으로 계산하고 어렵지 않게 4*3*2*1이라는 결과를 얻을 수 있다. 일반화해서 표현하자면 길이가 n인 글자에 대해서는 n*(n-1)*(n-2)*...*1 이 된다는 것을 알 수 있다. 위와 같은 방식으로 코드를 작성할 수 있다. - 입력: str에는 순열을 만들고자 하는 문자를 넣고 prefix에는 새로 문자들을 넣어서 단어를 만들것이다. - 함수 작동 방법 1. 이는 재귀함수로 이루어져있다. 2. 재귀가 불릴때마다 str에 있는 글자 하나를 빼서 prefix에.. 2020. 2. 17. 리액트 공부한 내용 정리 React 공식 문서(주요 개념) 보면서 내가 기록해두고 싶은 것들만 정리한 내용 JSX 소개 JSX는 Javascript를 확장한 문법이다. 생긴 것은 꼭 html과 JavaScript어느 중간 사이로 보이지만 따지자면 JavaScript에 조금 더 가깝다. (그렇기 때문에 JavaScript와 같이 camelCase를 사용한다.) JSX는 표현식이다. 때문에 if문이나 for loop등을 사용할 수 있다. 컴파일이 끝나면 JSX 표현식은 정규 JavaScript 함수가 되고, JavaScript 객체로 인식된다. 아래와 같이 if문을 사용하는 것이 가능하다! function getGreeting(user) { if (user) { return Hello, {formatName(user)}!; } re.. 2020. 1. 31. 함수 호이스팅 (Function hoisting) 🔎 호이스팅에 대해 더 깊이 알아보기 : https://ttum.tistory.com/19?category=754442 함수호이스팅을 알기 위해서는 우선 함수 선언문과 함수 표현식에 대해 알아 한다. 1. 함수 선언문 자바스크립트에서 함수를 선언하는 방법들 중 하나이다. 우리가 일반적으로 C나 C++ 등에서 선언하는 방식이라고 생각하면 된다. 함수를 독립적으로 선언하고 따로 불러서 호출하기 때문에 함수 이름을 꼭 지정해주어야 한다. 함수 이름이 있지 않으면 부를 수 없기 때문이다. function add(a, b){ return a + b; } console.log(add(3, 7)); //출력값: 10 2. 함수 표현식 함수 표현식은 하나의 함수를 만들고, 그것을 변수에 할당하는 것이다. 먼저 예제를 .. 2020. 1. 22. 세그먼트 트리(Segment tree) 왜 Segment tree를 쓰는가? Segment라는 단어를 사전에서 찾아보면 '부분, ..을 분할하다' 이런 뜻이 나온다. 말 그대로 구역을 나누어 트리를 만들겠다는 것이다. 무엇을 어떻게 구역으로 나누는가? 가장 흔히 나오는 예시로 배열의 부분합을 구하는 경우를 생각해보자. (세그먼트 트리가 부분합을 구하는데만 사용되는 것은 아니다. 다른 응용문제를 풀어보길 원한다면 BOJ 6549번을 풀어보길 바란다. 내가 세그먼트 트리를 공부하게 된 계기이기도 하다.) 배열 A는 100개의 원소를 가지며, 우리는 i번째부터 j번째 원소의 합을 구하려고한다. 그런데 테스트 케이스가 너무나도 많으므로 매번 i부터 j번째 원소를 더하는 것은 너무 낭비인듯 하다. 그래서 각각의 합(S[i]: 0번째 원소부터 i번째 원.. 2020. 1. 10. CSS의 단위 사이트 레이아웃을 구성하면서 왼쪽 부분에 사이드바(주황색 부분)를 만들고 싶었다. 위 그림과 같이 화면 전체의 15%정도(?)를 차지하도록 하고싶었는데, width: 15%으로는 꿈쩍도 하지 않았다. 그래서 이것을 해결할 방법을 알아보다가 새로운 단위들을 더 알게되어 이렇게 정리하게 되었다. CSS의 단위는 고정적인 길이(absolute length)가 있고, 상대적인 길이(relative length)가 있다. 1. 고정적인 길이(Absolute length) 고정적인 길이는 어느 화면으로 보든지 같은 사이즈로 나타난다. 요즘에는 휴대폰, 패드, 노트북 등 다양한 기기로 보기 때문에 고정적인 길이를 사용하는 것을 추천하지는 않는다. cm centimeters mm millimeters in inches.. 2020. 1. 10. [CSS] 마진 겹침/ 상쇄(margin collapsing) 마진 겹침 현상은 top margin과 bottom margin이 겹쳐질 때 서로 상쇄되는 것을 말한다. 이렇게 말하면 이해하기 어려울 수 있으나 아래 그림을 보면 쉽게 이해할 수 있다. 각 박스 안에는 margin 값이 들어있다. 노란색 박스의 margin은 100px이고 주황색 박스의 margin이 50px이라면 둘 사이의 공간은 150px만큼 떨어져 있어야 하겠지만, margin collapsing 현상에 의해 큰 값으로 상쇄된다. 따라서 100px이 되는 것이다. 주의사항 음수 마진이 포함된 경우는 가장 큰 양수마진과 가장 큰 음수 마진의 합으로 상쇄된다. 부동 요소(float)나 절대적으로 위치가 지정된(absolutely positioned) 요소의 마진은 상쇄하지 않는다. 보더, 패딩, 인라.. 2020. 1. 8. [CSS] Box model (박스 모델) 왜 Box model(박스 모델)인가? 브라우저의 렌더링 엔진이 문서의 레이아웃을 계산할 때 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다고 해서 붙여진 이름이다. (CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.) 박스는 어떻게 구성되어 있는가? 박스는 크게 Content area(내용물 부분), Padding(안쪽 여백), Border(테두리), Margin(바깥 여백)으로 이루어져 있다. 각 요소를 예시와 함께 살펴보자. Content area 이미지나 비디오 등 요소의 실제 내용 부분을 나타낸다. 콘텐츠 영역의 크기는 width, height가 있다. Padding (안쪽 여백) 컨텐츠 영역 주위의 빈 공간의 크기를 나타낸다. padding.. 2020. 1. 8. n의 거듭제곱 구하기 (큰 수의 큰 제곱수 구하기) n의 제곱을 구할 때 for문을 이용하여 n번 제곱하면 시간복잡도가 O(n)이다. (아래의 코드는 5를 1000제곱 했을 때의 계산을 구하고자 하는데, 이럴 경우 for문으로 1000번을 돌려야 한다.) int n = 5, k = 1000; long long result = 1; for(int i = 0; i < k; i++) result *= n; k가 작은 수라면 문제가 없지만 k가 1000도 아닌 100,000,000처럼 큰 수이면 어떻게 될까? 그럴 때에는 아무리 O(n)이라도 시간이 꽤 오래 걸릴 것이다. 이럴 때 연산 시간을 O(logn)까지 줄이는 방법이 있다. 재귀함수 등 여러가지 방법이 있으나 이번에는 지수 계산을 이용한 방법으로 해결해보았다. 간단한 예시로 2를 10번 제곱한다고 생각해.. 2020. 1. 6. 이전 1 2 3 4 다음
