지니의 기록

[React Native] Error: Duplicate resources 오류 해결 방법

cocobi — Mon, 13 Feb 2023 16:57:26 +0900

Error: Duplicate resources 오류 해결하기

gradle build 또는 로컬 기동시 아래와 같은 에러가 발생했을 때 해결하는 방법이다.

> Task :app:mergeReleaseResources FAILED
[drawable-hdpi-v4/node_modules_reactnavigation_stack_src_views_assets_backicon] 
C:\Users\jinny\Documents\git\melhor\app-user\android\app\src\main\res\drawable-hdpi\node_modules_reactnavigation_stack_src_views_assets_backicon.png 
[drawable-hdpi-v4/node_modules_reactnavigation_stack_src_views_assets_backicon] 
C:\Users\jinny\Documents\git\melhor\app-user\android\app\build\generated\res\react\release\drawable-hdpi\node_modules_reactnavigation_stack_src_views_assets_backicon.png: 
Error: Duplicate resources 
[drawable-mdpi-v4/node_modules_reactnavigation_stack_src_views_assets_backicon] 
C:\Users\jinny\Documents\git\melhor\app-user\android\app\src\main\res\drawable-mdpi\node_modules_reactnavigation_stack_src_views_assets_backicon.png 
[drawable-mdpi-v4/node_modules_reactnavigation_stack_src_views_assets_backicon] 
C:\Users\jinny\Documents\git\melhor\app-user\android\app\build\generated\res\react\release\drawable-mdpi\node_modules_reactnavigation_stack_src_views_assets_backicon.png: 
Error: Duplicate resources 
[drawable-mdpi-v4/node_modules_reactnavigation_stack_src_views_assets_backiconmask] 
C:\Users\jinny\Documents\git\melhor\app-user\android\app\src\main\res\drawable-mdpi\node_modules_reactnavigation_stack_src_views_assets_backiconmask.png 
[drawable-mdpi-v4/node_modules_reactnavigation_stack_src_views_assets_backiconmask] 
C:\Users\jinny\Documents\git\melhor\app-user\android\app\build\generated\res\react\release\drawable-mdpi\node_modules_reactnavigation_stack_src_views_assets_backiconmask.png: 
Error: Duplicate resources [drawable-mdpi-v4/src_assets_address_emptyaddress] 
C:\Users\jinny\Documents\git\melhor\app-user\android\app\src\main\res\drawable-mdpi\src_assets_address_emptyaddress.png 
.....

‍ 원인 및 해결방법

◾ 원인

해당 오류는 프로젝트 빌드시 [ android / app / src / main / res / ] 디렉토리 내 중복된 파일이 존재하기 때문에 발생한다.

◾ 해결방법

res 폴더에 존재하는 drawable 또는 raw 폴더에 존재하는 중복된 파일을 삭제하면 해결된다.

보통 drawable 폴더를 통채로 삭제하면 오류가 해결된다고 하나 나의 경우에는 rn_edit_text_material.xml 을 제외한 모든 파일을 삭제 후 재빌드 하였더니 해결되었다.

참고사이트

stackoverflow :: generate-an-apk-failed-on-react-native

[React Native] APK 파일 추출하는 방법 정리

cocobi — Mon, 6 Feb 2023 21:51:26 +0900

React native APK 파일 추출하기

안드로이드 apk 파일을 추출하는 방법에 대해 정리한 포스팅이다.

0️⃣ 공통사항

APK를 추출하기 전에 앞서 추출을 위해서는 android/app/src/main/assets 디렉토리가 존재해야 하므로 해당 디렉토리가 존재하지 않는경우 assets 폴더를 생성한다.

1️⃣ 명령어로 추출하기

커맨드에 아래 명령어를 입력할 경우 assets 디렉토리에 번들 파일이 생성된다.

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

그 후 npx react-native run-android 명령어 (또는 ./gradlew assembleDebug)를 입력하여 로컬 서버를 기동하게되면 app/build/output/app/debug 경로에 apk 파일이 생성된다.

2️⃣ 안드로이드 스튜디오로 추출하기

1번과 마찬가지로 우선 번들파일을 생성해야 하므로 커맨드에 아래 명령어를 입력한다.

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

그 후 안드로이드 스튜디오에서 상단의 Build > Build Bundle / APK > Build APK 를 차례대로 눌러주면

app/build/output/app/debug 경로에 APK파일이 생성된다.

[Android Studio] Gradle 빌드 오류 해결하기 (Android Gradle plugin requires java 11 to run. you are currently using java 1.8)

cocobi — Sat, 4 Feb 2023 22:12:55 +0900

안드로이드 스튜디오 오류 해결 방법

Gradle 빌드 중 아래와 같은 오류가 발생하였다.

해당 오류의 원인은 요구하는 JDK 버전보다 현재 사용하는 JDK의 버전이 더 낮기 때문에 발생한 것이다.

Android Gradle plugin requires java 11 to run. you are currently using java 1.8

Build file '/Users/jinny/AndroidStudioProjects/MyApplication/app/build.gradle' line: 2

An exception occurred applying plugin request [id: 'com.android.application']
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
     You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

‍ 오류 해결

내 경우에는 다른 프로젝트에서 JDK1.8을 사용하여 환경 변수상 JDK가 1.8로 등록되어 있었다.

하지만 안드로이드 개발을 위해서 JDK를 11로 변경 하였더니 오류가 해결되었다.

(윈도우 기준) 환경 변수를 바꾸는 방법은 아래와 같다.

1️⃣ 시작버튼 옆 검색창에 '환경 변수' 입력

2️⃣ 시스템 속성창이 켜지며, 환경 변수(N) 클릭

3️⃣ 시스템 변수의 JAVA_HOME 경로를 JDK 11 경로로 변경 후 확인 버튼 클릭

만약 JDK 11이 설치되어 있지 않은 경우 오라클 사이트에서 다운로드 후 다시 위의 방법을 진행한다.

[Clean Code] 클린 코드 10장 ~ 11장 리뷰

cocobi — Fri, 3 Feb 2023 21:07:12 +0900

10장 :: 클래스

깔끔한 코드 표현력과 그 코드로 이루어진 함수라도 더 높은 단계까지 신경 쓰지 않으면 깨끗한 코드를 얻기 어렵다.

[ 클래스 체계 ]
클래스의 추상화 단계는 아래와 같이 순차적으로 내려간다.
변수 목록(공개 변수 > 비공개 변수 > 비공개 인스턴스 변수) > 공개 함수 > 비공개 함수

- 캡슐화
변수와 함수는 가능한 캡슐화 하는 것이 낫지만 반드시 숨겨야 한다는 법칙은 없다. 그럼에도 캡슐화를 풀어주는 결정은 최후의 수단이다.

[ 클래스는 작아야 한다 ]
클래스 생성의 첫 번째 규칙은 '가능한 작게 만들 것'이다. 두 번째 규칙은 '더 작아야 한다'.
그렇다면 얼마나 작아야 할까? 함수는 물리적인 행 수로 크기를 측정했지만, 클래스는 책임을 기준으로 크기를 잰다.

클래스 이름은 해당 클래스의 책임을 기술해야 한다. 따라서 클래스 작명은 크기를 줄이는 첫 번째 관문이다.

- 단일 책임 원칙
단일 책임 원칙(SRP, Single Responsibility Principle)은 클래스나 모듈을 변경할 이유가 하나뿐이어야 한다는 원칙이다. 책임, 즉 변경할 이유를 파악하려 애쓰다 보면 코드를 추상화하기도 쉬워진다.

많은 개발자는 자잘한 단일 책임 클래스가 많아지면 큰 그림을 이해하기 어려워진다고 우려한다. 큰 그림을 이해하려면 여러 클래스를 수없이 넘나들어야 한다고 걱정한다. 하지만 작은 클래스가 많은 시스템이든 큰 클래스가 몇 개뿐인 시스템이든 돌아가는 부품은 그 수가 비슷하다. 그러므로 고민할 질문은 "작은 서랍을 많이 두고 명확한 컴포넌트를 나눠까? 큰 서랍 몇 개에 모두 넣어둘까?" 이다.

규모가 큰 시스템은 논리가 많고 복잡하다. 이런 복잡성을 다루려면 체계적인 정리가 필수다. 그래야 개발자가 무엇이 어디에 있는지 쉽게 찾는다. 그리고 변경을 할 때 직접 영향이 미치는 컴포넌트만 이해해도 충분하다.
따라서 큰 클래스 몇 개가 아니라 작은 클래스 여러개로 이루어진 시스템이 더 바람직하다. 작은 클래스는 맡은 책임이 하나이며, 변경할 이유도 하나이고, 다른 작은 클래스와 협력해 시스템에 필요한 동작을 수행한다.

- 응집도
클래스는 인스턴스 변수 수가 작아야 한다. 각 클래스 메서드는 클래스 인스턴스 변수를 하나 이상 사용해야 한다.
때때로 몇몇 메서드에서만이 사용하는 인스턴스 변수가 많아진다. 이런 경우 새로운 클래스로 나뉘어야 하며, 응집도가 높아지도록 변수와 메서드를 분리하여 클래스를 나눈다.
→ 응집도를 유지하면 작은 클래스 여러 개가 나온다.

[ 변경하기 쉬운 클래스 ]
깨끗한 시스템은 클래스를 체계적으로 정리해 변경에 수반하는 위험을 낮춘다.
클래스를 관점별로 분리하게 되면 클래스가 단순해지고 이해하기 쉬워진다. 또한, 테스트 관점에서 모든 논리를 증명하기도 쉬워진다.
→ 이상적인 시스템은 새 기능을 추가할 때 시스템을 확장할 뿐 기존 코드를 변경하지는 않는다.

- 변경으로부터 격리
상세한 구현에 의존하는 클라이언트 클래스는 구현이 바뀌면 위험에 빠진다. 그래서 우리는 인터페이스와 추상 클래스를 사용해 구현이 미치는 영향을 격리해야 한다.

=======================================>>>

코드를 깔끔하게 짜는것만으로 깨끗한 코드를 얻는 것은 아니다.
단순한 코드 이상의 구조적 측면에서도 깨끗함을 유지해야 하며, 클래스 단위에서도 단일 책임 원칙을 지키며 변경 가능성에 대해 열려있는 클래스를 짜도록 해야겠다.

11장 :: 시스템

높은 추상화 수준(=시스템) 수준에서도 깨끗함을 유지하는 방법

"복잡성은 죽음이다. 개발자에게서 생기를 앗아가며, 제품을 계획하고 제작하고 테스트하기 어렵게 만든다."

- 레이 오지(Ray Ozzie), Microsoft CTO

도시를 세운다면?
도시가 돌아가는 이유는 교통, 수도, 전력, 치안 등 각 분야를 관리하는 팀이 있기 때문이다.
도시가 돌아가는 또 다른 이유는 적절한 추상화와 모듈화 덕분이다.
흔히 소프트웨어 팀도 도시처럼 구성되며, 깨끗한 코드를 구현하면 낮은 추상화 수준에서 관심사를 분리하기 쉬워진다.

[ 시스템 제작과 시스템 사용을 분리하라 ]
소프트웨어 시스템은 준비 과정과 런타임 로직을 분리해야 한다.

- Main 분리
생성과 관련된 코드는 모두 main이나 main이 호출하는 모듈로 옮기고, 나머지 시스템은 모든 객체가 생성되어 있고

모든 의존성이 연결되어 있다고 가정한다.

- 팩토리
때로는 객체가 생성되는 시점을 애플리케이션이 결정할 필요가 있다.

- 의존성 주입
사용과 제작을 분리하는 강력한 메커니즘 중 하나가 의존성 주입(DI)이다.
의존성 주입은 제어 역전 기법을 의존성 관리에 적용한 메커니즘이다.
진정한 의존성 주입에서 클래스는 의존성을 해결하려 시도하지 않고 수동적이어야 한다.

대신에 의존성을 주입하는 방법으로 설정자 메서드나 생성자 인수를 제공한다.

[ 확장 ]
군락은 마을로 마을은 도시로 성장한다. 시스템에도 점진적 성장이 있을 뿐 '처음부터 올바르게' 시스템을 만들 수 있다는 믿음은 미신이다. 오늘은 오늘 주어진 스토리에 맞춰 시스템을 구현해야 하고, 내일은 내일의 스토리에 맞게 시스템을 조정하고 확장하면 된다. 이것이 반복적이고 점진적인 애자일 방식의 핵심이다.

소프트웨어 시스템은 물리적인 시스템과 드라다. 관심사를 적절히 분리해 관리한다면 소프트웨어 아키텍처는 점진적으로 발전할 수 있다.
→ 소프트웨어 시스템은 '수명이 짧다'는 본질로 인해 아키텍처의 점진적인 발전이 가능하다.

- 횡단(Cross-cutting) 관심사
영속성과 같은 관심사는 애플리케이션의 자연스러운 객체 경계를 넘나드는 경향이 있다.
원론적으로는 모듈화되고 캡슐화된 방식으로 영속성 방식을 구상할 수 있다. 하지만 현실적으로는 영속성 방식을 구현

한 코드가 온갖 객체로 흩어지고, 여기서 횡단 관심사라는 용어가 나온다.

EJB 아키텍처가 영속성, 보안, 트랜잭션을 처리하는 방식은 관점 지향 프로그래밍(AOP, AOP는 횡단 관심사에 대처해

모듈성을 확보하는 방법론이다.)을 예견했다.

- 자바에서 사용하는 관점(또는 관점과 유사한) 메커니즘 세 가지
  1. 자바 프록시(p.203)
    자바 프록시는 단순한 상황에 적합하며, 개별 객체나 클래스에서 메서드 호출을 감싸는 경우이다.
  2. 순수 자바 AOP프레임워크(p.205)
    순수 자바 관점을 구현하는 스프링 AOP, JBoss AOP등과 같은 프레임워크는 내부 프록시를 사용한다.
  3. AspectJ 관점(p.209)
    AspectJ는 언어 차원에서 관점을 모듈화 구성으로 지원하는 자바 언어 확장이다. AspectJ는 관점을 분리하는 강력하

고 풍부한 도구 집합을 제공하지만, 새 도구를 사용하고 새로운 언어 문법과 사용법을 익혀야 한다는 단점이 있다.

[ 테스트 주도 시스템 아키텍처 구축 ]
관점으로 관심사를 분리하는 방식은 막강하며, 도메인 논리를 POJO로 작성(=코드 수즌에서 아키텍처 관심사를 분리)할 수 있다면 테스트 주도 아키텍처 구축이 가능해진다. 따라서 단순하면서 깔끔하게 분리된 아키텍처로 일단 결과물을 빨리 출시한 후, 기반 구조를 추가하며 확장해 나가기 쉬워진다.
→ 최선의 시스템 구조는 각각의 POJO 객체로 구현되는 모듈화된 관심사 영역(도메인)으로 구성된다.

[ 의사 결정을 최적화하라 ]
때때로 가능한 마지막 순간까지 결정을 미루는것은 최선의 방법일 수 있다. 최대한 정보를 모아 최선의 결정을 내리기 위해서다. 너무 일찍 결정하면 피드백을 모으고, 프로젝트를 고민하고, 구현 방안을 탐험할 기회가 사라진다.
→ 관심사로 모듈을 분리한 POJO 시스템은 기민함을 제공한다. 이런 기민함 덕에 최신 정보를 기반한 최선의 시점에

최적의 결정을 내리기 쉬워지며, 결정의 복잡성도 줄어든다.

[ 명백한 가치가 있을 때 표준을 현명하게 사용하라 ]
표즌을 사용하면 재사용하기 쉽고, 적절한 사람을 구하기 쉬우며, 캡슐화하기 쉽고, 컴포넌트를 엮기 쉽다.
하지만 때로는 표준을 만드는 시간이 너무 오래 걸려 시간이 부족할 수 있고, 표준을 제정한 목적을 잊어버리기도 한다.

[ 시스템 도메인 특화 언어가 필요하다 ]
DSL(Domain-Specific Language)은 간단한 스크립트 언어나 표준 언어로 구현한 API를 말한다. DSL로 짠 코드는 도메인 전문가가 작성한 구조적인 산문처럼 읽힌다. 이렇듯 좋은 DLS은 도메인 개념과 그 개념을 구현한 코드 사이에 존재하는 '의사소통 간극'을 줄여준다.
→ DSL을 사용하면 고차원 정책에서 저차원 세부사항까지 모든 추상화 수준과 도메인을 POJO로 표현할 수 있다.

=======================================>>>

추상화 수준이 높은 시스템에서도 깨끗함을 유지하는 방법은 한 번에 완벽하게 하려는 것이 아니라 관심사를 분리하여 키워 나갈 수 있는 시스템을 만드는 것이다.

** EJB(엔터프라이즈 자바 빈), POJO

[React Native] React Native Cli에서 Expo 모듈 설치하여 사용하기

cocobi — Thu, 2 Feb 2023 15:05:43 +0900

React native cli에서 Expo modules 사용하는 방법

React native cli와 Expo를 고민하던 중 네이티브 기능에 대한 확장 가능성으로 인해 React native cli를 선택하여 개발을 시작하였다.

그러던 중 Expo에서는 간단하게 구현할 수 있는 기능이 많아 생산성을 높이기 위해 현재 프로젝트에 Expo 모듈을 추가하기로 하였다.

‍ 설치방법

◾ 방법 1 - Expo 공식 사이트의 가이드 따라 하기

Expo에서 제공하는 메뉴얼인 Expo Docs :: Add Expo to an existing project 을 보고 따라 한다.

◾ 방법 2 - npm 명령어 입력

1. npx install-expo-modules
2. yarn add expo-location
3. npm start android

◾ 방법 3 - 나의 경우

1. npx install-expo-modules
2. yarn add expo-location
3. cd android
4. ./gradlew clean
5. ./gradlew build --warning-mode all
6. npm start android
7. npm install graceful-fs

나의 경우에 Expo 공식사이트에서 가이드하는 방법으로 따라 해도 계속 오류 발생하여 정상적인 설치를 진행할 수 없었다. 또한, 영어로 구글링을 하여도 관련 글이 잘 나오지 않았다.

따라서 직접 해결해야겠다고 생각하였고, 오류 내용을 보니 gradle 빌드가 실패한 게 주된 원인인 것 같아 gradle 빌드를 우선적인 목표로 잡고 진행하였다. (생각나는 오류 중 하나는 npm install-expo-modules를 하였을 때 android 관련 java파일이 자동으로 업데이트되는데 해당 파일 상단의 import와 package의 순서가 뒤죽박죽이었다.)

gradle을 빌드할 때 --warning-mode all 옵션을 추가하면 오류 발생 원인이 상세히 나오는데 해당 원인들을 해결하여 빌드를 성공하였다.

gradle 빌드 이후 서버 기동시 오류가 발생하지 않을 거라고 생각하고 npm start → run on Android 를 하였으나 또다시 오류가 발생하였다. 오류내용 보니 graceful-fs라는 모듈에서 오류 발생하였기 때문에 해당 모듈 재설치하였더니 정상적으로 기동 되었다.

[Node] npm 캐시(Cache) 관련 명령어 정리

cocobi — Wed, 1 Feb 2023 22:53:15 +0900

npm cache를 다루는 명령어

◾ npm의 캐시 데이터(http 요청 데이터와 패키지 관련 데이터)는 _cache라는 디렉토리에 저장된다.

◾ 캐시를 통과하는 모든 데이터는 삽입 및 추출 시 무결성이 완전히 검증된다. 또한, 캐시 손상은 오류를 발생시키거나 데이터를 다시 가져와야 한다는 신호를 보내서 자동으로 데이터를 다시 가져온다.

◾ npm은 자체적으로 데이터를 제거하지 않는다. 따라서 새로운 패키지가 설치되면 캐시가 증가한다.

1️⃣ add

add 명령어는 지정한 패키지를 로컬 캐시에 추가한다.

npm cache add <package-spec>

2️⃣ clean

clean은 캐시 폴더에서 모든 데이터를 삭제한다.

일반적으로 npm의 캐시는 자가 복구가 가능하고 데이터 손상 문제에 강하기 때문에 디스크 공간을 늘리는 것 외의 이유로 는 잘 사용되지 않는다. 디스크 정리를 위해서는 --force 옵션을 주어 실행한다.

npm cache clean [<key>]

3️⃣ verify

캐시 폴더의 내용, 불필요한 데이터를 수집하는 가비지, 캐시 인덱스 및 캐싱 된 모든 데이터의 무결성을 확인한다.

npm cache verify

참고사이트

npm Docs :: npm-cache

[Git] push 에러 해결 방법 (브랜치 생성 후 push 에러)

cocobi — Tue, 31 Jan 2023 16:37:38 +0900

깃 푸시 에러 해결하기

fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.

fatal: 'development' does not appear to be a git repository
fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.

신규 브랜치 생성 후 push를 시도하였으나, 위와 같은 에러가 발생하였다.

해당 오류는 branch 이동 중 원격 저장소 내 branch 정보를 올바르게 읽지 못해 발생하는 문제이며,

push, pull, merge 등 원격 저장소와 통신할 때 언제든지 발생할 수 있는 문제이다.

‍ 해결 방법

1️⃣ 원격 저장소 업데이트

아래 명령어를 통해 branch 정보를 업데이트한 후 다시 작업을 진행한다.

git remote update

2️⃣ 원격 저장소 연결 제거 후 재연결

첫 번째 방법으로 문제가 해결되지 않는다면 기존에 연결되어 있는 원격 저장소를 제거한 후 다시 연결한다.

ⅰ) 원격 저장소 확인

아래 명령어를 입력하면 현재 연결된 원격 저장소의 목록이 출력된다.

목록이 출력되지 않는 경우 연결된 원격저장소가 존재하지 않는 것이다.

git remote -v

ⅱ) 원격 저장소 제거

아래 명령어를 입력한 후 1번에서 확인한 원격 저장소를 제거한다.

git remote remove [원격 저장소 이름(e.g., origin, master, main)]

ⅲ) 원격 저장소 연결

아래 명령어를 입력하여 제거한 원격 저장소를 다시 연결하도록 한다.

git remote add [새로운 원격 저장소 이름(e.g., origin)] [github 원격저장소 URL]

ⅳ) 원격 저장소 확인

1번의 명령어를 다시 입력하여 원격 저장소 연결이 제대로 이루어졌는지 확인한다.

3️⃣ 오류 해결

위의 과정을 모두 마친 후 원래 하려던 작업의 명령어를 입력하면 오류 없이 잘 처리되는 것을 확인할 수 있다.

[React Native] Expo-CLI 개발 환경 세팅 방법 정리

cocobi — Mon, 30 Jan 2023 22:18:45 +0900

Expo-CLI 개발 환경 세팅 하기

1️⃣ Expo CLI 설치

2️⃣ 프로젝트 생성

3️⃣ 프로젝트 실행(웹/가상장치)

4️⃣ Expo app에서 실행

1️⃣ Expo CLI 설치

◾ expo-cli 설치 명령어 입력

npm install --global expo-cli

global 설치를 원하지 않는 경우 프로젝트를 시작할 경로에서 아래 명령어를 입력한다.

npm install expo-cli

◾설치 확인

expo-cli --version

2️⃣ 프로젝트 생성

◾ 프로젝트 생성할 폴더로 이동후 [ expo init 프로젝트명 ] 입력

expo init 프로젝트명

◾ template 선택

- blank : 비어있는 하나의 페이지만 존재하는 템플릿

- blank(TypeScript) : blank와 동일하면서 TypeScript를 사용할 수 있는 템플릿

- tabs(TypeScript) : react-navigation을 통해 여러 페이지가 만들어져 있는 템플릿

- Bare wokrflow : Non-Expo 앱을 만들때 사용

3️⃣ 프로젝트 실행(웹/가상장치)

◾ 프로젝트 폴더로 이동후 expo 실행

cd my-app
expo start 또는 npm start

◾ 웹에서 실행

w버튼을 누를 경우 expo가 데스크탑 웹에서 실행된다.

◾ 가상 장치에서 실행

a버튼을 누를 경우 안드로이드 스튜디오에 설치된 가상장치에서 expo가 실행된다.

4️⃣ Expo app 에서 실행

◾ Expo app 설치

- Android

https://play.google.com/store/apps/details?id=host.exp.exponent

Expo - Google Play 앱

Expo는 JavaScript 및 React를 사용하여 앱을 제작하는 무료 및 오픈 소스 플랫폼입니다.

play.google.com

- iOS App Store

https://search.itunes.apple.com/WebObjects/MZContentLink.woa/wa/link?path=apps%2fexponent

Connecting to the iTunes Store.

search.itunes.apple.com

◾ Expo app 실행 후 Scan QR Code 선택 → VS Code콘솔의 QR 코드 스캔

PC와 모바일 기기가 동일한 네트워크에 연결되어 있어야 실행된다.

◾ 실행 확인

[Python] 컬렉션의 반복문 실행 시 인덱스 부여하기(enumerate)

cocobi — Sun, 29 Jan 2023 22:03:56 +0900

파이썬 컬렉션의 반복문 실행 시 인덱스 부여하는 방법

파이썬의 컬렉션 타입에는 list, tuple, dictionary, set가 있다.

컬렉션 타입의 반복문을 실행하였을 때 인덱스를 가져오기 위해서는 enumerate 함수를 사용하면 된다.

‍ 예제로 알아보기

◾ 기본 사용법

for문을 통해 루프를 실행할 경우 컬렉션타입을 enumerate 함수로 감싸 실행하게 되면 (index, element) 쌍으로 순회할 수 있다. 아래와 같이 for i, value로 선언하면, 튜플이 Unpacking 되어 index와 value에 값이 할당된다.

animals = ['Cat', 'Dog', 'Giraffe', 'Hamster']

for i, value in enumerate(animals):
    print(f'Index: {i}, animal: {value}')

◾ 특정 index로 시작하기

enumerate를 통해 인덱스를 부여할 경우 인덱스는 0부터 시작한다.

특정 인덱스부터 시작하기 원하는 경우 아래와 같이 enumerate의 인자로 start=n을 전달하면 index가 n부터 시작한다.

animals = ['Cat', 'Dog', 'Giraffe', 'Hamster']

for i, value in enumerate(animals, start=1):
    print(f'Index: {i}, animal: {value}')

[JS] 자바스크립트 로컬 스토리지(localStorage) 사용 하기

cocobi — Fri, 27 Jan 2023 14:51:22 +0900

자바스크립트 로컬 스토리지 사용 방법

로컬 스토리지(localStorage) 는 사용자의 컴퓨터에 저장되기 때문에 로컬 저장소라고 한다.

또한 로컬 스토리지는 세션 스토리지(sessionStorage) 와 비슷하지만, 로컬 스토리지의 데이터는 명시적으로 제거하지 않는 이상 자동으로 사라지지 않으나 세션 스토리지의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다.

그리고 로컬 스토리지에 저장된 데이터는 페이지의 프로토콜별로 구분된다.

예를 들어, HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 로컬 스토리지에 저장된다.

로컬 스토리지의 데이터는 키와 값의 쌍으로 이루어져 있다.

로컬 스토리지의 값으로 가능한 것은 DOMString의 형태뿐이며, 객체와 마찬가지로 정수는 자동으로 문자열로 변환되어 저장된다.

‍♂️ 예제로 알아보기

◾ 내장 메서드 사용

로컬 스토어의 내장 메서드는 setItem, getItem, removeItem, clear가 있다.

/* setItem */
localStorage.setItem("name", "jinny");
console.log(localStorage) // {keyName: "value"}


/* getItem */
let locValue = localStorage.getItem("name");
console.log(locValue) // jinny


/* removeItem */
localStorage.removeItem("name");
console.log(localStorage) // {}


/* clear */
localStorage.setItem("name", "jinny");
localStorage.clear();
console.log(localStorage) // {}

◾ 로컬 스토리지에 객체 저장하고 사용하기

로컬 스토어에 객체를 저장할 경우 문자열 'object Object' 로 저장된다.

따라서 객체를 저장할때는 JSON.stringify()를 사용해서 저장하면 객체가 JSON String 형태로 저장되고,

해당 데이터를 꺼내서 쓸 때는 JSON.parse()를 사용하여 다시 객체로 변환하여 사용하면 된다.

let obj = [
  {
    name: "Jinny",
    age: 30,
  }, {
    name: "cocobi",
    age: 29,
  }, 
]


/* JSON.stringify */
localStorage.setItem( 'obj', JSON.stringify(obj) );
console.log(localStorage) 
// Storage {obj: '[{"name":"Jinny","age":30},{"name":"cocobi","age":29}]', length: 1}


/* JSON.parse */
let userInfo = JSON.parse(localStorage.obj);
console.log(userInfo)
// [ 0: {"name":"Jinny","age":30}, 1: {"name":"cocobi","age":29}, length: 2 ]

참고사이트

MDN :: localStorage

[Clean Code] 클린 코드 7장 ~ 9장 리뷰

cocobi — Thu, 26 Jan 2023 15:13:01 +0900

7장 :: 오류처리

깨끗한 코드와 오류 처리 사이에도 연관성은 있다.
상당수의 코드는 오류 처리에 좌우되며, 여기저기 흩어진 오류 처리 코드 때문에 실제 코드가 하는 일을 파악하는 것이 불가능해질 수 있다. 따라서 오류 처리는 중요하다.

" 오류 코드보다 예외를 사용하라 "
예외 처리가 없다면 오류 플래그를 설정하거나 호출자에게 오류 코드를 반환해야 한다.
→ 함수를 호출한 즉시 오류를 확인해야 하기 때문에 호출자 코드가 복잡해지고, 잊어버리기 쉽다.
→ 오류 발생 시 예외를 던지면 로직과 오류 처리 코드가 섞이지 않게 되므로 호출자 코드가 깔끔해진다.

" Try-Catch-Finally 문부터 작성하라 "
어떤 면에서 try 블록은 트랜잭션과 비슷하다. try 블록에서 무슨 일이 생기든지 catch 블록이 상태를 일관성 있게 유지해야 하기 때문이다.
따라서, 예외가 발생할 코드를 짤 때는 try-catch-finally 문으로 시작하는 편이 낫다.

" 미확인(unchecked) 예외를 사용하라 "
확인된 예외는 OCP(Open Closed Principle)을 위반한다.
→ 하위 단계에서 코드를 변경하면 상위 단계 메서드 선언부를 전부 고쳐야 한다.(또한 캡슐화도 깨진다)
때로는 확인된 예외도 유용하다. 중요한 라이브러리를 작성한다면 모든 예외를 잡아야 한다. 하지만 일반적인 애플리케이션은 의존성이라는 비용이 이익보다 크다.

" 예외에 의미를 제공하라 "
예외를 던질 때는 오류 메시지에 정보를 담아 예외와 함께 던진다.(전후 상황을 충분히 덧붙인다.)
→ 오류가 발생한 원인과 위치를 찾기가 쉬워진다.

" 호출자를 고려해 예외 클래스를 정의하라 "
오류를 잡아내기 위해 예외 클래스를 정의한다.

" 정상 흐름을 정의하라 "
예외 처리를 통해 코드를 깔끔하게 만들 수 있고 오류를 처리할 수 있지만, 때로는 예외 처리로 인한 중단이 적합하지 않은 때도 있다.
- 특수 사례 패턴(SPECIAL CASE PATTERN) : 클래스를 만들거나 객체를 조작해(=예외적인 상황을 캡슐화하여) 특수 사례를 처리하는 방식으로, 클라이언트 코드가 예외적인 상황을 처리할 필요가 없어진다.

" null을 반환하지 마라 "
null을 반환하는 코드는 일거리를 늘린 뿐만 아니라 호출자에게 문제를 떠넘긴다.
null확인을 빼먹는다면 애플리케이션 통제 불능에 빠질지도 모른다.
메서드에서 null을 반환하고자 한다면 그 대신 예외를 던지거나 특수 사례 객체를 반환한다.

" null을 전달하지 마라 "
메서드에서 null을 반환하는 방식도 나쁘지만 메서드로 null을 전달하는 방식은 더 나쁘다.
정상적인 인수로 null을 기대하는 API가 아니라면 메서드로 null을 전달하는 코드는 최대한 피한다.

=======================================>>>

깨끗한 코드는 읽기도 좋아야 하고 안정성도 높아야 한다.
그런 면에서 비즈니스 논리와 오류 처리가 잘 분리된 코드를 작성하기 위해 오류 처리는 중요하다.
오류 처리를 프로그램 논리와 분리하면 독립적인 추론이 가능해지며 코드 유지보수성도 크게 높아진다.

*** NullPointException

8장 :: 경계

시스템에 들어가는 모든 소프트웨어를 직접 개발하는 경우는 드물다.
때로는 패키지를 사고, 오픈 소스를 이용한다. 또는 사내 다른 팀이 개발한 컴포넌트를 사용한다.
어떤 식으로든 이러한 외부 코드를 우리의 코드에 깔끔하게 통합해야만 한다.

" 외부 코드 사용하기 "
경계 클래스(인터페이스)를 이용할 때는 이를 사용하는 클래스나 클래스 계열 밖으로 노출되지 않도록 주의한다.

" 경계 살피고 익히기 "
외부 코드의 테스트는 우리의 책임이 아니다. 하지만 우리 자신을 위해 사용할 코드를 테스트하는 편이 바람직하다. 외부 코드를 익히기는 어렵다. 외부 코드를 통합하기도 어렵다.

" 학습 테스트 "
학습 테스트는 우리쪽 코드를 작성해 외부 코드를 호출하는 대신 먼저 간단한 테스트 케이스를 작성해 외부 코드를 익히는 것을 말한다. 따라서 학습 테스트는 API를 사용하려는 목적에 초점을 맞춘다.

" 학습 테스트는 공짜 이상이다 "
학습 테스트에 드는 비용은 없다. 오히려 필요한 지식만 확보하는 손쉬운 방법이며, 이해도를 높여주는 정확한 실험이다. 따라서 투자하는 노력보다 얻는 성과가 크다.

" 아직 존재하지 않는 코드를 사용하기 "
위에서 살펴본 것과 또 다른 경계는 아는 코드와 모르는 코드를 분리하는 경계이다.
우리에게 필요한 경계 인터페이스를 예측하고 미리 설계하여 구현한다면 우리가 인터페이스를 전적으로 통제한다는 장점이 생긴다. 또한 코드의 가독성도 높아지고 코드 의도도 분명해진다.

" 깨끗한 경계 "
경계에 위치하는 코드는 깔끔히 분리한다. 또한 기대치를 정의하는 테스트 케이스도 작성한다.
이쪽 코드에서 외부 패키지를 세세하게 알아야 할 필요가 없다. 통제가 불가능한 외부 패키지에 의존하는 대신 통제가 가능한 우리 코드에 의존하는 편이 훨씬 좋다.

=======================================>>>

외부 코드를 우리 코드에 사용할 때 특히 더 깔끔하고 가독성 있는 코드를 작성하여 외부 코드와 섞이는 코드의 경계를 뚜렷하게 작성하여야 한다. 또한 외부 코드에 의존하지 않고 스스로 외부 코드를 익히고 테스트하여 그 경계 부분을 잘 다룰 수 있도록 하자.

9장 :: 단위 테스트

" TDD 법칙 세 가지 "
1. 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다.
2. 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다.
3. 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다.

위 세 가지 규칙을 따르면 개발과 테스트가 약 30초 주기로 이루어진다.
테스트 코드와 실제 코드가 함께 나올뿐더러 테스트 코드가 실제 코드보다 불과 몇 초 전에 나온다.
실제 코드와 맞먹을 정도로 방대한 테스트 코드는 심각한 관리 문제를 유발할 수 있다.

" 깨끗한 테스트 코드 유지하기 "
지저분한 테스트 코드나 테스트를 하지 않는 것은 오십 보 백보, 아니 오히려 못하다.
→ 실제 코드가 변경되면 테스트 코드도 변경되어야 하며, 테스트 코드가 더러울수록 변경하기 어려워진다. 경우에 따라 테스트 코드를 짜는 시간이 실제 코드를 짜는 시간보다 오래 걸릴 수도 있고, 지저분한 코드로 인해 테스트를 통과시키기 더 어려워진다.
→ 테스트 코드는 실제 코드 못지않게 중요하다. 테스트 코드는 이류 시민이 아니다. 테스트 코드는 사고와 설계와 주의가 필요하다. 실제 코드 못지 않게 깨끗하게 짜야한다.

" 테스트는 유연성, 유지보수성, 재사용성을 제공한다. "

" 깨끗한 테스트 코드 "
깨끗한 테스트 코드를 위해서는 세 가지가 필요하다. 가독성, 가독성, 가독성.
어쩌면 가독성은 실제 코드보다 테스트 코드에 더더욱 중요하다.(명료성, 단순성, 표현력)
테스트 코드는 최소의 표현으로 많은 것을 나타내야 한다.

" 도메인에 특화된 테스트 언어"

" 이중 표준 "
메모리나 CPU효율과 관련 있는 경우 실제 환경과 테스트 환경은 달라도 문제되지 않는다.

" 테스트 당 assert 하나 "
JUnit으로 테스트 코드를 작성할 때 함수마다 assert문을 단 하나씩만 사용해야 한다.
→ assert문이 하나인 함수는 결론도 하나이기 때문에 테스트 코드를 빠르게 이해하기 쉽다.

" 테스트 당 개념 하나 "
테스트 함수마다 한 개념만 테스트하라, 개념 당 assert문 수를 최소로 줄여라
여러 개념을 하나의 함수에 몰아넣으면 각 절이 거기에 존재하는 이유와 각 절이 테스트하는 개념을 모두 이해해야 한다.

" F.I.R.S.T "
◾ Fast(빠르게) : 테스트는 빨라야 한다.
테스트 속도가 느리면 자주 테스트할 엄두가 안나고 코드 초반에 문제를 찾아내지 못해 코드 품질이 나빠지기 시작한다.

◾ Independent(독립적) : 각 테스트는 서로 의존하면 안된다.
각 테스트는 실행 순서에 상관없이 독립적으로 실행할 수 있어야 하며, 테스트가 서로에 의존하면 하나가 실패할 때 나머지도 잇달아 실패하므로 결함의 원인을 찾기 어려워진다.

◾ Repeatable(반복가능한) : 테스트는 어떤 환경에서도 반복 가능해야한다.
테스트할 수 없는 환경이 있다면 실패한 이유를 둘러댈 변명이 생기고, 테스트를 수행하지 못하는 상황에 직면할 수 있다.

◾ Self-Validating(자가검증) : 테스트는 bool 값으로 결과를 내야한다. 성공 아니면 실패다.

테스트가 스스로 성공과 실패를 가늠하지 않는다면 판단은 주관적이 되며 지루한 수작업 평가가 필요하게 된다.

◾ Timely(적시에) : 테스트는 적시에 작성해야 한다.

단위 테스트는 테스트하려는 실제 코드를 구현하기 직전에 구현한다.
실제 코드를 구현한 다음 테스트 코드를 만들면 실제 코드가 테스트하기 어렵다는 사실을 발견할 수도 있고, 테스트가 불가능하도록 실제 코드를 설계할지도 모른다.

=======================================>>>

테스트 코드가 실제 코드의 유연성, 유지보수성, 재사용성을 보존하고 강화하기 때문에 실제 코드보다 더 중요한 역할을 할 수 있다. 따라서 지속적으로 테스트 코드를 관리하자.

세 가지의 TDD 법칙과 FIRST원칙. "테스트 당 개념 하나" 는 함수 파트와 비슷한 내용이다.

[Clean Code] 클린 코드 1장 ~ 6장 리뷰

cocobi — Wed, 25 Jan 2023 16:40:21 +0900

1장 :: 깨끗한 코드

"코드가 존재하리라"
DSL(Domain Specific Language) : 도메인에 특화된 언어, 특정 문제 해결 기법에 사용할 목적으로 만든 프로그래밍 언어나 명세 언어를 의미한다.

"나쁜 코드"
르블랑의 법칙 : 나중은 결코 오지 않는다. 나중에 손 보겠다고 한 코드, 돌아간다는 사실에 안도감을 느끼고 위로하며 결국에는 고치지 않는다.

"나쁜 코드로 치르는 대가"

"보이스카우트 규칙"
캠프장은 처음 왔을 때보다 더 깨끗하게 해 놓고 떠나라. ⇒ 지속적인 개선

"설계 원칙"
◾ SRP(Single Responsibility Principle): 클래스에는 단 한 가지 변경 이유만 존재해야 한다.
◾ OCP(Open Closed Principle): 클래스는 확장에 열려있어야 하며 변경에 닫혀있어야 한다.
◾ LSP(Liskou Subsitution Principle): 상속받은 클래스는 기초 클래스를 대체할 수 있어야 한다.
◾ DIP(Depending Inversion Principle): 추상화에 의존하라, 구체화하지 마라
◾ ISP(Interface Seregation Principle): 클라이언트에 밀접한 작게 쪼개진 인터페이스를 유지하라

2장 :: 의미 있는 이름

◾ 불용어를 지양하고 구체적인 단어의 사용하라
- theUserData - userData, user - userInfo - userDate

◾ 발음하기 쉬운 이름을 사용하라

◾ 검색하기 쉬운 이름을 사용하라
- 긴 이름 > 짧은 이름, 상수는 변수에 할당하여 사용

◾ 인코딩을 피하라

- 불필요한 정신적 부담은 피하라
- 접두어는 버려라

◾ 자신의 기억력을 자랑하지 마라 (p.31)

◾ 기발한 이름은 피하라

◾ 한 개념에 한 단어를 사용하라

◾ 해법 영역에서 가져온 이름을 사용하라(p.34)
- 코드를 읽을 사람은 개발자 이므로 기술용어를 이름으로 하는데 거부감을 갖지 말라.

◾ 문제 영역에서 가져온 이름을 사용하라(p.34)

◾ 의미 있는 맥락을 추가하라, 불필요한 맥락을 없애라

=========================>>>>>>

모든 것에 이름은 중요하다. 따라서 이름을 잘 지어야 한다.
그렇다면 의도가 분명한 네이밍이란? -> 모호하다. 어느 게 의도가 분명한 거지?

책에서는 위와 같이 여러 제안을 던져준다. 하지만 그 안에서 반대되는 말을 할 때가 있다.

공통적으로 나오는 것은, 일관성 있고 명확한 역할을 하는 단어의 이름을 선택하라는 것이며 짧은 이름보다는 긴 이름이 낫다는 것이다.

또한, 코드를 읽을 사람 또한 개발자 이므로 때로는 기술용어를 이름으로 하는데 거부감을 갖지 말라는 말도 있다.

기억할만하다고 생각한 것은 31~33페이지에 있는 내용이다.

3장 :: 함수

함수를 잘 만드는 방법

◾ 가능한 작게 만들어라
- 블록과 들여쓰기: 중첩문안에서도 작은 함수를 호출하도록 하면 좋다.

◾ 한 가지만 해라
- 하나의 함수는 한 가지의 역할만 해야 하며,
여러 역할을 할 경우 다른 함수를 만들어 사용함으로써 재사용성과 추상화 수준을 높인다.

◾ 위에서 아래로 자연스럽게 읽히는 함수를 만들어라

◾ 서술적인 이름을 사용하라
- "코드를 읽으면서 짐작했던 기능을 각 루틴이 그대로 수행한다면 깨끗한 코드라 불러도 된다"

◾ 함수 인수
- 인수는 가능한 적을수록 이상적이다.

◾ 명령과 조회를 분리하라
- 이 말 역시 하나의 기능만 하라는 말이다.

◾ 오류 코드보다 예외를 사용하라
- if문을 통해 오류 코드를 체크하는 것보다 try-catch를 이용한 예외처리를 한다.

◾ 반복하지 마라
- 중복은 소프트웨어에서 모든 악의 근원이다.
- 구조적 프로그래밍, AOP, COP 모두 어떤 면에서는 중복 제거 전략이다.

◾ 구조적 프로그래밍
- 데이크스트라 "모든 함수와 함수 내 모든 블록에 입구와 출구가 하나만 존재해야 한다"
- return는 하나여야 한다, 루프에서 break / continue를 사용해서는 안된다.
- 그럼에도 불구하고 함수가 작다면 위의 규칙은 큰 이익을 제공하지 못한다.
따라서 꼭 지켜야 하는 규칙이 아니며 때로는 장점을 줄 수도 있다.

=========================>>>>>>

일단 함수를 작성한 후 계속해서 다듬어 나감으로써 좋은 함수를 만들 수 있다.

4장 :: 주석

"나쁜 코드에 주석을 달지 마라. 새로 짜라"
"주석은 기껏해야 필요 악이다."
- 코드로 의도를 표현하지 못해 주석을 사용한다. 즉, 주석은 실패를 의미한다.
- 주석은 나쁜 코드를 보완하지 못한다.
- 주석을 쓸 시간을 나쁜 코드를 보완하는데 써라
======> 함수를 설명하는데 주석을 썼었는데 함수 이름을 명확하게 하면 주석을 쓸 필요가 없어진다.

"좋은 주석"
- 법적인 주석
- 정보를 제공하는 주석
- 의도를 설명하는 주석
- 의미를 명료하게 밝히는 주석
- 결과를 경고하는 주석
- TODO 주석
- 중요성을 강조하는 주석

"나쁜 주석"
- 주절거리는 주석
- 같은 이야기를 중복하는 주석
- 오해할 여지가 있는 주석
- 의무적으로 다는 주석
- 이력을 기록하는 주석
- 있으나 마나 한 주석
- 무서운 잡음
- 함수나 변수로 표현할 수 있다면 주석을 달지 마라
- 위치를 표시하는 주석
- 닫는 괄호에 다는 주석
- 공로를 돌리거나 저자를 표시하는 주석
- 주석으로 처리한 코드
- HTML주석
- 전역 정보
- 너무 많은 정보
- 모호한 관계(추가적인 설명을 요구하는 주석)
- 함수헤더
- 비공개 코드에서의 Javadocs

=========================>>>>>>

4장의 핵심 문구
"나쁜 코드에 주석을 달지 마라. 새로 짜라"
"주석은 기껏해야 필요악이다." - p.68
- 코드로 의도를 표현하지 못해 주석을 사용한다. 즉, 주석은 실패를 의미한다.
- 주석은 나쁜 코드를 보완하지 못한다.
- 주석을 쓸 시간을 나쁜 코드를 보완하는데 써라

평소 함수명 위에 주석으로 해당 함수에 대해 간략하게 주석을 달았었는데
주석 없이 의미가 전달되는 함수명을 짓도록 노력해야겠다.
그리고 나쁜 주석에서 기억이 남는 건
- 공로를 돌리거나 저자를 표시하는 주석 ---> 코드 관리 시스템을 믿어라
- 주석으로 처리한 코드 ---> 코드 관리 시스템을 믿어라
인데, 나중에 기억이 안 날까 봐 주석처리를 해놓는 게 좀 많은데 버전관리를 믿고 과감히 삭제하도록 해야겠다.

5장 :: 형식 맞추기

프로그래머라면 형식을 깔끔하게 맞춰 코드를 짜야한다.
코드 형식을 맞추기 위한 간단한 규칙을 정하고 그 규칙을 착실히 따라야 한다.

"형식을 맞추는 목적"
- 코드 형식은 의사소통의 일환이며, 의사소통은 전문 개발자의 일차적인 의무이다.
- '돌아가는 코드'는 기능 변경에 의해 버려질 수 있지만, 의사소통이 되는 코드는 유지보수의 용이성과 확장성에 영향을 미친다.

"적절한 행 길이를 유지하라"
- 신문 기사처럼 작성하라
- 개념은 빈 행으로 분리하라
- 세로 밀집도
- 수직거리
변수선언: 변수는 사용하는 위치에 최대한 가까이 선언한다.
인스턴스변수: 클래스 맨 처음에 선언한다.
종속함수: 한 함수가 다른 함수를 호출한다면 두 함수는 최대한 가까이 배치한다.
또한, 호출하는 함수는 호출되는 함수보다 먼저 배치한다.
개념적 유사성: 개념적 친화도가 높은 코드는 가까이 배치한다.(변수와 함수, 종속함수...)
- 세로 순서(고차원→저차원)

"가로 형식 맞추기"
추천하는 행 길이는 120자
- 가로 공백과 밀집도: 공백은 강조의 의미 또는 다른 개념의 분리
- 가로 정렬: 불필요한 정렬은 정작 중요한 부분을 놓치게 한다. p.109
- 들여 쓰기: 들여 쓰기가 없다면 인간이 코드를 읽기란 거의 불가능할 것이다. 구조파악↑
- 가짜범위:

"팀 규칙"

=========================>>>>>>

코드를 작성하는 스타일을 개발자마다 다른 게 당연하다.
하지만 그럼에도 불구하고 코딩 컨벤션을 맞추는 건 어딜 가나 중요하다고 생각한다.
그런 점에서 저번에 말한 우리의 코딩 컨벤션은?

- 코드 형식은 의사소통의 일환이며, 의사소통은 전문 개발자의 일차적인 의무이다.
- '돌아가는 코드'는 기능 변경에 의해 버려질 수 있지만, 의사소통이 되는 코드는 유지보수의 용이성과 확장성에 영향을 미친다.

6장 :: 객체와 자료 구조

객체는 내부 구조를 숨겨야 하고, 자료 구조는 내부 구조를 노출한다.

"자료 추상화"
- 자료를 세세하게 공개하기보다는 추상적인 개념으로 표현하는 편이 좋다.
- 인터페이스에 조회와 설정 함수가 같이 있는 경우 구현을 외부로 노출한 것이다.
- 인터페이스나 조회/설정 함수만으로는 추상화가 이루어지지 않는다.
  아무 생각 없이 조회/설정 함수를 추가하는 방법이 가장 나쁘다.

"자료/객체 비대칭"
- 객체 지향 코드에서 어려운 변경은 절차적인 코드에서 쉬우며,
  절차적인 코드에서 어려운 변경은 객체 지향 코드에서 쉽다.
- 새로운 자료 타입이 필요한 경우 객체 지향 기법이 적합하며,
  새로운 함수가 필요한 경우 절차적인 코드와 자료 구조가 적합하다.
- 때로는 단순한 자료 구조와 절차적인 코드가 가장 적합한 상황도 있다.

"디미터 법칙"
- 모듈은 자신이 조작하는 객체의 내부를 몰라야 한다.
- [기차 충돌]
ctxt.getXXX().getXXX().getXXX();
→ ctxt.options.scratchDir.absoltePath;

- [잡종 구조]
절반은 객체, 절반은 자료 구조인 잡종.
새로운 함수는 물론이고 새로운 자료 구조도 추가하기 어렵다.(양쪽의 단점만 모아놓은 구조이다)

- [구조체 감추기]
ctxt.getAbsolutePathOfScratchDirectoryOption();
ctxt.getScratchDirectoryOption().getAbsolutePath();
→ ctxt.creatScratchFileStream(classFileName);

"자료 전달 객체"
- 자료 구조체의 전형적인 형태는 공개 변수만 있고 함수가 없는 클래스이다.
  → 이런 자료 구조체를 때로는 자료 전달 객체(Data Transfer Object, DTO)라고 한다.
  → DTO는 데이터베이스와 통신하거나 소켓에서 받은 메시지의 구문분석 시 유용하다.
  → 또한, 데이터베이스에 저장된 가공되지 않은 정보를 애플리케이션 코드에서 사용할 객체로 변환하는 단계에서
    가장 처음으로 사용하는 구조체이다.
  → 일반적인 형태는 빈(Bean) 구조다.
  → 빈은 비공개 변수를 조회/설정 함수로 조작하며, 일종의 사이비 캡슐화이다.

- [활성 레코드]
활성 레코드는 DTO의 특수한 형태이다.
활성 레코드는 데이터베이스 테이블이나 다른 소스에서 자료를 직접 변환한 결과이다.
활성 레코드는 자료 구조로 취급한다.
비즈니스 규칙을 담으면서 내부 자료를 숨기는 객체는 따로 생성한다.(내부자료=활성 레코드의 인스턴스)

=========================>>>>>>

객체는 동작을 공개하고 자료를 숨긴다.
따라서 기존 동작을 변경하지 않으면서 새 객체 타입을 추가하기는 쉽지만, 기존 객체에 새 동작을 추가하는 것은 어렵다.

자료 구조는 별다른 동작 없이 자료를 노출한다.
따라서 기존 자료 구조에 새 동작을 추가하기는 쉬우나, 기존 함수에 새 자료 구조를 추가하기는 어렵다.

시스템을 구현할 때
새로운 자료 타입을 추가하는 유연성이 필요하면 객체가 적합하다.
새로운 동작을 추가하는 유연성이 필요하면 자료 구조와 절차적인 코드가 적합하다.

[Vite] 번들링 없는 프론트 빌드 Vite란 무엇일까?

cocobi — Tue, 24 Jan 2023 22:33:48 +0900

Vite 란 무엇일까?

이미 프론트엔드 개발 생태계는 웹팩을 중심으로 한 개발 환경과 배포 시스템이 견고하게 구축되어 있지만, 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문에 비트(Vite)라는 도구가 새롭게 나오게 되었다.

비트(Vite)는 Vue의 창시자 Evan You에 의해 개발되었고, 프론트앤드의 주요 프레임워크 커뮤니티에서 주목받고 있는 도구이자 자바스크립트 네이티브 모듈(ESM) 을 기반으로 한 개발 도구이다.

1️⃣ 자바스크립트 네이티브 모듈 (ESM)

ESM은 모듈화 문법인 import, export를 브라우저에서 자체적으로 실행할 수 있는 모듈 방식을 의미한다.

만약 아래와 같은 코드를 웹팩과 같은 번들러 없이 브라우저에서 실행하면 에러가 발생한다.

// app.js
import { sum } from './math.js';
console.log(sum(10, 20));

<script src="./app.js"></script>

하지만, script 태그에 type="module" 속성을 추가하면 정상적으로 동작하는데, 이와 같이 브라우저에서 import와 export를 실행할 수 있는 능력을 ESM라고 한다.

<script type="module" src="./app.js"></script>

2️⃣ Esbuild

대부분의 리액트 개발자들은 공식 리액트 보일러 플레이트이며 HMR(Hot Module Replacement)과 같은 유용한 기능을 제공하기 때문에 주로 Create React App(CRA)을 이용하여 리액트 프로젝트를 생성할 것이다.

CRA는 웹팩(Webpack)을 사용하며 웹팩은 자바스크립트 코드로 구성된 번들러이다.

웹팩의 경우 자바스크립트의 언어적 특성(interpreted ) 때문에 처리해야 할 코드의 양이 많을 경우 속도가 느려진다.

그래서 개발자들은 Go와 같은 로우레벨 언어(low-level language)를 활용하여 자바스크립트의 새로운 툴을 만들려는 시도를 하였고, 그렇게 해서 생겨난 게 Esbuild이다.

3️⃣ Vite

위에서 살펴본 것처럼 Vite는 Esbuild를 기반으로 만들어진 프론트엔드 빌드툴이다.

Vite는 ESM 방식을 사용(=브라우저가 필요로 하는 애플리케이션 코드의 일부분만 변환하고 제공)하기 때문에 자바스크립트 코드를 모두 번들할 필요 없이 브라우저에서 자바스크립트 애플리케이션을 작동시킬 수 있다.

◾ Vite의 특징

◽ 의존성 모듈은 node_modules 폴더로부터 import 되는 자바스크립트 모듈이며 esbuild를 사용하여 처리된다.

◽ Webpack이 브라우저의 요청 이전에 모든 자바스크립트 모듈을 처리하는 반면,

Vite는 브라우저 요청 전에 의존성 모듈만 미리 번들링 한다.

◽ Vite는 native ESM을 기반으로 HMR을 구현한다. 따라서 모듈이 수정될 때 Vite는 수정된 모듈과 관련된 부분만을

교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.

◽ 소스코드는 라이브러리 관련 확장자를 포함하며, 모든 소스코드가 동시에 로드될 필요는 없다

◽ Vite는 브라우저의 요청이 있을 시에만 소스코드를 변환하고 제공한다.

참고사이트

Cracking Vue :: Vite

vitejs :: Why Vite

[Node] Koyeb으로 서버 무료로 배포하기 (헤로쿠 대체 플랫폼!!)

cocobi — Mon, 23 Jan 2023 23:51:38 +0900

❔ Koyeb 이란

2022년 11월 28일부로 헤로쿠(Heroku)의 서비스가 유료로 전환되었다.

따라서 헤로쿠의 프리티어를 대체할 플랫폼을 찾던 중 Koyeb을 발견하여 사용법을 정리할 겸 포스팅하게 되었다.

Koyeb은 배포를 위해 두 가지 방법을 제공한다. 첫 번째 방법은 도커 이미지를 통해 배포하는 것이고,

두 번째 방법은 깃허브와 연동하여 repository를 선택하여 배포하는 방법이다. 또한, 깃허브를 통해 배포할 경우에는 브랜치에 커밋할 때 자동으로 deploy가 되는 편리함을 제공한다.

‍ 계정 및 앱 생성

Koyeb에 접속하여 계정 생성 후 앱 생성을 진행한다.

◾ 계정 생성은 github 아이디로 할 수 있으므로, github 아이디와 연동한다.

◾ 계정 생성이 완료되면 아래와 같은 화면으로 이동된다. Create App 버튼을 클릭하여 앱 생성을 진행한다.

◾ Step 1 :: Select deployment method

첫 번째 단계로 깃허브 저장소를 이용하거나 도커 이미지를 이용해 배포할 수 있다.

이 포스팅에서는 깃허브 저장소를 통해 배포하는 방법을 소개하므로 GitHub 버튼을 선택 한다.

◾ Step 2 :: Import project

GitHub 버튼을 누르면 아래 화면으로 이동되고, 배포할 저장소를 검색하여 선택한 후 Continue 버튼을 클릭한다.

◾ Step 3 :: Configure service and deploy

① 배포할 저장소의 브랜치를 선택한다.

선택한 브렌치에 커밋하거나 병합할 경우 자동으로 배포가 실행된다.

② Koyeb 인스턴스를 선택할 수 있으며, 무료로 사용하기 위해서 Nano 또는 Micro를 선택한다.

(Nano의 경우 2개의 인스턴스를 사용할 수 있으므로 Nano를 선택하자)

③ 도메인 이름을 지정할 수 있다. 원하는 이름을 입력 후 Deploy 버튼을 클릭하면 인스턴스가 생성된다.

◾ DashBoard

대시보드에서 생성된 인스턴스의 추가 옵션을 지정하기 위해 Setting 버튼을 눌러 Service settings 메뉴로 이동한다.

◾ Service settings

Service settings에서는 빌드 명령어나 실행 명령어를 입력할 수 있고 포트를 변경할 수 있다.

(인스턴스 생성 당시 선택한 옵션도 변경할 수 있다.)

모든 설정을 마친 후 Apply 버튼을 클릭하면 배포가 진행된다.

◾ 배포 확인

Deploy를 실행하면 아래 화면으로 이동하고, Build logs의 마지막에 Build succeeded ✅ 메시지가 뜬 것이 확인되면 배포가 성공한 것이다. 따라서 인스턴스 생성 시 입력한 Url에 접속하여 정상적인 화면이 보이나 확인하면 된다.

[Svelte] 스벨트의 특수한 컴포넌트 (Dynamic, Recursive)

cocobi — Sun, 22 Jan 2023 15:21:14 +0900

스벨트의 특수한 컴포넌트 정리

스벨트에서 제공하는 특수한 컴포넌트에는 동적(Dynamic) 컴포넌트와 재귀(Recursive) 컴포넌트 그리고 윈도우 객체를 다룰 수 있는 윈도우 컴포넌트, 교차(Cross) 컴포넌트가 있다.

1️⃣ 동적(Dynamic) 컴포넌트

분기를 통해 다른 컴포넌트를 보여주어야 할 때 스밸트의 동적 컴포넌트를 이용하여 코드를 쉽게 작성할 수 있다.

<scelte:component this={컴포넌트명}>

<!-- App.svelte -->
<script>
  import Product from "./Product.svelte";
  import CartItem from "./CartItem.svelte";

  let renderedComponent = { cmp: Product, title: "Test Product", id: "p1" };

  function toggle() {
    if (renderedComponent.cmp === Product) {
      renderedComponent = { cmp: CartItem, title: "Another Product", id: "p2" };
    } else {
      renderedComponent = { cmp: Product, title: "Test Product", id: "p1" };
    }
  }
</script>

<button on:click={toggle}>Toggle Display</button>

<svelte:component 
    this={renderedComponent.cmp} 
    title={renderedComponent.title} 
    id={renderedComponent.id} />

2️⃣ 재귀(Recursive) 컴포넌트

재귀 컴포넌트는 each문에서 트리 구조의 렌더링시 사용한다.

<svelte:self />

<!-- App.svelte -->
<script>
  import FamilyNode from "./FamilyNode.svelte";

  let familyStructure = [
    {
      isParent: true,
      name: "Chris",
      children: [
        {
          isParent: true,
          name: "Moe",
          children: [{ isParent: false, name: "Julie" }]
        }
      ]
    },
    { isParent: false, name: "Anna" }
  ];

</script>

{#each familyStructure as familyMember}
  <FamilyNode member={familyMember} />
{/each}

아래 코드에서 트리 구조를 표현하기 위해 each에서 재귀 컴포넌트(svelte:self)를 사용하였다.

<!-- FamilyNode.svelte -->
<script>
  export let member;
</script>

<style>
  div {
    margin-left: 2rem;
  }
</style>

<div>
  <h1>{member.name}</h1>
  {#if member.isParent}
    {#each member.children as child}
      <svelte:self member={child} />
    {/each}
  {/if}
</div>

3️⃣ 윈도우 컴포넌트

윈도우 컴포넌트란 윈도우 객체와 상호 작용하는 컴포넌트를 말한다.

윈도우 컴포넌트는 사용하지 않고 스크립트단에서 window 객체를 사용해도 되지만,

페이지의 환경과 상호작용하는 svelte의 특성상 상태 변화를 관리하기에 유리하며 이벤트를 바인딩하여 사용하기에도

편리하기 때문에 사용해 볼 법하다.

<svelte:window on:{event} />
<svelte:head on:{event} />
<svelte:body on:{event} />

4️⃣ 교차 컴포넌트(cross-component)

교차 컴포넌트는 컴포넌트에 있는 스크립트를 단 한 번만 실행되도록 한 것이다.

<script context="module">
	// 이 태그에 있는 코드는 인스턴스가 아닌 파일단위
	// 즉, 컴포넌트 단위로 한 번 실행된다. 
</script>

[Svelte] 스벨트 모션 사용하기(tweened, spring)

cocobi — Sat, 21 Jan 2023 11:13:28 +0900

스벨트 모션 사용 방법

스벨트에서 사용할 수 있는 모션의 종류에는 tweened와 spring이 있다.

1️⃣ tweened

tweened는 값이 변경될 때 적용될 애니메이션의 저장소이다.
또한, tweened는 숫자, 날짜, 숫자와 날짜를 값으로 가지는 객체와 배열에 애니메이션을 추가할 수 있다.

<!-- 이 예제에서는 따로 스토어를 만들지 않고 컨테이너에 저장소를 직접 만든다. -->
<script>
    import { writable } from 'svelte/store';
    import { tweened } from 'svelte/motion';
    import { cubicIn } from 'svelte/easing';

    const progress = tweened(0, {
        delay: 1, // 애니메이션이 시작할 때까지 걸리는 시간
        duration: 1500,// 애니메이션의 길이, 기본값은 400밀리초
        easing: cubicIn // 스밸트 내장 함수
    }); 
    setTimeout(() => {
        progress.set(1);
    }, 1500);
</script>

<progress value={$progress} />

◾ 결과

2️⃣ Spring

예시 참고 : Svelte Tutorial :: Spring

<script>
  import { writable } from 'svelte/store';

  let coords = writable({ x: 50, y: 50 });
  let size = writable(10);
</script>

<div style="position: absolute; right: 1em;">
  <label>
    <h3>stiffness ({coords.stiffness})</h3>
    <input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
  </label>

  <label>
    <h3>damping ({coords.damping})</h3>
    <input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
  </label>
</div>

<svg
  on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
  on:mousedown="{() => size.set(30)}"
  on:mouseup="{() => size.set(10)}"
>
  <circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg>

<style>
  svg {
    width: 100%;
    height: 100%;
    margin: -8px;
  }
  circle {
    fill: #ff3e00;
  }
</style>

3️⃣ 정리

애니메이션 저장소는 컴포넌트 전용 저장소가 합리적이다.

왜냐하면 컴포넌트 내부에 애니메이션을 적용할 값이 있을 경우 tweened나 spring 저장소에 해당 값을 저장하면

즉시 해당 애니메이션을 사용할 수 있기 때문이다.

따라서 별도의 파일을 만들 필요 없이 컴포넌트에 애니메이션을 넣고 싶다면 하나의 컴포넌트 안에서 애니메이션을 설정하는 것이 더 낫다. 하지만, 컴포넌트 간에 공유하는 데이터에 애니메이션을 적용하려면 tweened와 spring을 별도의 파일에 저장하는 것이 더 낫다.

참고사이트

Svelte Docs :: tweened

[Svelte] 스벨트의 읽기 가능 스토어란? (Readable Stores)

cocobi — Fri, 20 Jan 2023 14:32:52 +0900

스벨트의 읽기 가능한 스토어 (Readable Stores)

읽기 가능한 스토어는 쓰기 가능한 스토어와 달리 외부에서 값을 변경할 수 없다.

읽기 가능한 스토어의 값 변경은 오직 내부에서만 가능하다.

1️⃣ Store 생성

쓰기 가능한 스토어가 writable을 통해 생성된 것과 비슷하게 읽기 가능한 스토어는 readable을 통해 생성한다.

/* timer_store.js */
import { readable } from 'svelte/store'

export const timer = readable(0);

2️⃣ readable 메서드 및 스토어의 값 변경

readable은 writable 스토어와 달리 두 번째 인수를 가지며 두 번째 인수는 함수이다.

또한 이 함수는 한 개의 인수를 갖는데, 이 역시 함수이고, 이 함수는 스토어를 set 할 수 있다.

주로 읽기 가능한 스토어는, 타이머가 증가하거나 인터벌이 있는 경우, 또는 위치 정보를 가져올 경우에 사용한다.

/* timer_store.js */
import { readable } from 'svelte/store'

let count = 0;

export const timer = readable(0, (set) => {
    const interval = setInterval(() => {
        count++;
        set();
    }, 1000);

    /* 저장소가 필요 없을 때 Svelte가 자동으로 호출하는 함수로 인터벌을 제거하여 메모리 누수를 방지한다. */
    return () => {
        clearInterval(interval);
    }
});

HTML 태그에 달러 표시를 붙인 스벨트 문법을 사용하여 실시간으로 변수 값의 변화를 보여주거나,

값의 변경이 필요할 경우 스크립트단에서 추가적인 로직을 구현할 수 있다.

<!-- App.svelte -->
<script>
    import { timer } from ',/timer-store.js';
/*    timer.subscribe(count => {
        console.log('App: ' + count); 
    });
*/
</script>

<p>Count: {$timer}</p>

[Svelte] 스벨트의 쓰기 가능 스토어란? (Writable Stores)

cocobi — Thu, 19 Jan 2023 21:49:29 +0900

스벨트의 쓰기 가능한 스토어 (Writable Stores)

스벨트의 스토어에는 두 가지 종류가 있으며, 쓰기 가능한 스토어와 읽기 가능한 스토어이다.

먼저 이번 포스팅에서는 쓰기 가능한 스토어에 대해 정리해 보려고 한다.

◾ 쓰기 가능한 저장소(writable)
▫ 쓰기 가능한 저장소를 생성하려면 특정 함수를 호출해야 한다.
▫ 저장소는 javascript에서 사용하므로 어느 컴포넌트에서나 불러올 수 있다.
▫ 저장소를 불러온 컴포넌트에서는 두 가지 작업을 할 수 있다.
ⅰ) subscribe
- 저장소의 데이터가 바뀔 때마다 이를 전달받은 컴포넌트가 변화에 반응하는 것(ex.데이터 출력)
ⅱ) set, update

- 데이터를 저장소에 설정(set)하거나 업데이트(update)할 수 있다.

1️⃣ store 생성 및 subscribe

먼저 아래 코드와 같이 svelte 파일이 아닌 js 파일에 데이터를 만들고 writable하여 스토어를 등록한다.

그리고 해당 데이터를 스벨트에서 사용하기 위해 export 시킨다.

/* cart_store.js */
import { writable } from 'svelte/store'

const cart = writable([
    {
        id: 'p1',
        title: 'Test',
        price: 9.99
    }, {
        id: 'p2',
        title: 'Test',
        price: 9.99
    }
])

export default cart;

위 스토어 데이터를 사용하기 위해 import한 스토어 컴포넌트를 subscribe 한다.

<!-- cart.svelte -->
<script>
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.

    let items;

    cartItems.subscribe(its => {
        items = its
    });
    // items : [{id:"p1", title:"Test", ...},{id:"p2", title:"Test", ...}]
</script>

2️⃣ store 업데이트

스토어에 있는 데이터를 갱신하기 위해 import한 스토어 컴포넌트에 update 메서드를 사용하고,

로직을 구현한 후 리턴값을 전달하여 스토어 갱신을 완료한다.

<!-- cart.svelte -->
<script>
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.

    function addToCart() {
        // cartItems.set([]); // 해당 store에 적용한 subscribe 기능이 실행된다.
        cartItems.update(items => {
            return [
                ...items,
                {
                    id: 'p3',
                    title: 'Test',
                    price: 9.99
                }
            ]
        }); // 현재 store의 데이터를 업데이트 한다.
        /* cartItems : [
            {id:"p1", title:"Test", ...}
            ,{id:"p2", title:"Test", ...}
            ,{id:"p3", title:"Test", ...}
           ]
        */
    }
</script>

3️⃣ store subscribe 관리

subscribe는 언마운트 되기 전까지 메모리에 계속 남아있는 상태이다.
따라서 메모리 누수를 방지하기 위해 상수에 subscribe를 담아 임의로 제거해 줄 필요가 있다.

/* cart.svelte */
<script>
    import { onDestroy } form 'svelte';
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.

    let items;

    const unsubscribe =  cartItems.subscribe(its => {
        items = its
    });

    onDestroy(() => {
        if (unsubscribe) {
            unsubscribe();
        }
    })
</script>

4️⃣ 자동 subscribe 사용하기

해당 기능을 사용하면 별도의 함수로 subscribe를 해제할 필요가 없어지며,

$cartItems를 하면 자동으로 subscribe가 실행되고 DOM에서 컴포넌트가 제거될 때 자동으로 해제된다.

또한, 이 방법은 3️⃣보다 간결하게 작성할 수 있지만, 마크업에 사용하기 전에 데이터를 변환하거나 어떤 조작이 필요할 때 3️⃣의 방법을 작성하도록 하자.

<!-- cart.svelte -->
<script>
    import { onDestroy } form 'svelte';
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.
</script>

<section>
    <h1>Cart</h1>
    <ul>
        {#each $cartItems as item (item.id)}
            <CartItem id={item.id} title={item.title} price={item.price} />
        {:else}
            <p>No items in cart yet!</p>
        {/each}
    </ul>
</section>

[TS] 타입스크립트 개발환경 환경 설정하기(VS Code)

cocobi — Wed, 18 Jan 2023 17:00:06 +0900

타입스크립트 개발환경 세팅하는 방법

타입스크립트 개발환경을 구성하기 위해서는 npm이 필요하기 때문에 node.js가 설치되어 있어야 하며,

개발 툴로는 Visual studio Code를 사용할 것이기에 두 가지 모두 설치되어 있다는 가정하에 포스팅한다.

또한, vscode는 추가적인 플러그인을 설치하지 않아도 Typescript에 대한 intellisense를 제공한다.

1️⃣ 타입스크립트 설치

아래 명령어를 통해 typescript를 설치한다.

npm install typescript

설치가 정상적으로 완료되었는지 확인하기 위해 버전을 확인하는 명령어를 입력한다.

npx tsc -v

2️⃣ tsconfig.json 생성 및 설정

tsconfig.json 파일이 필요한 데에는 두 가지 이유가 있다.

- vscode의 intellisense가 .ts 파일을 인식하는 방법을 제어하기 위해서 필요하다.

- tsc가 타입스크립트를 자바스크립트로 컴파일하는 과정에서 필요하다.

◾ 파일 생성

아래 명령어를 통해 tsconfig.json을 생성하거나 직접 파일을 만든다.

npx tsc --init

◾ 설정

Typescript Docs 를 참고하여 설정 파일을 작성한다.

/* 작성 예시 */
{
  "compilerOptions": {
    "target": "es2016", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
    "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
    "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
    "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
    "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
    "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
    "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
    "outDir": "./", //js파일 아웃풋 경로바꾸기
    "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
    "removeComments": true, //컴파일시 주석제거 
    "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
    "noImplicitAny": true, //any타입 금지 여부
    "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
    "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
    "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
    "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
    "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
    "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
    "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
    "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
    "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
  }
}

3️⃣ Typescript 컴파일

타입스크립트 파일은 자바스크립트 파일로 컴파일되어야 하며, 컴파일 명령어는 아래와 같다.

npx tsc

앞의 명령어는 명령어를 입력해야지만 컴파일되는데,

기존 명령어에-w 옵션을 붙여 입력하면 파일을 수정 후 저장할 때마다 자동으로 컴파일된다.

npx tsc -w

번외) 컴파일하지 않고 TS파일을 실행하는 방법

타입스크립트 파일은 자바스크립트 파일로 컴파일하지 않고 실행하는 방법이 있다.

먼저 터미널에 아래 명령어를 입력하여 ts-node를 설치한다.

npm install --save-dev ts-node

설치 완료 후 아래 명령어를 입력하여 결괏값을 터미널로 확인할 수 있다.

npx ts-node [경로]

[JS] 자바스크립트 논리 연산자 AND (&&)를 이용한 조건문

cocobi — Tue, 17 Jan 2023 21:47:30 +0900

자바스크립트 논리 연산자를 이용하여 조건문 작성하기

자바스크립트의 논리 연산자 중 AND (&&) 연산자를 이용하여 조건문을 작성할 수 있다.

‍♂️ 예제로 알아보기

논리연산자 && 는 앞에는 조건을 작성하며 조건이 True일 때 && 연산자 뒤의 괄호 속 코드를 실행한다.

◾ 변수의 값에 따라 값 할당

아래 코드는 && 연산자를 활용해 조건문을 대신한 코드의 예제이다.

/* 조건이 false일 때 && 연산자 뒤 괄호 속 코드는 동작하지 않는다. */
let x = 10
x == 5 && (x = 100)
console.log(x) // 10

/* 조건이 true일 때 && 연산자 뒤 괄호 속 코드가 동작하며 한번에 여러 일을 할 수 있다. */
let y = 10
y == 10 && (y = 100, x = 999)
console.log(y) // 100
console.log(x) // 999

◾ 함수의 경우

const A = () => {
  console.log('called A');
  return false;
}
const B = () => {
  console.log('called B');
  return true;
}

console.log(A() && B());
// called A
// false

ⅰ) A( )가 실행되기 때문에 콘솔에는 called A가 출력된다.

ⅱ) A( )의 리턴값이 false이기 때문에 && 연산자 뒤의 코드는 동작하지 않고 리턴값인 false가 출력된다.

참고사이트

MDN :: Logical AND (&&)

[JS] 자바스크립트 특정 값으로 배열의 값 채우기(Arr.fill( ))

cocobi — Mon, 16 Jan 2023 12:53:36 +0900

자바스크립트 특정한 값으로 배열을 채우는 방법

자바스크립트의 배열을 특정 값으로 채우는 방법은 배열의 기본 메서드인 fill( ) 을 사용하는 것이다.

또한, fill 메서드를 통해 특정 인덱스를 지정하여 해당하는 인덱스에 값을 할당할 수도 있다.

‍ 기본 구문

arr.fill(value[, start[, end]])

◾ 매개변수

◽ value : 배열을 채울 값

◽ start : 시작 지점의 인덱스, 기본 값은 0이며 생략할 수 있다.

◽ end : 끝나는 지점의 인덱스, 기본 값은 배열의 길이(this.length)이며 생략할 수 있다.

const array1 = [1, 2, 3, 4];

/* 값 0을 2번째 인덱스부터 4번째 인덱스까지 채운다 */
console.log(array1.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]

/* 값 5를 1번째 인덱스부터 마지막 인덱스까지 채운다 */
console.log(array1.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]

/* 값 0을 모든 인덱스에 채운다 */
console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]

‍♂️ 예제로 알아보기

start가 음수일 때 시작 인덱스는 length+start이며, end가 음수이면 끝 인덱스는 length+end이다.

또한, fill 메서드는 this 객체를 변형한 배열을 반환한다는 점에서 주의하여야 한다.

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);   // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

let arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

참고사이트

MDN :: Array.prototype.fill()

[JS] 렉시컬 스코프(Lexical Scope)란 무엇일까?

cocobi — Sun, 15 Jan 2023 22:35:27 +0900

자바스크립트 렉시컬 스코프(Lexical Scope) 정리

렉시컬 스코프(Lexical Scope)는 클로저(Closure)를 이해하기 위해 알아두어야 할 개념이다.

‍ 렉시컬 스코프(Lexical Scope)

렉시컬 스코프의 정의는 함수 또는 변수의 스코프를 결정하는 방식이다.

다른 말로는 함수의 호출위치가 아닌, 선언된 위치에 따라 스코프가 결정되는 것이라고 할 수 있다

즉, 함수의 선언 위치에 따라 상위 스코프를 결정한다는 뜻이며 정적 스코프(Static scope)라 부르기도 하다.

‍♂️ 예제로 알아보기

아래 예제는 x의 값을 콘솔로 출력하는 코드이다.

let x = 1;

const first = (() => {
  let x = 10;
  second();
})

const second = (() => {
  console.log(x);
})

first();
second();

얼핏 보면 first 함수 내에서 x에 10을 할당하였기 때문에 콘솔에 10과 1이 출력될 것 같이 보인다.

하지만 실제 출력 값은 전역에 있는 x의 값인 1이 두 번 출력된다.

이러한 결과의 이유는 실행 단계에서 코드들의 스코프를 결정하기 때문이다.

◽ global 범위에 있는 변수 x

◽ first( ) 함수 안에 있는 변수 x

◽ second( ) 함수 안에 있는 변수 x

즉, 위 예제에서 가장 중요한 것은 second( ) 함수의 상위 스코프가 무엇인지에 따라 출력값이 결정된다는 것이다.

다시 한번 말하자면, 자바스크립트는 렉시컬 스코프를 따르기 때문에 함수를 선언한 시점에 상위 스코프가 결정된다.

=> 함수의 호출 위치는 중요하지 않으며, 스코프 결정에 영향을 주지 않는다.

=> first 함수 안에서 second가 호출된 것과 상관없이 second는 global 범위에 선언되어 있으므로,

global 범위에 있는 변수 x의 값(=1)이 두 번 출력된 것이다.

❓ 함수의 호출로 인해 상위 스코프가 결정된다면

함수의 선언 위치가 아니라 호출 위치에 따라 상위 스코프가 정해지는 것을 Dynamic Scope라고 한다.

예제에서 렉시컬 스코프가 아닌 다이나믹 스코프를 따른다면, second의 상위 스코프는 자신을 호출한 함수 first와 전역(global)을 가리키게 되어 함수 first를 호출하여 console.log()를 출력했을 때 x의 결과는 10이 출력될 것이다.

[Svelte] 스벨트 컴포넌트 생명주기(Lifecycle) 정리

cocobi — Fri, 13 Jan 2023 14:25:39 +0900

스벨트 컴포넌트 라이프사이클(Svelte Lifecycle)

1️⃣ Creation

◾ Script Executes
- DOM 이 랜더링 될 때 실행/초기화
- 컴포넌트 내 프로퍼티 및 변수 지정, 함수 정의 ...

◾ onMount( )
- 데이터가 페칭될때 실행

◾ onDestroy( )
- 컴포넌트가 DOM에서 분리될 때 실행

2️⃣ Updates

◾ beforeUpdate( )
- 업데이트가 실제 DOM에 반영되기 직전에 코드를 실행

◾ afterUpdate( )
- Svelte가 DOM에 연결된 직후에 실행

◾ tkck( )
- 수행할 작업을 예약한 다음 작업이 완료되면 작업 루프에서 제거
- Node.js의 이벤트 루프를 생각하면 된다.
- tick을 사용하면 각각의 완료된 작업을 연결할 수 있다.
- Svelte가 DOM을 업데이트하는 것을 기다린 다음 필요한 작업을 수행하며,

해당 작업이 완료되었을 때 DOM에 연결되어 업데이트가 진행된다.

[Svelte] 스벨트 전개(Spread) 프로퍼티와 슬롯(Slot) 사용하기

cocobi — Thu, 12 Jan 2023 15:23:18 +0900

Each문에서의 Spread 프로퍼티 및 Slot 사용 방법

Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다.

1️⃣ Spread 프로퍼티

기존에는 컴포넌트를 랜더하기 위해 each문을 쓸 때 아래와 같이 프로퍼티를 일일이 추가해 주었다.

<!-- Spread 프로퍼티 -->
{#each products as product}
<Product
    title = product.title
    price = product.price
    ...
/>
{/each}

하지만 ES6의 전개연산자와 비슷하게 아래와 같은 문법을 사용함으로써 간결한 코드를 작성할 수 있다.

{#each products as product}
<Product
    {...product}
/>
{/each}

2️⃣ Slot

상위 컴포넌트에서 하위 컴포넌트 사이에 태그를 작성하였을 때, 해당 하위 컴포넌트에서 slot태그가 존재하여야만 결과가 출력된다. 만약 slot 태그 없이 App.svelte에서 Modal 사이에 태그를 작성한다면 해당 태그는 랜더 되지 않는다.

<!-- App.svelte -->
<Modal>
    <h1>Hello</h1>
    <p>This works!</p>
</Modal>


<!-- Modal.svelte -->
<div>
    <slot />
</div>

3️⃣ namedSlot

슬롯에 이름을 지정할 수 있으며, 이름 있는 슬롯과 이름 없는 슬롯이 함께 존재하는 경우 이름 없는 슬롯이 기본 슬롯이 된다. 또한, 이름 없는 기본 슬롯은 한 개만 존재해야 한다.

<!-- App.svelte -->
<Modal>
    <h1 slot="header">Hello</h1>
    <p>This works!</p>
</Modal>


<!-- Modal.svelte -->
<div>
    <header>
        <slot name="header"/>
    <header>
    <div>
        <slot />
    </div>
</div>

[Svelte] 스벨트 커스텀 이벤트와 이벤트 데이터 추출하기

cocobi — Thu, 12 Jan 2023 15:01:55 +0900

커스텀 이벤트 추가 및 이벤트 데이터 추출하기

Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다.

‍ 커스텀 이벤트와 데이터 추출

커스텀 이벤트에 있어 중요한 키워드는 dispatch이다.

하위 컴포넌트의 스크립트에서 createEventDispatcher를 통해

커스텀 이벤트의 이름과 전달할 데이터를 바인딩 한 메서드에 dispatch한다.

<!-- Product.svelte -->
<script>
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function addToCart(){
    dispatch('add-to-cart', {id: 'p1'}); //첫번째인수는 이벤트 이름, 두번쨰는 전달할 데이터
}
</script>

<button on:click="{addToCart}">Add to Cart</button>

하위 컴포넌트에서 dispatch한 커스텀 이벤트와 데이터를 상위 컴포넌트에서 사용할 수 있게 되었다.

<!-- App.svelte -->
<Product on:add-to-cart={() => alert(''Add to cart!)} />

또한 하위 컴포넌트에서 전달한 이벤트의 데이터를 추출하기 위해서는 아래와 같이 하위 컴포넌트의 프로퍼티에

메서드를 바인딩한 후 인자값을 받아와 사용할 수 있다.

<!-- App.svelte -->
<script>
function addToCart(event) {
    console.log(event.detail) // p1
}
</script>

<Product on:add-to-cart={addToCart} />

[Eclipse] 이클립스 디버깅 에러 해결 (Unable Install breakpoint ...)

cocobi — Wed, 11 Jan 2023 19:13:40 +0900

이클립스 디버깅 오류 해결 방법

오랜만에 이클립스로 개발할 일이 생겨 디버깅 모드로 기동 하였으나 아래와 같은 오류가 발생하였다.

1️⃣ 경고 끄기

해당 경고창이 떠도 디버깅하는데에는 문제가 없다고 한다. 하지만 너무 많이 뜨기 때문에 경고를 꺼버리는 옵션이다.

상단의 Windows > Preferences > Java > Debug > Warn when unable to install breakpoint due to missing line number attributes 체크 해제

2️⃣ 프로젝트 Clean 및 breakpoint 제거

◾ 톰캣 서버 Clean

Serves > 디버깅 오류가 뜨는 서버 우클릭 > Clean

◾ 프로젝트 Clean

상단의 Project > Clean

◾ breakpoint 제거

상단의 Run > Remove All Breakpoints

참고사이트

Stackoverflow :: Eclipse - Unable to install breakpoint due to missing line number attributes

[JS] 자바스크립트 배열 평탄화하기 (flat, flatMap)

cocobi — Mon, 9 Jan 2023 20:05:43 +0900

자바스크립트 중첩 배열 평탄화 하는 방법 정리

중첩된 배열을 평탄화하기 위해 배열의 내장 메서드인 arr.flat() 을 통해 쉽게 처리할 수 있다.

1️⃣ flat( )

◾ 기본 구문

const arr = oldArr.flat([depth])
// depth : 중첩된 배열을 평탄화할 때 사용하는 깊이 값이며 기본값은 1이다.

◾ 사용방법

/* 기본 depth인 1만큼 평탄화한다. */
const arr = [1, 2, [3, 4]];
arr.flat(); // [1, 2, 3, 4]

/* 입력한 숫자만큼의 depth를 평탄화한다. */
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2️⃣ flatMap( )

flatMap( ) 메서드는 각 엘리먼트에 대해 map을 수행한 후 결과값을 새로운 배열로 평탄화한다.

◾ 기본 구문

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

◾ 사용방법

const arr = [1, 2, 3, 4];

arr.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 한 depth만 평탄화됨
arr.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

const arr = ["it's Sunny in", "", "California"];

arr.map(x=>x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr.flatMap(x => x.split(" "));
// ["it's","Sunny","in","California"]

참고사이트

MDN :: Array.prototype.flat()

MDN :: Array.prototype.flatMap()

[Svelte] 두 가지 종류의 컴포넌트 (Container VS Presentational component)

cocobi — Sun, 8 Jan 2023 15:45:22 +0900

Container (=Stateful components) VS Presentational component

Svelte.js - 완벽 가이드의 [섹션 5:: 강의 프로젝트 첫 번째 단계] 를 수강한 후에 정리한 내용이다.

1️⃣ Container (=Stateful components)

◾ 데이터를 가지고 있으면서 관리하는 역할을 한다.

◾ 다른 컴포넌트에 데이터를 전달한다.

◾ 스테이트풀에서의 스테이트(=상태)는 데이터를 의미한다.

◾ 스테이트풀의 데이터는 정적일 필요가 없고, 상호작용에 의해 서버로부터 페칭(fetch)되어 변경될 수 있다.

◾ 예) App, Product ... : 데이터 관리를 위한 루트 위치 또는 메인 기능 컴포넌트

◾ 스테이트풀 컴포넌트는 소수이다.(유지보수↑)

2️⃣ Presentational component

◾ 프레젠테이션 컴포넌트에는 정적인 데이터가 있는데, 이 데이터는 모두 외부로부터 수신한 데이터이다.

◾ 프레젠테이션 컴포넌트에서는 데이터를 변경하는 일이 거의 없다.

◾ 데이터를 조작하지 않고 출력만 한다.

◾ 사용자와 상호작용하는 버튼을 출력할 수 있으나, 상호작용에 의해 발생한 데이터를 그대로 스테이트풀

컴포넌트에 입력하고 스테이트풀 컴포넌트가 이 데이터를 받아 변경하거나 필요한 작업을 하게 된다.

◾ 예) Modal, Card, Button ... : 사용자 인터페이스 요소에 해당한다.

◾ 프레젠테이션 컴포넌트는 다수이다.

두 개의 큰 컴포넌트로 나누는 이유는 유지보수를 쉽게 하기 위함이며, 모든 컴포넌트가 모든 작업을 할 수 있게 된다면 애플리케이션의 규모가 커질수록 관리하기 힘들어질 것이다.

[Mobile] 모바일 크롬 개발자 모드 디버깅 환경 구축하기

cocobi — Sat, 7 Jan 2023 16:13:53 +0900

모바일 크롬에서 개발자 모드 구축하는 방법

모바일에서의 디버깅이 필요할 때 크롬 개발자 모드를 통해 쉽게 개발 환경을 구축할 수 있다.

1️⃣ 안드로이드 개발자 모드 활성화

개발자 옵션 메뉴가 보이지 않는 경우 개발자 옵션이 보이도록 설정해야 한다.

휴대전화 정보 → → 소프트웨어 정보 → 빌드번호 7번 클릭 시 개발자 옵션 메뉴가 보이게 된다.

개발자 옵션 메뉴가 보이는 경우 아래 절차를 따라 모바일에서의 디버깅 환경 설정을 마친다.

개발자 옵션 → 켜진 상태로 유지 → USB 디버깅

2️⃣ PC와 휴대폰 연결

USB를 통해 PC와 휴대폰을 연결한다.

3️⃣ 크롬 개발자 도구 페이지로 이동 및 포트 포워딩

URL에 chrome://inspect/#devices 를 검색하여 개발자 도구 페이지로 이동한다.

개발자 도구 페이지로 이동하면 몇 초 후에 USB가 연결된 안드로이드 기기 정보가 디바이스 목록에 표시된다.

디버깅을 원하는 사이트의 URL을 입력하거나 이미 켜져 있는 사이트의 inspect 버튼을 눌러 디버깅을 진행하면 된다

또는 모바일에서의 접근 포트번호와 디버깅하려는 웹의 포트를 포워딩하여 접근할 수도 있다.

[Eclipse] 이클립스 search시 기존 탭 유지 & 새 탭 열기

cocobi — Fri, 6 Jan 2023 23:03:30 +0900

이클립스 파일 검색 시 기존 탭 유지 후 새 탭 여는 방법

1️⃣ 문제

이클립스에서 Ctrl + h 를 통해 파일을 검색하고 해당 파일을 열을 때 기존에 찾은 다른 파일이 열려있다면 해당 파일의 탭에 새로운 파일이 열리게 된다. 이러한 것은 기본 이클립스 설정이 새로운 탭을 열지 않고 기존 탭을 재사용하기 때문이므로 설정을 변경해 주어야 한다.

2️⃣ 해결방법

상단 메뉴의 Window - Preferences > General > Search > Reuse editors to show matches 체크 해제

[Android Studio] 안드로이드 스튜디오 다운로드하기

cocobi — Thu, 5 Jan 2023 22:30:57 +0900

안드로이드 스튜디오 다운로드

1️⃣ 설치파일 다운로드

안드로이드 스튜디오 디벨로퍼 사이트에 접속하여 설치파일을 다운로드한다.

https://developer.android.com/studio?hl=ko

2️⃣ 설치 진행

설치파일을 다운로드한 후 실행 시 아래 과정대로 설치가 진행된다.

Next 클릭한다.

가상장치는 나중에도 설치할 수 있으므로 현재 단계에서 설치는 자유이다.

설치 경로를 선택 후 Next 클릭한다.

Install을 클릭한다.

설치가 진행되며 완료 후 Next를 클릭한다.

설치가 완료되었으며 기본 설정을 하기 위해 Start Android Stuid에 체크 후 Finish를 클릭한다.

3️⃣ 기본 설정 및 완료

이미 설정이 되어있는 config 파일이 있으면 해당 import 하고 없는 경우 아래에 체크 후 Ok를 클릭한다.

Don't send를 선택한다.

Next 버튼을 클릭한다.

설치 타입을 선택하는 단계이며 표준인 Standard를 선택 후 Next 버튼을 클릭한다.

테마를 선택하는 단계이며 편한 테마를 선택하면 된다.

안드로이드 개발을 현재 세팅을 확인하는 단계이며 Next 버튼을 클릭한다.

안드로이드 개발을 위한 추가 파일을 설치하는 단계이며 왼쪽에서 라이선스 선택 후 Accept 선택, Finish를 클릭한다.

추가파일 설치를 진행하며 해당 설치가 완료되면 프로젝트를 생성하거나 Clone 하여 개발을 진행하면 된다.

[JS] 자바스크립트 열거형(Enum) 구현하기

cocobi — Wed, 4 Jan 2023 20:47:22 +0900

자바스크립트 열거형(Enum) 구현하는 방법

Enum은 enumerated type의 줄임말이며 열거형 타입이라는 의미를 갖는다.

하지만, 자바스크립트에는 열거형(Enum) 타입이 존재하지 않으므로 enum타입을 사용하기 위해서는 직접 구현해야 한다.

‍♂️ 열거형 타입을 사용하는 이유

코드가 단순해지며 가독성이 좋아진다.
하나의 변수에 대해서 고정값으로 사용할 수 있다.
특정값을 반복해서 체크해야 하는 상황에서 오류의 발생을 줄일 수 있다.

1️⃣ 상수를 이용한 구현

const Fruit = {
  APPLE : 100,
  BANANA : 200,
  ORANGE : 300
};

위 코드와 같이 const를 통해 상수 값을 할당하면 간편하게 Enum처럼 사용할 수 있다.

하지만 위 코드는 객체 내부의 값을 변경할 수 있기 때문에 추가적인 처리를 해 주어야 한다.

따라서 Object.freeze() 메서드를 이용하여 외부에서 값을 변경할 수 없도록 만들도록 한다.

const Fruit = {
  APPLE : 100,
  BANANA : 200,
  ORANGE : 300
};

Object.freeze(Fruit);

Fruit.APPLE = 500;   // 값이 변경되지 않는다
console.log(Fruit.APPLE); // 100

2️⃣Symbol을 이용한 구현

Enum을 구현할 때, Enum의 value를 Symbol로 감싸주면 다른 변수와 구분하여 사용할 수 있다.

또한, Symbol을 이용하였을 때는 Enum값의 구분을 위해 switch문을 사용한다.

const Fruit = {
  APPLE : Symbol(100),
  BANANA : Symbol(200),
  ORANGE : Symbol(300)
};

Object.freeze(Fruit);

위 코드를 간소화한 코드는 아래와 같다.

const Fruit = Object.freeze({
  APPLE : Symbol(100),
  BANANA : Symbol(200),
  ORANGE : Symbol(300)
});

3️⃣ Enum에 여러가지 속성 부여하기

Enum타입의 값에 여러가지 속성을 부여하고 싶을 때에는 아래와 같이 구현할 수 있다.

const Fruit = Object.freeze({
  APPLE:   { name: "apple", price: 100 },
  BANANA:  { name: "banana", price: 200 },
  ORANGE: { name: "orange", price: 300 }
});

참고 사이트

stackoverflow :: Enums in Javascript with ES6

[Node] node Express에 스웨거(Swagger) 추가하기

cocobi — Tue, 3 Jan 2023 18:45:26 +0900

node.js Express 서버에 스웨거 추가하는 방법

별도의 서버 구축 없이 Express 서버에 Swagger를 연결하는 방법에 대한 포스팅이다.

1️⃣ 스웨거 패키지 설치

npm install swagger-jsdoc swagger-ui-express --save-dev

◽ swagger-jsdoc : jsdoc 주석을 사용하여 Swagger API 문서를 작성하기 위한 패키지

◽ swagger-ui-express : swagger UI와 express를 연결하기 위한 패키지

2️⃣ 스웨거 설정파일 추가 및 route 등록

◾ 임의의 경로에 swagger.js 파일을 추가한다.

중요한 부분은 apis인데, 해당 부분에는 api 주석을 작성하는 경로를 입력해 준다.

보통 routes 경로를 입력하는데, 여기서는 깔끔함을 위해 컨트롤러 파일이 있는 경로를 입력하였다.

/* swagger/swagger.js */
const swaggerUi = require("swagger-ui-express")
const swaggereJsdoc = require("swagger-jsdoc")
const options = {
  swaggerDefinition: {
  openapi: "3.0.0",
  info: {
      title: "Jinny`s Swagger",
      version: "1.0.0",
      description: "Node.js Swaager UI With.swagger-jsdoc"
  },
  servers: [
      {
        url: "http://localhost:3000/", // 요청 URL
      },
    ],
  },
  apis: ["./api/controllers/*.js"], //Swagger 주석이 존재하는 파일의 경로
}
const specs = swaggereJsdoc(options)

module.exports = { swaggerUi, specs }

◾ app.js 파일에 route를 등록한다.

nodejs의 최상위 컨테이너 파일인 app.js에 스웨거를 사용하기 위한 코드를 작성한다.

/* app.js */
const express = require("express")
const api = require("./routers")

const app = express()

// ...

const { swaggerUi, specs } = require("./swagger/swagger")
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(specs))

// ...

위 과정까지 마친 후 http://localhost:3000/api-docs 로 접속하면 아래와 같은 화면이 보인다.

3️⃣ api 문서화하기

swagger.js의 apis에 입력한 경로에 있는 파일로 돌아가 swagger 주석을 작성한다.

/* controllers/xxxController.js */
/**
 * @swagger
 * tags:
 *   name: Delivery
 *   description: Delivery API
 */
 
const deliveryController = () => {
  // 배송권역수신
  /**
   * @swagger
   * paths:
   *  /api/zipcodes:
   *    get:
   *      summary: "배송권역수신"
   *      description: "배송권역수신"
   *      tags: [getZipcodes]
   *      responses:
   *        "200":
   *          description: 배송권역수신
   *          content:
   *            application/json:
   *              schema:
   *                type: object
   *                properties:
   *                    ok:
   *                      type: boolean
   *                    users:
   *                      type: object
   *                      example:
   *                          [
   *                            { "key": 1, "value": "1" },
   *                            { "key": 2, "value": "2" },
   *                            { "key": 3, "value": "3" },
   *                          ]
   */
  const getZipcodes = async (req, res, next) => {
  	//...
  }

주석 작성 이후 다시 웹 화면으로 돌아가면 아래와 같이 보일 것이고, 이제 API 문서를 작성하면 된다.

[Java] 자바 특정문자로 시작, 특정문자로 끝나는지 체크하기

cocobi — Mon, 2 Jan 2023 22:41:33 +0900

자바 특정문자로 시작, 특정문자로 끝나는지 확인하는 방법

문자열이 특정문자로 시작하거나 끝나는지 확인하기 위해 String 클래스의 메서드를 이용하면 된다.

1️⃣ 특정 문자로 시작하는지 확인

startsWith( ) 는 문자열이 특정 문자 또는 문자열로 시작하는지 체크하는 함수이며, boolean 값을 리턴한다.

public class StartsWithTest{
    public static void main(String[] args){
        String startsWithT = "Java, Hello World";
        System.out.println( startsWithT.startsWith("Java") );   // true
        System.out.println( startsWithT.startsWith("Ja") );     // true
        System.out.println( startsWithT.startsWith("Java, ") ); // true
        System.out.println( startsWithT.startsWith("  Java") ); // false
    }
}

2️⃣ 특정 문자로 끝나는지 확인

endsWith( ) 는 문자열이 특정 문자 또는 문자열로 끝나는지 체크하는 함수이며, boolean 값을 리턴한다.

public class EndsWithTest{
    public static void main(String[] args){
        String endsWithT = "Java, Hello World ";
        System.out.println( endsWithT.endsWith("World ") );// true
        System.out.println( endsWithT.endsWith("d ") );    // true
        System.out.println( endsWithT.endsWith("World") );  // false
    }
}

[JS] ES-Lint 비활성화 하는 방법

cocobi — Sun, 1 Jan 2023 21:25:04 +0900

Lint 비활성화하기

일부 파일 또는 전체 파일에 적용된 Lint를 비활성화하는 방법이다.

1️⃣ 주석을 이용한 방법

lint를 비활성화할 파일의 최상단에 /* eslint-disable */ 주석을 추가하면 비활성화된다.

2️⃣ .eslintignore 를 이용한 방법

.gitignore와 비슷하게 .eslintignore 파일을 추가 후 lint가 적용되지 않을 파일명을 작성하면 비활성화된다.

3️⃣ 사용 중인 프레임워크의 config 설정 추가

react, vue등의 프레임워크를 사용 중이라면 해당 프레임워크의 config에 lint관련 설정을 추가함으로써 비활성화할 수 있다.

[Oracle] 테이블 스페이스(Table Space)란 무엇일까?

cocobi — Mon, 26 Dec 2022 15:35:55 +0900

테이블 스페이스(Table Space) 란?

테이블 스페이스(Table Space)라는 이름 그대로 의미를 생각해 본다면, 단순히 테이블을 저장하는 공간이 떠오를 수 있다. 하지만 테이블 스페이스의 정확한 의미는 단순히 테이블을 저장하는 공간이 아니다.

오라클에서 데이터를 저장하는 가장 작은 논리적 단위는 데이터 블록(Data Block)이며, 데이터 블록이 모여서 익스텐트(Extent)가 되고, 익스텐트가 모여서 세그먼트(Segment), 세그먼트가 모여서 테이블 스페이스(Tablespace)가 된다.

BEST(Block - Extent - Segment - Tablespace)

즉, 데이터베이스를 구성하는 논리적 구조를 테이블스페이스(Tablespace)라고 하며, 테이블 스페이스에는 테이블 이외에도 인덱스, 프로시저, 뷰 등 여러 가지 객체들이 저장된다.

또한, 오라클의 실제 데이터가 저장되어 있는 데이터 파일이 물리적 공간에 저장된다는 것과 대응되기 때문에 하나의 테이블 스페이스는 최소 1개의 데이터 파일로 구성된다는 것은 기억할만 하다.

[Svelte] HTML에서의 조건문과 루프 방법 정리

cocobi — Tue, 20 Dec 2022 16:25:42 +0900

Svelte HTML의 조건문과 루프 작업

Svelte.js - 완벽 가이드의 [섹션 3:: 조건문 및 루프 작업]과 [섹션 4:: 반응성(Reactivity)들여다보기] 를 수강한 후에 정리한 내용이다.

1️⃣ if

스벨트의 HTML에 if 문은 중괄호와 #으로 표현할 수 있다.

또한 if문을 종료하기(/if) 전에 else문을 작성할 수 있으며 else 앞에 콜론을 붙여 사용할 수 있다.

<script>
</script>

...

{#if formState === 'done'}
    <ContactCard 
        userName={name} 
        jobTitle={title} 
        {description} 
        userImage={image} />
{:else if formState === 'invalid'}
	<p>Invalid input.</p>
{:else}
	<p>Please Enter some data and hit the button!</p>
{/if}

2️⃣ each

스벨트의 HTML에서 반복문을 사용하기 위해서는 each문을 사용하며 중괄호와 #으로 표현할 수 있다.

주목해야 할 점은 스크립트단에서 객체에 push하는 것이 아닌 값을 재할당 하는 것인데, 스벨트에서는 원시타입의 변화만 인식할 수 있기 때문에 push와 pop을 하였을 때 값의 변화를 인식할 수 없다. 따라서 참조타입인 객체와 배열 같은 경우에는 값을 재할당해야 한다는 점이다.

(참고 : [JS]자바스크립트의 원시 타입과 참조 타입)

아래 코드는 스크립트단에서 선언한 createdContacts 객체의 값을 반복하는 each문이다.

<script>
    let createdContacts = [];
    createdContacts = [
    	...createdContacts, 
        {
            name : name,
            jobTitle: title,
            imageUrl: image,
            desc: description
        }
    ];
</script>

{#each createdContacts as contact}
<ContactCard 
    userName={contact.name} 
    jobTitle={contact.jobTitle} 
    description={contact.desc}
    userImage={contact.imageUrl} />
{/each}

또한, each문은 객체에 alias을 붙여 사용할 수 있고, 추가적으로 인덱스와 고유의 id 값을 지정해 줄 수 있다.

◾ each의 인덱스와 each-else문

each문에서 alias 뒤에 오는 것은 인덱스이다. 인덱스는 i, idx 등 원하는 단어를 입력할 수 있다.

또한, each문에도 else를 사용할 수 있는데, 반복 대상 객체가 비어있을 때 else로 분기하게 된다.

{#each createdContacts as contact, i}
<h2># {i+1}</h2>
<ContactCard 
	userName={contact.name} 
	jobTitle={contact.jobTitle} 
	description={contact.desc}
	userImage={contact.imageUrl} />
{:else}
	<p>Please start adding some contacts, We found None!</p>
{/each}

◾ each의 고유 아이디

each문에서 인덱스 뒤에 괄호를 사용함으로써 반복문을 통해 생성된 DOM 객체에 아이디를 지정할 수 있다.

{#each createdContacts as contact, i (contact.id)}
<h2># {i+1}</h2>
<ContactCard 
	userName={contact.name} 
	jobTitle={contact.jobTitle} 
	description={contact.desc}
	userImage={contact.imageUrl} />
{:else}
	<p>Please start adding some contacts, We found None!</p>
{/each}

3️⃣ 이벤트 수식어(Modifier)

이벤트 수식어란 HTML 태그에서 스벨트의 이벤트를 지정하였을 때 추가적인 옵션을 지정하는 것으로

아래 코드와 같이 이벤트(on:click)에 버티컬 바(|) 와 수식어를 붙여 씀으로써 사용할 수 있다.

<button on:click|preventDefault={addContact} type="submit">Add Contact Card</button>

4️⃣ HTML 태그에서 인라인 함수 사용

스크립트단에 작성한 함수를 바인드 하는 것이 아니라 HTML 태그 내에 직접 함수를 작성할 수도 있다.

<button on:click={event => createdContacts = createdContacts.slice(1)}>
	Delete First
</button>

[Svelte] 기본 구문 및 핵심 기능 정리

cocobi — Mon, 19 Dec 2022 11:11:03 +0900

Svelte 기본 구문 및 핵심 정리

Svelte.js - 완벽 가이드의 [섹션 2:: 기본 구문 및 핵심 정리]를 수강한 후에 정리한 내용이다.

1️⃣ 구조

스벨트는 Vue와 비슷하게 하나의 .svelte 파일 안에 [자바스크립트 / css / html] 을 작성한다.

<script>
</script>

<style>
</style>

<html>
</html>

2️⃣ HTML의 동적 변수 사용과 바인딩

다른 작업 없이 중괄호 { } 를 사용하여 스크립트단의 변수와 연결하여 동적 변수를 만들 수 있으며,

스벨트 문법에 따라 HTML 태그 안에 변수를 바인딩할 수도 있다.

아래 코드는 스크립트단의 변수 name과 age를 html단에 바인딩한 것이며, button에 클릭 이벤트를 주어 incrementAge라는 함수를 바인딩하였다. 또한 버튼을 누를 때마다 age가 동적으로 1씩 증가하는 것을 확인할 수 있다.

<script>
    let name = 'Jinny';
    let age = 29;

    function incrementAge() {
        age++;
    }
</script>

<h1>Hello  My name is {name}, my age is {age}!</h1>
<button on:click="{incrementAge}">Change Age</button>

3️⃣ 반응형 변수

반응형 변수란, 어떤 변수의 값이 바뀔 때마다 반응형 변수의 값을 변경시켜 주거나 이벤트를 발생시킨다.

또한, 달러 $: 표시를 변수 앞에 붙임으로써 반응형 변수를 만들 수 있고, 반응형 변수를 만들 때에는 var, let, const 같은 선언이 필요 없이 $:만 추가하여 간단히 만들 수 있다.

아래 코드는 name의 값이 바뀔 때마다 반응형 변수인 uppercaseName의 값이 변경되어 h1태그에 뿌려준다.

<script>
    let name = 'Jinny';
    let age = 29;

    $: uppercaseName = name.toUpperCase();
</script>

<h1>Hello  My name is {uppercaseName}, my age is {age}!</h1>
<input type="text" bind:value="{name}">

4️⃣ 컴포넌트 import / export 및 바인딩

ES6문법과 동일하게 자식 컴포넌트를 import 하여 부모 컴포넌트에 불러올 수 있다.

또한, 자식 컴포넌트의 이름을 HTML 태그로 사용하여 화면에 랜더 할 수 있다.

여기까지는 다른 프론트 프레임워크와 동일하다고 볼 수 있지만, 복잡한 처리 없이 자식 컴포넌트 태그에 Property 변수를 바인딩할 수 있다는 점이 스벨트의 장점이라고 생각된다.

<!-- app.svelte -->
<script>
    import ContactCard from "./ContactCard.svelte";
    ...
</script>

...
 
<ContactCard 
    userName="{name}" 
    jobTitle="{title}" 
    description="{description}" 
    userImage={image}
/>



<!-- ContactCard.svelte -->
<script>
    export let userName;
    export let jobTitle;
    export let description;
    export let userImage;
</script>

...

5️⃣ 클래스 토글

HTML 태그 내에 class: 옵션을 지정하여 클래스 토글을 할 수 있다.

아래 코드는 div 태그에 기본 클래스로 thumb를 적용하였고,

userImage의 여부에 따라 thumb-placeholder 클래스를 추가한다는 class: 옵션을 추가한 것이다.

<script>
    let userName = 'Jinny';
    let userImage = "";
</script>


<style>
.thumb {
	width: 33%;
	height: 100%;
}
.thumb-placeholder{
	background: #ccc;
}
</style>


<div class="thumb" class:thumb-placeholder="{!userImage}">
	<img src="{userImage}" alt={userName}/>
</div>

[Svelte - 완벽 가이드] 수강 시작!

cocobi — Wed, 14 Dec 2022 12:45:09 +0900

Svelte - 완벽 가이드

최근 포트폴리오의 빈약함을 느끼고 부족한 점을 보완하기 위해 어떻게 해야 할까 생각을 해왔다.

그러던 중 스벨트(Svelte)를 기반으로 빠른 프론트 작업이 가능하다는 것을 알게 되었고,

새로운 프레임워크를 익힐 겸 독학을 하기 위한 자료를 찾던 중 유데미에서 좋은 강의를 발견하였다.

그리고 몇 개의 강의를 듣고 좋은 내용이 많아 공부 겸 관련 내용을 정리해야겠다고 생각했다.

따라서 당분간은 Svelte에 대한 강의를 수강하며 관련된 내용을 포스팅하려고 한다.

[Svelte] Svelte 개발환경 세팅 방법

cocobi — Wed, 7 Dec 2022 12:46:12 +0900

Svelte 프로젝트 개발환경 세팅하기

스벨트(Svelte)는 React 또는 Vue처럼 Node를 기반으로 하기 때문에

스벨트 프로젝트를 시작하기 위해서는 먼저 node가 설치되어 있어야 한다.

또한 이번 포스팅에서는 스벨트 공식문서에서 제안하는 방법을 기반으로한 세팅 방법에 대해서 다룬다.

‍♂️ 준비사항

▪ Node

▪ Visual studio code

▪ visual studio code Extention

‍ 프로젝트 생성 ~ 로컬 기동

◾ npm create vite@latest myapp -- --template svelte

myapp 부분에는 프로젝트의 이름을 입력하면 된다.

◾ cd myapp

◾ npm install

◾ npm run dev

기본 포트인 5173 포트에 스벨트 프로젝트가 정상적으로 기동된 것을 확인할 수 있다.

◾ 브라우저 접속

참고 사이트

Svelte Docs :: GETTING STARTED

[Java] 자바 ArrayList를 이용한 집합 연산 방법

cocobi — Mon, 5 Dec 2022 12:49:31 +0900

자바 ArrayList를 통해 집합 연산하기

자바의 ArrayList는 List 인터페이스를 상속받은 클래스이다.

일반적인 배열과 같이 인덱스로 내부의 객체를 관리한다는 점이 유사하지만 한번 생성되면 크기가 변하지 않는 배열과는 달리 ArrayList는 객체들이 추가되어 저장 용량(capacity)을 초과하면 자동으로 부족한 크기만큼 저장 용량이 늘어나는 특징을 가지고 있다.

1️⃣ 교집합

List클래스의 retainAll( )메서드를 사용하여 교집합을 구할 수 있다.

import java.util.ArrayList;
import java.util.List;

public class 교집합 {
    public static void main(String[] args) {
        List<String> arrayList = new ArrayList<String>();
        arrayList.add("A");
        arrayList.add("B");
        arrayList.add("C");

        List<String> arrayList2 = new ArrayList<String>();
        arrayList2.add("A");
        arrayList2.add("B");
        arrayList2.add("C");
        arrayList2.add("D");
        arrayList2.add("E");
        arrayList2.add("F");

        arrayList.retainAll(arrayList2);
        System.out.println("교집합 : "+ arrayList ); // 교집합 : [A, B, C]
    }

}

2️⃣ 부분집합 판단

List클래스의 containsAll( ) 메서드를 사용하여 부분집합을 구할 수 있다.

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class 부분집합 {
    public static void main(String[] args) {
        List<String> arrayList = new ArrayList<String>();
        arrayList.add("A");
        arrayList.add("B");
        arrayList.add("C");

        List<String> arrayList2 = new ArrayList<String>();
        arrayList2.add("A");
        arrayList2.add("B");
        arrayList2.add("C");
        arrayList2.add("D");
        arrayList2.add("E");
        arrayList2.add("F");

        List<String> arrayList3 = new ArrayList<String>(Arrays.asList("A", "B", "C"));

        boolean isVal = arrayList.containsAll(arrayList2);
        boolean isVal2 = arrayList2.containsAll(arrayList3);

        System.out.println("isVal: "+ isVal);   // isVal: false
        System.out.println("isVal2: "+ isVal2); // isVal2: true
    }

}

isVal은 arrayList2가 arrayList의 부분집합에 속하는지에 대한 결과로 false 값을 반환한다.

isVal2는 arrayList3는 arrayList2의 부분집합에 속하는지에 대한 결과로 true 값을 반환하였다.

3️⃣ 차집합

List클래스의 removeAll( ) 메서드를 사용하여 차집합을 구할 수 있다.

import java.util.ArrayList;
import java.util.List;

public class 차집합 {
    public static void main(String[] args) {
        List<String> arrayList = new ArrayList<String>();
        arrayList.add("A");
        arrayList.add("B");
        arrayList.add("X");
        arrayList.add("Y");

        List<String> arrayList2 = new ArrayList<String>();
        arrayList2.add("A");
        arrayList2.add("B");
        arrayList2.add("C");
        arrayList2.add("D");
        arrayList2.add("E");
        arrayList2.add("F");

        arrayList.removeAll(arrayList2);
        System.out.println("차집합 : "+ arrayList ); // 차집합 : [X, Y]
    }

}

4️⃣ 합집합

List클래스의 addAll( ) 메서드를 사용하여 합집합을 구할 수 있다.

addAll( ) 메서드는 중복 값을 제거해 주지 않기 때문에 HashSet을 통하여 중복 값을 제거한 것에 유의하자.

import java.util.ArrayList;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;

public class 합집합 {
    public static void main(String[] args) {
        List<String> arrayList = new ArrayList<String>();
        arrayList.add("X");
        arrayList.add("Y");
        arrayList.add("Z");

        List<String> arrayList2 = new ArrayList<String>();
        arrayList2.add("A");
        arrayList2.add("B");
        arrayList2.add("C");

        // 중복이 포함될 수 있는 합집합 리스트
        arrayList.addAll(arrayList2);

        //HashSet을 통합 중복제거
        HashSet<String> hash1 = new HashSet<String>();
        hash1.addAll(arrayList);

        // 출력
        Iterator iterator = hash1.iterator();
        while(iterator.hasNext()) {
            System.out.print(iterator.next() + " "); // A B C X Y Z 
        }

    }

}

[Python] 파이썬 순열과 조합 (permutation, combination)

cocobi — Thu, 1 Dec 2022 12:41:34 +0900

파이썬 순열, 조합 값 반환받기

파이썬의 내장 모듈인 itertools를 이용하면 순열과 조합의 값을 반환받을 수 있다.

1️⃣ 순열 (permutation)

순열이란 몇 개를 골라 순서를 고려해 나열한 경우의 수를 말한다.

즉, 서로 다른 n 개 중 r 개를 골라 순서를 정해 나열하는 가짓수이며 순열은 가능한 모든 순서쌍을 만들며 중복된 값은 갖지 않는다.

import itertools

arr = ['A', 'B', 'C']
nPr = itertools.permutations(arr, 2)
print(list(nPr))

# [('A', 'B'), ('A', 'C'), ('B', 'A'), ('B', 'C'), ('C', 'A'), ('C', 'B')]

2️⃣ 조합 (combination)

조합이란 서로 다른 n개 중에서 r개(n≥r) 를 선택하여 쌍을 만들 때 각각의 값을 n개 중에서 r개 선택한 것을 의미한다. 또한 조합의 각각의 쌍에서 순서는 큰 의미를 갖지 않으며, 중복값도 갖지 않는다.

import itertools

arr = ['A', 'B', 'C']
nCr = itertools.combinations(arr, 2)
print(list(nCr))

# [('A', 'B'), ('A', 'C'), ('B', 'C')]

3️⃣ 정리

이터레이터	인자	결과
product()	p, q, … [repeat=1]	데카르트 곱(cartesian product), 중첩된 for 루프와 동등
permutations()	p[, r]	r-길이 튜플들, 모든 가능한 순서, 반복되는 요소 없음
combinations()	p, r	r-길이 튜플들, 정렬된 순서, 반복되는 요소 없음
combinations_with_replacement()	p, r	r-길이 튜플들, 정렬된 순서, 반복되는 요소 있음

예	결과
product('ABCD', repeat=2)	AA AB AC AD BA BB BC BD CA CB CC CD DA DB DC DD
permutations('ABCD', 2)	AB AC AD BA BC BD CA CB CD DA DB DC
combinations('ABCD', 2)	AB AC AD BC BD CD
combinations_with_replacement('ABCD', 2)	AA AB AC AD BB BC BD CC CD DD

참고사이트

▪ Python Docs :: itertools

[Svelte] Svelte bundle 오류 해결 방법(404: bundle...)

cocobi — Tue, 22 Nov 2022 21:10:41 +0900

Svelte 실행 오류 해결 (bundle파일 미생성 해결)

Svelte 프로젝트를 처음 세팅한 후 아래 두 가지 명령어를 통해 실행할 수 있다.

▪ npm start dev

▪ npm run dev

위 명령어를 실행 후 localhost:5000에 접속시 아래와 같은 에러를 마주칠 수 있다.

이 오류는 로컬에 접속하였을 때 build폴더에 생겨야 할 bundle 파일이 생성되지 않는 현상을 발생시킨다.

‍ 해결방법

◾ npm start dev로 실행한 경우 npm run dev 명령어로 실행한다.

◾ localhost가 아닌 http://127.0.0.1:5000/로 접속한다.

참고 : https://github.com/sveltejs/template/issues/184

[Oracle] 오라클 ROUND함수(소수점 반올림하기)

cocobi — Thu, 17 Nov 2022 12:44:56 +0900

오라클 SQL 반올림하는 방법 (ROUND 함수)

오라클 SQL에서 ROUND 함수를 사용하면 소수점을 반올림할 수 있다.

또한, 소수점을 반올림하지 않고 잘라내기만을(=절사) 원한다면 TRUNC함수를 사용하면 된다.

ROUND 함수

◾ 기본 사용방법

입력한 자리수만큼의 실수 값을 반환하며, 자릿수를 넘기지 않는 경우 반올림된 정수를 반환한다.

또한 자리수에 음수 값을 입력하면 정수 자릿수에서 반올림을 실행한다.

SELECT ROUND("값", "자리수") 
FROM TABLE

◾ 소수점 반올림

SELECT ROUND(1235.543)    -- 1236
     , ROUND(1235.443)    -- 1235
     , ROUND(1235.443, 0) -- 1235
     , ROUND(1235.345, 1) -- 1235.3
     , ROUND(1235.345, 2) -- 1235.35
     , ROUND(1235.345, 3) -- 1235.345
  FROM dual

◾ 정수 반올림

자리수에 음수를 입력할 경우에는 자릿수 절댓값의 정수 자리에서 반올림이 실행된다.

SELECT ROUND(1235.345, -1) -- 1240
     , ROUND(1235.345, -2) -- 1200
     , ROUND(1235.345, -3) -- 1000
  FROM dual

◾ 날짜 반올림

Date형식의 날짜를 반올림할 경우 정오를 기준으로 반올림이 실행된다.

SELECT ROUND(to_date('2022-11-17 11:50', 'yyyy-mm-dd hh24:mi')) -- 2022-11-17 00:00
     , ROUND(to_date('2022-11-17 12:10', 'yyyy-mm-dd hh24:mi')) -- 2022-11-18 00:00
  FROM dual

[Java] 자바 문자열 반복하기(repeat)

cocobi — Wed, 9 Nov 2022 12:55:36 +0900

자바 특정 문자열 반복하기

파이썬을 접해보았다면 문자열을 반복할 때 "ABC" * 정수 와 같은 코드를 사용한 경험이 있을 것이다.

파이썬과 비슷하게 자바에서는 String클래스의 repeat 메서드를 통해 문자열을 반복할 수 있다.

repeat 메서드는 자바 11에서 새롭게 추가된 String 메서드이며, 파라미터로 전달하는 정수만큼 문자열을 반복한다. 또한, 0을 입력할 경우 빈 문자열을 반환하며, 음수를 입력하면 IllegalArgumentExceptionthrow 이 발생한다.

repeat의 내부 로직을 살펴보면 Arrays.fill()과 System.arraycopy() 를 통해 문자열을 만들어 반환하며,

반복 횟수를 n 주어진 문자열을 s라 할 때, O(n|s|)의 시간 복잡도를 갖는다.

1️⃣ Java 11 이전의 방식

n을 문자열의 반복 횟수, 반복할 문자열을 s라고 할 때 아래와 같다.

◾ StringBuilder와 for문을 통한 반복

반복할 횟수만큼 for 루프를 실행하며 각 루프마다 StringBuilder에 주어진 문자열을 추가해준다.

String str = "ab";
StringBuilder sb = new StringBuilder();

for(int i = 0; i < 5; i++) {
	sb.append(str);
}

System.out.println("result : " + sb); // result : ababababab

◾ Java 1.5

n개의 문자 배열을 String으로 만든 후 각각의 문자를 주어진 문자열로 replace 시킨다.

String repeated = new String(new char[n]).replace("\0", s);

// 예시
String repeated = new String(new char[5]).replace("\0", "ab");
System.out.println(repeated); // ababababab

◾ Java 7

길이가 n인 문자 포맷의 각 자리를 주어진 문자열로 replace 시킨다.

String.format("%0" + n + "d", 0).replace("0", s);

//예시
String repeated = String.format("%0" + 5 + "d", 0).replace("0", "ab");
System.out.println(repeated); // ababababab

◾ Java 8

자바8에서 추가된 Collections의 nCopies 메서드를 이용한다.

String.join("", Collections.nCopies(n, s));

// 예시
String repeated = String.join("", Collections.nCopies(5, "ab"));
System.out.println(repeated); // ababababab

2️⃣ Java 11

repeat 메서드는 자바11에서 추가된 String의 메서드이며 문자열을 반복하는 가장 쉬운 방법이다.

"s".repeat(n);

//예시
String repeated = "ab".repeat(5);
System.out.println(repeated); // ababababab

참고사이트

▪ JavsString.net :: repeat() Method

[Intelli J] 파일 입출력 설정

cocobi — Tue, 8 Nov 2022 12:51:59 +0900

인텔리제이(Intelli J) 파일 입출력 설정하기

인텔리제이에서 파일 입력을 위한 설정 방법에 대해 포스팅하고자 한다.

0️⃣ Input을 위한 파일 생성

1️⃣ 우측 상단의 드롭다운 버튼 클릭 > Edit Configurations 클릭

( 상단 메뉴 중 Run > Edit Configurations를 통해서도 접근이 가능하다.)

2️⃣ Build and run > Modify options > Redirect input 선택

3️⃣ Build and run > Redirect input from > 인풋 파일 선택 > Apply > OK

3️⃣번 과정까지 마치면 input파일 적용이 완료되며, BufferedReader 등으로 파일의 내용을 입력받을 수 있다.

[Java] DecimalFormat을 이용한 숫자 형식 변경

cocobi — Mon, 7 Nov 2022 12:50:00 +0900

자바 10진수 형식의 Format 변경

자바의 java.text 패키지에는 Format을 변경할 수 있는 클래스가 존재하며 그 중 10진수 형식의 Format을

변경할 수 있도록 하는 DecimalFormat 클래스를 사용하여 원하는 형식으로 변경할 수 있다.

ex) 자릿수에 따른 쉼표, 빈자리 채우기, 단위 표시 등 ...

1️⃣ Decimal Pattern

Pattern	Describe	return
0	10진수, 값이 없는 자리는 0으로 채운다	0 0.0 000.000
#	10진수, 값이 없어도 채우지 않는다.	# #.## ####.###
.	소수점 표시	###.## ###.00 00.00
,	단위 구분자 표시	#,##.#
+, -	지수 기호를 표시, E 이후 0를 써서 표현	+#.## -#.##
E	지수 문자	0.0#00
;	양수와 음수를 모두 표시할 경우의 구분자	+#.##;-#.##
%	100을 곱하고 백분율로 표시	#.###%
\u2030	1000을 곱하고 밀리 값으로 표시
\u00A4	통화 표시	\u00A4####.##
'	escape문자, #을 문자로 나타내고 싶다면 '#' 으로 표현

2️⃣ Exemple Code

import java.text.DecimalFormat;
import java.text.NumberFormat;
import java.util.Locale;

public class DecimalFormatExemple {

	public static void main(String[] args) {
		// 변환할 값
		double n = 12345.6789; 
		
		// 빈자리를 0으로 채워 표현
		DecimalFormat df = new DecimalFormat("0"); 
		System.out.println(df.format(n)); // 출력값 : 12346
		
		df = new DecimalFormat("0.0"); 
		System.out.println(df.format(n)); // 출력값 : 12345.7
		
		df = new DecimalFormat("000000.00000"); 
		System.out.println(df.format(n)); // 출력값 : 012345.67890
		
        
		// 빈자리 채우지 않고 표현
		df = new DecimalFormat("#"); 
		System.out.println(df.format(n)); // 출력값 : 12346

		df = new DecimalFormat("######.###");
		System.out.println(df.format(n)); // 출력값 : 12345.679
		
        
		// 빈자리 채우기와 채우지 않기의 조합 + 단위구분(,)
		df = new DecimalFormat("#,###.00000");
		System.out.println(df.format(n)); // 출력값 : 12,345.67890


		// 백분율 표시
		df = new DecimalFormat("#.##%"); 
		System.out.println(df.format(n)); // 출력값 : 1234567.89%


		// 통화표시(\u00A4 )
		df = new DecimalFormat("\u00A4####.##"); 
		System.out.println(df.format(n)); // 출력값 : ￦12345.68

		// NumberFormat을 이용하여 통화표시를 지정할 수 있다.
		// Locale을 사용하여 국가 지정시 해당 국가의 통화기호 및 자리수 구분까지 된다.
		NumberFormat nf = NumberFormat.getCurrencyInstance( Locale.KOREA );
        
		// 소수점 2자리까지 지정
		nf.setMaximumFractionDigits(2);
		System.out.println(nf.format(n)); // 출력값 : ￦12,345.68

	}
}

참고사이트

▪ Oracle Docs - DecimalFormat

[Java] 숫자 왼쪽에 0으로 값 채우기

cocobi — Fri, 4 Nov 2022 12:47:58 +0900

자바 숫자 앞에 0으로 채우기

시퀀스를 생성하거나 특정한 경우에 정수 왼쪽에 자릿수만큼 0으로 채워야 하는 경우가 있다.

아래와 같이 5자리로 표현해야 하는 값이 있을 때
1

부족한 자리수만큼 정수값의 왼쪽에 0으로 채워야 한다.
00001

이러한 경우에 두 가지 방법을 이용하여 해결할 수 있다.

◾ String.format()를 이용한 방법

◾ DecimalFormat를 이용한 방법

번외로, 콘솔에 해당 값의 출력을 원하는 경우에는 System.out.printf()를 사용할 수도 있다.

1️⃣ String.format()

String.format(format, num) 함수는 인자로 전달된 format에 맞게 숫자를 문자열로 변환한다.

아래에서 "%0Nd"는 정수를 N개의 자릿수로 반환하며, 왼쪽의 비어있는 공간은 0으로 채운다는 의미이다.

public class Example {

    public static void main(String[] args) {
        int num = 1234;
        
        String str = String.format("%06d", num);
        System.out.println(str); // 001234

        str = String.format("%010d", num);
        System.out.println(str); // 0000001234
    }
}

2️⃣ DecimalFormat

DecimalFormat는 new 연산자를 통해 객체를 초기화해야 사용할 수 있으며 초기화시 자릿수를 지정한다.

아래 예제와 같이 new DecimalFormat("000000")으로 자릿수(0의 개수)를 지정하여 객체를 초기화한다.

그 후 df.format(num)을 통해 비어있는 공간은 0으로 채워 변환된 값을 반환한다.

import java.text.DecimalFormat;

public class Example1 {

    public static void main(String[] args) {

        int num = 1234;

        DecimalFormat df = new DecimalFormat("000000");
        String str = df.format(num);
        System.out.println(str); // 001234

        df = new DecimalFormat("0000000000");
        str = df.format(num);
        System.out.println(str); // 0000001234
    }
}

3️⃣ System.out.printf()

printf()는 String.format()과 같이 특정 형식으로 주어진 정수를 문자열로 변환할 수 있다.

또한, printf()는 변환된 값을 리턴하지 않고 콘솔에 출력하므로 제한된 상황에서만 사용성을 갖는다.

public class Example2 {

    public static void main(String[] args) {

        int num = 1234;

        System.out.printf("%06d", num); // 001234

        System.out.println();

        System.out.printf("%010d", num); // 0000001234
    }
}

참고사이트

▪ codechacha :: java-fill-zeros-with-string

[Python] 파이썬 튜플 이해하기 (+사용 방법)

cocobi — Thu, 3 Nov 2022 12:55:48 +0900

파이썬 튜플(Tuple) 사용 방법

튜플(tuple)은 리스트와 비슷하지만 다른 자료형이며 가장 큰 차이는 값을 변화시킬 수 있는가의 여부이다.

따라서 프로그램이 실행되는 동안 값이 변하지 않는 상수값을 저장하고 싶다면 튜플을 사용해야 한다.

이와는 반대로 변숫값을 저장하고 싶을 때에는 리스트를 사용하면 된다..

✔ 튜플과 리스트의 차이점

▪ 리스트는 값의 생성, 삭제, 수정이 가능하지만 튜플은 요소의 값을 바꿀 수 없다.

▪ 리스트는 대괄호 [ ]로 둘러싸지만 튜플은 괄호 ( )로 둘러싼다.

▪ 튜플이 1개의 요소를 가질 때 요소 뒤에 콤마(,)를 붙여야 하며, 튜플을 감싸는 괄호를 생략해도 된다.

# 다양한 형태의 튜플
tuple_1 = ()
tuple_2 = (1,)
tuple_3 = (1, 2, 3)
tuple_4 = 1, 2, 3
tuple_5 = ('a', 'b', ('aa', 'bb'))
tuple_6 = ('a', 'b', {'key': 'value'})
tuple_7 = ('a', 'b', ['aa', 'bb'])

1️⃣ 튜플 사용 시 주의사항

◾ 튜플 요소의 삭제

del 함수를 이용해 튜플의 요소를 삭제하려 할 때 요소를 지울 수 없다는 오류 메시지를 확인할 수 있다.

ex_tuple = (1, 2, 'a', 'b')
del ex_tuple[0]

# Traceback (most recent call last):
#   File "<stdin>", line 1, in <module>
# TypeError: 'tuple' object doesn't support item deletion

◾ 튜플 요소의 변경

튜플의 요솟값을 변경할 경우에도 제거할 때와 마찬가지로 오류가 발생하는 것을 확인할 수 있다.

ex_tuple = (1, 2, 'a', 'b')
ex_tuple[0] = 'c'

# Traceback (most recent call last):
#   File "<stdin>", line 1, in <module>
# TypeError: 'tuple' object does not support item assignment

2️⃣ 튜플 인덱싱 및 슬라이싱

◾ 인덱싱

리스트와 마찬가지로 인덱스 번호를 이용하여 인덱싱할 수 있다.

ex_tuple = (1, 2, 'a', 'b')
ex_tuple[0] # 1
ex_tuple[3] # 'b'

◾ 슬라이싱

리스트와 마찬가지로 인덱스 번호를 이용하여 슬라이싱할 수 있다.

ex_tuple = (1, 2, 'a', 'b')
ex_tuple[1:] # (2, 'a', 'b')

3️⃣ 튜플의 연산

◾ 튜플의 더하기

튜플 자료형끼리 더하기 연산을 하게 되면 두 개의 튜플이 하나의 튜플로 합쳐지게 된다.

참고) 튜플의 빼기 연산은 지원되지 않는다.

tuple_1 = (1, 2, 'a', 'b')
tuple_2 = (3, 4)
tuple_1 + tuple_2 # (1, 2, 'a', 'b', 3, 4)

◾ 튜플의 곱하기

튜플 자료형에 정수의 곱하기 연산을 하게 되면 정수만큼 튜플의 요소가 반복된다.

ex_tuple = (5, 2)
ex_tuple * 2 # (5, 2, 5, 2)

참고사이트

▪ 점프 투 파이썬 - 튜플 자료형

[Python] 파이썬 집합 연산자 사용 하기

cocobi — Tue, 1 Nov 2022 12:41:01 +0900

파이썬 집합 연산자 사용 방법

파이썬에서 set은 수학의 집합과 같이 순서가 없고 중복 요소를 허용하지 않는 특성이 있다.

따라서 set을 이용하여 합집합, 교집합, 차집합과 같은 집합 연산을 하거나 값의 중복을 제거하여 unique 값만 남길 수 있다.

1️⃣ 합집합(Union)

set.union 메서드를 사용하거나 OR 연산자 |를 사용하여 합집합을 구할 수 있다.

# 방법1. a | b
a = {1, 2, 3, 4}
b = {3, 4, 5, 6}
print(a | b)  # {1, 2, 3, 4, 5, 6}

# 방법2. set.union(a, b)
set.union(a, b)  # {1, 2, 3, 4, 5, 6}

2️⃣ 교집합(Intersection)

set.intersection 메서드를 사용하거나 AND 연산자 &를 사용하여 교집합을 구할 수 있다.

# 방법1. a & b
a = {1, 2, 3, 4}
b = {3, 4, 5, 6}
print(a & b)  # {3, 4}

# 방법2. set.intersection(a, b)
set.intersection(a, b)  # {3, 4}

3️⃣ 차집합(difference)

set.difference 메서드를 사용하거나 뺄셈 연산자 -를 사용하여 차집합을 구할 수 있다.

# 방법1. a - b
a = {1, 2, 3, 4}
b = {3, 4, 5, 6}
print(a - b)  # {1, 2}
print(b - a)  # {5, 6}

# 방법2. set.difference(a, b)
set.difference(a, b)  # {1, 2}
set.difference(b, a)  # {5, 6}

4️⃣ 대칭 차집합(symmetric difference)

set.symmetric_difference 메서드를 사용하거나 XOR 연산자 ^를 사용하여 대칭 차집합을 구할 수 있다.

대칭차집합은 XOR 연산자의 특성을 그대로 따르며 XOR은 서로 다를 때 참이다. 따라서 집합에서는 두 집합 중 겹치지 않는 요소만 포함한다.

# 방법1. a ^ b
a = {1, 2, 3, 4}
b = {3, 4, 5, 6}
print(a - b)  # {1, 2, 5, 6}

# 방법2. set.symmetric_difference(a, b)
set.symmetric_difference(a, b)  # {1, 2, 5, 6}

참고사이트

▪ 파이썬 코딩도장 :: 집합 연산자