mia.log

[인프콘] 프론트엔드 개발의 결정적 순간들

Wed, 30 Oct 2024 12:18:33 GMT

7년동안 하나 만들었습니다. 프론트엔드 개발의 결정적 순간들 - 이찬희

지금 개발하는 (만드는) 제품의 7년뒤는 어떨까?
- 현재 개발한 제품의 기능들 (airbridge): 데이터 추출, 연동, 리포트 ..
- 기술적으로는 초당 15억건 실시간으로 받아서 처리

첫번째 순간 : 처음으로 만든 기능

문제: 매우 큰 고객이 들어오고 나서 api 응답이 느려지고 다운되는 일이 잦아짐

메타 데이터?

메타 데이터 예시

예시 상황: 쇼핑몰 웹사이트에서 상품 페이지에 필요한 메타 데이터를 추가한다고 가정해봅시다.
```
  html
  코드 복사
  
  
    
    
    
    
  
```
위 예시처럼 메타 데이터를 설정하면 검색 엔진은 이 정보를 이용해 더 잘 검색될 수 있게 도와주고, SNS 공유 시에도 특정 이미지나 제목이 보이게 해줍니다.

이벤트 수 증가와 메타 데이터가 API 서버에 미치는 영향

이제 메타 데이터를 JavaScript 코드에서 설정하는 예시를 들어볼게요. 이벤트 수가 많아질 때 메타 데이터가 API 서버에 미치는 영향도 이어서 설명하겠습니다.

1. JavaScript에서 메타 데이터 생성 예시

상품 페이지의 경우 사용자가 보는 상품마다 서로 다른 정보를 보여줘야 하므로, 프론트엔드에서 동적으로 메타 데이터를 생성할 수 있습니다.
```
  javascript
  코드 복사
  function setMetaData(product) {
    document.title = `${product.name} - 최신 패션`;
    document.querySelector('meta[name="description"]').setAttribute("content", product.description);
    document.querySelector('meta[property="og:image"]').setAttribute("content", product.imageUrl);
  }
```
사용자가 상품 페이지를 클릭할 때마다, setMetaData 함수가 상품 정보를 기반으로 페이지의 메타 데이터를 설정해줍니다.

2. API 서버에 미치는 영향

이벤트 수가 많아지면:
- 상품 페이지를 사용자들이 많이 탐색할 경우, 각 상품 정보(상품 이름, 설명, 이미지 등)를 매번 API 요청으로 가져오게 됩니다.
- 사용자가 많아지고 요청 빈도가 높아지면, 서버는 그만큼의 트래픽 부담을 가지게 됩니다.
- 결과적으로, 서버의 처리 능력을 초과할 경우 응답 지연이 발생하거나 심한 경우 서버 다운 문제가 생길 수 있습니다.
  
  이를 해결하기 위해 서버나 프론트엔드에서 캐시(Cache) 를 이용해 자주 요청되는 메타 데이터를 저장해두면, 서버에 매번 요청하지 않아도 되므로 부하를 줄일 수 있습니다.
즉, 사용자 경험에는 데이터 양과 변화량이 핵심
- 즉, 무한스크롤등 화면의 변화가 많아질수록 렌더링의 부화가 더 심해짐

이를 해결하려면?

페이지네이션: 데이터를 나눠서 보여줄 수 있음

렌더링 가상화:스크롤할 때마다 화면에 보이는 부분만 렌더링해 성능 최적화

  import { FixedSizeList as List } from 'react-window';

  const ProductList = ({ products }) => (
    
      {({ index, style }) => (
        
          {products[index].name}
        
      )}
    
  );

정규화 : 데이터를 중복 없이 효율적으로 관리하기 위해 자주 쓰이는 값이나 주요 속성을 기준으로 데이터 구조를 최적화하는 것을 의미

두번째 순간: 캘린더 컴포넌트

기존에는 캘린더 라이브러리를 쓰다가 → 만들기로 결심
기능들

→ 문제

3일,7일 단위의 블록 선택 없어짐
last 7 days → 오늘을 포함하지 않아야함(모든 코드에 오늘 포함 관련 코드 추가 삽입)

타임존은 서머타임 등으로 인해 매년 여러 개의 버전이 나옵니다. 하지만 각 환경에서 쓰는 버전이 다릅니다. 이를 맞추기 위해 프론트는 날짜 라이브러리의 커스텀 플러그인을 구현하고, 캘린더의 코어부터, 서비스 내의 모든 날짜 연산이 들어가는 곳까지 모두 뜯어고쳐야 했음
- 교훈: 처음부터 … 표준 협정시를 써라
- 추가적으로 표준 협정시(UTC)에 관련하여
  
  타임존을 표준협정시(UTC)를 사용한다는 것은, 시간 데이터를 전 세계적으로 동일한 기준인 UTC를 기반으로 저장하고 관리한다는 의미입니다. UTC(협정 세계시)는 지구상의 모든 타임존이 기준으로 삼는 표준 시간이기 때문에, 이를 사용하면 위치에 관계없이 모든 데이터가 동일한 시간을 참조할 수 있습니다.
  
  표준협정시(UTC) 사용의 의미와 필요성
  1. 일관된 시간 기준: UTC를 기준으로 모든 데이터를 저장하면, 위치에 따라 시간이 달라지지 않고 언제 어디서든 동일한 시간 데이터를 참조할 수 있습니다. 예를 들어, 한국(KST)은 UTC보다 9시간 빠르지만 UTC를 기준으로 하면 시간 데이터를 전 세계에서 일관되게 관리할 수 있습니다.
  2. 타임존 변환의 용이성: 저장된 UTC 시간을 사용자에게 제공할 때, 그들의 지역 타임존으로 변환하여 보여주기만 하면 됩니다. 예를 들어, 한국에서 웹사이트에 접속한 사용자는 UTC에 +9시간을 더한 시간으로 표시됩니다.
  3. 데이터 통합과 비교 용이성: 여러 타임존에서 발생하는 이벤트를 동일한 기준으로 기록하면 비교와 분석이 쉬워집니다. 예를 들어, 다국적 팀이 협업하는 상황에서 미국과 한국에서 동시에 발생한 이벤트의 시간을 비교할 때 UTC를 기준으로 저장된 데이터는 정확한 비교가 가능합니다.
    
    예시
    
    서버에서 이벤트 발생 시간을 UTC로 저장한다고 가정해 봅시다.
  - 한국에서 10월 31일 오후 6시에 저장한 이벤트는 UTC로 변환하면 10월 31일 오전 9시가 됩니다.
  - 데이터베이스에는 UTC 시간인 2024-10-31T09:00:00Z로 저장됩니다.
    
    이후 다른 타임존의 사용자가 이 데이터를 확인할 때 자신의 지역 타임존으로 변환해 보여주면, 전 세계 어디서나 정확한 시간대를 반영한 이벤트 시간을 확인할 수 있습니다.

결과를 먼저 그려보는건 수명이 길어질수록 도움이 됨

세번째 순간: 기술 교체의 순간

→ 이때 등장한게 Recoil

교훈:

유예 전략: 새로운 기술 도입에 앞서 시간을 두고 필요성을 재검토하는 것이 중요함.
거꾸로 생각하기: 특정 기술 도입 여부를 결정할 때 반대 상황을 가정해봄으로써 선택의 편향성을 줄일 수 있음.

[파이썬 뿌시자 프로젝트] tuple, set

Mon, 21 Oct 2024 14:24:33 GMT

# tuple : 읽기 전용, 대신 list보다 읽는 속도가 빠르다!
menu = ("mia", "lena") # 괄호, 콤마
print(menu[0]) # 꺼내서 읽는건 동일하지만, add는 못함!
# menu[0] = 'aa' 이렇게도 불가능!

# 한줄에 여러 변수의 값 정의 가능
(name, age, hobby) = ("mia", 28, "coding") # 이 작업은 튜플이 아니라 변수의 재할당
print(name, age, hobby)
name = "lena"
print(name)
(departure, arrival) = ('김포', '제주')
print(departure, arrival)
(departure, arrival) = (arrival, departure) # 이 작업은 튜플의 언패킹을 이용해 변수의 값을 재할당(새로운 튜플을 생성해서 다시 변수에 대입한 것)
print(departure, arrival)

# 집합(set)
# 중복 안됨, 순서 없음
my_set = {1,2,3,3,3}
print(my_set) # {1,2,3}

# set을 선언하는 방법
javascript = {'mia', 'lena', 'dinah'}
python = set(['mia', 'dido'])

# 교집합 ( & , .intersection )
print(javascript & python)
print(python.intersection(javascript))

# 합집합, 둘다 할수있는 ( |, .union) -> 근데 순서 보장 안됨 ~
print(javascript | python)
print(javascript.union(python))

# 차집합, javascript 할수있지만 python 할 줄 모르는 개발자 (-, .difference)
print(javascript - python)
print(javascript.difference(python))

# python 할줄 아는 사람이 늘어남! (.add)
python.add('luke')
print(python)

# javascript 까먹음 (.remove)
javascript.remove('dinah')
print(javascript)

# 자료구조의 변경 (list, set, tuple)
menu = {'coffee', 'milk', 'juice'} # set
print(menu, type(menu))

menu = list(menu) # list로 변환
print(menu, type(menu))

menu = tuple(menu) # tuple로 변환
print(menu, type(menu))

menu = set(menu)
print(type(menu))

# 문제 풀기
'''
댓글 작성자들 중에 추첨을 통해 1명 치킨, 3명은 커피 쿠폰 추첨 프로그램 작성

조건1. 20명이 작성, 아이디는 1-20
조건2. 무작위로 추첨, 중복 불가 (한명이 치킨 받았으면 커피는 못받음)
조건3. random 모듈의 shuffle, sample 활용
'''

from random import *
lst = []
print(lst)

for num in range(20):
 lst.append(num+1) 
print(lst)

## 나의 답 (반절만 맞음)
shuffle(lst) # 섞는 역할
print(lst)
chicken = sample(lst, 1)
print('치킨', chicken) # 치킨 1개
print('커피 쿠폰',sample(lst, 3)) # 치킨 1개

# 중복 방지를 위해 4명을 미리 뽑고 -> 1,3명을 주면 됨 ㅎㅎ
# 선생님의 답!
users = range(1,21) # 1~20까지 숫자 생성
users = list(users) # list형태로 바꿔야 random 내장함수 쓸수있음
print(users)

# shuffle
shuffle(users)

winners = sample(users, 4) # 4명 뽑음
print(winners)

print("-- 당첨자 발표 --")
print("-- 치킨 당첨자: {0}".format(winners[0]))
print("-- 커피 당첨자: {0}".format(winners[1:]))
print("-- 축하합니다 --")


# 또 다른 접근(차집합)
print(users)
chicken = sample(users, 1)
remain = set(users) - set(chicken)
print(list(remain))
coffee = sample(remain, 3)
print('chicken', chicken)
print('coffee', coffee)

# 셀프체크
'''
문제 : 수강신청중 일부 과목이 중복 신청되는 문제 발생. 중복 과목을 제거하는 프로그램 작성 

조건1 : 신청과목은 리스트로 관리된다
조건2 : 리스트에 같은 과목이 2번 이상 포함된 경우 1개만 남기고 나머지 삭제
조건3 : 출력시 신청 과목의 순서는 변경해도 괜찮다
'''

subjects = ['자료구조', '알고리즘', '자료구조', '운영체제']
subjects = set(subjects) # 중복 안되는 set으로 변경
print(subjects, type(subjects))

subjects = list(subjects)
print(subjects)

- 추가적으로 적어두는 튜플

튜플은 변경이 필요없는 데이터를 묶어 표현할때 사용
가독성 위해 괄호는 쓰는것이 좋음
여러개의 값 리턴시 사용하기도 함
리스트보다 빠른 접근 필요할때 사용
딕셔너리의 키로 사용하기도 함(리스트는 mutable 하므로 키로 못씀)

- 추가적으로 적어두는 집합과 딕셔너리

[도서후기] 나도코딩의 파이썬 입문

Mon, 14 Oct 2024 14:48:25 GMT

사게 된 계기

프론트엔드 개발자로 1년이 조금 넘었는데, 아예 새로운 언어를 배워보고 싶다는 생각이 들어서 사게 되었습니다!

장점

코딩 자율 학습단 이라는 프로그램과 같이 진행할 수 있어서 하기싫어도(?) 억지로 하게 되는 것 같습니다! 역시 처음 공부할때는 스터디만한게 없습니다😘
무료 유튜브 강의 가 너무 잘 되어있습니다! 책을 읽고도 잘 이해하지 못하는 것들은 영상으로 한번 더 볼수 있으니 쉽게 공부할 수 있습니다!

[파이썬 뿌시자 프로젝트] 연산자(operator)

Mon, 14 Oct 2024 14:44:16 GMT

# 산술연산자
# + , - , *, / 

print(1+1)
print(3-2)
print(5*2)
print(6/3) # 대신 이건 2.0으로 실수!

print(2**3) # 거듭제곱 8
print(5%3)  # 나머지 즉 2
print(10%3) # 1
print(5//3) # 몫 즉 1
print(10//3) # 3

# 비교연산자
print(10 > 3) # true
print(4 >= 7) # false
print(10 < 3) # false
print(5 <= 5) #true

print(5 == 7) # false 앞 뒤가 같은지 비교
print(7 != 5) # true 앞 뒤가 다른지 비교

# 논리연산자
print(not(1 != 3)) # false
print((3 > 0) and (3 < 5)) # true (둘 다 true여야 true)
print((3 > 0) & (3 < 5)) # true (and == &)

print((3 > 0) or (3 > 5)) # true (둘 중 하나만 참이어도 true)
print((3 > 0) | (3 > 5)) # true (or == |)

# 단축 평가
print(5 > 4 > 3) # true
print(5 < 6 < 3) # false(이를 단축평가로 표현함, 앞만 봐도 이미 false)

# 문제
print(5 + 3) # 8
print(6 / 3) # 2.0
print(5 % 3) # 2
print(5 < 3 | 7 < 3) # false  

# 연산자의 우선순위
num = 2 + 3 * 4 # 14
num = num + 2 
num += 2 # 위와 동일!
print(num) # 18
num *= 2 # 36
print(num)
num /= 2 # 18.0
print(num)
num -= 2
print(num) # 16.0
num %= 5 # 1.0
print(num)

# 함수로 연산하기
print(abs(-5)) # 절대값 5
print(pow(4, 2)) # 4^2 = 16
print(max(5, 12)) # 12
print(min(5, 12)) # 5
print(round(3.14)) # 3
print(round(4.132, 2)) # 소수점 두번쨰 자리 이하에서(세번째 자리) 반올림, 4.13

# math 모듈
from math import * # math 모듈에 있는걸 다 가져오겠다~
floorNum = floor(4.99) 
print(floorNum) # 내림, 4
ceilNum = ceil(3.14)
print(ceilNum) # 올림, 4
sqrtNum = sqrt(16)
print(sqrtNum) # 제곱근, 4

# 모듈은 이렇게 가져와서 써도된다
import math

result = math.floor(4.56) 
print(result) # 4
result = math.ceil(5.44)
print(result) # 5
result = math.sqrt(36)
print(result) # 6.0

# random 모듈
from random import *
print(random()) # 0.0 이상 ~ 1.0 미만 임의의 값 생성 
print(random() * 10) # 0.0 이상 ~ 10.0 미만 임의의 값 생성 
print(int(random() * 45 + 1)) # 1 이상 46 미만 정수난수 뽑고 싶다면?

# 주어진 범위 안에서 정수인 난수 생성(끝 숫자 미포함)
print(randrange(1,46)) # 1 이상 46 미만
print(randint(1,45)) # 1 이상 45 이하

# 문제 풀이
print(round(0.1357, 2)) # 0.14

# 스터디 날짜 정하기
'''
1. 날짜를 무작위로 뽑는다.
2. 28일까지만 날짜 선정
3. 매월 1~3일은 스터디 준비하니까 제외
4. 형태는 "오프라인 스터디 모임 날짜는 매월 18일로 선정됐습니다"
'''
from random import *
result = randint(4,28) # 4일부터 28일이하
print(f'오프라인 스터디 모임 날짜는 매월 {result}일로 선정됐습니다')

# 온도 단위를 변환하는 프로그램 만들기
'''
1. 온도 저장 변수 만들기
2. 화씨온도 변환하고 새로운 변수저장
3. 출력
'''
temp = 30
hwatemp = (temp * 9 / 5) + 32
print('섭씨온도 :'+str(temp))
print('화씨온도 :'+str(hwatemp))

temp = 10
hwatemp = (temp * 9 / 5) + 32
print('섭씨온도 :'+str(temp))
print('화씨온도 :'+str(hwatemp))

git .... 기억하기 위해 쓰는 게시글

Tue, 08 Oct 2024 13:34:11 GMT

echo : 주로 텍스트 출력하거나 파일을 생성하고 기록하는데 사용 echo "This is a test." > test.txt "This is a test"라는 문장을 test.txt 라는 파일에 생성하면서 저장
git add git add practice.py 해당 파일의 현재 상태가 커밋 대기 상태로 이동하게 됨
git commit git commit -m "first commit"
m는 메세지
git push origin main origin: 일반적으로 원격 저장소의 기본 이름 main: 푸쉬할 브랜치의 이름!

[파이썬 뿌시자 프로젝트] 자료형과 변수

Tue, 08 Oct 2024 13:00:31 GMT

# 자료형 : number, string, boolean

# number
age = 23
print(age)

# string
name = '미아'
print(name)

# number + string
# f를 사용할 떄
print(f'{name}의 나이는 {age}야')
# +를 사용할 때(boolean, number는 둘다 str을 붙여야한다~!)
print(name+ '의 나이는' + str(age) + '야')
# ,를 사용할 때 (무조건 띄어쓰기를 포함한다)
print(name,'의 나이는',age,'야')

# boolean
is_adult = age > 20
print(f'{name}은 아무래도 어른일까요? -> {is_adult}')

# 형변환하기
# str()처럼 int(): 정수형태로 형변환, float(): 실수형태로 형변환

# 다음은 모두 3으로 출력됨 -> 오로지 숫자로 된 문자열만 출력 가능!
print(int("3"))
print(int(3.5))
# 다음은 소수점이 들어간 실수로 출력됨
print(float("3.5"))
print(float("3"))

# 주석 처리!
''' 작은 따옴표로 둘러싸면 한번에 주석처리'''

# 변수를 이용해서 다음 문장을 출력하시오
stations = ['사당', '신도림', '인천공항']
for station in stations:
    print(f'{station}행 열차가 들어오고 있습니다.')

# 자료형 확인할떄 type()
# 결과값은  /  /  이런식으로 출력됨
print(type(3))

젭라 저를 인프콘에 데려가주세요

Fri, 12 Jul 2024 11:44:04 GMT

신입개발자 1년 1개월 ..... 개발자들과의 네트워킹에 목말라 있습니다. 프론트엔드 개발자로 일하면서 새로운 개념에 접할 때 마다 개가티 인프런을 찾아 매번 강의를 들으면서 일했읍니다 ... 이번에도 염치불구하고 인프콘에서 새로운 개념들을 학습하겠습니다.

인생에 이토록 간절히 원한 이벤트가 없습니다....

인프콘에 응모하고 떨어진 날 하루종일 엉엉 울고싶은 마음이었습니다(정말로 ..)

사실 이 메세지를 읽진 않으셨지만 제 기도에 응답해준것 마냥(아님) 이벤트를 열어주심에 정말 감사드리며 이 글을 작성합니다.

제발 저를 인프콘에 데려가주세요 ....

시간표도 물론 준비되어있습니다 ... 헤르미온느 마냥 열심히 참여하겠읍니다 ...

제일 중요한!!! 이벤트 참여 !!!

https://www.rallit.com/hub/resumes/170948/%EC%9D%B4%EA%B2%BD%EB%AF%B8?isExpanded=true

=> 저를 꼬옥 뽑아주세요 .......

[러닝타입스크립트]3. 유니언과 리터럴

Mon, 24 Apr 2023 10:07:12 GMT

사전에 알아두면 좋을 기본 타입

/* ts의 문자열, 숫자, 배열 기본타입*/
// js 문자열 선언
var str = 'hello';
// ts 문자열 선언
let str2: string = 'hello';
const num: number = 2;
// ts 배열 선언
let arr: Array = [1,2,3]; // arr에는 배열(A는 대문자여야함), 그 안에는 숫자만 들어갈 수 있다.
let arr2:Array = ["a",2]; // 이러면 에러다
// 배열 리터럴 사용해서 선언
let items: number[] = [1,2,3];

// ts 튜플(tuple)
let address: [string,number] = ['gangnam', 12] // 요런식으로 배열의 규칙까지 정해주는것, 요소의 타입과 개수가 고정된 배열을 표현할 수 있음

// ts 객체
let obj: object = {};
let person:object = {
    name: 'gyoengmi',
    age:100
} // 위에서 지정한대로만하면 어떤 속성이든지 상관 x , 객체이기만 하면된다

// 하지만 
let person2:{name: string, age: number} = {
    name:"gyoengmi",
    age:100
} // 이런식으로 타입을 지정해두면 무조건 속성이 있어야만 오류를 안낸다!

// 진위값
let show:boolean = true;

3. 유니언과 리터럴

유니언 : 값에 허용된 타입을 두개 이상의 가능한 타입으로 확장하는 것
내로잉 : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것
3.1 유니언 타입
```
let mathmatician = Math.random() > 0.5 ? undefined : "a";
// 값이 어떤것이냐에 따라 달라질수 있다
```
'이거 혹은 저거' 같은 타입 => 유니언 이라고 한다.
타입스크립트는 | 를 사용해 유니언 타입을 나타낸다.

3.1.1 유니언 타입 선언이 언제 필요해!

=> 변수 초깃값이 존재하더라도 명시적(분명한) 타입 애너테이션 제공하는것이 필요할때!

유니언 타입의 순서는 중요하지 않다.

3.1.2 유니언 속성

✔ 값이 유니언 타입일때 타입스크립트는 모든 타입에 존재하는 속성에만 접근가능.
```
let physicist = Math.random() > 0.5 ? "Marie Curie" : 84;
physicist.toString(); // OK, number와 string 모두 사용가능
physicist.toUpperCase();
// Error: Property 'toUpperCase' does not exist on type 'string | number'
```
=> 근데 만약 내가 유니언 타입으로 정의된 타입들 중 하나의 속성만 사용하고 싶다면! => 내로잉 과정을 사용해야함

3.2 내로잉

내로잉

타입의 범위를 좁히는 과정
값이 이전에 유추된 것보다 더 구체적 타입임을 유추하는것

타입검사

이때 타입을 좁히는 데 사용할 수 있는 논리적 검사

내로잉을 하는 방법들💨

3.2.1 값 할당을 통한 내로잉

let admiral: number | string = "grace"; 
// 📌admiral이 string이므로 narrowing 한것
admiral.toUpperCase(); // OK: String

admiral = 23; 
// 📌admiral이 number이므로 narrowing 한것
admiral.toFixed(); // OK

3.2.2 조건 검사를 통한 내로잉

if문으로 변수값 좁히는 방법

let scientist = Math.random() > 0.5
  ? "Frank"
  : 51;

if(scientist === "Frank") { scientist.toupperCase(); // OK }

scientist.toupperCase(); // 📌Error 유니언타입 두가지 다 만족해야함

### 3.2.3 typeof 검사를 통한 내로잉
- `typeof`연산자 사용하여 타입 좁히기 = 실용적 방법!

let something = Math.random() > 0.5 ? "leekoby" : 1;

// type이 number 일 때로 타입 좁히기 if (typeof something === 'number') { something.toFixed(); } // type이 string 일 때로 타입 좁히기 if (typeof something === 'string') { something.toUpperCase(); }

// ! 를 사용한 논리 부정과 else 문도 가능 // type이 number 일 때로 타입 좁히기 if (!(typeof something === 'number')) { something.toUpperCase(); } else something.toFixed(); // type이 string 일 때로 타입 좁히기

// 삼항연산자도 사용가능 typeof something === "string" ? something.toUpperCase():something.toFixed()

// ❌ Error : Property 'toUpperCase' does not exist on type 'number'. something.toUpperCase();

## 3.3 리터럴 타입
- 리터럴타입: 좀 더 구체적인 버전의 원시타입(원시타입 값 중 어떤것이 아닌 `특정 원싯값`으로 알려진 타입!)

let name = "mia"; // 📌이 변수의 타입은 string이 아닌 "mia" 다

- 원시 타입에는 무한한 수의 리터럴 타입이 있다.
> boolean: true | false
number: 0 | 1 | 2 | 3 | 0.1 | 0.2 | …
string : “” | “a” | “b” | “ab” | “adkdfo” | …

### 3.3.1 리터럴 할당 가능성
- 동일한 원시타입이어도, 서로 다른 리터럴 타입은 할당할 수 없다

let name: "mia" = "mia"; // type이 "mia", 할당한값도 "mia" something = "you"; // 📌 Error: Type '"you"' is not assignable to type '"mia"'.

- 리터럴 타입은 원시값에 할당 가능 ⭕
- 원시값은 리터럴 타입에 할당 불가 ❌

## 3.4 엄격한 null 검사

- 자바스크립트는 타입이 필요한 위치에 `null값`을 허용한다!
(= 이를 십억달러의 실수라고 부르기도 한다, 이때문에 수많은 오류, 취약성 및 시스템 충돌이 발생했기 때문)

#### strictNullChecks 활성화하는 방법
![](https://velog.velcdn.com/images/gyeongmi_lee/post/336aeb84-7ccd-4318-b6f5-3e2af69b3333/image.png)

// ❌ strictNullChecks let name: string; console.log(name.length); // No error, but runtime error

// ⭕ With strictNullChecks let name: string | null; console.log(name.length); // Error: Object is possibly 'null'.

### 3.4.2 참 검사를 통한 내로잉

- 자바스크립트에서 false, 0, -0, "", null, undefined, NaN 등 `falsy`로 정의된 값을 제외한 모든 값은 참이다
=> 이를 이용해서 검사할 수 있음!

let okk = Math.random() > 0.5 ? "mia" : undefined; //undefined는 falsy값

if(okk){ sth.toUpperCase(); //✅ } okk.toUpperCase(); // ❌ Error : okk' is possibly 'undefined'.

>=> `&&`와 `?` 또한 가능하지만 이의 단점으로는
1. 참 여부 확인 회의 다른 기능 제공하지 않음
2. falsy값이 ""라면 빈문자열인지, undefined인지 알수 없음

### 3.4.3 초기값이 없는 변수
- 자바스크립트에서 초기값이 없는 변수는 `undefined`가 된다
- 타입스크립트에서 할당하지 않은 (초기값 없는) 변수 사용하려고 하면 => 오류 발생

let sth: string; sth.length; // ❌ Error : Variable 'sth' is used before being assigned.

let someth: string | undefined; // 변수 타입에 undefined가 포함되어있는 경우에는 오류 보고 안됨

someth?.length; //✅

someth = "leekoby"; someth.length; // ✅


## 3.5 타입 별칭
#### 타입별칭
- 재사용하는 타입에 더 쉬운 이름을 할당하는것
- 사용 방법
> type 새로운이름 = 타입
=> pascalCase로 작성

type sth = string | name; let something: sth = "mia";

type sth2 = boolean | number | string | null | undefined; let first: sth2; let second: sth2; let third: sth2; // ⭕ 훨씬 간단한 형태!

console.log(sth2); //❌ Error : 'sth' only refers to a type, but is being used as a value here.

=> 타입별칭은 자바스크립트엔 없다!
=> 컴파일되지 않는다!


### 3.5.2 타입 별칭 결합
- 타입 별칭은 다른 타입 별칭을 참조할 수 있다!

[타입스크립트 입문] 기본타입들

Mon, 24 Apr 2023 08:54:14 GMT

/* ts의 문자열, 숫자, 배열 기본타입*/
// js 문자열 선언
var str = 'hello';
// ts 문자열 선언
let str2: string = 'hello';
const num: number = 2;
// ts 배열 선언
let arr: Array = [1,2,3]; // arr에는 배열(A는 대문자여야함), 그 안에는 숫자만 들어갈 수 있다.
let arr2:Array = ["a",2]; // 이러면 에러다
// 배열 리터럴 사용해서 선언
let items: number[] = [1,2,3];

// ts 튜플(tuple)
let address: [string,number] = ['gangnam', 12] // 요런식으로 배열의 규칙까지 정해주는것, 요소의 타입과 개수가 고정된 배열을 표현할 수 있음

// ts 객체
let obj: object = {};
let person:object = {
    name: 'gyoengmi',
    age:100
} // 위에서 지정한대로만하면 어떤 속성이든지 상관 x , 객체이기만 하면된다

// 하지만 
let person2:{name: string, age: number} = {
    name:"gyoengmi",
    age:100
} // 이런식으로 타입을 지정해두면 무조건 속성이 있어야만 오류를 안낸다!

// 진위값
let show:boolean = true;

[PL-900] 파워플랫폼 기초과정 3주차

Tue, 11 Apr 2023 06:00:16 GMT

https://blog.naver.com/ilovehandson/222419854150 => 참고!

캔버스앱에서는 레이아웃 완전 제어 가능 / 모델기반앱에서는 추가하는 구성요소에 의해 대부분 레이아웃 결정됨! => 데이터를 빠르게 보고 의사결정 내리는데 더 중점을 둔다

=> 즉 데이터!!! 중요 !!!!

[PL-900] 파워플랫폼 기초과정 2주차

Tue, 11 Apr 2023 01:20:28 GMT

https://blog.naver.com/ilovehandson/222416558156 https://learn.microsoft.com/ko-kr/training/modules/build-app-solution/2-learn-basic-elements

Canvas App

Power Apps에는 화면, 입력, 갤러리, 양식 등을 포함하여 솔루션을 빌드하기 위한 다양한 구성요소가 있다!

1. Power Apps Studio

power apps studio는 앱을 빌드하는데 사용하는 웹 인터페이스의 이름(다운이나 설치가 필요하지않다!)

2. App format

앱을 만드는 첫번째 단계는 앱 형식을 선택하는것!

mobile
tablet => 한번 셋업을 하면 바꿀 수 없다!

3. Gallery

갤러리 컨트롤은 데이터 테이블의 행을 표시하는데 사용!
사용자의 요구에 맞게 사용자정의할 수 있는 템플릿에 의해 행 표시가 정의(이를 통해 표시되는 열과 형식 지정 방법 제어가능) => 파워앱스는 이 탬플릿을 데이터의 모든 행에 자동으로 적용!

4. Forms

form은 종종 갤러리에서 선택한 항목을 기반으로 하는 특정 레코드 작업에 중점!(사용자는 갤러리 탐색 => 원하는 행을 찾아 선택해 양식의 세부 정보를 본다) => 갤러리와 폼은 이미 구조적으로 만들어져있는 형태!

5. Input Controls

커스터마이징!
앱을 사용자 지정할때 최대한 유연성 허용위해 => 다양한 입력 컨드롤 존재(ex. 텍스트입력, 버튼, 드롭 다운, 토글, 날짜 선택기 및 슬라이더)
이러한 컨트롤을 => 갤러리, 양식 및 화면에 추가할 수 있다

6. Intelligent Controls

카메라, 바코드 스캐너, gps 및 기타 하드웨어 기능에 엑세스 할 수 있는 하드웨어 기반 컨트롤
코드 작성하지 않고도, 앱에 인공지능 추가할 수 있는 명함 판독기 또는 객체감지기 같은 서비스 지원 컨트롤도 있음

7. Functions

모든 컨츠롤, 입력 및 데이터 소스 묶는 !! like 접착제
하나 이상의 함수를 사용하여 앱에서 수식 만들기 삽가능
excel 함수와 유사! 데이터 원본으로 데이터 보내기, 정보 서식 지정, 애니메이션 만들기 같은 작업에 사용할 수 있다!!!!!!!

데이터 원본 연결하기

대부분의 비즈니스 앱은 테이블 형태의 데이터를 다룸

어떻게 진행할거냐면요

1) Power Apps로 채울 수 있는 비즈니스 요구사항식별 2) Power Apps에서 필요한 데이터에 연결 3) 최종 사용자가 데이터와 상호작용하여 비즈니스 요구사항 충족할 수 있도록 컨트롤, 버튼 및 사용하기 쉬운 인터페이스 사용해 앱 설계 4) 앱 저장 및 게시 및 기능 테스트 5) 사용자와 앱 공유!

1. power apps에서 캔버스로 열기

그전에 => onedrive에 저장

=> canvas 앱에서 연결

엑셀파일에 뭐있냐면

id
title
subtitle
description

=> 만들어진 것을 볼 수 있음!(데이터를 읽어서 대략 만들어준것임!)

=> 모바일로 열수있음 왕 개쩐다..

=> 사용자의 요구에 맞게 사용자정의할 수 있는 템플릿에 의해 행 표시가 정의(이를 통해 표시되는 열과 형식 지정 방법 제어가능)

=> 요 하나하나가 갤러리 컨트롤 안에 들어있는 서브 컨트롤!

=> 이렇게 3가지 화면으로 구성되어있고! 각 안에 속성으로 구성되어있는 구조!!

커스터마이징 해보자!

보이는갤러리 방식 바꾸기

=> ThisItem.Address => ThisItem.Title로 바꾸기

=> 이렇게 하면 보여지는 부분 좀 더 늘릴 수 있겠다!

=> self와 ThisItem의 차이!(수식넣을땐 self 쓰는듯)

다른 데이터도 연결가능하다~

=> office 365 outlook 같은 다른 데이터도 연결 가능하다! (데이터 추가를 꼭 눌러야한다!)

Detail Screen

필드 추가할것임

=> 추가완! (근데 스크롤 생김) => 드래그 앤 드랍으로 조절 가능

Edit Screen

=> 여러줄 보이게

=> 이건 그냥 해본것 TrueText / FalseText 속성 있다!

function 사용하기

https://blog.naver.com/ilovehandson/222419637480

데이터 필터링
데이터 유효성 검사
데이터 계산 ..

=> 엑셀함수와 유사하게 사용가능하다!

많이 쓰이는 함수들

Filter
Match : 주어진 패턴을 따르는지 확인 가능/ 이를 사용하여 사용자가 올바른 형식의 이메일 주소를 입력했는지 확인하고, 입력하지 않은 경우 유효한 이메일이 필요하다는 경고 표시 가능! (즉, 조건부 서식에 적합)
Distinct : 데이터 목록에서 고유한 값 반환 가능 / 사용자에게 주어진 열에 대해 유효한 값만 표시하는 동적 드롭다운을 쉽게 만들 수 있다
Math functions: Sum / Average와 같은 단순 데이터부터, 복잡한 공식까지 포함!(radian사용하는 Atan , Sin 등등)

=> 추가적으로 학습하면 좋은 자료 https://learn.microsoft.com/ko-kr/training/paths/use-basic-formulas-powerapps-canvas-app/

앱 공유하기

https://blog.naver.com/ilovehandson/222419715900

개인별 공유
전체 공유
특정 그룹 대상 공유(보안 그룹) => 보안그룹 / 개별 공유 둘다 있으면 어떤게 우선? 개별 공유가 우선!(그룹 해제여도 개별로 되어있으면 볼 수 있다고함) => 공유 받는 계정은 반드시 파워 앱 라이센스가 있어야한다.

=> 나는 이메일 아는 사람이 없어서 아직... 못보내는데 암튼간에 이런식으로 작성하면 됨

knowledge check!

=> 갤러리 복합적인 데이터 보여줄때 => form 형식은 각각의 개별 레코드를 보여줄때/ 수정할때 좋음! => input 컨트롤은 복합데이터~ => 미디어: 하드웨어와 직접적으로 연관될때 쓰임 (ex. 바코드 스캐너)(미디어 컨트롤 안에 intelligent control이 들어있음)

추가적으로

=> 아이콘 또한 변경 가능하다

[엑셀정복] Excel이란✔️

Mon, 10 Apr 2023 11:28:42 GMT

원페이지 보고서의 가장 좋은 방법이다!

[파워플랫폼 기본 사항] 모델 기반 앱

Mon, 10 Apr 2023 06:13:05 GMT

참고 : https://blog.naver.com/ilovehandson/222419854150 (local - lab3 모델 기반앱으로 주문 관리 만들기)

모델 기반 앱 소개

모델 기반 앱 디자인 : 대시보드, 양식, 보기 및 차트를 앱에 추가하는데 초점을 맞춘 접근 방식 => 코드가 거의 또는 전혀없이 간단하거나, 매우 복잡한 앱을 빌드 할 수 있다!
캔버스 앱에서 제작자는 앱 레이아웃을 완조니 제어가능!
반면 모델 기반 앱에서는 구성요소에 의해 대부분의 레이아웃 결정됨 => 복잡한 앱 디자인 대신 비즈니스 데이터를 빠르게 보고 의사결정 내리는데 더 중점 둔다!

실습내용

모델 기반 앱(Machine Orders) 만들기
Machine Orders에 procurement(=가공) 열 추가! => 이 과정에서 비즈니스 프로세스 흐름을 만들었다!
비즈니스 프로세스 흐름 만들기
조건 분기 추가
양식수정
보기수정 => 이런식으로 보여지는 방식을 수정함!
앱 테스트

[PL-900] 파워플랫폼 기초과정 1주차

Mon, 10 Apr 2023 02:11:10 GMT

https://learn.microsoft.com/ko-kr/training/modules/introduction-common-data-service/1-introduction => 참고 DOCS ko / en 버전! https://learn.microsoft.com/en-us/training/modules/introduction-common-data-service/1-introduction

커넥터란

MS 파워플랫폼에서 다양한 데이터 소스 및 애플리케이션에 연결할 수 있는 프리미엄 및 표준 연결 모듈! ex. Salesforce, Dynamics 365, Dropbox, Gmail등 다양한 애플리케이션과 데이터 소스에 연결 가능

Action

커넥터를 통해 애플리케이션에서 수행할 작업을 정의 ex. dynamics 365 커넥터에서 "새로운 고객 만들기" 액션 수행 가능

Trgger

특정 이벤트가 발생하면 실행되는 작업 ex. 새로운 이메일이 수신되었을 때, OneDrive에 파일이 업로드되었을 때 등과 같은 이벤트가 트리거될 수 있습니다.

=> 이들은 비즈니스 프로세스 자동화 구축, 실행하는데 중요한 역할

데이터 보호!

=> 가능하다

https://learn.microsoft.com/ko-kr/training/modules/introduction-power-platform/10-knowledge-check => knowledge check

사용자 지정 커넥터

ex.

구글 맵스 api 만들어서 연결하거나!
로그인 api 가져오거나!

데이터 원본

json(javascript object notation)은 트리구조이다! (데이터를 계층적 형식으로 나타내기 때문에) => json데이터는 이름과 값의 쌍으로 이루어진다. => , 로 나열 => 객체는 중괄호로 둘러쌓아 표현 / 배열은 대괄호로 둘러쌓아 표현

=> ✨중요한건 JSON은 데이터를 나타내는 트리 구조를 사용하여 데이터를 효율적이고 체계적으로 저장하고 검색할 수 있게한다. 대부분 프로그래밍 언어에는 트리와 같은 데이터 구조를 지원하므로 프로그래밍 언어 사용하여 데이터를 쉽게 구문 분석하고 조작할 수 있다!

Dataverse 소개 : 범주와 서비스 내용

MS Dataverse?

파워플랫폼에서 사용되는 데이터 플랫폼. 엔터프라이즈급 애플리케이션에서 사용되는 데이터를 저장, 분석, 관리하는데 사용! => Ms Dataverse는 안전하고 규정 준수 방식으로 상호 연결된 애플리케이션 및 프로세스를 지원하도록 다양한 데이터 및 비즈니스 논리를 쉽게 구조화하는 클라우드 기반 솔루션! => 인터넷 연결 필요

환경에 대해 알아보기

Tenant : ms 클라우드 서비스를 사용하는 조직 또는 엔터프라이즈를 나타내는 용어(세포의 오그같은 개념인듯)
환경: Ms Power Platform 에서 조직의 비즈니스 데이터, 앱, 흐름을 저장, 관리, 공유하는데 사용됨. (환경에서는 사용자 액세스, 보안 설정 및 해당 데이터베이스와 연결된 스토리지 관리 가능) => 환경은 테넌트 아래 만들어짐. 사용자는 각 테넌트 내에서 해당 리소스에만 액세스 가능~ => 환경은 지역에 따라 나뉘어질수있고, 목적에 따라 나뉘어질 수 있음

비즈니스 규칙 검색

내가 비즈니스에 필요한 조건을 붙여넣는것! => ex. 승인을 받을때는 무조건 vp 승인자 입력 요청을 받아야해!라는 조건을 걸어둔것 => 전체 테넌트에 조건이 걸리는것(관리가 쉬움!) 장점 : 확장성

어떻게 하는데!

파워앱스 > 설정 > 관리센터

시작하려면 먼저 Ms Dataverse에서 표준화된 클라우드 기반 데이터베이스 인스턴스 하나 이상 만든다! (db에는 거의 모든 조직과 비즈니스에서 일반적으로 발견되는 데이터를 저장하는 미리 정의된 테이블과 열이 포함되어있다!)

dataverse의 테이블 형식

(강의에선 복합이었는데 바뀐듯?)

관계 이해

판매 주문을 관리하는 시스템을 만들어야 한다고 가정.

보유중인 재고, 항목의 비용 및 판매 가격과 함께 제품 목록이 필요.
주소 및 신용등급이 포함된 마스터 고객 목록도 필요.
청구서 데이터를 저장하는데 도움이 되도록 작성한 판매 청구서 관리해야함(날짜, 청구서 번호 및 판매원과 같은 정보, 주소 및 신용등급을 포함한 고객정보, 청구서의 각 항목에 대한 품목 포함!)

=> 이 기능 지원 위해서 단일 테이블 만드는것은 비효율적

고객
제품
송장
품목 => 4개의 테이블 만들기, 분할로 만들고 서로 관련시키면 효과적으로 만들 수 있다~

일대다 관계 : 부모-자식 관계

청구서 테이블(부모) / 품목 테이블(자식) => 청구서 테이블의 unique한 열(고유한 열! = 키!) => 동일한 값이 관련된 자식행에 저장 (자식 행이 부모 키 값을 저장하는데 사용된 경우 = 외래키

=> Ms Dataverse에는 대부분 조직에 필요한 여러 테이블들이 이미 포함되어있다! 표준 테이블을 사용하고 확장하면 솔루션에 사용되는 검증되고 스케일링 가능한 데이터 저장 방법 기반으로 솔루션 빌드 가능~

지식 확인

비용센터 : 번호를 채워야함...! => 얘를 잊지않도록 해야하니까 조건 걸어두는것임!

Power Apps

사용조건이 있음! : 테넌트 조직에 따라 갈린다! (포털앱은 누구나 사용가넝, 캔버스앱 / 모델기반 앱은 테넌트 내에서만 사용가능하다) => 모델기반앱 : 데이터를 중심으로 하는 앱(데이터 논리구조, 보안만 신경쓰면됨!)

출석 앱 만들어보기

https://blog.aliencube.org/ko/2020/04/01/capturing-images-from-browser-to-azure-blob-storage-via-azure-functions/ https://blog.aliencube.org/ko/2020/04/15/building-online-check-in-app-with-power-apps/

[러닝타입스크립트]2. 타입 시스템

Sun, 09 Apr 2023 09:20:21 GMT

또 까먹은 js파일 console로 찍는법

https://velog.io/@akwnsldj1/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8Javascript-%ED%99%95%EC%9E%A5%EC%9E%90-.js%ED%8C%8C%EC%9D%BC%EC%97%90%EC%84%9C-%EC%BD%98%EC%86%94%EC%B0%BD-%EC%B6%9C%EB%A0%A5%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

자바스크립트의 힘은 유연함에서 나온다! 유연함 조심!

=> 타입스크립트는

1) 코드가 작동하는 방식을 이해하고 2) 오류가 있는 부분을 알려주는 타입 검사기의 역할을 한다! (지난 1장에서 살펴봄 ~)

그니까 그거 어케하는건데

2.1 타입의 종류

let singer = "ME!";

마우스 오버하면 string타입이라고 알려줌!
타입 : 자바스크립트에서 다루는 값의 형태에 대한 설명 (여기서 형태란, 값에 존재하는 속성과 메서드 그리고 내장되어있는 typeof 연산자가 설명하는것을 의미)

일곱가지의 원시타입

null
undefined
boolean
string
number
bigint
symbol

2.1.1 타입 시스템

타입 시스템 ❓: 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합

=> 어케 작동하냐면요!

코드를 읽고 존재하는 모든 타입과 값을 이해한다
각 값이 초기 선언에서 가질 수 있는 타입을 확인
각 값이 추후 코드에서 어떻게 사용될 수 있는 지 모든 방법을 확인
값의 사용법이 타입과 일치하지 않으면 사용자에게 오류 표시!

2.1.2 오류 종류

구문 오류 : 타입스크립트 => 자바스크립트로 변환되는 것을 차단한 경우
```
let let wat;
// Error: ',' expected.
```
타입 오류 : 타입 검사기에 따라 일치하지 않는것이 감지된 경우
```
console.blub("Notiong");
// Error: Property 'blub' does not exist on type 'Console'.
```

2.2 할당 가능성

타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정한다. ex. 첨 string => 재할당 string 문제 안되지만, string => boolean은 안된단 소리
즉, 전달된 값이 예상된 타입으로 할당 가능한지 여부를 할당 가능성이라고 함

let lastName = "mia";
lastName = true;
// Error : type "boolean" is not assignable to type "string".

2.3 타입 애너테이션

초깃값이 없는 경우라면 타입 애너테이션을 이용해 타입 지정가능.
초기값을 유추할 수 없는 변수는 진화하는 any라고 부른다

let myName: string;
myName = "mia";
myName = 22; // Error : "number"은 "string" 형식에 할당 할 수 없다.

타입스크립트는 초깃값을 할당하지않고도 변수의 타입을 선언할 수 있는 구문인 type annotation을 제공!
타입애너테이션은 타입스크립트에만 존재하며, 런타임 코드에도 영향 주지 않고 유효한 자바스크립트 구문도 아님!
명시적 타입정의(타입 애너테이션)는 타입스크립트가 자체적으로 수집할 수 없을때만 사용하는것이 좋다.

2.4 타입 형태

타입스크립트는 해당 변수의 타입에 사용하려는 속성이 존재하는지도 확인한다.
```
let rapper = "Queen";
rapper.length; // OK
```

rapper.push('!'); // Error: Property 'push' does not exist on type 'string'


### 2.4.1 모듈
- ECMA 스크립트 2015에서는 import, export 구문을 표준화하기위해 `모듈`이 추가됨!
- `모듈` : export 또는 import가 있는 파일
- `스크립트` : 모듈이 아닌 모든 파일!

=> 모듈은 전역 스코프가 아닌 자체 스코프 내에서 실행됨!
(즉 모듈 내에서 선언된 변수, 함수, 클래스 등은 export 양식중 하나를 사용하여 명시적으로 export하지 않는 한 모듈 외부에서 보이지 앟음)
- 즉 export한 변수, 함수, 클래스, 인터페이스 등을 사용하기 위해서는 import양식중 하나를 사용하여 import 해야함!

![](https://velog.velcdn.com/images/gyeongmi_lee/post/6d311e32-14dd-43c1-a03e-e180694c8f59/image.png)

import {value} from "./values"; export const doubled = value * 2;


1. 모듈 : 한 모듈에서 다른 파일에 선언된 변수와 동일한 이름으로 선언된 변수는 다른 파일의 변수를 가져오지 않는 한 이름 충돌로 간주하지 않는다!

// a.ts export const myName = "Lee";

// b.ts expoprt const myName = "Lee";

// c.ts import { myName } from "./a"; console.log(myName);


2. 스크립트 : 파일이 스크립트라면 해당 파일을 전역 스코프로 간주하므로! 모든 스크립트가 파일의 내용에 접근 가능이다. 즉, 스크립트 파일에 선언된 변수는 다른 스크립트 파일에 선언된 동일 이름 가질 수 없다!!

// a.ts const myName = "Lee" // Error : Cannot redeclare blok-scoped varible "myName".

// b.ts const myName = "Lee"; // Error : Cannot redeclare block-scoped varible "myName".

// a.ts && b.ts const myName = "Lee";
export {}; ```

[러닝 타입스크립트]1. 자바스크립트에서 타입스크립트로

Mon, 03 Apr 2023 12:34:34 GMT

타입스크립트

타입스크립트는 4가지로 설명된다

프로그래밍언어: 자바스크립트의 모든 구문과, 타입을 정의하고 사용하기 위한 타입스크립트 고유 구문이 포함된 언어
타입 검사기: 자바스크립트 및 타입스크립트로 작성된 일련의 파일에서 생성된 모든 구성요소(변수, 함수 등)를 이해하고, 잘못 구성된 부분을 알려주는 프로그램
컴파일러: 타입 검사기를 실행하고 문제를 보고한 후 이에 대응되는 자바스크립트 코드를 생성하는 프로그램
언어 서비스: 타입 검사기를 사용해 비주얼 스튜디오 코드와 같은 편집기에 개발자에게 유용한 유틸리티 제공법을 알려주는 프로그램

공식 웹사이트

https://www.typescriptlang.org/ko/play => 공식 웹사이트는 플레이그라운드 편집기를 제공!

바벨이 뭐였더라

바벨 : 바벨은 최신버전의 JavaScript 코드를 모든 브라우저에서 실행할 수 있는 이전 버전으로 변환하기 위해 웹 개발자가 사용하는 인기있는 오픈 소스 도구!

=> 바벨은 코드의 다른 부분을 변환하는 데 사용할 수 있는 플러그인이라는 기능을 활용하여 이를 달성한다!

그니까 타입스크립트에서 바벨쓰는이유~

Babel은 개발자가 최신 JavaScript 코드를 작성한 다음 모든 브라우저에서 지원하는 이전 버전의 JavaScript로 변환할 수 있는 도구입니다. Babel은 코드의 다른 부분을 변환하는 데 사용할 수 있는 "플러그인"이라는 기능을 활용하여 이를 달성합니다. TypeScript는 유형 주석 및 기타 기능을 언어에 추가하는 JavaScript의 상위 집합입니다. TypeScript 컴파일러를 사용하여 TypeScript를 JavaScript로 변환할 수 있지만 Babel이 필요한 경우가 여전히 있을 수 있습니다. TypeScript와 함께 Babel을 사용하는 한 가지 이유는 Babel이 제공하는 고급 변환 플러그인 중 일부를 활용하기 위해서입니다. 예를 들어 Babel을 사용하여 TypeScript에서 아직 지원하지 않는 실험적인 JavaScript 기능을 변환할 수 있습니다. TypeScript와 함께 Babel을 사용하는 또 다른 이유는 출력 코드가 최신 JavaScript 기능을 지원하지 않는 브라우저를 포함하여 모든 브라우저와 호환되도록 하기 위해서입니다. Babel은 특정 버전의 JavaScript를 대상으로 구성할 수 있으므로 개발자는 최신 구문을 사용하여 코드를 작성하면서 이전 브라우저에서도 실행할 수 있습니다. 전반적으로 TypeScript와 함께 Babel을 사용하면 개발자에게 출력 코드에 대한 더 많은 유연성과 제어 기능을 제공하는 동시에 더 넓은 범위의 브라우저와 호환되도록 할 수 있습니다.

로컬에서 시작하려면

Node.js가 설치되어있다면 타입스크립트를 실행 할 수 있다!

[MySQL] 데이터베이스란?

Tue, 21 Mar 2023 08:44:43 GMT

MySQL

RDBMS(Relational Database Management System)

데이터베이스란?

한곳에 저장된 정보들을 원하는 어떤 곳에서든 사용할 수 있다는것 => 즉 특정 소프트웨어나 프로그램에 종속되지 않고 독립된 정보의 집합 내지 저장소

🙌 즉 데이터베이스 자체는 빈창고나 캐비넷처럼 별다른 기능이 없다! => 원하는 기능들을 넣어서 자판기처럼 만들어둔것이 => DBMS (Database Management System)

SQL이란?

Structured Query Language를 사용해서 정보를 입력, 조회, 수정, 삭제하는 등 데이터를 관리할 수 있도록 제공하는 방식이 있다!

MySQL에 정보가 저장되는 방식

EX. 백화점에 푸드코드가 있고, 거기서 사먹을수 있는 메뉴의 정보를 데이터베이스로 정리해서 서버에 저장하려고 한다면?

=> 방법1: 폴더 만든 후 > 메뉴마다 정보들을 TXT파일로 적어서 > 폴더에 저장 ✔ 실제로 MONGODB에서 이런 방식들을 사용한다! ✨ 문제: 저장하는 데이터형식이 다른 문제를 야기할수 있고 => 이는 오류를 일으킨다.

=> 즉! 데이터 형식을 맞춰줄 필요가 있다! LIKE 표처럼! => 이럴때 사용하는 방식이 DBMS (Database Management System)

근데 MySQL은 RDBMS!

Relational이란 관계형! 이라는 뜻 => 중복되는 데이터가 있을 경우, 비효율과 오류의 소지가 많음

=> 이 테이블을 적절히 분리해야함!

어떻게 알아보는데?

=> id 즉 고유한 값으로 알아본다 (너무 알아보기 불편함)

이때 등장한게 Join

Join : 분리된 여러 테이블들을 이어주는 기능

그니까

관계형은 SQL, 비관계형은 NoSQL 데이터베이스다.

https://www.yalco.kr/lectures/sql/ => 보조교재!

[CS] 클라우드의 이해 IAAS, PAAS, SAAS

Wed, 08 Mar 2023 05:27:29 GMT

영상 참고 https://youtu.be/7TLUmbpU9qY

클라우드

클라우드: '인터넷'을 통해 접근할 수 있는 서버, 그 안에서 구동되는 소프트웨어, 데이터베이스 의미

=> 즉 사진처럼 나의 컴퓨터 장비를 사용하지 않고 컴퓨터 장비를 통해 구축해야할 작업을! 온라인에 분산되어 존재하는 데이터센터(이하 클라우드)에 맡겨 수행하는것!

✔️ 당연히 서버를 직접 구매해서 쓰는게 아니므로 전력, 위치, 서버세팅, 확장성 등을 고민하지 않고 서비스 운영에만 집중할수 있다 => off-premise방식 (직접 서버 사서 직접 구현하는게 on-premise방식 기업이나 개인이 자체 시설에서 보유하고 직접 유지관리하는 프라이빗 데이터 센터)

🙋‍♀️즉 쉽게 말하자면 클라우드는 인터넷을 통해 언제 어디서나 데이터와 애플리케이션을 사용할 수 있는 기술

그럼 IAAS, PAAS, SAAS는 뭔데?

SaaS(Software as a service)

-> (사진에서도 보이듯 직접 관리해야하는거 없다!)

SAAS는 인터넷을 통해 소프트웨어를 제공하는 방법. 완제품! ex. 세일즈포스, 구글드라이브, n드라이브, 구글 DOCS등 => 마치 넷플릭스 구독 서비스처럼 클라우드 기업에서 호스팅 방식으로 소프트웨어를 제공하는 클라우드 서비스

SaaS의 장점

사용자는 소프트웨어를 다운로드하거나 설치할 필요가 없으므로 비용 절감 가능(인터넷이 연결된 기기에서 즉시 사용 가능)
SaaS 제공업체는 보안 및 유지보수와 같은 기술문제를 처리하기때문에 사용자는 이러한 문제에 대해서 부담을 덜 수 있음
SaaS 솔루션은 유연하며 필요에 따라 쉽게 확장 가능

IaaS(Infrastructure-as-a-Service)

IaaS(Infrastructure-as-a-Service). 인프라를 제공(서버와 저장소를 준다) => 즉 빈방을 주는것!
가상머신 위에서 애플리케이션의 각 컴포넌트가 구동됨.
특정 클라우드에 종속 x.
운영비가 상승, 이식성 좋음
ex. AWS의 EC2, NCP(네이버 클라우드 플랫폼)등(하나하나 명령어 쳐서 설치)

📌가상머신: 가상컴퓨터, 컴퓨터 시스템을 에뮬레이션(가상현실화)하는 소프트웨어

PaaS(Platform-as-a-Service)

PaaS는 platform을 제공(like 빌트인방)
운영비는 절감할 수 있고, 모니터링 CI/CD제공
그러나 IaaS보다는 유연하지않고 플랫폼에 종속되게 되어있음
ex. heroku

IaaS와 PaaS의 차이

PaaS는 IaaS보다 자유도가 떨어짐(heroku로 예를들면 들어가서 설치할 목록 선택하고 설치함), 이식성 어려움
IaaS는 설치가 어려움(하나하나 해야함)
PaaS는 ex. node.js와 mongoDB 쓴다는 가정하에, 클라우드 서비스를 구매해서 연결해야함(쓰고싶은 서버와 디비에 관련된) , IaaS는 이와반대로 그냥 설치해서 쓰면된다(이식성 쉬움)
IaaS는 운영비 높고, PaaS는 운영비낮음(여기서 말하는 운영비는 인적자원, 시간을 포함시킨다)

[리액트 스터디] useMemo란?

Tue, 28 Feb 2023 06:42:24 GMT

useMemo란?

useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 리액트 훅중에 하나이다. (성능 최적화하기 위해서는 useCallback, useMemo, React.memo등이 쓰인다)

Memo..? Memoization..?✏️

Memoization : '기억되어야 할 것'이라는 뜻의 라틴어에서 파생된 단어로, 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.

시작하기전, '함수형 컴포넌트란'?

함수형 컴포넌트는 랜더링 ➡️ 함수 호출(아래 예제에선 component함수) ➡️ 모든 내부 변수 초기화 순서를 거친다!

=> 즉, value 변수는 반복적으로 내부 초기화, cal함수는 반복적으로 호출! => 이는 굉장히 비효율적(특히 무거운 일을 하는 함수라면)

useMemo는 어떻게 쓰이는데?

!codesandbox[cocky-sid-ktqulg?fontsize=14&hidenavigation=1&theme=dark]

=> 두번째 인자의 '값'이 변경될때에만 첫번째 인자인 calculatorFactorial 함수를 호출하고, 이전에 계산한 결과를 재 사용할 수 있게 된다!

=> 그렇다면 빈배열 넣는다면? 처음 컴포넌트가 mount 되었을때만 값 계산하고, 이후에는 항상 memoization된값을 꺼내와서 사용!

useMemo는 언제 쓰이나?

1. 계산량이 많은 함수를 호출할때 성능을 향상시키기 위해(위의 예시, factorial)

2. 랜더링 결과를 캐싱하여 중복 계산을 방지하기위해

(* 캐싱: 값을 저장해 두었다가 재사용하는것)

import { useMemo, useState } from 'react';

function MemoExample() {
  const [firstName, setFirstName] = useState('John');
  const [lastName, setLastName] = useState('Doe');

  const fullName = useMemo(() => {
    console.log('Full name computed');
    return `${firstName} ${lastName}`;
  }, [firstName, lastName]);

  function handleFirstNameChange(event) {
    setFirstName(event.target.value);
  }

  function handleLastNameChange(event) {
    setLastName(event.target.value);
  }

  return (
    
      
      
      Full name: {fullName}
    
  );
}

=> 위의 예시처럼, fullName은 firstName과 lastName을 합쳐서 만들어지는 문자열이다. useMemo사용하여 fullName을 캐싱하고(기억하고) firstName과 lastName이 변경되었을때만 fullName 계산!

주의할점!

꼭 필요할떄만 사용해야함

=> 값을 재활용하기 위해 따로 메모리를 소비해서 저장을 해놓는것! => 즉 불필요한 값을 모두 memoization하면 성능에 오히려 악영향

주의할점 2: 원시타입과 객체타입의 차이

변수에 원시타입을 할당하면: 변수공간에 값이 바로 들어감!
변수에 객체타입을 할당하면: 변수공간에 값이 아닌 메모리의 주소가 들어감!(객체는 아주 크기 때문)

=> 객체타입을 비교하는건 다른 주소를 비교하는 것이므로 false 나옴!

!codesandbox[gallant-neco-hwt6iq?fontsize=14&hidenavigation=1&theme=dark]

https://youtu.be/e-CnI8Q5RY4 => 참고!

[리액트 스터디] useRef란?

Mon, 27 Feb 2023 07:38:06 GMT

1. useRef를 왜 사용하는가?

(출처: chatGpt)

(참고: ✔️ 순수 js를 사용하면서 특정 DOM을 선택해야 하는 상황에서는 getElementById나 querySelector 같은 DOM Selector 함수 사용해서 DOM을 선택한다!)

2. useRef를 언제 사용하는가?

2-1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우

!codesandbox[restless-violet-co2m9c?fontsize=14&hidenavigation=1&theme=dark]

2-2. setInterval, setTimeout 함수 clear 하는 경우

✔️ setInterval이나 setTimeout 같은 함수는 clear 시키지 않으면 메모리 많이 소모! => 즉, 함수를 구현하고 컴포넌트가 unmount 될때나 특정 상황에서 clear 해줘야함!

!codesandbox[nifty-silence-hxw833?fontsize=14&hidenavigation=1&theme=dark]

🙋‍♀️여기서 궁금했던점! 초기값에 null을 넣는 경우와 안넣는 경우의 차이? 1️⃣ useRef 사용시 초기값 지정 안하면 => undefined가 기본값 2️⃣ 초기값 null이라면 => null이 기본값

=> null반환이 undefined 반환보다 더 안전하기 때문에! 초기값 지정하지않는것은 가능하지만, null이 더 안전한 방법이다!

2-3. 컴포넌트 안의 변수 관리

✔️ useRef로 변수관리 하게 되면, 그 변수가 업데이트 되어도 컴포넌트가 리랜더링 되지 않는다. => 감정일기장의 한 부분