최고의 개발자 (목표)

💡 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,
            ),
          ),
        ],
      ),
    );

결과

const class 인 상태에서 non const class로 바뀌면 hot reload가 되지 않는다.

앱을 껐다가 다시 실행하면 된다.

Dart 패키지의 이름은 소문자와 _ (언더바)만 가능하다. 

소문자와 언더바를 제외한 다른 문자는 들어가면 안된다.

* 에러

Network error
..
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

* 환경

react native expo + Django

* 해결

- backend에 settings.py 변경

  expo start를 했을 때 연결되는 expo ip주소를 넣어주면 된다.

ALLOWED_HOSTS = ['자신의 ip주소'] 
# ex) ALLOWED_HOSTS = ['192.168.0.12']

- backend 실행 시 코드

  자신의 ip:port 로 변경

python manage.py runserver 192.168.0.12:8080

- frontend axios 부분 코드

 button의 onPress 함수가 onPressLogin

const onPressLogin = async () => {
    if (id == "" || pw == "") {
      alert("아이디와 비밀번호를 입력해 주세요");
    } else {
      const data = {
        username: id,
        password: pw,
      };
      console.log(data);

      try {
        const response = await axios
          .post(`http://192.168.0.12:8080/api/v1/token`, data)
          .then(function async(response) {
            if (response.data["success"] == true) {
              setIdNum(response.data["id"]);
              alert("로그인되었습니다.");
              navigation.navigate("Home");
              setId("");
              setPw("");
            }
          })
          .catch(function (error) {
            alert("로그인 오류입니다.");
            //console.log(error.response.data);
            console.log(error);
            throw error;
          });
      } catch (error) {
        console.log(error);
        throw error;
      }
    }
  };

※ stackoverflow 참고

https://stackoverflow.com/questions/62031415/unhandled-promise-rejection-typeerror-network-request-failed-expo-node-backend

 keyboardAvoidingView 를 사용하면 화면에 있는 TextInput을 키보드가 가리지 않도록 화면을 알아서 조정해준다.

그런데 화면 조정 때문에 오히려 만들어놓은 css를 해쳐서 keyboardAvoidingView가 작동되지 않게 하고 싶었다.

그런데 keyboardAvoidingView 를 적용하지 않아도 알아서 화면이 조정되었다. 알고보니 default가 keyboardAvoidingView 가 적용되는 것으로 바뀌었던 것이다.

expo의 app.json으로 가서 android 부분에 아래 코드를 넣으면 된다.

"softwareKeyboardLayoutMode": "pan"

즉, android 부분의 코드는 아래와 같다.

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "softwareKeyboardLayoutMode": "pan"
    },

기본적으로 softwareKeyboardLayoutMode : resize 가 기본 값이며, pan 으로 바꿀 수 있다.

※ expo 공식 문서의 app.json 부분

https://docs.expo.dev/versions/latest/config/app/#softwarekeyboardlayoutmode

오랜 구글링 끝에 이 방법으로 위 오류를 해결할 수 있었다. 다른 해결 방법도 많이 시도해봤지만, 해결되는 것은 없었다.

wsl에 아래 명령어를 실행하고, npm install 후 npm start를 해서 다시 앱을 실행했다. 

만약 명령어를 실행했는데도 오류는 안 나지만 폰트가 적용되지 않는다면, style에 fontWeight을 정의했는지 봐야 한다. fontWeight을 지정하면 폰트가 적용되지 않는다. 제거해야 한다.

window

rm -rf $TMPDIR/react-* && rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c

mac

watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c

※ 출처 및 참고

https://intrepidgeeks.com/tutorial/reactnative-error-fontfamily-error