Yewon's Dev Log✍🏻

Webpack vs Vite: 프론트엔드 빌드 도구 비교

2024.10.29·

🧩Front-End

💎웹팩(Webpack)https://webpack.kr/ webpack웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.webpack.kr 웹팩은 프론트엔드 생태계에서 오랜 시간 동안 가장 널리 사용된 모듈 번들러로, 복잡한 프로젝트에서도 안정적으로 사용할 수 있는 강력한 기능을 제공합니다. 웹팩은 파일을 모듈 단위로 관리하며, 다양한 리소스(자바스크립트, CSS, 이미지 등)를 번들링하여 최적화된 웹 애플리케이션을 만듭니다.웹팩(Webpack) 주요 개념작동 방식 : 웹팩은 모든 파일을 하나의 큰 번들(bundle)로 묶어 브라우저가 필요한 리소스를 쉽게 로드하도록 합니다..

Monica : 웹 번역에 유용한 AI 보조 크롬 확장 프로그램

2024.10.29·

🔍기타

메인 사이트 Monica - Your ChatGPT AI Assistant Chrome Extension monica.imChrom 웹 스토어 Monica：당신의 ChatGPT 인공지능 도우미 & GPT-4o, o1, Claude 3.5, Gemini 1.5 - Chrome 웹 스토어사이드바를 한 번 클릭하여 활성화하세요. 귀하의 AI 만능 도우미가 GPT-4o, Claude 3, Gemini Pro 1.5, Llama 3 70B 등의 고급 모델을 탑재하고 있습니다.chromewebstore.google.com 웹 번역 👍🏻 참고 Monica - AI 보조 크롬 확장 프로그램 (챗GPT, 유튜브 영상 요악 기능 포함) - DeepdAiveMonica - AI 보조 크롬 확장 프로그램에 대한 포스팅입니..

PWA : 프로그레시브 웹 앱(Progressive Web App), 웹과 앱의 결합

2024.10.29·

🔍기타

PWA(Progressive Web App)는 웹사이트를 앱처럼 동작하도록 설계한 기술로, 사용자는 URL을 통해 접근하지만 네이티브 앱과 유사한 경험을 제공합니다. 설치형 앱의 장점을 웹에 통합해 빠르고 편리한 접근성을 제공합니다.주요 특징앱 설치 : PWA는 홈 화면에 아이콘을 추가하여 빠르게 접근할 수 있습니다.오프라인 사용 : 서비스 워커(Service Worker)를 통해 오프라인 상태에서도 콘텐츠를 사용할 수 있습니다.푸시 알림 : 브라우저를 통해 알림을 받아 사용자 참여를 유도합니다.반응형 디자인 : 모든 기기에서 동일한 사용자 경험을 제공합니다.장점빠른 성능과 접근성 : 네트워크 상태에 관계없이 빠르게 로딩됩니다.저장 공간 절약 : 앱 설치 없이 공간을 적게 차지합니다.개발 비용 절감 : ..

[Android] 안드로이드 클릭 이벤트 처리 방법 비교(개별 리스너 설정 vs. View.OnClickListener 인터페이스 구현)

2024.10.17·

📳Android

1️⃣ 개별적으로 클릭 리스너를 설정하는 방법각 뷰에 setOnClickListener 메서드를 사용하여 클릭 리스너를 개별적으로 설정합니다.익명 클래스나 람다 표현식을 사용하여 클릭 이벤트를 처리합니다.여러 뷰에 동일한 리스너를 적용하려면 공통 리스너 객체를 생성하여 사용합니다.// 1️⃣개별 뷰에 클릭 리스너 설정one.setOnClickListener { view -> // 첫 번째 버튼 클릭 시 동작 Log.d(TAG, "첫 번째 버튼 클릭됨")}two.setOnClickListener { view -> // 두 번째 버튼 클릭 시 동작 Log.d(TAG, "두 번째 버튼 클릭됨")}// 2️⃣공통 리스너를 사용하는 경우val listener = View.OnClickList..

[Kotlin] 코틀린의 10가지 주요 문법(Vs. Java)

2024.10.14·

🐨Kotlin

1️⃣ 변수와 상수 선언 - val, var`val` : Value - 변경 불가능한(immutable) 변수로, 한 번 값을 할당하면 변경할 수 없습니다. 주로 상수를 선언할 때 사용하며, 자바에서 `final` 키워드를 사용하는 것과 비슷합니다.`var` : Variable - 변경 가능한(mutable) 변수. 값을 나중에 변경할 수 있습니다.val name = "홍길동" // 상수, 변경 불가var age = 25 // 변수, 변경 가능✨age = 30 // 가능 2️⃣ 데이터 타입 - Int, Double, Boolean, String, Char코틀린은 타입을 자동으로 추론할 수 있지만, 필요한 경우 명시적으로 지정할 수도 있습니다. 이때 변수나 함수 이름 ..

AWS RDS에서 Collation과 Character Set 변경하기(PostgreSQL)

2024.10.10·

🔍기타

1️⃣ RDS (Relational Database Service)란?RDS는 Amazon Web Services(AWS)에서 제공하는 관리형 관계형 데이터베이스 서비스입니다. 사용자가 직접 데이터베이스를 관리하지 않아도 AWS가 자동으로 백업, 복구, 성능 조정 및 유지 관리를 처리해줍니다. 다양한 데이터베이스 엔진을 지원하며, 대표적인 엔진으로는 다음이 있습니다.MySQLPostgreSQLMariaDBOracleMicrosoft SQL ServerAmazon AuroraRDS는 기본적으로 미국 영어(US)를 기준으로 설정되며, 데이터베이스 생성 시 기본 Collation은 en_US.UTF-8로 설정됩니다. 2️⃣ Character Set과 Collation의 비교Character Set과 Colla..

[백준/Java] 1929 소수 구하기(에라토스테네스의 체)

2024.10.06·

🌷알고리즘 문제풀이/백준

https://www.acmicpc.net/problem/1929📝 풀이 : 에라토스테네스의 체import java.io.*;public class Main { // M이상 N이하의 소수를 모두 출력하는 프로그램 public static void main(String[] args) throws IOException { /* [1] 입력 처리 */ BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); String[] input = br.readLine().split(" "); int M = Integer.parseInt(input[0]); // 범위의 시작값 M ..

[백준/Java] 18110 solved.ac

2024.10.06·

🌷알고리즘 문제풀이/백준

https://www.acmicpc.net/problem/18110📝 풀이 : 배열import java.io.*;import java.util.*;public class Main { // 사용자들이 어떤 문제에 제출한 난이도 의견 목록이 주어질 때, solved.ac가 결정한 문제의 난이도를 계산하는 프로그램 public static void main(String[] args) throws IOException { /* [1] 입력 처리✨ */ BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int n = Integer.parseInt(br.readLine()); // 난..

[백준/Java] 10866 덱

2024.10.06·

🌷알고리즘 문제풀이/백준

https://www.acmicpc.net/problem/10866📝 풀이 : ArrayDequeimport java.io.*;import java.util.*;public class Main { // 정수를 저장하는 덱(Deque)를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램 작성 public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int N = Integer.parseInt(br.readLine()); // 명령의 수 N (1 ≤ N ≤ 10,000) ..

[백준/Java] 10845 큐

2024.10.06·

🌷알고리즘 문제풀이/백준

https://www.acmicpc.net/problem/10845📝 풀이 : LinkedListimport java.io.*;import java.util.*;public class Main { // 정수를 저장하는 큐를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램 작성 public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int N = Integer.parseInt(br.readLine()); // 명령의 수 N (1 ≤ N ≤ 10,000) Queue q..

[백준/Java] 10816 숫자 카드 2

2024.10.06·

🌷알고리즘 문제풀이/백준

https://www.acmicpc.net/problem/10816🎯 문제 핵심숫자 카드 최대 개수 : 500,000개시간제한 : 1초📝 풀이 : HashMapimport java.io.*;import java.util.HashMap;import java.util.Map;import java.util.StringTokenizer;public class Main { // M개의 수에 대해서, 각 수가 적힌 숫자 카드를 몇 개 가지고 있는지 공백으로 구분해 출력 public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(Sys..

[백준/Java] 10773 제로

2024.10.04·

🌷알고리즘 문제풀이/백준

https://www.acmicpc.net/problem/10773 📝 풀이 : Stackimport java.io.*;import java.util.Stack;public class Main { // 재민이가 최종적으로 적어 낸 수의 합 출력(2^31-1보다 작거나 같은 정수) public static void main(String[] args) throws IOException { /* [1] 입력 */ BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int K = Integer.parseInt(br.readLine()); // (1 ≤ K ≤ 100,000) ..

[React] 리액트에서 폼 유효성 검사하기(Formik, Yup, react-hook-form)

2024.09.21·

🧩Front-End

이 게시물에서는 리액트에서 폼 유효성 검사를 구현하는 여러 방법을 소개합니다. JavaScript를 이용한 기본 검증 방식부터, Yup, Formik, 그리고 성능 최적화에 강점이 있는 react-hook-form까지 비교하여 설명하겠습니다.🙂 1️⃣ JavaScript로 직접 구현하는 경우리액트에서 가장 기본적인 방식으로, 유효성 검사를 JavaScript로 직접 구현하는 방법입니다.import { useState } from 'react';function MyForm() { const [name, setName] = useState('');✨ const [age, setAge] = useState('');✨ const [errors, setErrors] = useState({});✨ cons..

[트러블슈팅] CORS 문제 해결 하기 : 실제 원인은 CORS가 아닌 무한 재귀 호출

2024.09.10·

☕Java

프론트엔드와 백엔드 간의 API 통신에서 발생하는 CORS 문제는 흔한 이슈 중 하나입니다. 그러나 CORS 문제로 보이는 현상이 실제로는 다른 문제에서 기인하는 경우도 많습니다. 이번 사례에서는 CORS 에러로 오해된 문제의 실제 원인을 설명하고 해결 과정을 공유합니다.🙂 ✔️ CORS란?CORS(Cross-Origin Resource Sharing)는 브라우저가 다른 도메인 간에 리소스를 요청할 때 보안을 위해 사용하는 정책입니다. 다른 출처(도메인, 포트, 프로토콜)의 요청을 차단하며, 이를 허용하려면 서버에서 CORS 설정을 통해 특정 출처를 허용해야 합니다. ✔️ 문제 상황프론트엔드에서 서버에 API를 요청할 때, CORS 에러가 발생했다고 생각했지만, 실제로는 CORS가 원인이 아니었습니다...

[React] 리액트 프로젝트 vs 스프링부트 프로젝트 with 리액트

2024.09.10·

🧩Front-End

React는 사용자 인터페이스(UI)를 구축하는 데 많이 사용되는 프론트엔드 라이브러리입니다. React를 단일 프로젝트로 개발할 수도 있고, 스프링부트(Spring Boot)와 통합하여 사용할 수도 있습니다. 두 가지 방식의 주요 차이점과 각각의 설정 및 사용 방법을 설명하도록 하겠습니다.🙂 📌 React 단일 프로젝트React 단일 프로젝트는 백엔드 없이 프론트엔드만 독립적으로 개발하는 방식입니다. 사용자는 주로 UI 구성에 집중하며, API 호출로 데이터를 주고받습니다.✔️ 특징독립적인 프론트엔드 프로젝트 : 백엔드 없이도 React만으로 사용자 인터페이스를 구축할 수 있습니다.간편한 초기 설정 : create-react-app으로 간단하게 프로젝트를 시작할 수 있으며, 개발 서버 실행 및 ..

pgAdmin 데이터베이스 및 테이블 백업 방법 (CREATE문 및 INSERT문 추출)

2024.09.10·

🎲DB_SQL

https://yewon31.tistory.com/entry/postgresql [DB] PostgreSQL & pgAdmin 4 설치 후 기본설정 및 외부 접속 허용 설정 가이드https://www.postgresql.org/ PostgreSQLThe world's most advanced open source database.www.postgresql.orgPostgreSQL은 세계에서 가장 진보된 오픈 소스 데이터베이스로, 확장성과 안정성을 갖춘 강력한 기능을 제공합니다.yewon31.tistory.compgAdmin을 사용하면 데이터베이스 전체나 특정 테이블의 구조와 데이터를 SQL 스크립트 형태로 쉽게 백업할 수 있습니다. 이를 통해 CREATE문과 INSERT문을 모두 포함한 백업을 생성할 수..

크롬 원격 데스크톱 설치 및 사용방법(원격으로 내 컴퓨터 접속하기)

2024.09.10·

🔍기타

크롬 원격 데스크톱이란?크롬 원격 데스크톱은 다른 장소에서 내 컴퓨터에 원격으로 접속하여 제어할 수 있는 툴입니다. 간단한 설정만으로 집이나 사무실 등 어디서나 편리하게 원격으로 작업할 수 있습니다. ✔️ 설치 방법크롬 브라우저 설치크롬 원격 데스크톱은 Google Chrome 브라우저에서 작동합니다. 먼저 Google Chrome을 다운로드하여 설치하세요.크롬 원격 데스크톱 확장 프로그램 설치크롬을 실행한 후 Chrome Remote Desktop 사이트에 접속합니다. "원격 액세스 설정"을 클릭하여 확장 프로그램을 설치합니다.원격 액세스 설정설치가 완료되면 원격으로 접근할 컴퓨터에서 PIN 번호를 설정하여 보안을 강화합니다. 이 후 이 컴퓨터에 원격으로 연결할 수 있게 됩니다. ✔️ 사용 방법PC 원..

[React] Axios 라이브러리에서 process/browser 모듈을 찾지 못하는 문제 해결하기

2024.09.09·

🧩Front-End

💡 해결 방법 : Webpack 설정 수정아래 코드를 Webpack 설정에 추가하여 .mjs 또는 .js 파일을 처리할 때 확장자를 명시하지 않아도 되도록 설정할 수 있습니다. 이 설정은 특히 axios나 다른 모듈에서 발생하는 확장자 문제를 해결하는 데 유용합니다.👍module.exports = { module: { rules: [ { test: /\.m?js$/, // .mjs 또는 .js 파일을 처리 resolve: { fullySpecified: false // 확장자를 명시하지 않아도 되도록 설정 } } ] ..

[React] Webpack 빌드 완료 시간 터미널에 출력하기(npm run watch)

2024.09.08·

🧩Front-End

💡 터미널 출력 화면💡 코드 화면💡 소스 코드const webpack = require('webpack');module.exports = { // ... 기존 설정 plugins: [ // Webpack 빌드가 완료되면 시간을 출력하는 플러그인 function () { // Webpack의 done 후크를 사용하여 빌드가 완료될 때 호출 this.hooks.done.tap('DonePlugin', (stats) => { const now = new Date().toLocaleString(); // 콘솔에 빨간색 구분선 및 메시지 출력 consol..

[React] Props 전달 방법 10가지 예제로 살펴보기

2024.09.06·

🧩Front-End

리액트에서 props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 중요한 메커니즘입니다. 이 문서에서는 기본 props 전달부터 스프레드 연산자, Context API, 그리고 children을 사용한 props 전달까지 다양한 10가지 방법을 다룹니다. 각각의 방식이 코드의 가독성과 유지 보수성을 높이는 데 어떻게 기여하는지 실용적인 예제를 통해 쉽게 이해할 수 있습니다.🙂 1️⃣ 기본 props 전달가장 기본적인 방법으로, 부모 컴포넌트에서 자식 컴포넌트로 직접 props를 전달합니다.// 부모 컴포넌트function Parent() { // 'color'라는 이름의 props를 Child 컴포넌트에 전달합니다.✨ return ;}// 자식 컴포넌트function Child(props) ..

[React] JSX 문법 17가지 빠르게 살펴보기

2024.09.06·

🧩Front-End

https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 💡 JSX란?JSX는 JavaScript의 확장 문법으로, HTML과 JavaScript를 결합 하여 UI를 더 직관적으로 구성할 수 있게 합니다. HTML 코드처럼 보이지만 실제로는 JavaScript 객체로 변환되어 브라우저에서 사용되며, 웹팩(Webpack) 로더를 통해 코드가 수정될 때마다 자동으로 화면이 갱신(리렌더링) 됩니다. 주로 리액트에서 사용되지만, 다른 라이브러리에서도 활용할 수 있습니다. * React는 UI를 만들기 위한 라이브러리이..

[JS] ES6 문법 8가지 예제로 살펴보기

2024.09.06·

🧩Front-End

https://www.w3schools.com/js/js_es6.asphttps://developer.mozilla.org/ko/docs/Web/JavaScript JavaScript | MDNJavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼developer.mozilla.org 💡 개요ES : "ECMAScript"의 약어이며, JavaScript의 표준 스펙을 정의하는 규격을 말한다.6 : 2015년에 발표된 6번째 주요 버전이라는 의미이다.ES6(ECMAScript 2015)은 코드의 가독성..

[DB] Oracle, MySQL, PostgreSQL 비교(데이터 타입, 컬럼값 자동 증가, 관리도구 등)

2024.09.05·

🎲DB_SQL

Oracle : 상용 데이터베이스의 대표 주자로, 대규모 엔터프라이즈 애플리케이션에서 널리 사용됩니다. 강력한 보안, 고가용성, 고급 기능을 제공하며, 배포 시 유료 라이선스가 필요합니다. MySQL : 오픈 소스 데이터베이스 중 가장 널리 사용되는 DBMS 중 하나로, 웹 애플리케이션과 중소규모 시스템에서 인기가 높습니다. 속도와 단순함이 강점이며, 오픈 소스와 상용 버전 모두 제공됩니다. PostgreSQL : 고급 기능과 확장성을 갖춘 오픈 소스 데이터베이스로, 데이터 무결성과 복잡한 쿼리 처리에 뛰어나며, 다양한 애플리케이션에서 무료로 사용 가능합니다. 1️⃣ 날짜와 시간 데이터 타입 및 함수OracleDATE, TIMESTAMP, TIMESTAMP WITH TIME ZONE, TIMESTAMP ..

[DB] PostgreSQL & pgAdmin 4 설치 후 기본설정 및 외부 접속 허용 설정 가이드

2024.09.04·

🎲DB_SQL

https://www.postgresql.org/ PostgreSQLThe world's most advanced open source database.www.postgresql.orgPostgreSQL은 세계에서 가장 진보된 오픈 소스 데이터베이스로, 확장성과 안정성을 갖춘 강력한 기능을 제공합니다. 다양한 플랫폼에서 사용 가능하며, 데이터 일관성과 복잡한 쿼리 처리에 뛰어난 고급 기능을 지원합니다. MySQL이 속도와 단순함을, Oracle이 고급 관리 기능을 강조하는 반면, PostgreSQL은 오픈 소스임에도 엔터프라이즈급 기능과 커뮤니티 지원으로 뛰어난 확장성과 유연성을 제공합니다. 이를 통해 PostgreSQL은 다양한 환경에서 신뢰성과 성능을 모두 갖춘 최적의 데이터베이스 솔루션으로 자리 잡..

[Spring Boot] 프로젝트 필수 의존성(Spring Web, Lombok, DevTools, Thymeleaf)

2024.09.03·

☕Java

Spring Boot 프로젝트를 생성할 때 선택할 수 있는 여러 의존성들 중 DevTools, Spring Web, Thymeleaf, Lombok 은 각각 특정 기능과 개발 생산성을 향상시키는 중요한 역할을 합니다. 이 게시물에서는 각 의존성이 제공하는 주요 기능을 살펴보겠습니다.🙂 1️⃣ Spring Webdependencies { // Spring Boot의 웹 애플리케이션을 개발하기 위한 필수 의존성입니다. implementation 'org.springframework.boot:spring-boot-starter-web'}✔️ Spring Web은 웹 애플리케이션이나 RESTful API 개발에 필수적인 의존성입니다.Spring MVC (Model-View-Controller) : ..

[백준/Java] 10828 스택(Stack)

2024.09.02·

🌷알고리즘 문제풀이/백준

https://www.acmicpc.net/problem/10828 📝 풀이 : Stackimport java.io.*;import java.util.Stack;public class Main { // 정수를 저장하는 스택을 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램 public static void main(String[] args) throws IOException { /* [1] 입력 */ BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int N = Integer.parseInt(br.readLine()); // 명령의 수 N /* [2]..

[프로그래머스/Java] 성격 유형 검사하기

2024.09.02·

🌷알고리즘 문제풀이/프로그래머스

https://school.programmers.co.kr/learn/courses/30/lessons/118666📝 풀이 : 이차원 배열과 HashMap각 성격 유형을 이차원 배열(char[][])로 정의하여 대응되는 성격 유형 쌍(R/T, C/F, J/M, A/N)을 저장하고, HashMap을 사용해 각 유형의 점수를 누적한 후, 최종적으로 각 지표에서 높은 점수를 가진 유형을 선택하여 결과를 반환하는 방식으로 해결하였다.import java.util.HashMap;import java.util.Map;class Solution { // 주어진 지표와 선택한 번호(1~7)를 기반으로 성격 유형 결과 반환 public String solution(String[] survey, int[] c..

[Java] 컬렉션 프레임워크(List, Queue, Set, Map)

2024.09.01·

☕Java

Java의 컬렉션 프레임워크는 다수의 데이터를 효율적으로 처리할 수 있는 표준화된 방법을 제공하는 클래스들의 집합입니다. 이 게시물에서는 주요 인터페이스와 그에 속한 클래스의 특성 및 주요 메서드를 정리하였습니다.🙂 1️⃣ List 인터페이스 : 순서 유지, 중복 허용💡 주요 메서드 : add, get, set, indexOf`add(E e)`, `add(int index, E element)`, `get(int index)`, `remove(int index)`, `remove(Object o)``set(int index, E element)`, `size()`, `isEmpty()`, `contains(Object o)`, `iterator()``indexOf(Object o)`, `lastInd..

[Java] Map 사용 방법(keySet(), entrySet(), Map.entry())

2024.09.01·

☕Java

Java의 Map은 키-값 쌍을 관리하는 대표적인 자료구조입니다. 이 게시물에서는 Map을 다루는 세 가지 주요 메서드인 keySet(), entrySet(), 그리고 Map.entry()의 사용법을 예제와 함께 설명합니다.🙂 1️⃣ Map.keyset() : 모든 키 반환keySet() 메서드는 Map의 모든 키를 Set 형태로 반환하여, 각 키에 해당하는 값을 쉽게 가져올 수 있도록 합니다. Map의 키를 반복적으로 가져와 각 키에 대해 값을 조회하는 간단하고 직관적인 방식입니다.Map map = new HashMap();map.put("사과", 10); map.put("딸기", 20); // 키-값 쌍 추가// Map의 모든 키를 반복하면서 값을 출력✨for (String key : map.key..

[프로그래머스/Java] 키패드 누르기(맨해튼 거리)

2024.09.01·

🌷알고리즘 문제풀이/프로그래머스

https://school.programmers.co.kr/learn/courses/30/lessons/67256📝 풀이 : 맨해튼 거리 구하기각 숫자를 '하나의 줄로 나열된 숫자'처럼 생각하고, '키패드의 규칙'을 이용해서 '맨해튼 거리'를 구한다. 두 숫자 간의 행(row) 차이는 (차이 / 3)으로, 열(column) 차이는 (차이 % 3)로 계산할 수 있다. 이렇게 하면 2차원 배열을 사용하지 않고도, 각 손가락이 목표 숫자에 얼마나 가까운지 알 수 있다.맨해튼 거리(Manhattan Distance) : 두 점 사이의 거리를 계산할 때, 가로와 세로의 거리만을 고려하여 계산하는 방법class Solution { // 순서대로 번호를 누른 엄지손가락이 어느 손인지 문자열로 반환 pu..

티스토리툴바