분류 전체보기78

• 

  [Kotlin] Kotlin 설치 및 개발 환경 구축하기(기본 셋팅) Kotlin풀스택 웹 개발, Android와 iOS 앱, 임베디드, IoT 등 모든 개발을 다양한 플랫폼에서 개발할 수 있도록 하는 것  사용 가능한 플랫폼Kotlin/JVM : 자바 가상 머신 상에서 동작하는 앱을 만들 수 있음Kotlin/JS : 자바스크립트에 의해 브라우저에서 동작하는 앱을 만들 수 있음Kotlin/Native : LLVM 기반의 네이티브 컴파일을 지원해 여러 타깃의 앱을 만들 수 있음 코틀린의 장점컴파일과정에서 오류 검출널 포인터로 인한 프로그램의 중단을 예방할 수 있음( = NPE(Null Pointer Exception)에서 자유롭다)함수형 프로그래밍과 객체 지향 프로그래밍이 모두 가능세미콜론을 생략할 수 있음아주 간결하고 효율적 JDK코틀린을 JVM에서 실행하기 위해 설치기존.. 개발새발개발/Kotlin 2025. 3. 5.

• 

  알고리즘 N-Queen(백준 9663번) 파이썬 문제 설명크기가 N x N인 체스판 위에 퀸 N개를 서로 공격할 수 없게 놓는 문제N 이 주어졌을 때, 퀸을 놓는 방법의 수를 구하는 프로그램을 작성하시오 규칙- Queen은 가로 세로 대각선으로 이동할 수 있다  입력1 ≤ N   입력 예제8  출력첫째 줄에 퀸 N개를 서로 공격할 수 없게 놓는 경우의 수를 출력한다.  출력 예제92    문제 풀이체스말을 놓을 수 있는지 확인 가로세로- dfs를 사용하여 행은 n(i)로 +1씩 더해주면서 확인하고, 열은 v1 배열을 사용하여 j 값을 1로 체크해준다 우상 대각선- 우상 대각선에는 규칙이 있다- i+j 값이 모두 같다(위의 초록색 라인은 합이 모두 4)- i+j 값은 2*N-1 개 좌상 대각선- 좌상 대각선에도 규칙이 있다- i-j 값이 모두 같다(위의.. 개발새발문제 2025. 2. 27.

• 

  알고리즘 우선순위큐 - 최대 힙(백준 11279번) 파이썬 우선순위큐일반적인 큐(Queue)는 선입 선출의 구조(FIFO, First In First Out)를 가지고 있다.하지만, 우선순위큐(Priority Queue)는 들어간 순서에 상관없이 우선순위가 높은 데이터가 먼저 나오는 것을 의미한다.   우선순위 큐는,1. 모든 항목에 우선순위가 있다.2. 높은 우선순위를 가진 요소는 낮은 우선순위를 가진 요소보다 먼저 제거된다.3. 두 요소의 우선순위가 같으면 큐의 순서에 따라 제거된다.   우선순위큐는 최소 두 가지 연산을 가지고 있다.하나의 원소를 우선순위를 지정하여 추가하는 함수 push우선순위가 가장 높은 원소를 큐에서 제거하고 반환하는 함수 pop  우선순위큐는 힙(heap)이라는 자료 구조를 이용해 구현한다힙(heap)이란, 완전 이진트리로 부모 노드.. 개발새발문제 2025. 2. 23.

• 

  [React] useReducer 사용하기 useReducer컴포넌트 내부에 새로운 State를 생성하는 React Hook모든 useState는 useReducer로 대체 가능useState는 state를 관리하는 코드를 컴포넌트 내부에만 작성 가능하지만, useReducer를 사용하면 state를 관리하는 코드를 컴포넌트 외부에 작성할 수 있어 코드의 가독성을 높일 수 있다  사용하기import { act, useReducer } from 'react';const reducer = (state, action) => { if (action.type === 'INCREASE') { return state + action.data; } else if (action.type === 'DECREASE') { return s.. 개발새발개발/React 2025. 2. 20.

• 

  [React] 최적화하기 (Optimization) - useMemo, memo, useCallback 최적화(Optimization) 적용1. 시기 : 하나의 프로젝트를 거의 완성한 상태에서 시행기능 구현 → 최적화최적화를 먼저 하면 기능 수정할 때 최적화가 풀리거나 꼬여서 작동을 안할 수도 있음 2. 적용 대상 : 꼭 최적화가 필요한 것에만 시행최적화도 마찬가지로 연산이 필요하기 때문에, 단순한 연산일 경우 그냥 리렌더링 되도록 두는게 더 빠를 수도 있음TodoItem을 생성하는 것과 같이 유저의 행동에 따라 개수가 많아질 수 있는 컴포넌트혹은 함수들을 많이 가지고 있어 무거운 코드의 경우 적용하는 게 좋음   useMemo"메모이제이션" 기법을 기반으로 불필요한 연산을 최적화하는 리액트 훅반복되는 내용을 저장해뒀다가 필요할 때 꺼내 쓰는 느낌useMemo를 사용하면 연산 자체를 메모이제이션 할 수 있.. 개발새발개발/React 2025. 2. 19.

• 

  [React] Context 사용해서 props 없이 편하게 데이터 전달하기 Context컴포넌트간의 데이터를 전달하는 또 다른 방법기존의 Props가 가지고 있던 단점(Props drilling)을 해결굳이 부모컴포넌트에서 깊이 있는 자식 컴포넌트까지 갈 필요 없이 바로 가져다 사용 가능(Store와 비슷)  사용해보기 1. import createContext import { createContext } from 'react';  2. Context 생성해서 exportexport const TodoContext = createContext();  3. 사용할 자식 컴포넌트 감싸기 return ( );value에 넘겨줄 값 담기(여러개일 경우 객체로 주기)   4. context에서 값 가져오기i.. 개발새발개발/React 2025. 2. 18.

• 

  [React + TypeScript + Tailwind] 가독성 높이는 UI 컴포넌트 만들기 tailwind css의 특성 상  코드가 끝없이 길어지는 건 자주 일어나는 일이다또한 display : flex를 사용하다보면 div가 많이 사용되어 전체 코드를 봤을 때,각 영역을 한눈에 구분하기가 어렵다이로인해 전체 코드의 가독성이 떨어지게 된다!   그래서 오늘은  React + TypeScript + Tailwind를 사용할 때재사용 가능한, 가독성 높이는 UI 컴포넌트 만드는 방법에 대해 이야기해보려한다!    저도 배우고 공부하고 있는 학생입니다무조건 제 코드가 정답은 아닙니다 :)   전후 코드 비교해보기  개선하기 전 코드인 왼쪽을 봤을 때, 일단 가로로 무척 길어서 코드를 한 화면에 보기 어렵다또한 div와 section이 얽혀있어 각각의 div와 section 이 어떤 영역인지 한 눈.. 개발새발개발/React 2025. 2. 14.

• 

  [React] VSCode Prettier 적용 안됨 5가지 해결 방법 강의에서 말한것 그대로 Prettier를 설치해서 사용하고 있었는데,어느 순간부터 Prettier를 쓰려고 하면 저렇게 빨간 표시가 뜨면서 적용이 안됐다  그래서 오늘은 나와 같은 문제를 겪고 계신 분들을 위해인터넷에 있는 여러가지 방법을 이것저것 다 해보면서 찾아낸해결방법을 공유하려고 한다  방법1 간단하다. 재설치 후 재부팅Prettier를 삭제 후 재설치하고Ctrl + Shift + P -> Reload   하지만 이렇게 간단히 해결될 문제였으면 구글링을 할 필요가 없지....!  방법2모두가 다 해보라고 하는 설정 확인하는 것 [파일] - [기본 설정] - [설정] or Ctrl + , 으로 설정에 들어가서1. Format On Save가 체크되어있어야 하며(저장할 때 Prettier 적용하는 역.. 개발새발개발/React 2025. 2. 13.

• 

  백준 1009 분산처리 만만치않은 브론즈2 문제설명재용이는 최신 컴퓨터 10대를 가지고 있다. 어느 날 재용이는 많은 데이터를 처리해야 될 일이 생겨서 각 컴퓨터에 1번부터 10번까지의 번호를 부여하고, 10대의 컴퓨터가 다음과 같은 방법으로 데이터들을 처리하기로 하였다.1번 데이터는 1번 컴퓨터, 2번 데이터는 2번 컴퓨터, 3번 데이터는 3번 컴퓨터, ... ,10번 데이터는 10번 컴퓨터, 11번 데이터는 1번 컴퓨터, 12번 데이터는 2번 컴퓨터, ...총 데이터의 개수는 항상 ab개의 형태로 주어진다. 재용이는 문득 마지막 데이터가 처리될 컴퓨터의 번호가 궁금해졌다. 이를 수행해주는 프로그램을 작성하라. => 즉 a**b를 10으로 나눈  나머지를 구하는 문제 입력1. 테스트케이스의 개수 T2. a,b51 63 76 27 1009 635.. 개발새발문제 2025. 2. 12.

• 

  [React+Typescript] Todos 앱 만들기 Todos 앱 만들기index.tsximport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);root.render( );   App.tsximport { useRef, useState, useEffect } from 'react';import { Todo } from './Type';import './App.css';import Editor from './components/Editor';import TodoI.. 개발새발개발/React 2025. 2. 11.

• 

  [React+Typescript] Todos 앱만들기 화살표함수 주의 React와 Typescript로 Todos 앱만들기를 공부하던 중 오류 발생!  오류 코드import { useRef, useState, useEffect } from 'react';import { Todo } from './Type';import './App.css';import Editor from './components/Editor';import TodoItem from './components/TodoItem';function App() { const [todos, setTodos] = useState([]) const idRef = useRef(1) const onClickAdd = (text:string) => { setTodos([ ...todos, { .. 개발새발개발/React 2025. 2. 10.

• 

  [Typescript] 타입스크립트 설치 및 시작, tsnode, TSX, 타입스크립트 컴파일러 설정 타입스크립트 - 정적 타입 시스템과 동적 타입 시스템의 단점을 보완한 점진적 타입 시스템    타입스크립트 시작하기(폴더 바꿀때마다 해줌) 1. npm init - node.js 패키지 초기화  2. npm i @types/node- 타입스크립트 설치   3.  npm install typescript -g- 타입스크립트 컴파일러 설치- `-g` 로 전역 설치- `tsc -v`으로 5. 버전인지 확인     타입스크립트 실행1. src/index.ts- 타입스크립트의 확장자 ts  2. 코드 입력console.log("hello")const a : number = 1  3. $`tsc src/index.ts`- 실행 명령어 입력- index.js가 생김   4. 코드 실행`$ node src/index... 개발새발개발/TypeScript 2025. 2. 9.