최고의 개발자 (목표)

문제

https://school.programmers.co.kr/learn/courses/30/lessons/77884?language=javascript 

입출력

코드

function solution(left, right) {
    let answer = 0; 
    // left 부터 right 까지의 수들의 약수 개수 구하기
    for(let i = left; i <= right; i++){
        let count = 0; // i의 약수 개수를 저장
        
        // j는 1부터 i의 제곱근까지의 수
        // j가 i의 약수인지 확인
        for(let j = 1; j <= Math.sqrt(i); j++){
            if(i % j === 0) { // i가 j로 나누어 떨어지면 약수이다.
                count++;
                if(i / j != j) count++; // i = 25, j = 5의 경우 5를 2번 세면 안됨.
            }
        }
        // 약수의 개수가 짝수면 더하고 홀수면 빼기
        count % 2 === 0 ? answer += i : answer -= i;
    }
    return answer;
}

풀이

left와 right 사이에 있는 수들의 약수 개수를 구하고, 그 개수가 짝수면 더하고 홀수면 빼면 된다.

1. 반복문으로 left에서 right까지 돌면서 i의 약수 개수를 구해준다. count는 i의 약수 개수를 저장할 변수이다.

2. j를 1부터 i의 제곱근까지 확인하면서 i의 약수인지 확인하고, i가 j로 나누어 떨어지면 약수이므로 count++ 해준다.

이때, i의 끝까지 확인하는 것이 아니라 i의 제곱근까지만 확인하는 이유는 굳이 끝까지 확인하지 않아도 되기 때문이다. 물론 다 확인해서 약수를 구해도 답을 구할 수 있다.

예를 들어, i = 25라고 해보자.

25의 약수는 1 5 25 이다.

방법 1) 1부터 끝까지 확인하는 방법

1부터 25까지 돌면서 25 % 1 === 0 , 25 % 2 === 0, ... 25 % 25 === 0 을 확인해 count++를 해준다.

-> 3개가 나온다.

방법 2) 1부터 i의 제곱근인 5까지 확인하는 방법(에라토스테네스의 체)

25 % 1 === 0, 25 % 2 === 0, 25 % 3 === 0, 25 % 4 === 0, 25 % 5 === 0 을 확인한다.

나누어 떨어진다면 i의 약수이다. 그러나 제곱근까지만 확인했기 때문에 count를 한 번 더 세주어야한다. 1 x 25 = 25이므로, 1도 25의 약수이고 25도 25의 약수가 된다. 따라서 1을 세줄 때, 25도 같이 세어주어야한다.

5가 약수인지 판단했을 때, 25 % 5 는 0이어서 약수로 판명이 된다. 

이때 5의 경우에는 한 번만 세주어야 하므로(5 x 5 = 25), i / 5 == 5 인 경우에는 세어주면 안된다.

따라서 i / j != j 인 경우에만 count를 한 번 더 세어주었다. i != j * j 와 같은 식이다.

구한 i의 약수의 개수가 짝수면 answer에 더해주고, 홀수면 빼주었다. 

프로그래머스에서 하루에 level 0 문제를 4개씩 25일간 풀면 머쓱이 스탬프를 준다. (+ 다른 사람의 답을 보면 안된다.)

SSAFY에서 자바로만 코딩테스트 공부를 하다보니, js를 까먹을 것 같아서 하루에 4문제씩 js로 풀었다. 덕분에 깃헙 잔디 심기도 다시 시작했다.

비록 어려운 문제는 아니지만 바쁜 와중에도 꾸준히 풀었다는 것이 뿌듯하다!

앞으로는 level1 문제들을 차근차근 풀어가고 싶다 🙂

문제

https://school.programmers.co.kr/learn/courses/30/lessons/42748

코드

function solution(array, commands) {
    const answer = []; // 결과를 저장할 배열

        // commands 를 돌며 각 경우의 값을 구한다.
    for(let i = 0; i < commands.length; i++){
        const arr = array.slice(commands[i][0]-1, commands[i][1]).sort((a,b)=>a-b);
        answer.push(arr[commands[i][2]-1]);
    }

    return answer;
}

해설

입력으로 들어오는 array를 조건에 맞게 잘라 원하는 인덱스의 값을 반환하는 문제이다.

js의 Array.prototype.slice() 를 이용하면 쉽게 구할 수 있다.

command[i][0]-1은 begin, command[i][1]은 end가 된다. 배열은 0번째 인덱스 부터 시작하지만, 문제에서는 1부터 시작이기 때문에, 배열의 인덱스로 맞추어 주려면 1을 빼주어야한다.

command[i][1]의 경우는 1을 빼주지 않아도 된다. 왜냐하면 slice 함수는 end-1 인덱스 까지 잘라주기 때문이다.

그 후 sort 함수를 이용해서 자른 배열을 정렬시켜주었다. 람다 함수를 이용해서 오름차순 정렬을 해주었는데, 따로 정렬 조건을 부여하지 않으면 원하는 대로 정렬이 되지 않을 수 있다.

js는 오름차순 정렬을 위해 그냥 sort() 만 사용하면 [10,9]를 정렬할 경우 [10,9] 로 정렬이된다. 원하는 결과인 [9,10] 과 다르게 나온다. 그 이유는 처음 앞 숫자인 1과 9를 비교했을 때 9가 크기 때문이다. 따라서 원하는 대로 정렬을 하려면 정렬 조건을 부여해주는 것이 좋다.

정렬이 완료되었다면, command[i][2]번째 인덱스를 구헤야한다. 그러나 위에서 말했듯이, 문제에서는 1부터 시작하지만 배열은 0번째 인덱스부터 시작하므로 우리가 만든 배열에 대입하기 위해서는 1을 빼주어야한다.

* Array.prototype.slice()

배열명.slice([begin[, end]])

배열의 begin 인덱스부터 end-1 인덱스까지 잘라서 반환한다.

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

// begin & end를 모두 입력받는 경우
// begin 부터 end-1 인덱스까지 잘라 반환
console.log(arr.slice(1,3)) // [2,3]

// begin 만 입력 받는 경우
// array[begin]부터 array의 끝까지 잘라 반환
console.log(arr.slice(3)) // [3,4,5]

// 아무것도 입력하지 않는 경우
// array 그대로 반환
console.log(arr.slice()) // [1,2,3,4,5]

* Array.prototype.sort()

배열명.sort([compareFunction])

const arr = [8,9,10]

// sort()만 사용하는 경우
console.log(arr.sort()) // [10,8,9]

// 오름차순 정렬
console.log(arr.sort((a,b)=>a-b)) // [8,9,10]

// 내림차순 정렬
console.log(arr.sort((a,b)=>b-a)) // [10,9,8]

드디어 기다리고 기다리던 웰컴키트를 받았습니다!! 구성품이 아주 알차서 마음에 들었어요..ㅎㅎ

후드집업, 반팔티, 텀블러, 에코백, 셀카봉, SSAFY 스티커가 들어있었는데 다 유용한 것들이라 좋았습니다 :)

후드집업는 흰색, 검은색, 스머프색 중 선착순으로 골랐어요 !! 스머프색을 다들 기피했는데, 막상 친구가 입은 걸 보니 예쁘더라구요🫠

웰컴키트를 받으니 싸피교육생이 된 게 실감이 나서 앞으로 열심히 공부해야겠다는 생각을 다시 한 번 하게 되었습니다!!🥰

알찬 웰컴키트 덕에 싸피에 대한 애정이 올라간 것 같아요!! 1년 간 힘내서 최고의 개발자가 되도록 노력해야겠어요!

어찌저찌 SSAFY 9기에 합격했습니다!!!!!!!!!!! 🐰

에세이 > 적성진단 > 인터뷰를 약 2달에 걸쳐 진행했고, 준비 방법에 대해서는 대외비에 걸리지 않는 수준으로 나중에 자세하게 올리겠습니다 ..ㅎㅎ

프론트엔드 개발자가 하기엔 백엔드 과정이 많아 보이지만,,, 열심히 병행해야지요...

따로 js와 react 공부도 하고 코테도 js로 풀려면 2배로 공부해야겠네요,,, (같이 js 코테 스터디 하실 분...?)

앞으로 SSAFY 에서 1년 동안 열심히 공부해서 멋쥔 개발자가 돼 보도록 하겠슴니다.

Great 9기 파이팅 🥰

(일단 졸업을 위한 영어먼저,,)

💡 Error Message

Refused to execute script from 'http://localhost:3000/static ...ts' because its MIME type ('video/mp2t') is not executable.

💡 Error 난 코드

const url = new URL('./worker.ts', import.meta.url);
const worker = new Worker(url);

💡 원인(추정)

ts는 브라우저에서 바로 사용이 불가능해서 js로 컴파일 하는 과정이 필요하다.

그러나 저렇게 따로 넣어주게 되면 js 컴파일이 되지 않는다.

💡 해결

const worker = new Worker(new URL("./worker.ts", import.meta.url))

이렇게 넣어주어야 에러가 나지 않는다.

"./worker.ts"는 자신의 worker path의 상대경로를 넣어주면 된다.

🍎 관련 webpack issue

https://github.com/webpack/webpack/issues/15165

💡 How to use

1 . Variables

• 파일 내에서 변수 선언 후, 사용 가능
• $변수
• 예제 코드

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2 . Nesting

• 계층 구조에 따라 중첩해서 사용 가능
• {} 사용
• 중첩 내부에서 &키워드는 상위(부모) 선택자로 치환됨
• 예제 코드(scss ⇒ css)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }

    &.active {
        color: red;
    }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
nav.active {
    color: red;
}

3 . Partials

• 보통 @use 규칙과 같이 사용
• 다른 scss 파일의 부분으로 들어가는 scss 코드
• 파일 이름을 작성할 때 맨 앞에 _(밑줄)을 추가하여 css로 컴파일하지 않아도 됨을 명시
• 예시 코드

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

4 . Modules

• @use 키워드는 scss 파일 제일 위에 선언해야함
• 아래 예시처럼 base에 있는 변수도 접근할 수 있음
• 예시 코드

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

5 . Mixins

• 재사용하려는 코드를 @mixin 키워드를 이용해 선언
• @mixin 변수($type: x){}
• 변수를 받음
• 선언된 코드는 @include 키워드를 이용해 사용할 수 있음
• @include 변수 or @include 변수(값)
• 예시 코드

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

6 . Extends/Inheritance

• Mixin과 비슷하지만 변수를 따로 받지 않음
• 재사용하려는 css 코드 앞에 %를 붙임
• @extend 키워드를 이용해 사용가능
• 예시 코드

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

7 . Operators

• +
• -
• *
• /
• %
  
  
  

💡 Property Declarations

1 . Interpolation

• 속성을 동적으로 생성할 수 있음
• #{변수} 을 이용해 값 넣음

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

💡 At-Rules

1 . @use

• 다른 scss 파일을 가져옴과 동시에 override도 가능함

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

2 . @forward

• 재사용할 코드의 path를 저장함
• @use @forward 파일의 이름 으로 사용

// bootstrap.scss
@forward "src/list";

// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

3 . @function

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

4 . Flow Control Rules

• @if & @else & @else if

@use "sass:math";

@mixintriangle($size, $color, $direction) {
height: 0;
width: 0;

border-color: transparent;
border-style: solid;
border-width: math.div($size, 2);
@if $direction== up {
border-bottom-color: $color;
  }@else if $direction== right {
border-left-color: $color;
  }@else if $direction== down {
border-top-color: $color;
  }@else if $direction== left {
border-right-color: $color;
  }@else {
@error "Unknown direction #{$direction}.";
  }
}

.next {
@includetriangle(5px, black, right);
}

• @each

$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}

• @for

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

• @while

@use "sass:math";

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}

🍎 참고 문헌

1 . https://sass-lang.com/guide
2 . https://sass-lang.com/documentation/at-rules/control/while
3 . https://sass-lang.com/documentation/syntax/structure

#1.1 Store and Reducer

import { createStore } from "redux";
..
const countStore = createStore(reducer);

- createStore로 data를 넣을 장소를 생성

- state(상태) :  앱에서 바뀌는 data
- createStore에는 reducer를 인자로 넣어야하는데, 이때 reducer는 무조건 함수여야함
- reducer : data를 수정하는 함수
- reducer에서 return 하는 것이 countStore에 저장됨
- countStore.getState를 통해 reducer에서 리턴한 값을 가져올 수 있음

#1.2 Actions
- redux에서 함수를 부를 때 쓰는 두 번째 파라미터(인자)
- action을 통해서 reducer와 소통함
- action은 object여야함

(ex) {type: "ADD"})
- countStore.dispatch(액션)를 통해서 reducer에게 action을 보낼 수 있음

#1.3 Subscriptions
- countStore을 console.log로 보면 subscriptions라는 함수를 볼 수 있음
- store안에 있는 변화들을 알 수 있게 해줌
- countStore.subscribe(함수)
-> countStore에 변화가 생기면 즉, store에 변화가 생기면 함수를 실행함.

#1.4 Recap Refactor

(전체 순서)
1. 현재 createStore(CountModifier)을 통해서 CountModifier 이라는 store(함수)을 만들고 그 걸  countStore이라는 변수에 저장함.
2. Add 버튼을 클릭하면 add.eventListener를 통해 handleAdd 함수가 실행됨.
3. handleAdd 함수에서 countStore.dispatch()를 이용해 countStore에 {type: "ADD"} 라는 action을 CountModifier에 보냄
4. CountModifier에서는 현재 default count가 0인 상태에서 {type: "ADD"} 인 action을 보고 count + 1 을 리턴함. (즉 count = 1이 되고 return 1;)
5. 2에서 눌린 버튼으로 인한 변화가 감지되고 countStore.subscribe(onChange) 함수를 통해 onChange 함수가 실행됨.
6. onChange 함수에서 countStore.getState()를 통해 return 값을 가져오고(4에서 return 1;) 그걸 number.innerText로 설정하여 html 상에서 0을 1로 변화시킴
- 대부분 reducer안에서는 switch 문을 사용

# 결과

Add를 누르면 숫자가 1씩 올라가고, Minus를 누르면 숫자가 1씩 내려간다.

* 발생 에러

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

* 해결(window)

다른 분이 올리신 해결방법으로 해결되지 않았는데, 에러 메시지를 잘 읽어보니 Android studio를 업데이트하라고 적혀있었다. Android Studio를 다시 다운받았더니 바로 해결됐다.

코드

return Scaffold(
      appBar: AppBar(
        title: new Text('Flutter is Gooood'),
        backgroundColor: Color.fromARGB(255, 255, 255, 255),
        leading: Icon(Icons.bar_chart_sharp, color: Colors.black),
      ),
      body: Column(
        children: [
          /* 빨간 area */
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.red,
            ),
          ),
          /* 노랑 + 초록 + 연두 area */
          Flexible(
            flex: 4,
            child: Column(children: [
              /* 노랑 area */
              Flexible(
                flex: 5,
                child: Container(
                  color: Colors.yellow,
                ),
              ),
              /* 초록 + 연두 area */
              Flexible(
                flex: 2,
                child: Row(children: [
                  /* 초록 area */
                  Flexible(
                    flex: 2,
                    child: Container(
                      color: Colors.green,
                    ),
                  ),
                  /* 연두 area */
                  Flexible(
                    flex: 1,
                    child: Container(
                      color: Colors.lightGreen,
                    ),
                  ),
                ],)
              ),
            ]),
          ),
          /* 파란 area */
          Flexible(
            flex: 1,
            child: Container(
            color: Colors.blue,
            ),
          ),
        ],
      ),
    );

결과