수업노트

Redux 리덕스는 상태 관리 라이브러리이다. 리덕스를 사용하면 우리가 만들게 될 상태 관리 로직들을 다른 파일들로 분리 시켜서 더욱 효율적으로 관리 할 수 있고, 글로벌 상태 관리도 할 수 있다. Redux는 언제 사용할까? 애플리케이션의 여러 곳에서 공유되는 데이터 다른 페이지를 갔다가 돌아왔을 때 그 상태를 유지할 필요가 있는 데이터 -> 위 두 사항에 해당하지 않는 데이터는 react에서 제공하는 컴포넌트의 state로 관리하면 된다. redux에서 사용되는 키워드 1.Action 2.Action Creator 3.Reducer 4.Store 5.Subscribe 1. Action { type: "ADD_100", } 2. Action Creator export const ADD_100 = 'AD..

WIL 2023. 1. 29. 23:34

DI(의존성 주입) 하나의 객체가 다른 객체의 의존성을 제공하는 기술이다. 의존성 주입의 의도는 객체의 생성과 사용의 관심을 분리하는 것이다. 이는 가독성과 코드 재사용을 높혀준다. 또한 의존성 주입을 통해 애플리케이션이나 클래스가 객체의 생성 방식과 독립적일 수 있게 도와주며, 객체의 생성 방식을 분리된 구성 파일에서 지정할 수 있게 해주며, 애플리케이션이 다른 구성을 지원할 수 있게 해준다. 또한 프로그램 디자인이 결합도를 느슨하게 되도록하고 의존관계 역전 원칙과 단일 책임 원칙을 따르도록 클라이언트의 생성에 대한 의존성을 클라이언트의 행위로부터 분리되게 해준다. 의존성 주입의 기본 단위인 주입은 새롭거나 관습적인 메커니즘이 아니다. 매개변수 전달과 동일하게 동작한다. 장점으로는 모듈들을 쉽게 교체할..

WIL 2023. 1. 23. 01:16

ES5문법 1. 배열과 관련해서 새로운 메소드들(forEach, map, filter, reduce, some, every) 생겼다. 이 메소드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과 있다. 2. object에 대한 getter/setter 지원해준다. 3. 자바스크립트 strict 모드 지원(더욱 세심하게 문법 검사)해준다. 4. JSON 지원(과거에는 XML을 사용하다가, json이 뜨면서 지원)해준다. 5. bind() 메소드가 생겼다. (this를 강제로 bind 시켜주는 메소드) ES6문법 1. let, const 키워드가 추가됐다 2. arrow 문법을 지원하다. 3. iterator / generator가 추가됐다. 4. module import / expo..

카테고리 없음 2023. 1. 16. 00:04

자료구조 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장하는 방법을 말한다. 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 정의한 것이라 할 수 있다. 알고리즘 문제를 해결하기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것으로 계산을 실행하기 위한 단계적 절차를 말한다. 동적계획법 복잡한 문제를 간단한 여러 개의 문제로 나누어 푸는 방법이다. 정확히 말해 최적화 이론의 한 기술로 특정 범위까지의 값을 구하기 위해서 그것과 다른 범위까지의 값을 이용하여 효율적으로 값을 구하는 알고리즘 설계 기법이다. 피보나치 수열 동적 계획법의 등장 배경은 피보나치 수열을 통해 알 수 있다고 한다. 피보나치 수열은 제2항까지는 1, 제3항부터는 바로..

WIL 2023. 1. 9. 04:17

mssql을 사용하여 쿼리를 짜던 와중 쿼리 처리 시간이 기하급수적으로 증가하는 문제가 발생했다. db의 용량은 300kb를 약간 넘는 정도 였으나 쿼리를 처리하는데 걸리는 시간은 20초를 초과한느 문제가 발생한 것. 처음에는 left outer join의 남발로 인한 문제로 보았으나 쿼리를 개선해 보아도 시간의 단축은 거의 되지 않았다. 결국 left outer join으로 합쳐지는 쿼리들을 개별적으로 실행해 보았고 원인을 찾을 수 있었다. 바로 select * where 날짜 > dbo.fn_getdate(0); 형식의 쿼리에서 대부분의 시간이 걸리게 된것이었다. 전혀 쿼리 시간을 잡아먹을게 없는 쿼리였기에 한참을 찾아보았고 원인을 찾을 수 있었다. 바로 mssql에서 간혈적으로 발생하는 conver..

WIL 2023. 1. 1. 23:47

1. Index와 사용 이유 Query의 SELECT 문의 속도를 향상시키는 역할을 한다. Index 역시 하나의 DB 객체이므로 따로 저장 공간이 필요하며, 보통 저장된 공간의 10% 정도가 Index를 위한 저장 공간으로 사용된다. 세부적응로 살펴보자면 Oracle, DB2 등에서는 스키마 객체 역할을 하고, MySQL, SQL Server 등에서는 테이블 내의 객체 역할을 한다. 2. Index 동작 방법 특정 컬럼에 Index를 설정해서, 해당 컬럼을 기반으로 데이터를 정렬한 후 별도 메모리 공간에 데이터 물리적 주소와 함께 Index를 저장하게 된다 이 때 Index의 핵심은 Index에 의해 데이터가 정렬된 형태를 갖는 다는 점이니 알고가자. 1) Full Table Scan - Index가 ..

WIL 2022. 12. 25. 17:37

1. 로컬 스토리지, 세션 스토리지? 로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소다. 간단한 키와 값을 저장할 수 있는 Key&Value 스토리지의 형태다. 2. 로컬 스토리지와 세션 스토리지의 차이 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성의 유무라 할 수 있다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있지만, 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. 지속적으로 필요한 데이터라면 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보는 세션 스토리지에 저장해서 활용할 수 있다. 3. 로컬 스토리지 로컬 스토리지는 window.localStorage에 위치한다. Key&Value 스토리지기 때문에 키와 밸류를 순서대로 ..

WIL 2022. 12. 18. 20:05

이번에 프로젝트 상 sse 통신을 이용하여 db상의 데이터를 스케쥴러를 이용해 1분 단위로 비교하여 데이터가 변동될시에만 쿼리 결과를 클라이언트에 보내 주도록 구현해 보았다. sse의 경우 포토폴리오를 위한 프로젝트에서 구현해 본 경험이 있었기에 수월하게 구현할 수 있을 것이라 생각하였지만... sse를 구현하던 도중 지속적인 api 호출과 함께 클라이언트측에서 다음과 같ㅇ느 콘솔 에러메세지 출력되었다. 'ERR_INCOMPLETE_CHUNKED_ENCODING 200' 이 문제의 경우 해당 api를 영구적으로 호출하려고 시도하는 경우 발생하는 오류라는 것을 확인 할 수 있었다. 분명 서버 내 데이터를 받아 올 뿐만 아니라, 값이 변동 될때만 서버 측에서 클라이언트 측으로 메세지가 전송되도록 구현한 상태..

WIL 2022. 12. 11. 23:10