개발새발개발66

• 

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

• 

  [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.

• 

  [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.

• 

  [Figma] 테이블 만들기, 요소 감싸기 실습 테이블 만들기 실습 테이블 만들기1. 텍스트 작성(제목칸)2. 오토 레이아웃 적용(Shift+A)3. 컬러 조정(배경색, 글씨색, 테두리색)4. 제목칸 복제해서 날짜칸 생성5. 제목칸과 날짜칸을 함께 선택해서 오토레이아웃6. 테이블 사이 간격을 -1로 하면 테두리 선이 1개로 겹쳐짐7. 한 줄의 오토레이아웃을 Row 라는 이름으로 수정8. Row를 3개 복제9. 각각 내용 채우기(내용칸, description, 주석칸)10. 주석칸의 description 칸은 필요없으니 삭제11. 세 줄을 모두 선택해서 오토 레이아웃 적용=> 테이블 생성!  테이블 조정하기1. 주석 row을 Fill로 바꿔서 한 줄에 가득 차게 하기2. 주석칸을 눌러 안에 있는 오브젝트들이 왼쪽 상단에 있도록 하기3. 딥셀렉트(Ctrl.. 개발새발개발/Figma 2025. 2. 8.

• 

  [Figma] 아이콘 만들기와 Auto Layout(오토 레이아웃) 아이콘아이콘 만들기원하는 모양을 만든다세부조절모드로 들어가 밴딩을 줄 수 있다밴딩은 쉬프트를 누르고 만지면 직각방향으로 밴딩이 가능하다알트를 누르면 한 점만 밴딩이 가능하다선 아이콘 만들기Ctrl+X 버튼을 눌러 선과 면을 swap한다원하는 두께에 맞게 stroke 을 조절한다알람 버튼처럼 종안쪽 선을 지워야한다면종 머리부분 복사 -> Ctrl+X로 다시 면 채우기방울이 위로가게 둔 상태에서 면 종머리와 함께 subtrack다시 Ctrl+X설정의 톱니바퀴처럼 세부 설정이 필요하다면요소를 더블클릭해서 요소에 사선이 그어진 상태에서 원하는 부분에 점 찍고 조정아이콘 마무리유니온 해주기선은 블랙으로 해주기나중에 svg모드로 내보낼 때, 다른 색상으로 할 경우 색 덮어쓰기 할 때 색이 섞여 원하는 컬러가 안나올.. 개발새발개발/Figma 2025. 2. 7.

• 

  [React] state, 이벤트핸들러 통합하기 공통되는 state를 하나로 합치기 1. useState를 input 값의 항목을 담은 객체로 수정2. 이벤트 핸들러를 setInput으로 수정  - 스프레드 연산자 활용하여 수정하려는 값 외의 나머지 값은 그대로 유지하도록 하기3. return 값의 value 값을 input.name / input.country 등으로 수정  import { useState } from "react"const Register = () => { const [input,setInput] = useState({ name : "", birth: "", country : "", bio : "", }) console.log(input) const onChangeName = (e) => { set.. 개발새발개발/React 2025. 2. 6.