emyo.log

[TS]타입스크립트 개념을 공부해보자

Tue, 03 Oct 2023 08:58:05 GMT

서론

본 게시글은 필자가 타입스크립트 공부를 하면서 끄적인 글입니다. 이미 타입스크립트를 많이 알고계신 분들이나 심화 응용등을 바라고 들어오신 분들은 뒤로가기 버튼을 누를 것을 추천드립니다.

타입스크립트란?

기존 자바스크립트(이하 js)에 자바, 파이썬등과 같이 타입을 정의할 수 있는 문법을 더한 것.

그래서 크기가 좀 큰 프로젝트(네이버, 배달의 민족, slack)등에서는 타입스크립트(이하 ts)를 주로 사용한다고 한다. 즉, ts란 js의 모든 기능을 포함하면서 다른 기능까지 포함되도록 타입을 부여하여 확장 된 오픈소스 프로그래밍 언어로 컴파일 언어이자, 정적 타입 언어이다.

조금 지루할 수도 있는 말을 조금 더 써넣자면, 마이크로소프트에서 구현한 js의 슈퍼셋(Superset)프로그래밍 언어이다. 확장자로는 .ts를 사용하며 컴파일 결과물로는 js코드를 출력하게 된다. 여기서 슈퍼셋이란, 특정한 언어의 모든 기능을 포함하면서, 다른 기능까지 포함하도록 향상 또는 확장된 것을 의미한다.

사용 이유(장점)

사용이유들은 거의 다 타입체크를 함으로써 얻을 수 있는 장점이라고 봐도 무방한다.

대형 프로젝트에서 용이

js는 Dynamic Typing을 지원해준다. 쉽게 말하면 아래와 같은 코드가 에러가 나지 않고 계산이 된다는 것.

5 - '3'
//또는
'10' * 1

원래는 {숫자}-{숫자}만 가능하지만 js가 알아서 숫자로 바꿔준다. 나도 코딩테스트등에서 타입변환을 쉽게 하려고 아래 곱셈 연산을 많이 사용하였는데, 이것은 편리하지만 프로젝트 규모가 커질 수록이 자유도와 유연성이 단점이 될 수밖에 없다. 무조건 숫자가 들어와야하는 저 부분에 '안녕'등의 다른 문자열이 잘못들어왔다고 생각해보자. 프로젝트 규모가 커지면 어디가 문제인지 찾기는 쉽지 않아진다.

에러 메시지가 잘 나옴

js는 에러메시지가 추상적이고 추적이 어려운 경우가 많다. 이미 js를 많이 하고있던 나로서는 너무 공감가는 말이다. 자바나 파이썬등의 언어들은 에러가 자세하기 때문에 영어를 어느정도 할 줄 안다면 따로 검색하지 않고도 에러를 보고 코드를 고칠 수 있었는데 js는 쉽지않았다.(지금도 그렇다,,,) 문자가 들어와야하는 부분에 숫자가 들어왔다면 String을 사용해야한다는 에러를 내거나, 함수이름 오타 교정도 해준다.

객체지향 프로그래밍

타입스크립트에서는 객체지향 프로그래밍에서 사용했던 class, interface등과 같은 문법들을 사용할 수 있다. 그리고 이것들을 완벽하게 js로 변환이 가능하다. 즉 객체지향 프로그래밍의 장점들을 모두 ts가 가지고 있다고 봐도 무방하다는 것이다.

단점

기본적인 단점들은 타입을 선언하는 다른 언어들과의 단점과 사실 유사하다.

진입장벽이 낮아짐

사실 다른 언어들(자바, 파이썬, C, ...)을 사용하던 사람들은 "엥? 뭐라는거야"라고 할 수도 있겠지만, js만 사용하더나 주로 사용하던 사람들은 타입을 선언하는 것에 대한 진입장벽이 높아질 수밖에 없다.

떨어지는 가독성

type을 지정해야하기 때문의 코드의 길이가 길어진다. 또한 간편하고 빠르게 코딩을 할 수 있다는 js와는 사실 본질적으로 멀어졌다고 할 수도 있다. 선언되는 type으로 인해서 가독성이 떨어지는 것 또한 사실이다.

모든 js오류를 해결할 순 없다

많은 js의 에러들이 잘못된 타입 지정 또는 오타인데, ts는 이러한 에러들을 기본적으로 잡아줄 수 있다는 점에서 위에서 장점으로 소개했다. 하지만 type 지정으로는 해결되지 않는 js의 본질적인 오류가 발생할 수 있다. 그래서 js를 보완하는 완벽한 언어라고는 말할 수 없다.

결론

오늘은 타입스크립트를 직접 코딩해보기 전에 왜 이렇게 핫한지, 왜 많이들 사용하는지가 궁금해서 기본적인 개요와 장단점들에 대해서 알아봤다. 다음 포스트부터는 ts에 대해 공부해보고 정리하는 포스트들을 올릴 예정이다.

참고

나무위키(https://namu.wiki/w/TypeScript) 코딩애플(https://youtu.be/xkpcNolC270?si=tsqjBybh4NHX8cF9) 블로그(https://well-made-codestory.tistory.com/42, )

[RN]WARN Require cycle 에러 해결

Sun, 01 Oct 2023 17:30:06 GMT

서론

react-native-calenders 라이브러리를 사용 중 자꾸 wran에러가 발생하였다. 물론 저장하면 사라지기도 하고, 구현하는데에는 큰 문제가 없지만 거슬리기도 하고 나중에 문제가 발생할 수도 있으니 고치는게 좋을 것 같아서 여러 서치 끝에 에러를 해결하였다.

에러 원인

해결법은 아래 링크에서 찾을 수 있었다. https://stackoverflow.com/questions/55664673/require-cycles-are-allowed-but-can-result-in-uninitialized-values-consider-ref 이 부분인데, gpt도 모듈 간의 순환 의존성(circular dependency)이 발생할 때 나타난다고 한다. 쉽게 말하면 위에있는 표에서 B나 C모듈에서 시작을 하는데(나의 경우에는 캘린더) 상호작용하는 다른 모듈~~(예를 들어 B)~~에서 뭔가를 가져오지 않았기 때문에~~(A가)~~ 제대로 동작하지 않는다는 것이다. 하지만 정상 작동하는 이유는 가져오지 못했던 모듈~~(모듈B)~~들이 가져와지고 평가될 때 사용하고자하는 모듈~~(A모듈)~~이 다시 평가되고 작동되기 때문이라고 한다. 이걸 이해를 못해서 1시간을 넘게 서치했다...

해결

해결법은 gpt도 위 링크와 똑같이 알려준다

Lazy Loading 또는 Dynamic Import: 코드를 나누어서 로딩하는 기술을 사용하여 순환 의존성을 방지할 수 있습니다. React Native에서는 import() 함수를 사용하여 동적으로 모듈을 로드할 수 있습니다. 이를 통해 모듈 간의 의존성을 최소화할 수 있습니다.

라고 합니다. 쉽게 말하면

import {Calendar, CalendarList, Agenda} from 'react-native-calendars';

위와같은 import 코드를

import Calendar from 'react-native-calendars/src/calendar';
import CalendarList from 'react-native-calendars/src/calendar-list/new';
import Agenda from 'react-native-calendars/src/agenda';

이렇게 바꾸게 되면 서로 의존되고 있는 모듈들을 각각 불러옴으로써 의존성을 방지할 수 있다는 것이다.

결론

gpt는 위와같은 방법 말고도 3가지 방법을 더 추천해줬는데 이미 패키지 버전은 최신 버전이어서 당장 급하게 고칠 수 있는 방법은 이 방법 뿐이었다.. 결론! 따로따로 임포트하자

RN DateRangePicker 사용하기

Sat, 23 Sep 2023 09:50:44 GMT

서론

프로젝트에서 어플리케이션을 개발하던 중 기존 사용하고 있던 직접 만든 dateRangPicker에서 오류가 발생했다. 고치려고 노력해보았으나 버전 차이인지 뭔지 오류가 고쳐지지 않아서 새로운 라이브러리를 사용해보려고 한다.

결과 화면



물론 콘솔에도 잘 찍힙니다.

CODING

라이브러리

제가 사용한 라이브러리는 react-native-daterange-picker 입니다. moment 라이브러리를 기본적으로 사용하고 있으므로 없으신 분들은 다운받아주시길 바랍니다.

https://github.com/Naxulanth/react-native-daterange-picker 다루지 않은 자세한 내용들은 위 공식 홈페이지에서 참고하시길 바랍니다.

함수형으로 바꾸기

공식 홈페이지에 들어가보면 알겠지만 일단 기본적으로 class형으로 되어있다. 요즘에는 다 함수형을 사용하기도 하고 나 또한 프로젝트에서 이미 함수형을 사용해왔기 때문에 이를 먼저 함수형으로 바꿔줘야한다.

// 코드
import React, {useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import moment from 'moment';
import DateRangePicker from 'react-native-daterange-picker';

const DatePickerScreen = props => {
  const [dateRange, setDateRange] = useState({
    startDate: null,    // range 시작 날짜
    endDate: null,        // range 끝 날짜
    displayedDate: moment(),    // 캘린더에 보이는 월
  });
  const [maxDate, setMaxDate] = useState(moment());

  const setDates = newDates => {
    setDateRange(prevState => ({
      ...prevState,
      ...newDates,
    }));
  };

  return (
    
      
        Click me!
      
    
  );
};

export default DatePickerScreen;

일단 이렇게 수정하면 기본적으로 위에 보이는 결과 화면대로 사용할 수 있다. 처음에는 dateRange와 displayDate가 서로 다른 useState에 있었는데 그렇게 하면 뒤로가기 버튼을 사용할 수 없거나 꼬이는 일이 발생하였다. 그래서 하나로 묶어서 사용하였다.

최대 날짜 지정하기

해당 프로젝트에서는 최대 3개월 까지의 내용만 조회가 가능하다. 예를 들어서 2023년 1월 1일을 선택하면 3개월 뒤인 3월 1일까지 선택이 가능하고 그 뒤로는 선택이 되지 않는 것이다. 또한 (현재날짜 9월 23일 기준) 8월 1일을 시작 날짜로 선택하면 3개월 뒤인 날짜인 11월 1일까지 조회가 가능하지만, 현재 날짜가 9월 23일이기에 9월 23일까지만 선택이 가능해야한다.

moment라이브러리를 사용중이기 때문에 날짜를 더하는건 어렵지 않다.

// 3개월을 더하는 함수
moment().add(3, 'months').format()

useEffect로 startDate가 변하는 것을 감지해서 변할 때, maxDate의 조건을 확인하면 된다. 따라서 아래 코드를 추가해주면 된다.

  // 최대 날짜 지정
  useEffect(() => {
    if (
      moment(dateRange.startDate).add(3, 'months').format() > moment().format()
    ) {
      setMaxDate(moment().format());
    } else {
      setMaxDate(moment(dateRange.startDate).add(3, 'months').format());
    }
  }, [dateRange.startDate, setMaxDate]);

전체 코드

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import moment from 'moment';
import DateRangePicker from 'react-native-daterange-picker';
import {COLORS} from '../../style/Color';

const DatePickerScreen = props => {
  const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null,
    displayedDate: moment(),
  });
  const [maxDate, setMaxDate] = useState(moment());

  const onChangeDatePicker = newDates => {
    setDateRange(prevState => ({
      ...prevState,
      ...newDates,
    }));
  };

  useEffect(() => {
    /**
     * maxDate 변경 함수
     */
    const SetMaxDateFun = () => {
      if (
        moment(dateRange.startDate).add(3, 'months').format() >
        moment().format()
      ) {
        setMaxDate(moment().format());
      } else {
        setMaxDate(moment(dateRange.startDate).add(3, 'months').format());
      }
    };
    SetMaxDateFun();
  }, [dateRange.startDate, setMaxDate]);

  return (
    
      
        Click me!
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default DatePickerScreen;

참고

DateRangePicker을 최상단 container외에 다른 것(View 등)으로 감싸면 영역이 지정되어서 그 영역 시작점부터 datePicker가 나온다. 따라서 두번째 깊이에 있도록 코딩해야함.

React Native jdk17로 업그레이드

Sat, 16 Sep 2023 11:32:04 GMT

서론

react native(이하 RN)는 공식홈페이지에서 안드로이드 기동 시 jdk11을 권장한다고 명시되어있다.(2023 9월 기준)

하지만 현재 프로젝트에서 백엔드로 스프링을 사용하고 있고, jdk17버전을 사용중이기에 RN버전 또한 jdk17로 올려보려고 한다.

해당 게시글은 안드로이드 스튜디오 및 기타 RN의 안드로이드 실행에 필요한 기본적인 프로그램 및 설정들이 되어있다는 가정 하에 진행한다. 아직 설치가 되어있지 않다면 공식 홈페이지를 참고하여 미리 설정을 하고 오길 바란다. 공식 홈페이지 : https://reactnative.dev/docs/environment-setup?platform=android&os=windows

현재 세팅

과정

환경변수 설정

일단 환경설정에서 JAVA_HOME 버전을 17로 올려준다. 나는 기본 버전이 11이었기 때문에 올려주었지만 원래 17이신 분들은 생략하시면 된다. 값은 각자에 맞게 변경해서 입력해준다.

gradle-wrapper.properties 파일 수정

distributionUrl=https\://services.gradle.org/distributions/gradle-7.3-all.zip

변경된 jdk에 맞는 gradle 버전으로 수정해서 입력해준다. 17버전은 최소 gradle버전이 7.3이다. 백엔드단에서 쓰는 버전이 8.2.1이라 나도 그렇게 진행하려고 하였으나 8.2.1은 되지 않았다... 해결방법 아시는 분들은 댓글 부탁드립니다... 이 내용 또한 공식 홈페이지에 나와있으니 버전을 확인하면 된다.

gradle.properties 파일 수정

파일 맨 마지막에

org.gradle.jvmargs=-Xmx1536M --add-exports=java.base/sun.nio.ch=ALL-UNNAMED --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.lang.reflect=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED --add-exports=jdk.unsupported/sun.misc=ALL-UNNAMED

위 코드를 추가시켜준다.

상태 확인

일단 이대로 실행을 시켜보았다. 하지만 수많은 오류들과 함께 실패.. 그 중에서 표시한 부분의 오류를 구글링 한 결과

npx react-native doctor

위 명령어를 이용해서 환경 상태를 확인할 수 있다는 것을 알아냈다.

나는 android SDK의 버전을 찾을 수 없다고 나와있다.

Android SDK

Sdk manager에 들어가서 Android SDK Command-line Tools을 설치해준다.

그러면 아래처럼 사용가능한 버전들이 나온다. 팀원들에게 30버전으로 공지를 올렸기 때문에 30버전으로 맞춰서 수정해준다. 공식 홈페이지에는 33버전을 사용하라고 되어있으니, 새로 시작하시는 분들은 33으로 맞춰서 다운받아주시면 된다.

build.gradle 파일 변경

개발 파일 안에 android > build.gradle파일에서 ext의 buildToolsVersion을 사용하고자하는 버전으로 변경해준다.

변경하고 다시 명령어를 입력하면 위와같이 에러 사항이 없도록 출력될 것이다.

결과

npx react-native run-android

명령어를 입력하면 아래와같이 애뮬레이터와 cmd가 나오면서 잘 작동 된다.

참고

jdk

위쪽에서 jdk버전이 맞지 않는다고 나오면 안드로이드 스튜디오에 들어가서 원하는 버전에 잘 맞게 들어가있는지 확인해보자.

git hub

https://github.com/facebook/react-native/issues/32948

[Coding Test]푸드 파이트 대회

Mon, 26 Dec 2022 17:06:30 GMT

function solution(food) {
  var answer = ['0'];

  for (var i = 1; i < food.length; i++){
    // 넣어야 할 글자를 반복 출력
    const value = i.toString().repeat(parseInt(food[i]/2))

    const zero = answer.indexOf('0')

    answer.splice(zero+1, 0, value);
    if(zero === 0){ // 맨 처음 '0'의 인덱스가 0이면
      answer.splice(0, 0, value); // 첫 글자를 0번째에 넣어줌
    }else{
      answer.splice(zero, 0, value); 
    }
  }
  return answer.join(''); // 배열을 문자열로 변환
}

[Coding Test]같은 숫자는 싫어

Mon, 26 Dec 2022 16:41:06 GMT

function solution(arr)
{
    var answer = [];

    for (let i = 0; i < arr.length; i++){
      if( i === 0) {
        answer.push(arr[i]);
        continue;
      }

      if(arr[i] !== arr[i - 1]) {
        answer.push(arr[i])
      }
    }

    return answer;
}

console.log(solution([4,4,4,3,3]))

쉬운 문제니까 주석 생략

[Coding Test]문자열 나누기

Mon, 26 Dec 2022 16:31:42 GMT

function solution(s) {
  var answer = 0;

  var x = 0;
  var other = 0;

  for(var i = 0; i < s.length; i++) {
    if(i === 0) { // 첫 단어는 x에 +1
      x++;
      continue;
    }
    else{
      if(s[0] === s[i]){  // 첫 단어와 같은 단어
        x++;
      }else{  // 다른 단어
        other++;
      }

      if(x === other){  // 처음으로 두 횟수가 같아지는 순간
        s = s.slice(i+1); // 문자열 분리
        answer++; 
        x = 0;  // 변수 초기화
        other = 0;
        i = -1; // 인덱스를 0번으로 이동
      }
    }
  }

  // (마지막 'aaaa'와 같이 특정 단어가 연속으로 있거나 
  // 같은 갯수가 더이상 없을 때)
  // 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 
  // 역시 지금까지 읽은 문자열을 분리하고
  // 종료합니다.
  if(x !== 0 || other !== 0){
    answer++;
  }

  return answer;
}

[Coding Test]삼총사

Mon, 26 Dec 2022 14:56:16 GMT

function solution(number) {

  var answer = 0;

  // 중복 없는 서로 다른 사람 3명을 뽑는 것이므로 조합 이용
  const getCombinations = function (arr, selectNumber) {
    const results = [];
    if (selectNumber === 1) return arr.map((el) => [el]); 
    // n개중에서 1개 선택할 때(nC1), 바로 모든 배열의 원소 return

    arr.forEach((fixed, index, origin) => {
      const rest = origin.slice(index + 1); 
      // 해당하는 fixed를 제외한 나머지 뒤
      const combinations = getCombinations(rest, selectNumber - 1); 
      // 나머지에 대해서 조합을 구한다.
      const attached = combinations.map((el) => [fixed, ...el]); 
      //  돌아온 조합에 떼 놓은(fixed) 값 붙이기
      results.push(...attached); 
      // 배열 spread syntax 로 모두다 push
    });

    return results; // 결과 담긴 results return
}

  combinationResult = getCombinations(number, 3);
  // forEach문을 돌면서 3명의 번호 합이 0이면 answer에 1씩 더함
  combinationResult.forEach(array => { 
    if(array[0] + array[1] + array[2] === 0){
      answer++;
    }
  })

  return answer;
}

[Coding Test]콜라문제

Mon, 26 Dec 2022 14:05:08 GMT

function solution(a, b, n) {

  var answer = 0;
  var myBottle = n; // 내가 현재 갖고있는 병의 갯수

  // 공식
  // (내가 갖고있는 병) - (마트에주는 병 * 한번에 줄 수 있는 묶음 수) + (받는 콜라 갯수 * 한번에 줄 수 있는 묶음 수)

  while(myBottle >= a){
    var returnCount = parseInt(myBottle/a);   // 한번에 줄 수 있는 묶음 수

    answer += (b*returnCount);  // (마트에주는 병 * 한번에 줄 수 있는 묶음 수) 이걸 모두 더해주면 된다
    myBottle = (myBottle) - (a*returnCount) + (b*returnCount)

  }
  return answer;
}

[Coding Test]햄버거 만들기

Fri, 23 Dec 2022 12:44:29 GMT

function solution(ingredient) {
  var answer = 0;

  // 이것도 시도는 해봤는데 replace의 시간복잡도 때문에 타임아웃 뜸
  // test = ingredient.join("")
  // while(test.indexOf('1231') !== -1) {
  //   test = test.replace('1231', '')
  //   answer++;
  // }

  const array = [];

  ingredient.forEach(element => {
    array.push(element);

    if(array[array.length - 1] === 1 && array[array.length - 2] === 3
      && array[array.length - 3] === 2 && array[array.length - 4] === 1){
        array.pop();
        array.pop();
        array.pop();
        array.pop();
        answer++;
    }
  })

  return answer;
}

[Coding Test]가장 가까운 같은 글자

Fri, 23 Dec 2022 10:59:09 GMT

function solution(s) {
  var answer = [];

  for (var i = 0; i < s.length; i++) {

    sliceS = s.slice(0,i)

    if(sliceS.lastIndexOf(s[i]) !== -1) {   // 만약 앞에 해당 글자가 있다면
      answer.push( i - sliceS.lastIndexOf(s[i]) ) // 현재 인덱스에서와의 거리
    }else{
      answer.push( sliceS.lastIndexOf(s[i]) ) // 앞쪽에 해당 글자가 없다면 -1 리턴
    }
  }
  return answer;
}

[Coding Test]크기가 작은 부분문자열

Fri, 23 Dec 2022 10:30:35 GMT


function solution(t, p) {

  const result = [];

  for (var i = 0; i < t.length; i++) {
    sliceWord = t.slice(i, i+p.length)
    if(sliceWord.length === p.length){
      result.push(sliceWord)
    }
  }

  answer = result.filter((num) => Number(num) <= Number(p))

  return answer.length;
}

console.log(solution("500220839878",    "7"))

[Coding Test] 숫자 짝꿍

Mon, 19 Dec 2022 12:47:16 GMT

function solution(X, Y) {

  arrX = X.split('')
  arrY = Y.split('')

  answer = '';

  for (let i=0; i<10; i++) {

    count_i_from_X = arrX.filter(number => parseInt(number) === i).length;  // i인 숫자의 갯수 추출
    count_i_from_Y = arrY.filter(number => parseInt(number) === i).length;

    const count = Math.min(count_i_from_X, count_i_from_Y)  // 더 작은 값(공통갯수) 찾기
    answer += String(i).repeat(count); // 문자열 i('1', '2' ,,,)을 count만큼 반복해서 answer에 추가
  }

  if(answer === ''){
    return '-1'
  }
  else if(parseInt(answer) === 0){
    return "0"
  }
  else{
    return answer.split('').sort((a,b) => Number(b) - Number(a)).join('') // 0~9로 구성된 answer을 내림차순 정렬하여 문자열로 재구성
  }
}

후기

타임아웃 잡는데 고생 좀 많이 함
include() 메서드는 그 안에서 루프가 돌음 -> for문을 2번 쓰는 것과 같은 느낌

filter()을 사용

for (let i=0; i<10; i++) {
   if(X.includes(i) && Y.includes(i)){
  ~~~
  }
}
// 안쪽에 for문이 2번 동작하는 것과 같기 때문에 시간을 더 잡아먹는다
// filter 함수를 바로 사용해서 갯수를 바로 리턴하면 시간을 줄일 수 있음

성격유형검사하기

Sat, 17 Dec 2022 16:23:04 GMT

function solution(survey, choices) {
  const test = {};

  for (var i = 0; i < survey.length; i++) {

    if (choices[i] < 4) {
      if (test[survey[i][0]] == undefined) {
        test[survey[i][0]] = 4-choices[i];
      }
      else{
        test[survey[i][0]] += 4-choices[i];
      }

    } 
    else if (choices[i] > 4) {
      if (test[survey[i][1]] == undefined) {
        test[survey[i][1]] = choices[i]-4;
      }
      else{
        test[survey[i][1]] += choices[i]-4;
      }
    }
  }

  var answer = "";

  const mbtiList = ['RT', 'CF', 'JM', 'AN'];

  for (var i = 0; i < mbtiList.length; i++) {
    if(test[mbtiList[i][0]] == undefined){
      test[mbtiList[i][0]] = 0
    }
    if(test[mbtiList[i][1]] == undefined){
      test[mbtiList[i][1]] = 0
    }

    if(test[mbtiList[i][0]] >= test[mbtiList[i][1]]){
      answer += mbtiList[i][0]
    }
    else{
      answer += mbtiList[i][1]
    }


  }

  return answer;
}

console.log(solution(
  ["AN", "CF", "MJ", "RT", "NA"],    [5, 3, 2, 7, 5]
));

더 짧게 리펙토링 할 수 있으니 다음에 까먹을 때 즈음에 한 번 더 해볼 것..!!!

scroll 세팅

Sat, 10 Dec 2022 05:26:58 GMT

자주 쓰는 html 스크롤 세팅 저장

 &::-webkit-scrollbar{
    width: 10px;
    background-color:white;
  }
  &::-webkit-scrollbar-thumb{
    background-color: #ccc;
    border-radius: 50px;
  }

글자수 넘어가면 ... 처리

Mon, 14 Nov 2022 05:45:31 GMT

text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

display: -webkit-box;
-webkit-line-clamp: 2; // 원하는 라인수
-webkit-box-orient: vertical

[React]Toast UI source map 에러

Mon, 03 Oct 2022 12:02:52 GMT

[서론]

프로젝트에서 Toast UI Editor로 작업을 하던 중 실행에는 문제가 없었지만 거슬리는 에러를 발견했다..

[에러 내용]

Failed to parse source map from 'D:\project\codiary\client\node_modules@toast-ui\editor\dist\purify.js.map' file: Error: ENOENT: no such file or directory, open 'D:\project\codiary\client\node_modules@toast-ui\editor\dist\purify.js.map'

[해결]

// package.json
  "scripts": {
    "start" : "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

package.json파일에서 start 관련한 내용을 위와같이 바꿔주면 된다.

여기서 'GENERATE_SOURCEMAP'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 에러가 나올 경우는

// package.json
  "scripts": {
    "start" : "set \"GENERATE_SOURCEMAP=false\" && react-scripts start",
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

위와같이 package.json 파일에서 start와 빌드의 내용을 위와같이 수정해주면 된다. 사실 빌드파일까지 바꿀 필요는 없고 npm start할 때 나타나는 에러를 지우려면 start부분만 카피해도 무방할 듯 하다.

~~나는 윈도우 환경을 쓰기 때문에 에러 해결이 리눅스 기반이 많아서 왜 윈도우에서 안되는지 고생 꽤나 했다....~~

[에러 원인]

자세한 내용은 공식 github에서 친절하게 설명해준다. https://github.com/nhn/tui.editor/issues/2137

대충 읽어보면 라이브러리 내부적인 사정인 듯 하다.. 정확히 뭐라고 하는지는 잘 모르겠지만 에러코드에서 소스맵(Source Map)이라는 뭔가를 말하는걸 봐선 이에 대한 오류인 듯 싶다.

여기서 소스맵이란, 리액트는 웹팩을 통해 파일들을 압축하여 배포함으로써 성능을 최적화 한다. 이 때, 내부적으로 소스맵(Source Map)이란걸 만들어, 압축한 파일과 실제 원본 파일을 매핑하여 디버깅이 가능하도록 한다. 출처: https://curryyou.tistory.com/469 [카레유:티스토리] 라고는 하는데.. 아직 react가 내부적으로 어떻게 동작하는지 정확히 이해를 하고 있지 못해서 그런지 잘 모르겠다.

누군가에겐 이 포스트가 도움이 되길 바라며..!

로또의 최고 순위와 최저 순위

Fri, 05 Aug 2022 08:36:51 GMT

프로그래머스 코딩테스트 1단계

무식하게 그냥 filter랑 for문 위주로 돌려보았다

소스코드


function solution(lottos, win_nums) {
    var answer = [];
    var result =[];

    // 맞춘 번호 번호 삭제
    var result = lottos.filter((element) => !win_nums.includes(element))

    // 최소 등수    // 모두 0일 경우 최대등수
    answer.push(lottos.length - result.length);

      // 0을 찾아서 0이 모두 맞았다고 가정 할 때,
    search0 = result.filter((element) => element === 0).length
    // 최대 등수    // 모두 0일 경우 최소등수
    answer.push(answer[0]+search0);

      // 좀 무식해보이지만 마땅히 방법이 생각이 안났다ㅠ
    for(var i = 0; i < answer.length; i++){
        if(answer[i] === 0){ answer[i] = 6 }
        else if(answer[i] === 1) { answer[i] = 6 }
        else if(answer[i] === 2) { answer[i] = 5 }
        else if(answer[i] === 3) { answer[i] = 4 }
        else if(answer[i] === 4) { answer[i] = 3 }
        else if(answer[i] === 5) { answer[i] = 2 }
        else if(answer[i] === 6) { answer[i] = 1 }
    }
    // 위쪽에서 최대최소 등수가 꼬일 때가 있어서 최대최소 등수로 정렬해줌
    return answer.sort();
}

console.log( solution(     [0, 0, 0, 0, 0, 0], [38, 19, 20, 40, 15, 25]) )

// 결과값 [1, 6]

체육복

Fri, 05 Aug 2022 08:03:50 GMT

프로그래머스 코딩테스트 1단계

소스코드

function solution(n, lost, reserve) {

      // 여벌을 갖고온 사람과 잃어버린 사람이 정렬되어있다는 보장이 없으므로 정렬하고 시작
    reserve.sort((a, b) => a - b);
    lost.sort((a, b) => a - b);
    var reserve_copy = [];

    for(var i = 0; i < reserve.length; i++) {
        // 여분 갖고온 사람이 분실했다면
        if(lost.includes(reserve[i])){
            lost.splice(lost.indexOf(reserve[i]), 1);
            // reserve copy에 체육복 2벌 있는 사람체크
            reserve_copy.push(reserve.filter((element) => element === reserve[i])[0]);
        }
    }
    // 여벌 갖고왔는데 하나 잃어버린 사람 reserve에서 삭제
    reserve = reserve.filter(element => !reserve_copy.includes(element))

    for(var i = 0; i < reserve.length; i++) {
        if( lost.includes(reserve[i]-1)){
            // lost안에 reserve[i]+1와 같은 요소가 있으면
            lost.splice(lost.indexOf(reserve[i]-1), 1)
        }
        else if( lost.includes(reserve[i]+1) ){
            lost.splice(lost.indexOf(reserve[i]+1), 1)
        }
    }
    return n - lost.length;
}

console.log( solution( 24,    [12, 13, 16, 17, 19, 20, 21, 22],    [1,22, 16, 18, 9, 10]) )
// 17명

1단계 코테 몇 문제 안남았다...ㅠ

문자열 내림차순으로 배치하기

Thu, 04 Aug 2022 11:43:33 GMT

// 프로그래머스 코딩테스트 1단계

소스코드

function solution(s) {
    // 배열로 만들어준 뒤, 오름차순 정렬하고 뒤집고 다시 join.
    return s.split('').sort().reverse().join('');

    // 참고로 이런것도 가능함
    // return [...s].sort().reverse().join('');
}

console.log( solution("Zbcdefg" ) )
// 결과값: gfedcbZ