KDT TIL Note35 [KDT 강의] 리액트 뜯어보며 이해하기 클래스형 컴포넌트를 사용할 때는, 화면에 렌더할 때 React.Component에 있는 render() 메소드를 사용해줘야 한다. 사용하면 좋을 extension tool 컴포넌트를 보다 손쉽게 생성할 수 있게 해준다 ! ex) rfc => 기본적인 함수형 컴포넌트 생성해 줌. (React Functional Component) rcc => 기본적인 클래스형 컴포넌트 생성해 줌. (React Class Component) rccp => React Class Component PropType rce => React Class Export TicTacToe App 만들기 리액트에서는 컴포넌트 간에 데이터가 오고갈 때, Props를 사용한다 ! 특별히 상속하는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하.. 2023. 1. 6. [KDT 리액트] 리액트란? 1 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있고, 라이브러리는 어떤 특정 기능을 모듈화 해놓은 것으로 프레임워크는 여러 라이브러리들 포함하고 있는 더 큰 범위이다. 리액트는 프레임워크가 아닌 라이브러리라고 보는 이유는, 전적으로 UI를 렌더링하는 데 관여하기 때문이다. cf. 앵귤러(Angular)와 뷰(Vue)는 프레임워크 리액트는 함께 사용될만한 라이브러리들이 잘 마련되어있는, 즉 리액트의 생태계가 잘 갖춰져있다. 예를 들면, 라우팅(페이지 이동)을 위한 라이브러리 react-router-dom이라든지 상태 관리를 위한 라이브러리들 redux, recoil, mobx라든지 빌드를 위한 webpack, npm이라든지.. 2022. 12. 30. [알고리즘 자습] 대표적인 데이터 구조: 해쉬 테이블(Hash Table) 1. 구조 : 키(key)에 데이터(value)를 저장하는 데이터 구조 key를 가지고 해싱 함수를 통해 데이터의 주소를 알아내, 데이터를 순차적으로 검색할 필요없이 바로 받아올 수 있어 접근 속도나 처리 속도가 획기적으로 빨라짐 대표적인 예로 파이썬의 딕셔너리 자료형이 이 해쉬 테이블로 내부구조가 되어 있음 => 파이썬에서는 딕셔너리 타입을 사용하면 되므로 해쉬를 별도로 구현할 필요가 없다. 배열로 미리 Hash Table 2. 용어 해쉬: 임의 값을 고정 길이로 변환하는 것 해쉬 테이블: 키 값의 연산에 의해 직접 접근이 가능한 데이터 구조 해싱 함수: key에 대해 산술 연산을 하여 데이터의 위치를 찾을 수 있는 함수 해쉬 값 또는 해쉬 주소: key를 해싱 함수로 연산해 해쉬 값을 알아내고, 이 .. 2022. 12. 23. [JS] 정규표현식 정규표현식(정규식)이란, 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JS 고유의 문법은 아니고 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 표준 내장 객체인 RegExp의 메서드 exec(), test()와 표준 내장 객체인 String의 메서드 match(), matchAll(), replace(), replaceAll(), search(), split()와 함께 사용할 수 있다 ! 정규식은 문자열을 대상으로 다음과 같은 패턴 매칭 기능을 제공한다. 1. 문자 검색(search) 2. 문자 대체(replace) 3. 문자 추출(extract) 정규 표현식 객체(RegExp 객체)를 생성하기 위해서 다음의 두 가지 방법이 있다. 1. 리터럴 방식 : 슬래시(/)로 시작과 종료를 나타내.. 2022. 12. 23. JS로 OMDb API 사용하기 API란? Appication Programming Interface 두 소프트웨어(App)의 구성 요소가 프로토콜(통신규약) 집합을 사용하여 서로 요청과 응답하며 통신할 수 있게 되는 방법에 대해 정의해 놓은 것으로 그 정보는 API 문서에 들어 있다. API는 생성 시기와 생성 이유에 따라 네 가지 방식으로 작동할 수 있다. 1. SOAP APIs : 단순 객체 접근(Simple Object Access) 프로토콜을 사용하는 API로, XLM을 사용하여 메세지를 교환. 과거에 더 많이 사용되었으며 유연성이 떨어진다. 2. RPC APIs : 원격 프로시저 호출이라고도 불리는 이 API는 클라이언트가 서버에 대한 함수나 프로시저를 마치고, 서버는 클라이언트에게 다시 결과를 보낸다. 3. Websocke.. 2022. 12. 16. [KDT JS] Node.js Node.js: JS가 동작할 수 있는 웹브라우저와 같은 런타임(프로그래밍 언어가 동작하는 환경)으로, Chrome V8 JS 엔진으로 빌드된, 웹페이지를 제작할 컴퓨터를 JS로 제어할 수 있는 JS 런타임 cf. 웹브라우저에서는 HTML, CSS, JS만 동작한다. Node.js에서 모듈의 도움을 받아 웹 개발을 하고, 웹브라우저가 인식할 수 있는 HTML, CSS, JS 형식으로 JS로 작성된 프로그램을 변환하는 환경 또한 Node.js이다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS(Long Term Supported) 버전은 장기.. 2022. 12. 6. [알고리즘 자습] 문제 해결 접근법 알고리즘이란? 특정 작업을 달성하기 위한 혹은 문제를 해결하기 위해 수행해야 하는 일련의 과정이나 단계를 의미한다. 알고리즘 문제를 풀기 위해, 1. 문제 해결을 위한 계획을 생각해본다. 2. 일반적인 문제 해결 패턴을 파악하고 익힌다. 1. 문제의 이해 ① 내 자신의 말로 문제를 다시 파악하고 설명해보도록 한다. ② 문제에 사용되는 입력값들은 무엇인지 파악한다. ③ 문제의 해답으로 나와야하는 출력값들은 무엇인지 파악한다. ④ 입력값이 출력값을 결정하게 되는지, 문제를 해결할 정보가 충분히 주어졌는지 생각해본다. ⑤ 문제로 제시된 데이터들 중 중요한 부분들이 무엇인지, 어떻게 분류해야 할지, 어떤 이름(용어)을 붙일지 생각해본다. ex) 두 수를 가지고 그들의 총합을 반환하는 함수를 작성하라. ① 내 자.. 2022. 11. 30. [알고리즘 자습] 빅오 표기법(big O notation), 로그(Logarithms) 프로그램의 연산자의 개수로 계산 1. 상수 개의 연산자 : O(1) ... 처리할 자료 개수 n개에 영향받지 않음. ex) 산술 연산자, 변수 할당, 인덱스를 사용한 배열 요소로의 접근이나 키를 이용한 객체 요소로의 접근, 2. 계수 x의 크기에 상관없이 xn 개의 연산자 : O(n) => 빅오 표현식의 단순화 ... ex) 반복문 but 반복문 조건에 따라 다름 ! 3. 계수 x의 크기에 상관없이 x*n*n 개의 연산자 : O(n^2) => 빅오 표현식의 단순화, 최고차항 ... ex) 중첩(nested) 반복문 입력(n)이 커질수록 알고리즘이 얼마나 얼마나 공간을 많이 사용하게 되는지 cf. 보조 공간 복잡도(auxiliary space complexity) : 입력(n)은 제외하고 알고리즘 자체가 .. 2022. 11. 25. [백준] 기본 탐색 - 기초 문제 (1543, 1568, 1302, 1668, 1236) 1543번 문서 검색 ◈ 생각해야할 포인트 - 문서의 길이는 최대 2,500이고 단어의 길이는 최대 50로 다루어야할 데이터 양이 적으므로 시간복잡도에 구애받지 않고 문제를 풀면 되겠다. - 문서의 길이 * 단어의 길이로 모든 경우를 살펴보는 시간복잡도 O(NM)의 프로그램 작성해도 괜찮겠다. 1568번 새 문제이해 : 새가 14마리가 있을 때 1부터 숫자를 외치는데 1을 외칠 때는 한 마리가 날아가면서 외치고, 2를 외칠 때는 두 마리가 날아가고 하다가 4를 외칠 때에는 10마리가 날아가 4마리 밖에 안남아서 그 다음 수 5를 외칠 수가 없다. 그래서 다시 처음인 1부터 외치면서 1마리, 그 다음에 2마리가 날아가고 남은 한 마리는 다시 1을 외치며 날아가서 총 7번의 횟수를 통해 모든 새가 날아가게 .. 2022. 11. 17. 이전 1 2 3 4 다음
