web study

주니어 개발자로 일하고 있는데, 컴퓨터공학 등의 관련 전공이 아니다. 때문에 관련 지식 공부가 필요하다고 느껴 사이버대학에 편입하였다. 졸업하기 위해서는 IT 관련 자격증이 필요하다. 정보처리기사는 이미 취득했기 때문에 어떤 걸 취득할까 하다가 SQLD로 정했다. 실무에서 DB 전문가가 아니더라도 DB를 조작해서 테스트하는 일이 꽤 자주 있었다. 그리고 요즘은 사무직도 DB는 기본적으로 공부한다고 하더라. 2024년 5월 25일 제53회 시험을 3주 앞두고 공부하기로 했다.   SQLD 과목출제 과목을 정리하는 건 기본 중 기본. 주관식이 사라지고 과목이 일부 변경되었으니, 과목도 반드시 체크해둘 것. 주요 항목세부 항목과목1. 데이터 모델링의 이해제1장. 데이터 모델링의 이해제2장. 데이터 모델과 SQ..

N개의 수 중에서 어떤 수가 다른 수 두 개의 합으로 나타낼 수 있다면 그 수를 "좋다(GOOD)"고 한다. N개의 수가 주어지면 그 중에서 좋은 수의 개수는 몇 개인지 출력하라. 수의 위치가 다르면 값이 같아도 다른 수이다. 풀이 JavaScript const fs = require('fs'); const input = fs.readFileSync('input.txt').toString().trim().split('\n'); const N = parseInt(input[0]); const A = input[1].split(' ').map(Number); let Result = 0; for (let k = 0; k < N; k++) { let find = A[k]; let i = 0; let j = N ..

어떠한 자연수 N은, 몇 개의 연속된 자연수의 합으로 나타낼 수 있다. 당신은 어떤 자연수 N(1 ≤ N ≤ 10,000,000)에 대해서, 이 N을 몇 개의 연속된 자연수의 합으로 나타내는 가지수를 알고 싶어한다. 이때, 사용하는 자연수는 N이하여야 한다. 예를 들어, 15를 나타내는 방법은 15, 7+8, 4+5+6, 1+2+3+4+5의 4가지가 있다. 반면에 10을 나타내는 방법은 10, 1+2+3+4의 2가지가 있다. N을 입력받아 가지수를 출력하는 프로그램을 작성하시오. 풀이 JavaScript const n = parseInt(require('fs').readFileSync("input.txt").toString().trim(), 10); let count = 1; // 가장 마지막 수만 뽑는..

기존 Redux에서는 middleware를 사용하여 비동기 처리를 해야 했다. 안 그래도 복잡한 코드가 더 복잡해져 유지보수가 까다로워진다. Redux Toolkit은 간결한 코드로 비동기 처리를 쉽게 할 수 있다. Redux와 Redux toolkit 비동기 처리 비교 구분 Redux Redux Toolkit 비동기 처리 도구 Middleware - Redux Thunk - Redux Saga createAsyncThunk 액션 타입 정의 수동으로 정의해야 함 자동으로 생성됨 코드 구문 Boilerplate 코드가 많음 Redux보다 간결함 설치 및 설정 별도의 미들웨어 설치 및 설정이 필요 Redux Toolkit 패키지만 설치하면 따로 설치할 필요 없음 액션 생성 액션 생성자에서 직접 디스패치 cr..

Redux toolkit은 Redux를 효율적으로 사용하기 위한 공식 라이브러리다. Redux를 사용하던 개발자들이 보다 쉽게 코드를 작성하고 유지보수할 수 있도록 해준다. Redux toolkit을 통해 Redux의 코드 복잡성을 줄이고, 보일러플레이트 코드(반복적인 코드)를 최소화하며, 개발자 경험을 향상할 수 있다. 왜 Redux Toolkit을 사용해야 하는가? 1. 간결한 코드 createSlice와 configureStore와 같은 간편한 함수들을 제공하여 보일러플레이트 코드를 최소화한다. 2. 불변성 유지 createSlice는 내부적으로 Immer 라이브러리를 사용한다. Immer 라이브러리는 기존 객체를 직접적으로 수정해도 불변성을 유지될 수 있도록 해준다. Immer는 이전 상태를 변경..

리액트 미들웨어는 애플리케이션의 액션과 스토어 상태 간의 중간 단계로서 동작하는 소프트웨어다. 주로 Redux와 함께 사용되며, 액션을 처리하거나 상태를 변화시키기 전에 추가적인 작업을 수행할 수 있다. 미들웨어 정리표 미들웨어 설명 redux-thunk 비동기 작업을 처리하고 액션 생성자에서 함수를 반환할 수 있게 해준다. 주로 비동기 작업을 다룰 때 사용된다. redux-saga 제너레이터 함수를 이용하여 복잡한 비동기 작업을 처리하는 미들웨어 redux-logger 개발환경에서 스토어의 액션과 상태를 콘솔에 로깅하여 디버깅을 도와주는 미들웨어 redux-persist 스토어의 상태를 지속적으로 유지하고, 로컬 스토리지 또는 다른 저장소에 상태를 저장할 수 있게 해준다. redux-throttle 특..

Redux Thunk는 미들웨어 중 하나로, 비동기 작업을 처리하고 액션을 디스패치할 수 있게 도와주는 라이브러리다. 리덕스는 동기적인 작업에 특화되어 있어서, 비동기 작업을 처리하기 위해서는 Thunk와 같은 미들웨어가 필요하다. 그 외에도 비동기 작업을 처리하는 미들웨어로 Redux Saga, Redux Observable 등이 있다. 동기적 액션 생성자와 Thunk를 사용한 비동기 액션 생성자 비교 동기적 액션 생성자 액션 함수는 단순히 액션 ‘객체’를 반환 반환 형식: { type: '액션_타입', payload: '데이터' } 동기적인 액션을 생성하는 역할 Thunk를 사용한 비동기 액션 생성자 비동기 액션 함수는 ‘함수’를 반환 비동기 액션 함수는 dispatch를 인자로 받음 이를 통해 함수..

Redux는 자바스크립트 기반의 상태 관리 라이브러리다. 주로 React와 사용되지만 순수 자바스크립트, Angular, Vue에서도 사용 가능하다. Redux는 상태를 예측할 수 있으며, 상태의 변경이 적은 방식에 중점을 두고 있다. 이러한 특징은 단일 페이지 애플리케이션(SPAs) 또는 자바스크립트 프레임워크 및 라이브러리와 잘 맞는다. React 예제: https://fromnowwon.tistory.com/entry/react-redux Redux 설치와 코드 예제 github: https://github.com/fromnowwon/redux-vanilla-cafe-order-syatem 설치 npm install redux 코드 예제 store.js: 스토어 (주문목록 저장소) actions.j..

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리이다. React에서 Redux를 사용하는 주된 이유는 상태 관리의 효율성과 예측 가능성을 높이기 위함이다. React 차체에서도 컴포넌트 state를 통한 상태 관리가 가능하지만, 복잡한 상태 관리가 필요한 대규모 애플리케이션에서는 Redux와 같은 전역 상태 관리 방식을 도입한다. Redux 사용 이유 중앙 집중식 상태 관리와 단일 출처 Redux는 상태를 하나의 스토어에 저장한다. 때문에 한 곳에서 모든 상태 관리가 이루어진다. 이는 데이터가 어디서 오는지 명확하게 파악할 수 있게 하며, 데이터의 일관성을 유지할 수 있다. 예측 가능성 Redux는 상태의 변화를 예측 가능한 방식으로 다룬다. 상태는 불변성을 유지하면서 액션에 의해 변..

리액트의 상태 관리 방법에는 여러 가지가 있다. 효과적인 상태 관리는 매우 중요하다. 상태 관리의 핵심은 어떻게 애플리케이션의 데이터를 구조화하고 관리하는가에 달려있다. 크게는 로컬 상태 관리와 전역 상태 관리를 기준으로 나눌 수 있다. 리액트 상태 관리 방법 정리표 관리 방법 로컬/전역 주요 특징 주요 사용 시점 useState Hook 로컬 - 함수형 컴포넌트에서 상태를 관리하는 데 사용됨 작은 규모의 컴포넌트 또는 컴포넌트 간 통신에 적합 useReducer Hook 로컬 - 복잡한 상태 로직을 다룰 때, 이전 상태와 액션을 활용하여 상태를 업데이트 - 컴포넌트 로직을 분리하고 예측 가능한 상태 관리 가능 복잡한 상태 로직이나 컴포넌트 간 통신이 많은 경우 Context API 전역 - 컴포넌트 트..