jiwondev.log

[프로그래머스 Lv. 1] 콜라츠 추측

2023.08.02

프로그래머스 알고리즘 풀이 사용 언어 : 자바스크립트 JavaScript JS 1. 콜라츠 추측 1) ❓ 문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인..

✍️ What I Learned/TIL

[TIL] 온프레미스(On-premise) vs. 클라우드(Cloud), AWS 소개, AWS의 주요 서비스

2023.08.02

💡 20230802 TIL : AWS에 대해 공부한 내용 정리 1. On-premise vs Cloud computing 1) 🏠 On-premise 온프레미스(On-premise)란 기업이 직접 물리적 공간에 실제 하드웨어 장비를 가지고 IT 인프라를 구축하여 운영하는 방식을 말한다. 필요한 인프라 시스템을 구축하기 위해 하드웨어와 소프트웨어를 직접 구입하여, 제공 서비스나 시스템 상황에 맞게 환경을 구성한다. 서버의 유지보수 역시 해당 조직의 IT 인프라를 관리하는 팀이 직접 한다. 간혹 학교나 회사에서 봤었던 서버실 같은 곳들을 떠올리면 된다. 2) ☁️ Cloud computing 클라우드 컴퓨팅(Cloud Computing) 또는 클라우드 서비스(Cloud Service)란 제3자 서비스 공급자..

✍️ What I Learned/TIL

[TIL] Redux toolkit - createAction, createReducer, configureStore, createSlice

2023.08.01

1. createAction + reducer rtk의 createAction 함수를 사용하여 action creator 정의 createAction 함수는 자동으로 action creator 함수를 생성하여 action object를 생성한다. (ex. { type: 'ADD', payload: actionPayload }) 그 후 reducer 함수를 직접 정의하여, action type과 payload를 기반으로 상태가 어떻게 업데이트되는지를 지정 state가 변화하면 state를 직접 변경하지 않고, reducer 함수에서 새로운 state를 생성하여 반환 2. createAction + createReducer rtk의 createAction 및 createReducer 함수를 모두 사용한다. ..

✍️ What I Learned/트러블슈팅

[트러블슈팅] TS17004: Cannot use JSX unless the '--jsx' flag is provided.

2023.08.01

🚨 발생 문제 TS17004: Cannot use JSX unless the '--jsx' flag is provided. TS6142: Module './App' was resolved to 'C:/Users/user/Desktop/jiwon/redux-for-beginners/src/App.tsx', but '--jsx' is not set. 문제 상황 예전에 만들어 둔 자바스크립트 React app을 아래 블로그를 참고하여 타입스크립트로 마이그레이션을 완료한 뒤, yarn start하여 리액트 앱을 실행했는데 위와 같은 에러 메시지 발생 마이그레이션 방법 참고 블로그 - How to Migrate a React App to TypeScript 🤔 문제 원인 tsconfig.json에서 jsx 설정을..

✍️ What I Learned/TIL

[TIL] 중첩 라우팅(Nested Routes) (feat. React-Router-DOM v6)

2023.07.31

react-router-dom 6 이상 버전에서 nested routes를 구현하는 방법에는 두 가지가 있다. 참고 사이트 - The Guide to Nested Routes with React Router 1. 부모 Route path에 `/*` 부모 route의 path 마지막에 /*를 적어 명시적으로 이 route의 내부에서 nested route가 렌더링될 수 있음을 표시하고, 자식 route를 부모 route의 element 내부에 작성하는 방법 // Router.tsx // Coin.tsx Routes가 상대경로도 지원하기 때문에 path="chart"와 같이 써도 동작한다. 2. 자식 Route를 Route 내부에 작성 자식 route를 부모 element의 내부가 아닌 route 내부에 작..

✍️ What I Learned/TIL

[TIL] TypeScript로 투두리스트 만들기 - global.d.ts, 이벤트 타입지정

2023.07.28

1. global.d.ts Todo List를 만들 때, Todo 객체는 여러 컴포넌트에서 쓰일 것이므로 Todo 객체의 타입은 전역적으로 설정해주면 효율적일 것이다. `global.d.ts` 파일은 TypeScript에서 전역으로 사용할 타입들을 선언하는 파일이다. 일반적으로 `.d.ts` 확장자를 가진 파일들은 TypeScript 타입 선언 파일로서, 프로젝트 전체에서 사용되는 타입들을 정의하기 위해 사용된다. 1) 내가 작성한 global.d.ts 파일 // global.d.ts import { Dispatch, SetStateAction } from "react"; export interface Todo { id: string; title: string; content: string; isDone..

💻 Programming/Algorithm

[프로그래머스 Lv. 0] 가까운 1 찾기

2023.07.28

프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 가까운 1 찾기 1) ❓ 문제 설명 정수 배열 arr가 주어집니다. 이때 arr의 원소는 1 또는 0입니다. 정수 idx가 주어졌을 때, idx보다 크면서 배열의 값이 1인 가장 작은 인덱스를 찾아서 반환하는 solution 함수를 완성해 주세요. 단, 만약 그러한 인덱스가 없다면 -1을 반환합니다. 2) 🚫 제한 사항 3 ≤ arr의 길이 ≤ 100,000 arr의 원소는 전부 1 또는 0입니다. 3) ☑️ 입출력 예 arr idx result [0, 0, 0, 1] 1 3 [1, 0, 0, 1, 0, 0] 4 -1 [1, 1, 1, 1, 0] 3 3 2. 사용한 메서드: for문 for문으로 배열의 모든 요소 순회 배..

💻 Programming/Algorithm

[프로그래머스 Lv. 0] 특별한 이차원 배열 2

2023.07.28

프로그래머스 알고리즘 풀이 사용 언어 : 자바스크립트 JavaScript JS 1. 특별한 이차원 배열 2 1) 문제 설명 n × n 크기의 이차원 배열 arr이 매개변수로 주어질 때, arr이 다음을 만족하면 1을 아니라면 0을 return 하는 solution 함수를 작성해 주세요. 0 ≤ i, j

✍️ What I Learned/TIL

[TIL] TypeScript + React 개발환경 세팅

2023.07.27

1. 리액트 앱 생성 // yarn yarn create react-app my-app (--template typescript) // npx npx create-react-app my-app (--template typescript) 디렉토리 구조 package.json 프로젝트 정보와 의존성(dependencies)을 관리하는 문서 파일 안의 script 객체에서는 실행, 빌드 등의 alias를 설정하여 관리할 수 있음 tsconfig.json 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 됨 tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정 2. 절대경로 사용 // tsconfig.json { ..

💻 Programming/JS, TS

[TypeScript] Map

2023.07.27

map은 React.js에서는 주로 배열로 이루어진 데이터를 뿌려줄 때 많이 사용했었는데, 타입스크립트에서 사용법이 조금 특이한 것 같아 간단하게 정리해보고자 한다. 1. Map이란? 자바스크립트와 타입스크립트에서 제공되는 데이터 구조 중 하나로, Key와 Value의 쌍을 저장하는 컬렉션이다. 이 컬렉션은 값에 대한 고유한 키를 사용하여 값을 저장하고 검색하는 데 사용된다. 2. Map의 특징 1) 고유한 key값 `Map`은 key-value 쌍을 저장하는데, 각 key는 중복될 수 없으며 unique한 고유값이어야 한다. key가 중복될 경우, 가장 마지막 value가 저장된다. 2) key-value 쌍으로 저장 각 항목을 key-value의 쌍으로 저장하여, key값을 사용하여 해당 key에 연..

전체 글

[프로그래머스 Lv. 1] 콜라츠 추측

[TIL] 온프레미스(On-premise) vs. 클라우드(Cloud), AWS 소개, AWS의 주요 서비스

[TIL] Redux toolkit - createAction, createReducer, configureStore, createSlice

[트러블슈팅] TS17004: Cannot use JSX unless the '--jsx' flag is provided.

[TIL] 중첩 라우팅(Nested Routes) (feat. React-Router-DOM v6)

[TIL] TypeScript로 투두리스트 만들기 - global.d.ts, 이벤트 타입지정

[프로그래머스 Lv. 0] 가까운 1 찾기

[프로그래머스 Lv. 0] 특별한 이차원 배열 2

[TIL] TypeScript + React 개발환경 세팅

[TypeScript] Map

티스토리툴바