개발 28

[React] Study #4 | Props를 통한 컴포넌트간의 값 전달

💡Props? Properties의 줄임말 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할때, props를 사용 Props의 기본 사용법 1️⃣ 하나의 props 전달 Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name 이라는 값을 전달해주고 싶을 경우 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( // name값을 Hello 컴포넌트에게 보내기 ); } export default App; Hello.js (받아온 컴포넌트 사용하기) import React from 'react'; function Hello(props) { return {props.name} } export d..

[React] Study #3 | JSX의 기본규칙

💡JSX? 리액트에서 생김새를 정의할 때, 사용하는 문법 HTML처럼 생겼지만 실제로는 JavaScript! return JSX를 알아보자!; 💡 JSX의 기본규칙 1️⃣ 꼭 닫혀야 하는 태그 import React from 'react'; import Hello from './Hello'; function App() { return ( /* 여기에서 오류 발생! 꼭 로 닫아주자 */ ); } export default App; HTML에서는 input과 br 태그를 닫지 않고 사용하기도 한다! 하지만 리액트에서는 그렇게 하면 안됨! Self Closing 태그를 사용하자! /* 잘못됨 */ /* Self Closing 태그 */ 2️⃣ 꼭 감싸져야하는 태그 두개 이상의 태그는 무조건 하나로 감싸져야 한..

[React] Study #2 | Component, 컴포넌트!

1️⃣ 컴포넌트 하나 만들어보기 import react from 'react';// 리액트 불러오기 function Hello() { return 안녕하세요 } export default Hello;// Hello 라는 컴포넌트로 내보내겠다! 리액트 컴포넌트 종류 함수형 : 내가 블로그에 작성하고 공부하면서 쓸 컴포넌트 형태임! 클래스형 export default Hello; 다른 컴포넌트에서 불러와서 사용가능 2️⃣ App.js에서 Hello 컴포넌트 불러오기 import React from 'react'; //리액트 불러오기 import Hello from './Hello'; //Hello 컴포넌트 불러오기 function App() { return ( {/* 적용! */} ); } export de..

[React] Study #1 | React? React!

💡아이디어의 시작 " 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? " 라는 아이디어에서 시작! 아이디어의 장점 : "업데이트를 어떻게 해야할 지"에 대한 고민을 전혀 안해도 되기 때문에 개발이 쉬움 아이디어의 단점 : 모든 걸 다 날려버리고 새로 만든다? 너무 오래걸려! 하지만, 이 단점은 Virtual DOM 이라는 것을 사용해서 해결! Virtual DOM 말 그대로 메모리에 존재하는 가상의 DOM 그저 Javascript 객체! -> 속도가 빠름! 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링 업데이트를 어떻게 할지에 대한 고..

[Algorithm] 선택문제 알고리즘 (feat. Quick-Sort)

선택문제? n개의 숫자들 중에서 k번재로 작은 숫자를 찾는 문제 💡어떻게 해결하면 좋을까? 첫번째 방법 : 순차탐색! 최소숫자를 k번 찾는다. 단, 최소 숫자를 찾은 뒤에는 입력에서 최소 숫자를 제거 숫자제거 = 추가 수행시간 + 추가 메모리 필요 O(kn) -> 최악의 경우, n번의 순차 탐색 ! 주어진 숫자 개수 n이 크면 커질 수 있다. 두번째 방법 : 숫자들을 정렬한 후, k번째 숫자를 찾는다. O(nlogn) k가 작을 경우, 1번 방법이 유리 그렇지 않을 경우, 2번 방법이 유리 💡아이디어 이진탐색 활용 : 정렬된 입력의 중간에 있는 숫자와 찾고자 하는 숫자를 비교함으로써, 입력을 1/2로 나눈 두 부분 중에서 한 부분만을 검색 선택문제는 입력이 정렬되어 있지 않아서, 입력 숫자들 중에서 (퀵..

Algorithm 2021.09.29

[Algorithm] 합병정렬 (Merge sort)

💡합병정렬 알고리즘? 안정정렬에 속하며, 분할 정복 알고리즘의 하나 분할 정복 방법 (divide and conquer) 문제를 작은 2개의 문제로 분리하고 각각을 해결한 다음, 결과를 모아서 원래의 문제를 해결 대개 순환 호출을 이용하여 구현 (재귀적) 과정 리스트의 길이가 0 또는 1이면 이미 정렬된 것으로 본다. 그렇지 않은 경우, 정렬되지 않은 리스트를 절반으로 잘라 비슷한 크기의 두 부분 리스트로 나눈다. 각 부분 리스트를 재귀적으로 합병정렬을 이용해 정렬 두부분 리스트를 다시 하나의 정렬된 리스트로 합병 [ 합병정렬 알고리즘의 구체적인 개념 ] 하나의 리스트를 두개의 균등한 크기로 분할하고 분할된 부분 리스트를 정렬한 다음, 두개의 정렬 리스트를 합하여 전체가 정렬된 리스트가 되게 하는 방법 ..

Algorithm 2021.09.28

[Algorithm] 퀵 정렬 (Quick Sort)

💡퀵 정렬(Quick sort) 알고리즘? 찰스 앤터니 리처드 호어가 개발한 정렬 알고리즘 다른 원소와의 비교만으로 정렬을 수행하는 비교 정렬에 속함 분할 정복 방법을 통해 리스트를 정렬 리스트 가운데서 하나의 원소를 고름, 이 원소를 피벗 이라고 한다. 피벗 앞에는 피벗보다 값이 작은 모든 원소들이 오고, 피벗 뒤에는 비펏보다 값이 큰 모든 원소들이 오도록 피벗을 기준으로 리스트를 둘로 나눈다. -> 리스트를 둘로 나누는 것을 분할이라고 한다. 분할을 마친 뒤에 피벗은 더 이상 움직이지 않는다. 분할된 두 개의 작은 리스트에 대해 재귀적으로 이 과정을 반복한다. -> 리스트의 크기가 0이나 1이 될때까지 재귀를 반복 💡구체적으로 알고리즘을 파헤쳐보자 퀵 정렬은 다음의 단계로 이루어진다. 분할 : 입력 ..

Algorithm 2021.09.17

[Algorithm] 피보나치킨 / Fiona-chicken

알고리즘 수업 첫주차 실습 ! 알고리즘과는 별로 안친하고,, 친해지려고 노력하고 싶은,,, 사람으로써,,,, 여기에 푼 해답 코드는 모두,,,, 완벽하고,, 막그런 코드는 아니니,,, 유의하시길,,,, 내멋대로 내맘대로 푸는 코드...!!! Description 여러 명의 사람들을 위한 치킨을 준비하려고 한다. 피보나치 수열(Fibonacci Numbers)과 제켄도르프 정리(Zeckendorf's Theorem)를 이용하여, 인원 수가 주어졌을 때 필요한 치킨의 양을 구하여라. Input 주어진 사람의 수 (입력되는 값은 문자열 형태의 값임. 형변환 후 사용할 것) 입력 값은 최대 300,000,000 이하의 자연수 Output 필요한 치킨의 마리 수 Sample Input 17 Sample outpu..

Algorithm 2021.09.11