..왜 없는 거냐 저기 밑줄에 링크뜨는 거 클릭하면 페이지 들어가지는데..

이건 그냥 뭐.. 작업 코드에 10까지 없어서 그런 거고

또 안되네?!?!!!! 그래서 찾아보니 private 파일이라 찾을 수 없다고 뜬다네요

그래서 설정을 하다가 또 요로콤 에러를 받아주고

허허헣ㅎㅎㅎ 이거는 이미 origin있어서 에러 뜨는 거라

git remote rm origin

해주면 해결되는 에러고

우엄윪ㅍㅍㅍ 내가 이 에러때문에 PAT를 몇 번을 지웠다가 새로 발급받고 있는 지 모르겠어요ㅡ,ㅜㅜ

,,,,, 타인의 레포에 내 개인 토큰쓰면 뜨는 에러라고 해서 토큰 classic말고 fine-grained 토큰으로 발급받아서 기능 허가도 다 read only에서 read and write로 해줬는데 왜이라너..

.. 나 안해 에러가 왜 계속 나는 거야야야ㅑㅑ PR올리고 push 하기가 이렇게 어려운 거였나 아니였던 것 같은데,,

그렇게 저 위에 뜨는 에러를 계속 맞이하고 구글링해보고 다시 새로운 에러를 맞이해본 결과..

다양한 아이콘의 행렬을 볼 수 있게 되었어요~~ 와아ㅏ아 알록달록 예브따ㅏㅏㅠㅜㅠㅜㅠ! (1학년때도 구글링 계속하다가 저거 만든 적이 있던 것 같은..)

[ 깃허브 클론 토큰 인증 한 방 명령어 ]

$ git clone https://<user-id>:<token>@github.com/anti1346/centos7.git

[ 이런 요상한 jdk없다는 에러가 뜰 때는? ]

$./gradlew clean build

하려는데 저 에러가 계속 떠서 java 환경 변수도 설정하고 깔고 지우기도 반복하고~ 버전도 계속 확인해봤는데 안 되는거임!! 그럴땐.. https://rebugs.tistory.com/654 이걸로 메모리 스왑해준 다음에

$./gradlew clean build --no-daemon

--no-daemon 사용해주면 조금 오래걸리긴 해도 됩니다~ 근데 이제 프론트엔드랑 백엔드 https, http 두 가지 유형써서 에러난 거 고쳐야 함. 아으ㅠ류!

첫 출근 때 대표님께 "실습기간동안 홈페이지 만들면 되겠다!"라고 들은 후, 첫 날부터 디자인을 시작하게 되었어요오오. 근데 중간중간 마우스패드, 현수막, 스티커와 같은 디자인 부탁도 들어와서 열심히 쿵따쿵따해보고 있엇습니다. (난 내가 업무로 일러스트 툴을 만져볼 줄은 몰랐지 허ㅓ허)

디자인 시안은 생각보다 빨리 나왔는데 색감이나 디테일한 부분의 수정이 오래걸려서 점점 통과가 간절해지다보니 저 당시의 파일명 -> wpqkf.pdf, wpkqfwpqkf.pdf, wpkqfwpqkfwpkqfwpqkf.pdf..~

[마역량 1등]

친구가 1등이라고 알려주길래 바ㅏ로오 들어가서 인증샷 남겼는데 기분이 좋으네여~ (우리반이 성적 점수 일찍 넣어서 그렇다고 듣긴 했..(그래도 1등.. 행복했다))

[ 개발하다가 배포 웹사이트 너무 많이 젒속해서 트래픽 초과햇다,, 당황핑]

홈페이지 로컬에서 작업하다가 어느 정도 작업이 돼서 배포를 했는데 배포된 홈페이지를 많이 들어갔기도 하고 해외에서 접속량이 .. 많드라구여.. 그래서 터졌는데 저때가 5시 28분이여서 고냥 깃 정리랑 실습일지쓰다가 퇴근 엔딩했숨다1

[이정도면 엽떡이랑 뿌링클 먹어야한다]

진짜 회사 일하다가 스트레스를 갑자기(딱히 먼일이 있다기 보다는 연휴끝나고 월요일의 시작이 힘들었나보다) 확 받아서 입맛이 미쳐날뛰었다. 그래서 지피티랑 상의끝에 먹기로 결정. 근데 정규직 전환 소식을 들어서 그런지 퇴근 시간이 다되어가서 그런지 뭔가 양배추우 먹고 싶은 건강 입맛으로 돌아옴.. 싱기방기뿡뿡

[지식 한 스푼 : 깃허브는 100MB이상을 감당 못 한다]

깃허브는 100MB이상의 파일을 감당 못하는 것도 모르고 mov를 포함한 여러 파일 push 하는 데 -f를 써도 안되길래 아 .. 망했다 갈아야하나라는 생각으로 보다가 뒤늦게 경고문구 계속 보면서 100MB이상 안된다는 걸 깨닫고 lfs를 사용해서 비디오 용량 분할 중..ㅜㅠㅜㅠ

돼서 다행이지만 정말 어제 퇴근 전부터 오늘 출근하고 1시간동안 코드 다 날라가는 줄 알고 멍.. 해있었다.. 그래도 머.. 방법 알앗잖아? 럭키비키~

[이거 외 않되ㅜㅠ]

아무리 style을 바꿔도 화면에 적용이 안되길래 내가 이렇게 멍청했던가; 하면서 글적하고 있었는데 진짜 멍청했었다.. 웹을 고치면서 모바일 코드를 만지고 있으니깐 그랬었다........어어어엉머멍멍ㅁㅁ,,,,

[와. ㄹㅇ 큰일날 뻔]

여러분 rebase가 뭔지 아시나요? rebase란 바로 브랜치를 다른 브랜치의 최신 커밋으로 옮기는 작업인데요 제가 develop의 커밋을 가져왔어야했는데 실수로 아무것도 merge되어 있지 않은 상태의 main을 쳐버렸지 뭐예요 ㅎㅎ 그래서 초기화 상태가 되었어.요. 허허허허ㅓㅎ 그저 push를 하고 싶었지만 오류가 나서 오류를 고치려 했을 뿐인 아이에게 초기화라는 이런 깜짝 이벤트를 주시다니 참^^ 재밌었네요^^ (내 소중한 커밋 그래프가 0이 되는 걸 보았어/.ㅜㅠ무)

git rebase --abort

여러분은 저같은 실수하지 마시고ㅜ 만약 하시게 된다면 위의 코드치면 취소됩니다! 오늘도 개발 화이팅~ 멘탈 화이팅~ 인생 화이팅~

마무리리ㅣ이ㅣㅇ 7월 28일부터 시작한 실습 생활이 이제 일주일 조금 넘게 남게 되었다. 어떤 날은 개발잘 돼서 즐겁고 어떤 날은 출근하기 전부터 힘이 빠져있고 오락가락한 나날들을 보내왔는데 이렇게 실습때 있었던 일들을 정리해보니 힘들었어도 좋은 추억이고 뿌듯한 것 같다..ㅎ 열심히해서 돈 많이 벌고 싶다(네잎클로버)(네잎클로버)(네잎클로버) 하고 싶은 건 다 할 수 있는 어른이 될 거 야야야야갸갸갸 크하하하하

Vue.js 프론트엔드에서 CORS 및 백엔드 주소 설정을 위해 vue.config.js에 프록시 설정을 사용하였다. 로그인과 회원가입 페이지에서는 백엔드 연동이 잘 되었으나, 데이터 차트 페이지에서는 프록시가 적용되지 않고 http://localhost:8080으로 요청이 전송되는 문제가 발생했다.

[시도한 방법들]

HTTP 메서드 변경 )

로그인 및 회원가입 페이지는 POST 방식, 데이터 차트는 GET 방식이어서 이 차이 때문일 수 있다고 판단하였다.

데이터 차트에서의 방식을 GET을 POST로 변경했지만, 여전히 프록시가 적용되지 않았다.

이벤트 트리거 방식 통일 )

로그인과 회원가입은 버튼을 눌렀을 시에 작동한다. 데이터 차트는 mounted를 사용하여 화면에 들어왔을 때 렌더링되도록 하여 이 또한 로그인과 회원가입 방식과 동일하게 버튼을 눌렀을 때 데이터를 가져오도록 바꿨지만, 프록시가 적용되지 않았다.

URL 경로 재확인 )

브라우저를 통해 직접 백엔드 URL(lares/api/control)에 접속해 보았고, 404가 발생하였다. 브라우저를 통해 접속하는 과정에서 에러가 떠서 주소를 확인해보니 control 뒤에 슬래시가 빠져있었다. 그래서 경로에 슬래시(/)를 붙여 lares/api/control/로 접속하자 데이터가 정상적으로 출력되었다. 코드에서도 동일하게 슬래시를 붙여주자 200 OK 응답을 받을 수 있었고, 문제 해결되었다.

[ 문제 발생 이유&후기 ]

평소 브라우저의 홈페이지에서는 트레일링 슬레시가 자동으로 붙여지는 경우를 많이 보아서 존재 여부의 차이를 신경쓰지 않고 있었는데 이번 오류를 기점으로 트레일링 슬레시가 존재한다면 해당 리소스는 디렉토리이고 없다면 파일이기에 트레일링 슬래시의 존재여부에 따라 다른 URL이 된다는 사실을 알게 되었다.

슬래시 하나 때문에 이틀을 잡고 있었던 에러라 슬래시의 중요성에 대해 알아보자고 찾아보니 트레일링 슬래시가 주는 이점이

슬래시가 없으면 해당 이름의 파일이 있는 지 확인하고 없으면 디렉토리까지 확인했다가 디렉토리가 있으면 그 안의 기본 파일(index.html)같은 거까지 확인하는 과정을 거치는데

*슬래시가 있으면 *해당 이름의 파일을 확인하는 과정이 사라지고 바로 디렉토리 확인을 들어가기 때문에 과정이 줄어서 페이지 응답 속도가 더 빠르게 진행될 수 있다는 것도 알게되었다.

속도가 빠르면 좋은 거니깐.. 그리고 개발자 측면에서는 슬래시 하나만 붙이면 한 단계가 주는 건데.. 트레일링 슬래시를 써준 백엔드에게 감사인사를 전하고 앞으로 주소 확인을 잘하고 개발하쟝…

해당 프로젝트는 친구와 둘이서 진행하게 되었고, 역할로는 AI, 알고리즘, 디자인, 프론트, 백엔드, 하드웨어의 역할이 있는데 나는 그중에서 AI, 알고리즘, 프론트를 맡아 진행하게 되었다.

평소 프론트엔드에 관심이 있었기에 프론트로 참여한 프로젝트가 몇 되는데, 모두 React.js를 사용하여 진행해왔다. 하지만 이번 프로젝트에서는 회사의 스택에 기술을 맞추고 싶어 Vue.js를 선택해보게 되었다.

처음으로 마주한 Vue.js는 "와, HTML인가?" 싶었다. Vue.js가 타 프레임워크보다 쉽다는 건 몇 번 들었는데, 직접 해보니 HTML로 코딩하던 시절이 떠올랐달까..

그렇게 호기롭게 시작한 Vue.js 개발에서 처음으로 마주한 오류는 다음과 같았다. multi-word 에? 이게 뭔 에러인가 싶어서 찾아보니, Vue에서 component명을 만들 때 반드시 단어의 조합(CmmMenu)으로 지어야 한다는 의미다.

이는 HTML 태그와 헷갈리지 않게 하려고 그렇게 설정해놨다고 한다. 그래서 Login.vue였던 파일명을 VueLogin.vue로 고치니 에러가 없어졌다.

그런데... 그냥 나는 파일이름 쓰고 싶다?면 vue.config.js에 들어가서

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //추가
});

lintOnSave: false를 추가해주면 파일이름이 Login.vue라도 에러가 뜨지 않는다.

[참고한 자료] https://developer-notes.tistory.com/26 https://velog.io/@minseojo/Vue.js-Error-vuemulti-word-component-names

스택의 개념

모든 자료의 삽입과 삭제가 한쪽 끝에서만 수행되는 제한적 개념의 선형 구조

LIFO(Last In First Out)인 자료구조로 먼저 들어가 요소가 나중에 나오게 된다

재귀함수를 호출할 때 호출 당한 함수가 끝난 뒤 호출을 한 함수가 끝나는 것과 같이 스택에 들어간 요소가 나오기 위해서는 그 이후에 삽입한 요소들이 모두 나와야 한다

• 실생활에서의 스택의 예

  • 식당에 쌓여있는 접시 더미
  • 책상에 쌓여있는 책
  • 창고에 쌓여있는 상자

• 스택의 활용

  • 자료의 출력 순서가 입력의 역순으로 이루어져야 할 때
  • undo기능을 구현할 때
  • 함수 호출에서 복귀주소를 기억할 때
  • 문서나 소스코드에서 괄호 닫기가 정상적으로 되었는지를 검사하는 프로그램

• 스택 용어

  • 스택 상단(stack top): 스택에서 입출력이 이루어지는 부분
  • 스택 하단(stack bottom): 스택의 바닥 부분
  • 요소(element): 스택에 저장되는 것
  • 공백 스택(empty stack): 요소가 하나도 없는 스택

• 스택 연산

  • isFull(s) : 스택의 원소 수가 size와 동일할 경우 return TRUE, 다를 경우 return FALSE
  • isEmpty(s) : 스택의 원소 수가 0일 경우 return TRUE, 0보다 클 경우 return FALSE
  • push(s, e) : isFull(s)을 실행하여 스택이 꽉 차있으면 에러를 발생시키고 빈 공간이 있을 경우 스택의 맨 위에 e 추가
  • pop(s) : isEmpty(s)를 실행하여 스택이 비어있으면 에러를 발생시키고 스택에 요소가 있으면 스택의 맨 위에 있는 요소를 제거하여 반환
  • peek(s) : isEmpty(s)를 실행하여 스택이 비어있으면 에러를 발생시키고 스택에 요소가 있으면 스택의 맨 위에 있는 요소를 제거하지 않고 반환

• 스택 코드

    # Plus: 각 리스트 값에 1씩 더해준다
    # ex) 1 2 3 4 5 -> 2 3 4 5 6
    # isReverse: 리스트를 거꾸로 바꿔준다
    # ex) 1 2 3 None None -> None None 3 2 1
    # Reset: 리스트 안을 다 None로 초기화 시켜주고 top을 -1로 함
    # ex) 1 2 3 4 5 -> None None None None None
  
    class Stack:
        def __init__(self, size):
            self.stack_size = size  # 리스트 용량
            self.stack_list = [None] * self.stack_size  # 리스트 이름
            self.top = -1  # 가장 최근에 삽입된 요소의 위치
  
        def isEmpty(self):  # top이 -1이면 비어있다고 판단
            if self.top == -1:
                return True
            else:
                return False
  
        def isFull(self):  # top이랑 stack_size가 같으면 가득 찼다고 판단
            if self.top == self.stack_size:
                return True
            else:
                return False
  
        def push(self, e):  # 요소 e를 스택의 맨 위에 추가
            if self.isFull() == True:
                print("배열이 가득 찼습니다")
                return 0
            self.top += 1
            self.stack_list[self.top] = e
  
        def pop(self):  # 스택의 맨 위에 있는 요소를 꺼내 반환
            if self.isEmpty() == True:
                print("배열이 텅 비었습니다")
                return 0
            tmp = self.stack_list[self.top]
            self.stack_list[self.top] = None
            self.top -= 1
  
            return tmp
  
        def peek(self):  # 스택의 맨 위에 있는 항목을 삭제하지 않고 반환
            return self.stack_list[self.top]
  
        def isReverse(self):  # 리스트를 거꾸로 바꿈
            self.stack_list.reverse()
            return 0
  
        def Reset(self):  # 리스트 안을 다 None로 초기화 시켜주고 top을 -1로 함
            if self.isEmpty() == True:
                print("배열이 텅 비었습니다")
                return 0
            for i in range(-1, self.stack_size):
                self.stack_list[i] = None
            self.top = -1
  
        def Plus(self):  # 각 리스트 값에 1씩 더함
            if self.isEmpty() == True:
                print("배열이 텅 비었습니다")
                return 0
            for i in range(self.top, -1, -1):
                self.stack_list[i] += 1
  
    stack = Stack(5)
  
    print("push 확인")
    stack.push(1)
    stack.push(2)
    stack.push(3)
    stack.push(4)
    stack.push(5)
    print(stack.pop())
    print(stack.stack_list)
    print(stack.peek())
    print(stack.stack_list)
    stack.Plus()
    print(stack.stack_list)
    stack.isReverse()
    print(stack.stack_list)
  
    stack.Reset()
  
    print(stack.stack_list)

• 중위표기 수식의 후위표기 변환

  전위

  연산자를 먼저 표시하고 연산에 필요한 피연산자를 나중에 표기하는 방법

  ex) +ab

  중위

  연산자를 두 피연산자 사이에 표기하는 방법으로 가장 일반적으로 사용되는 표현 방법

  ex) a+b

  후위

  피연산자를 먼저 표시하고 연산자를 나중에 표시하는 방법

  ex) ab+

    """
    전위: +ab
    중위: (a+b)/c
    후위: ab+
    """
    """
    중위를 후위로 바꿀 때 나올 수 있는 경우의 수 3가지
    1. a+b*c -> abc*+
    연산자를 담을 스택을 만들어 놓고 output이라는 결과를 순서대로 넣어놓는 리스트를 만든다
    연산자는 stack에 넣고 피연산자는 output에 넣는다
    stack에 든 게 있는 지 확인하고 
    있다면
    stack에서 한 개씩 pop해서 output에 넣어서 출력
    2. a*b+c -> ab*c+ 
    연산자를 담을 스택을 만들어 놓고 output이라는 결과를 순서대로 넣어놓는 리스트를 만든다
    연산자는 stack에 넣고 피연산자는 output에 넣는다
    stack에 넣을 연산자가 stack안에 들어있던 연산자랑 우선순위를 비교해서 stack에 있는 게 더 높은 우선순위가 있다면 
    다 pop해서 output결과 리스트에 넣고 넣을 연산자를 stack에 집어 넣는다
    다 분류했다면
    stack에서 한 개씩 pop해서 output에 넣어서 출력
    3. (a+b)*c ->
    (를 stack에 집어넣는다
    )괄호를 넣을 차례일 때 (를 만날 때까지 그 위에 들어있는 연산자를 모두 pop해서 output리스트에 넣어준다
    다 분류했다면
    stack에서 한 개씩 pop해서 output에 넣어서 출력
    """
    # 피연산자인가 연산자인가 / 연산자에서 ()인가 +인가 *인가
    """
    def 우선순위
    if () return 0 
        + return 1
        * return 2
    """
  
    # 스택 ADT
  
    # push(e) : 요소 e를 스택의 맨 위에 추가
    # pop() : 스택의 맨 위에 있는 요소를 꺼내 반환한다.
    # isEmpty() : 스택이 비어있는 true를 아니면 false를 반환한다.
    # isFull() : 스택이 가득 차 있으면 true를 아니면 false를 반환한다.
    # peek() : 스택의 맨 위에 있는 항목을 삭제하지 않고 반환한다.
  
    class Stack:
        stack_size = 100
        stack_list = [None] * stack_size
        top = -1
  
        def isEmpty(self):
            if self.top == -1:
                return True
            else:
                return False
  
        def isFull(self):
            if self.top == self.stack_size - 1:
                return True
            else:
                return False
  
        def push(self, e):
            if self.isFull() == True:
                print("배열이 가득 찼습니다")
                return 0
  
            self.top += 1
            self.stack_list[self.top] = e
  
        def pop(self):
            if self.isEmpty() == True:
                print("배열이 텅 비었습니다")
                return 0
  
            print(self.stack_list[self.top])
            r = self.stack_list[self.top]
            self.stack_list[self.top] = None
            self.top -= 1
            return r
  
        def peek(self):
            print(self.stack_list[self.top])
  
    # 연산자 우선순위 계산 함수
    def precedence(op):
        if op == "(" or op == ")":
            return 0
        elif op == "+" or op == "-":
            return 1
        elif op == "*" or op == "/":
            return 2
        else:
            return -1
  
    # 중위 표기 -> 후위표기로 바꾸는 함수
    def Infix2Postfix(expr):
        s = Stack()
        output = []
  
        for term in expr:
            if term in "(":
                s.push("(")
            elif term in ")":
                while not s.isEmpty():
                    op = s.pop()
                    if op == "(":
                        break
                    else:
                        output.append(op)
  
            elif term in "+-*/":
                while not s.isEmpty():
                    op = s.peek()
                    if precedence(op) >= precedence(term):
                        output.append(op)
                        s.pop()
                    else:
                        break
                s.push(term)
            else:
                output.append(term)
  
        while not s.isEmpty():
            output.append(s.pop())
  
        return output
  
    """
    stack = Stack()
  
    print("push 확인")
    stack.push(1)
    stack.push(2)
    stack.push(3)
    stack.push(4)
    stack.push(5)
  
    print(stack.stack_list)
    """
    infix1 = input()
    infix1 = list(infix1)
    postfix1 = Infix2Postfix(infix1)
    print(postfix1)

QUEUE

큐의 개념

뒤에서 새로운 데이터가 추가되고 앞에서 데이터가 하나씩 삭제되는 구조

FIFO(First In First Out)인 자료구조로 먼저 들어가 요소가 먼저 나오게 된다

큐는 한쪽 끝에서 삽입 작업, 다른 쪽 끝에서 삭제 작업이 이루어진다

• 실생활에서의 큐의 예
  • 줄을 서서 기다리는 것
• 큐의 활용
  • 우선순위가 같은 작업 예약 (프린터의 인쇄 대기열)
  • 은행 업무
  • 콜센터 고객 대기시간
  • 프로세스 관리
  • 너비 우선 탐색(BFS) 구현
  • 버퍼(buffer): 데이터를 주고 받을 때 각 주변장치들 사이에 존재하는 속도의 차이나 시간차이를 극복하기 위해 임시 기억장치로 사용
  • 실시간 비디오 스트리밍(버퍼링 buffering)
  • 현실 세계 시뮬레이션
• 큐의 연산
  • init(q) : 큐를 초기화
  • isEmpty(q) : size가 0이면 TRUE 반환, 0이 아니면 FALSE 반환
  • isFull(q) : size와 max_size가 같으면 TRUE 반환, 다르면 FALSE 반환
  • enqueue(q, e) : isFull이 TRUE면 에러 발생, FALSE면 q의 끝에 e 추가
  • dequeue(q) : isEmpty가 TRUE면 에러 발생, FALSE면 q의 맨 앞에 있는 요소 제거하여 반환
  • peek(q) : isEmpty가 TRUE면 에러 발생, FALSE면 q의 맨 앞에 있는 요소 제거하지 않고 반환

선형 큐의 개념

데이터가 증가되면 rear를 하나 증가하고 그 위치에 데이터가 저장되며 삭제할 때도 front를 하나 증가하고 front가 가리키는 위치에 있는 데이터를 삭제한다

• 단점

  • 요소들의 불필요한 이동이 발생한다
  • 큐의 앞 부분이 비더라도 자료를 추가할 수 없다(메모리 낭비)

• 선형 큐 코드

    """
    AllPrint(): None이 아닌 배열에 있는 수 모두 출력
    ex) [1, 2, 3, 4, None] -> [1, 2, 3, 4]가 출력됨
    AllPrintReverse(): None이 아닌 배열에 있는 수 거꾸로 하여 모두 출력
    ex) [1, 2, 3, 4, None] -> [4, 3, 2, 1]가 출력됨
    Reset(): 배열 초기화
    ex) 1, 2, 3, 4, None -> None, None, None, None, None
    """
  
    class Queue:
        def __init__(self, size):
            self.queue_size = size
            self.list = [None] * self.queue_size
            self.front = -1
            self.rear = -1
  
        def isFull(self):  # rear랑 크기-1이 같으면 가득 찼음
            return self.rear == self.queue_size - 1
  
        def isEmpty(self):  # front랑 rear가 같으면 비어있음
            return self.front == self.rear
  
        def enqueue(self, e):  # 요소 e를 큐의 맨 뒤에 추가
            if self.isFull():
                print("큐가 가득 찼습니다")
                return 0
            self.rear = self.rear + 1
            self.list[self.rear] = e
  
        def dequeue(self):  # 큐의 맨 앞에 있는 요소를 꺼내 반환
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            self.front = self.front + 1
            tmp = self.list[self.front]
            self.list[self.front] = None
            return tmp
  
        def peek(self):  # 큐의 맨앞에 있는 요소를 삭제하지 않고 반환
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            return self.list[self.front + 1]
  
        def AllPrint(self):  # 배열에 있는 수 모두 출력
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            tmp = [i for i in self.list if i is not None]
            print(tmp)
  
        def AllPrintReverse(self):  # 배열에 있는 수 거꾸로 하여 모두 출력
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            tmp = [i for i in self.list if i is not None]
            print(tmp[::-1])
  
        def Reset(self):  # 배열 초기화
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            for i in range(-1, self.queue_size):
                self.list[i] = None
  
            self.front = -1
            self.rear = -1
  
    queue = Queue(5)
  
    queue.enqueue(1)
    queue.enqueue(2)
    queue.enqueue(3)
    queue.enqueue(4)
    queue.enqueue(5)
  
    print(queue.list)
    print(queue.peek())
    queue.AllPrint()
    queue.AllPrintReverse()
    queue.Reset()
    print(queue.list)

원형 큐의 개념

기본 큐의 처음과 끝을 논리적으로 연결하여 오버플로가 발생하는 것을 보완한다

(front와 rear의 값이 배열의 끝인(MAX_QUEUE_SIZE-1)에 도달하면 다음에 증가되는 값은 0이 되도록 한다)

• 문제

  full 상태와 empty 상태일 때 front와 rear 값이 같음

  → 이를 해결하기 위해 front와 rear 사이에 하나의 공백을 둠

• 상태

  포화 상태: (rear+1)%n == front

  공백 상태: front == rear

• 원형 큐 코드

    """
    AllPrint(): None이 아닌 배열에 있는 수 모두 출력
    ex) [1, 2, 3, 4, None] -> [1, 2, 3, 4]가 출력됨
    AllPrintReverse(): None이 아닌 배열에 있는 수 거꾸로 하여 모두 출력
    ex) [1, 2, 3, 4, None] -> [4, 3, 2, 1]가 출력됨
    Reset(): 배열 초기화
    ex) 1, 2, 3, 4, None -> None, None, None, None, None
    """
  
    class Queue:
        def __init__(self, size):
            self.queue_size = size
            self.list = [None] * self.queue_size
            self.rear = 0
            self.front = 0
  
        def isEmpty(self):  # front랑 rear가 같으면 비어있음
            return self.front == self.rear
  
        def isFull(self):  # (rear+1)%5랑 front가 같으면 가득 차 있음
            return (self.rear + 1) % 5 == self.front
  
        def equence(self, e):  # 요소 e를 큐의 맨 뒤에 추가
            if self.isFull():
                print("큐가 가득 찼습니다")
                return 0
            self.rear = (self.rear + 1) % 5
            self.list[self.rear] = e
  
        def dequence(self):  # 큐의 맨 앞에 있는 요소를 꺼내 반환
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            self.front = (self.front + 1) % 5
            self.list[self.front] = None
            return self.list[self.front]
  
        def peek(self):  # 큐의 맨앞에 있는 요소를 삭제하지 않고 반환
            if self.isEmpty():
                print("큐가 비어있습니다")
            return self.list[(self.front + 1) % 5]
  
        def AllPrint(self):  # 배열에 있는 수 모두 출력
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            tmp = [i for i in self.list if i is not None]
            print(tmp)
  
        def AllPrintReverse(self):  # 배열에 있는 수 거꾸로 하여 모두 출력
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            tmp = [i for i in self.list if i is not None]
            print(tmp[::-1])
  
        def Reset(self):  # 배열 초기화
            if self.isEmpty():
                print("큐가 비어있습니다")
                return 0
            for i in range(-1, self.queue_size):
                self.list[i] = None
            self.front = 0
            self.rear = 0
  
    queue = Queue(5)
  
    print("push 확인")
    queue.equence(1)
    queue.equence(2)
    queue.equence(3)
    queue.equence(4)
    queue.dequence()
    print(queue.peek())
    queue.AllPrint()
    queue.AllPrintReverse()
  
    """ 오늘 수업에서 알게된 점
    큐에는 
    선형큐, 원형큐, 우선수위 큐 이렇게 세가지로 있다!
    """

  

DEQUE

덱의 개념

덱은 양쪽 끝에서 삽입과 삭제가 모두 가능한 자료 구조

(여전히 중간에 삽입하거나 삭제하는 것은 허용하지 않는다)

큐와 스택을 합친 형태

• 배열로도 구현이 가능하고, 연결 리스트로도 구현이 가능

• 데이터의 앞과 뒤에서만 삽입, 삭제, 접근이 이루어질 때 굉장히 빠르게 동작

• 회전

  전단 반시계방향 회전: (front1+capacity)%capacity

  후단 반시계방향 회전: (rear-1+capacity)%capacity

• 덱 연산

  • create() : 덱 생성
  • init(dq) : 덱 초기화
  • isEmpty(dq) : 덱이 공백 상태인지 검사
  • isFull(dq) : 덱이 포화 상태인지 검사
  • AddFront(dq, e) : 덱의 앞에 요소 추가
  • AddRear(dq, e) : 덱의 뒤에 요소 추가
  • DeleteFront(dq) : 덱의 앞의 요소 반환 후 삭제
  • DeleteRear(dq) : 덱의 뒤의 요소 반환 후 삭제
  • GetFront(dq) : 덱의 앞의 요소 반환(삭제x)
  • GetRear(dq) : 덱의 뒤의 요소 반환(삭제x)

• 선형 덱 코드

    class Deque:
        def __init__(self, Deque_size):
            self.Deque_size = Deque_size
            self.front = -1
            self.rear = self.Deque_size
            self.list = [None] * self.Deque_size
  
        def isEmpty(self): #rear랑 크기가 같고 front가 -1이면 비어있음
            return self.rear == self.Deque_size and self.front == -1
  
        def isFull(self): #front랑 크기-1이 같거나 rear가 0이면 가득 참
            return self.front == self.Deque_size - 1 or self.rear == 0
  
        def AddFront(self, e):  # 맨 앞(전단)에 새로운 요소 e를 추가
            if self.isFull():
                print("덱이 가득 차있습니다")
                return 0
            self.front += 1
            self.list[self.front] = e
  
        def DeleteFront(self):  # 맨 앞(전단)의 요소를 꺼내서 반환
            if self.isEmpty():
                print("덱이 비어있습니다")
                return 0
            tmp = self.list[self.front]
            self.list[self.front] = None
            self.front -= 1
            return tmp
  
        def GetFront(self):  # 맨 앞(전단)의 요소를 꺼내지 않고 반환
            return self.list[self.front]
  
        def AddRear(self, e):  # 맨 뒤(후단)에 새로운 요소e를 추가
            if self.isFull():
                print("덱이 가득 차있습니다")
                return 0
            self.rear -= 1
            self.list[self.rear] = e
  
        def DeleteRear(self):  # 맨 뒤(후단)의 요소를 꺼내서 반환
            if self.isEmpty():
                print("덱이 비어있습니다")
                return 0
            tmp = self.list[self.rear]
            self.list[self.rear] = None
            self.rear += 1
            return tmp
  
        def GetRear(self):  # 맨 뒤(후단)의 요소를 꺼내지 않고 반환
            return self.list[self.rear]
  
    deque = Deque(5)
  
    deque.AddFront(1)
    deque.AddFront(2)
    deque.AddRear(1)
    deque.AddRear(2)
    print(deque.list)

• 원형 덱 코드

    class Deque:
        def __init__(self, Deque_size):
            self.Deque_size = Deque_size
            self.front = 0
            self.rear = 0
            self.list = [None] * Deque_size
  
        def isEmpty(self): #front랑 rear가 같으면 비어있음
            return self.front == self.rear
  
        def isFull(self): #front랑 (rear_1)%크기가 같으면 가득 참
            return self.front == (self.rear + 1) % self.Deque_size
  
        def Addfront(self, e):  # 맨 앞(전단)에 새로운 요소 e를 추가
            if self.isFull():
                print("덱이 가득 찼습니다")
                return 0
            self.list[self.front] = e
            self.front = (self.front - 1 + self.Deque_size) % self.Deque_size
  
        def Addrear(self, e):  # 맨 뒤(후단)에 새로운 요소e를 추가
            if self.isFull():
                print("덱이 가득 찼습니다")
                return 0
            self.rear = (self.rear + 1) % self.Deque_size
            self.list[self.rear] = e
  
        def Deletefront(self):  # 맨 앞(전단)의 요소를 꺼내서 반환
            if self.isEmpty():
                print("덱이 비어있습니다")
                return 0
            self.front = (self.front + 1) % self.Deque_size
            return self.list[self.front]
  
        def Deleterear(self):  # 맨 뒤(후단)의 요소를 꺼내서 반환
            if self.isEmpty():
                print("덱이 비어있습니다")
                return 0
            self.rear = (self.rear - 1 + self.Deque_size) % self.Deque_size
            return self.list[self.rear]
  
        def Getfront(self): # 맨 앞(전단)의 요소를 꺼내지 않고 반환
            if self.isEmpty():
                print("덱이 비어있습니다")
                return 0
            return self.list[(self.front + 1) % self.Deque_size]
  
        def Getrear(self): # 맨 뒤(후단)의 요소를 꺼내지 않고 반환
            if self.isEmpty():
                print("덱이 비어있습니다")
                return 0
            return self.list[self.rear]
  
    deque = Deque(5)
    deque.Addfront(1)
    deque.Addfront(2)
    deque.Addrear(2)
    print(deque.list)

• 인터넷의 확산으로 산업 표준

• 개발 초기부터 유닉스 시스템에 통합되어 서비스를 제공하고 있으며 리눅스에서 기본적으로 제공

• 계층 구조: 5개 계층(4개 계층으로 구분하기도 함)

  • 응용 계층(application layer): 사용자에게 서비스를 제공하기 위한 계층(Telnet, FTP, HTTP, SMTP, DNS 등)
  • 네트워크 계층(network layer): 인터넷 계층이라고도 하며 패킷이 전달되는 경로를 담당(IP, ICMP, ARP 등)
  • 네트워크 접속 계층 / 하드웨어 계층: 물리적인 네트워크와의 연결을 담당(이더넷 카드, 랜 카드)
  • 전송 계층(transport layer): 패킷의 전송을 담당하는 계층(TCP, UDP)

TCP와 UCP의 차이점

IP 주소와 포트 번호

포트 번호(port number)

• 전송되어오는 데이터를 어느 프로세스가 수신해 서비스를 제공할 것인지를 알려줌
• 0~65535(2바이트 정수)
• 일반 프로그램: 1024~65535 사용

포트(well-known)

• 이미 지정되어 있는 포트 번호 ( 인터넷에서 자주 사용하는 서비스는 포트 번호가 지정되어 있음 )
• 0~1023

소켓 인터페이스

• 응용 계층에서 전송 계층의 기능을 사용할 수 있도록 제공하는 응용 프로그래밍 인터페이스(API)
• 응용 프로그램과 TCP 계층을 연결하는 역할
• 전송 계층이나 네트워크 게층이 복잡한 구조를 몰라도 쉽게 작성 가능

IP주소

• 데이터가 전송될 목적지 호스트를 알려주는 역할
• 인터넷을 이용할 때 사용하는 주소
• 점(.)으로 구분된 32비트 숫자로 표시
• 네트워크 주소(인터넷 주소)라고도 함
• A,B,C,D,E 클래스 중 A,B,C 클래스만 사용(D,E는 멀티캐스트용, 연구용으로 사용)

호스트명

• 시스템에 부여된 이름
• 인터넷: '호스트+도메인명' 형태로 구성

호스트명과 IP 주소 변환

• /etc/hosts 파일 또는 DNS, NLS 등
• /etc/nsswitch.conf 파일에 주소변환을 누가 할 것인 지정
• DNS: 호스트명과 도메인명을 관리하는 시스템 NIS: 사용자와 호스트명과 같은 시스템 구성 데이터를 여러 곳에 제공해주는 서비스

호스트명과 주소 읽어오기

#include <netdb.h>

struct hostnet *gethostent(void);
void sethostent(int stayopen);
void edhostent(void);

stayopen: IP 주소 데이터베이스를 열어둘 것인지 여부를 나타내는 값

gethostent: 호스트명과 IP 주소를 읽어서 hostent 구조체에 저장하고 해당 주소를 리턴 sethostent: 데이터베이스의 현재 읽기 위치를 시작 부분으로 재설정 endhostent: 데이터 베이스를 닫음

hostent 구조체

struct hostent{
    char *h_name;
    char **h_aliases;
    int h_addrtype;
    int h_length;
    char **h_addr_list;
};

• h_name: 호스트명 저장
• h_aliases: 호스트를 가리키는 다른 이름 저장
• h_addrtype: 호스트 주소의 형식을 지정
• h_length: 주소의 길이 저장
• h_addr_list: 해당 호스트의 주소 목록 저장

호스트명으로 정보 검색: gethostbyname(3)

: 호스트명을 인자로 받아 데이터베이스에서 해당 항목을 검색해 hostent 구조체에 저장하고 그 주소를 리턴

#include <netdb.h>

struct hostent *gethostbyname(const char *name);

name: 검색하려는 호스트명

IP 주소로 정보 검색: gethostbyaddr(3)

: IP주소를 인자로 받아 데이베이스에서 해당 항목을 검색해 hostent 구조체에 저장하고 그 주소를 리턴

#include <netdb.h>
#include <sys/socket.h>

struct hostent *gethostbyaddr(const void *addr, socklen_t len, int type);

addr: 검색하려는 IP주소 len: addr 길이 type: IP주소 형식

포트 정보 읽어오기: getservent(3), setservent(3), endservent(3)

#include <netdb.h>

struct servent *getservent(void);
void setservent(inst stayopen);
void endservent(void);

stayopen: 포트 정보 데이터베이스를 열어둘 것인지 여부를 나타내는 값

getservent: 포트 정보를 읽어서 servent 구조체에 저장하고 그 주소를 리턴 setservent: 데이터베이스의 현재 읽기 위치를 시작 부분으로 재설정 endservent: 데이터 베이스를 닫음

servent 구조체

struct serven{
    char *s_name;
    char **s_aliases;
    int s_port;
    char *s_proto;
};

• s_name: 포트명을 저장
• s_aliases: 해당 서비스를 가리키는 다른 이름들을 저장
• s_port: 포트 번호를 저장
• s_proto: 서비스에 사용하는 프로토콜의 종류를 나타냄

서비스명으로 정보 검색: getservbyname(3)

: 포트명을 인자로 받아 데이터베이스에서 해당 항목을 검색해 servent 구조체에 저장하고 그 주소를 리턴

#include <netdb.h>

struct servnet *getservbyname(const char *name, const chat *proto);

name: 검색할 포트명 proto: "tcp" 또는 "udp"

포트 번호로 정보 검색: getservbyport(3)

: 포트 번호를 인자로 받아 데이터베이스에서 해당 항목을 검색해 servent 구조체에 저장하고 그 주소를 리턴

#include <netdb.h>

struct servent *getservbyport(int port, const char *proto);

port: 검색할 포트 번호 proto: "tcp" 또는 "udp"

[ 트렌드 코리아 2025 - 김난도 ] 의 책을 읽고 2025년도 한국의 트렌드를 분석하며 정리한 내용입니다 🌟

"다양한 취향 소비자"

옴니부어

고정관념이 사라지는 시대

자신만의 라이프스타일, 개성, 취향에 따른 소비

"아주 보통의 하루"

아보하

내일은 오늘 같기를 바라는 안온한 일상

• 무탈, 보통, 평범, 일상의 온라인 언급량 증가
• 남에게 과시하기보다 자신에게 집중하는 하루

"내가 꾸미는 토핑"

토핑경제

세상에 둘도 없는 나만의 것

• 개성이 드러나는 자신만의 소비
• 기업과 제품은 기본적 가치에 충실, 제품의 완성은 소비자

"AI 얼굴, 표정 기술"

페이스테크

생성형 AI 만능의 시대

사용자마다 각자의 얼굴을 만들어주는 기술

• 기계에 인간의표정을 입혀 생동감과 친밀감을 높임
• 상대방(소비자)의 얼굴과 표정을 읽어 상태 파악
• 표정 만들기: 이모지, 버튜버, 뷰티 산업

"작고 귀엽고 순수함의 힘”

무해력

작고 귀엽고 순수한 것들

• 스스로를 ‘긁힌 세대’라 부르는 젊음이들은 해가 없는 대상을 찾음
• 작고 조그만 것, 서투른 것 선호

"한국적인 것 확장"

그라데이션 K

다문화 국가

세계화와 로컬화가 서로 빠르게 섞이면서 그라데이션이 진행 중

"체험, 경험 요구"

물성매력

보고, 만지고, 느끼고

체화된 물성으로 경험하고자 하며, 그 기억을 오래 간직한다

• 소비자 체험의 중요성
• 콘텐츠, 브랜드, 기술, 조직 문화의 물성화

"기후변화 반응 태도"

기후감수성

기후 문제 해결을 위해 적극적으로 실천하는 방향의 삶으로 변화

• 폭염관련 상품의 등장
• 기후문제와 날씨에 따른 다양한 기업의 이벤트 등장

"상생의 진화, 동반성장 "

공진화 전략

다른 산업과의 긴밀한 연계를 통해 공동 성장을 도모

1단계: 폐쇄적 자족 시스템

2단계: 제한된 파트너쉽

3단계: 개방적 협력망

4단계: 공진화 생태계

"자기계발 하나 레벨 업"

원포인트업

롤모델을 삼는 것을 대신하여 자기가 잘할 수 있는 일을 찾아 실천하며 성취감을 느끼고, 도달 가능한 목표를 세워 실천

• 성공의 기준은 이제 천차만별, 자기계발은 이제 나의 답을 찾는 과정
• 실천 가능한 한 가지에 집중, 작더라도 도달 가능한 목표
• 일상의 노력을 기록하고 공유, 과시용이 아닌 같은 목표를 가진 사람과 서로 응원하고 격려

[ 트렌드 코리아 2024 - 김난도 ] 의 책을 읽고 2024년도 한국의 트렌드를 분석하며 정리한 내용입니다 🌟

"Don't waste a single second"

분초사회(Effiecient Society)

시간의 가성비의 중요도 향상

"Rise of 'Homo promptus'"

호모 프롬포트(Homo Promptus)

AI 기술이 아무리 뛰어나도, 결국 화룡점정의 역량은 사색과 해석력을 겸비한 인간만의 것

"Aspiring to be a hexagonal human"

육각형 인간(Hexagonal Human)

외모, 학력, 자산, 직업, 집안, 성격 등등 모든 것에서 하나도 빠짐이 없는 사람을 지향 -> 어차피 닿을 수 없는 목표, 포기를 즐기자라는 마인드로 사회를 사는 젊은이들의 활력이자 절망이면서 하나의 놀이

"Getting the price right"

버라이어티 가격 전략(Variavle Pricing)

최저가보다는 최적가의 중요도 향상

"On dopamine farming"

도파밍(Dopaming)

도파민(Dopamine)+파밍(Farming)을 결합한 단어 -> 즐거움을 줄 수 있는 도파민이 분출되는 행동이라면 무엇이든 시도해보고 수집해보려는 노력

"Not like old daddies"

요즘남편 없던아빠(Millennial Hubbies)

가사 노동, 육아, 그리고 가족 관계의 균형점 이동 -> 권위적 가장에서 평등한 동반자로 역할이 바뀌어가고 있음

"Expanding yout horizons"

스핀오프 프로젝트(Spin-Off Projects)

비교적 저예산과 유동적인 전략으로 새로운 비지니스를 시도해보는 스핀오프가 산업 전반으로 확산되는 추세

"You choose, I'll follow"

디토소비(Ditto Consumption)

자신의 가치관과 취향을 오롯이 반영하는 사람, 콘텐츠, 유통 채널의 선택을 따라 구매 의사를 결정 -> 고민의 시간 절약, 실패의 두려움 감소를 위한 손쉬운 방편으로 뜨고 있음

"Elasticity liquidpolitan"

리퀴드 폴리탄(Elasticity Liquidpolitan)

액체(Liquid)+도시(Metropolitan)을 결합한 단어 -> 고정된 공간이 아니라 유연하게 변화하는 도시

"Supporting one another"

돌봄경제(Care-based Economy)

타인이 건강하게 살아갈 수 있도록 도움을 주는 행위가 경제-산업 분야에 확장

프로젝트의 첫 페이지에는 이모지가 들어가있었다 나는 리액트에서 했던 것처럼

import emoji from "./src/assets/emoji.svg"

<Image source={emoji}/>

와 같이 코드를 작성한 후 저장하고 화면을 보았다 엄.. 아무것도 보이지 않았다 새로고침의 문제인가 싶어서 밑에 텍스트 코드를 작성한 후 실행시켜보니 텍스트는 잘 보였다 흠.. 그 다음으로는 svg파일이였던 사진을 png파일로 바꿔 실행시켜보았다 오 화면에 떴다..!

그런데 여기서 의문하나가 들었다 ' 그럼 react-native에서는 svg가 사용이 안되는 건가? ' 그래서 구글링을 해보니 react-native에서 svg파일을 사용하려면 react-native-라이브러리를 사용해야 한다고 한다..!

다음에는 또 무슨 문제로 이렇게 글을 쓸지 궁금한데 생각보다 빨리 글을 쓰게 될 것 같다..^-^;; 문제 생기고 해결하면 또 적어야쥥~ 다들 개발 화이팅✨

👏 이지스퍼블리싱 서평단을 통해 책을 받게 되어 이렇게 리뷰를 해보게 되었습니다!

안녕하세요!!

리액트 개발자라면 이렇게 해야 인정받는다! 안녕하세요 오늘은 '리액트로 웹앱 만들기 with 타입스크립트' 책 리뷰를 해보려고 합니다

서평단으로 신청한 이유는?

저는 부산소프트웨어마이스터고🏫에서 재학 중인 학생입니다 1학년 때 자바스크립트를 사용하여 리액트를 이용해왔었습니다 그런데 시간이 지날수록 타입스크립트가 점점 뜨더라고요..🤔 그래서 타입스크립트에 관심을 가지다가 이번에 이지스퍼블리싱에서 이 책의 서평단을 모집하여 리뷰를 할 수 있는 좋은 기회를 주셔서 참여할 수 있게 되었습니다!

책 리뷰

리액트의 개발 과정과 원리, 스타일링, 컴포넌트와 훅, 상태관리, 라우터와 같이 리액트로 개발하기 위해 기본적으로 알아야 할 지식들을 15차시로 나눠서 설명해주고 있습니다! 저는 이전에 자바스크립트로 개발을 해본 사람으로서 책의 목차만 보았을 때 "오 입문용으로 이 책 괜찮겠는 걸?"이라는 생각이 바로 들더라고요ㅎㅎ 그런데 정말로 책 내용까지 확인해보았을 때 이미지로도 나와있고 코드와 그에 대한 설명 또한 입문자의 시선에서 보았을 때 이해하기 쉽게 나와있어서 입문용으로 좋겠다고 생각이 드네요

소감

저는 감사드리게도 이지스퍼블리싱의 서평단으로 참여하여 이렇게 책을 받아보게 되었고 이 책을 보며 개발을 할 수 있게 되었는데 만약 자신이 처음으로 리액트를 이용하여 개발을 할 때 타입스크립트를 사용하고자 한다..!라고 하시는 분들이 책을 찾고 계신다면 이 책을 추천드릴 것 같습니다! 그럼 모두 개발 화이팅😆

• 모두 위젯으로 이루어져 있다(작은 텍스트나 버튼 혹은 큰 레이아웃 등등)
• Container : 자식 위젯들을 커스터마이징할 수 있는 위젯 클래스

          -> 여백, 간격, 테두리, 배경색을 추가하고 싶을 때 사용

• 위젯 생성, 컨트롤을 하기 위해서는 StatelessWidget, StatefulWideget, State 이 세가지를 알아야 한다(Flutter 문법 벨로그 참고)
• 네이티브단에서 일일히 상태를 지정할 필요 없이 머트리얼 디자인 또는 쿠퍼티노 디자인에 맞는 UI를 다 제공(이를 사용하면 간편하고 쉽게 위젯으로 만들어 사용하기 때문에 개인 앱 제작과 작은 외주 프로젝트용으로 flutter가 편리하다)
• 화면 전환을 위해 라우터를 사용하고 Navigator라는 클래스를 이용

: 모든 시각적 요소(버튼, 텍스트, 이미지) -> 계층구조 -> 효율적인 통신을 위해 상태 관리 패턴인 Provider, Riverpod, Bloc 등 사용 가능

• Center() : 부모위젯을 기준으로 자식위젯을 가운데 정렬

• Container() : 내부의 정 가운데 자식위젯을 위치

• StatelessWidget : 상태가 고정일 때 사용(앱의 로고나 정적 텍스트)

• Text, Image, Container, Row, Column, ListView 등 클래스 포함 Object: 모든 플러터 객체의 기본 클래스 Diagnosticable: 진단 정보를 제공하기 위한 추상 클래스 DiagnosticableTree: 진단 정보를 트리 구조로 제공하기 위한 추상 클래스 Widget: 플러터의 위젯을 나타내기 위한 추상 클래스 Text: 주어진 텍스트를 화면에 표시

• StatefulWidget : 상태가 변하고 UI 바뀜이 필요할 때 사용

• TextButton, IconButton, Checkbox, Radio, TextFormField, DropdownButton 등 클래스 포함 MaterialButton: 머티리얼 디자인 스타일을 가지는 버튼 위젯을 나타냄 (TextButton은 MaterialButton의 하위 클래스) TextButton: 텍스트를 보여주고 사용자 입력에 반응하는 버튼 위젯 (일반적으로 눌렀을 때 어떤 작업을 수행하기 위해 사용)

서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 기법

초기 화면 동작과정

1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청한다
2. 서버는 빈 페이지를 클라이언트에게 전달한다
3. 전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 다운로드하여 최종적인 화면을 사용자에게 보여준다
4. 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행한다

장점

빠른 속도

브라우저 내에서 페이지를 이동하기에 상대적으로 페이지 간 이동 시 속도가 빠르며 필요한 내용과 수정된 데이터에 대해서만 교체를 하기에 속도가 빠름

사용자 친화적

새로고침이 없으므로 화면 깜빡임이 발생하지 않아서 사용자에게 친화적임

짧은 공백기간

TTV와 TTI의 공백기간이 짧다

• TTV(Time To View): 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
• TTI(Time To Interact): 사용자가 웹브라우저에서 인터랙션할 수 있는 시점

단점

• 초기 페이지 렌더링 속도가 느림 (빈 페이지를 출력하고 스크립트의 링크에 따라 다운을 받기 때문이다)
• 검색엔진 최적화에 불리함 (초기 페이지를 빈 페이지로 우선 보여주기 때문이다)

프레임워크

React

[ SSR (Sever Side Rendering) ]

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법

초기 화면 동작과정

1. 사용자가 브라우저에서 요청을 한다(최초 홈페이지 접속)
2. 클라이언트에서는 이를 확인하고 서버로 요청을 한다
3. 서버에서 데이터를 포함한 미리 구성된 정적 파일을 클라이언트에게 전달한다 4, 전달받은 클라이언트에서 스크립트가 수행하여 최종적인 화면을 브라우저에 그려 사용자에게 보여준다

사용 목적

검색 엔진 최적화 (SEO)

검색 사이트(ex 구글, 네이버)에서 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 최적화하는 기법

빠른 페이지 렌더링

빈 HTML 페이지를 받아 브라우저에서 그리지 않고 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간이 단축됨

통합 유지보수 모델

전체 앱을 개발하기 위해 동일한 언어와 선언적 컴포넌트 지향의 유지보수 모델을 사용할 수 있음

단점

• 프로젝트의 복잡도
• CSR에 비해 서버 부하가 큼 (CSR 서비스보다 서버가 할 일이 많고 바빠서 트래픽이 많이 몰릴 경우 응답이 느려지거나, 메모리가 한도를 초과해 서버가 동작을 멈추게 될 수도 있다)
• 불필요한 인터넷 대역폭이 소모될 수 있음
• 페이지 요청마다 페이지 새로고침이 발생

프레임워크

Next.js / Vue.js

• href 특성을 통해서 웹 사이트 내에서 다른 페이지, 같은 페이지 내의 특정 위치, 그 외 다른 웹 사이트 URL로 연결할 수 있는 하이퍼링크를 만든다
• href로 지정한 주소로 이동을 하기 때문에 새로고침이 일어난다

Link 컴포넌트

• React에서 사용하는 a 태그라고 말할 수 있다
• 주소로 이동하여 전체를 새로고침 하는 것이 아니라 필요한 부분만 재 랜더링 하도록 하는 컴포넌트이다
• to를 이용하여 이동한다

a 태그 vs Link 컴포넌트

가장 큰 차이점은 a태그의 href로 이동하면 상태 값을 읽고 Link 컴포넌트보다 속도가 저하된다는 것이다 반면, Link 컴포넌트는 브라우저의 주소만 바꾸고 페이지 자체를 새로고침하지는 않는다

결론 : React에서는 a 태그보다는 Link 컴포넌트를 사용하는 것이 좋다ㅏㅏ

🌟 감상평

현재 AI의 발전이 점점 빨라지고 늘어나고 있다. 인공지능은 약인공지능, 강인공지능, 초인공지능으로 나눌 수 있는데 gpt 5에 강인공지능이 적용될 것이며 이제 머지않아 강인공지능의 시대가 올 것이라는 것을 들은 적이 있다. 강인공지능이란 인공지능을 인간의 지식과 동일하게 구현하고자 하는 기술이다. 강인공지능의 시대가 올 것이다라는 말과 위의 기사를 통해 아무래도 소프트웨어 쪽의 직업을 희망하고 있는 나로서는 생활 속에 AI가 사용되기 시작하며 편리함이 올 것이다와 같은 긍정적인 시선보다는 점점 AI가 발전해 나가고 AI가 사람의 기술을 띄어 넘게 되는 순간이 온다면 점점 사람의 직업은 사라지게 될 것이고 그로 인해 실직을 하는 사람들이 많아질 것이다와 같은 부정적인 시선으로 바라보았다. 그러다 보니 이러한 소식과 AI의 발전은 나에게 두려움의 존재로 다가오게 되었고 듣고 두려워하기만 하는 것이 아닌 최악의 상황을 먼저 바라보고 대비를 하는 자세를 가져야겠다고 생각이 들었다. 내가 생각하는 최악의 상황이란 AI가 인간과 유사한 마음이나 감정 따위를 지니고 행동하게 되는 순간 즉, 초인공지능 시대가 최악의 상황이라고 생각한다. 만약에 초인공지능의 시대가 찾아오게 된다면 일자리의 실직 위험을 걱정하는 것과 더해 인간의 권리에 대해서도 걱정을 해야하게 될 상황이 올 것이다. 이를 대비하기 위해서는 소프트웨어에 대해 공부하는 입장에서 AI라는 기술과 AI라는 것에 대하여 자세히 알고 이가 어떤 원리로 작동이 되는 지, 인간과 AI가 공존하며 인간의 편리를 증가시킬 수 있게 하기 위해서는 어떤 기술을 어느 선까지 개발을 해야 하는지에 대해 많이 공부하고 고민해 봐야한다고 생각한다. 나는 많은 소프트웨어의 분야 중에서 AI라는 분야에 대해 관심을 가지고 있다. 나의 고등학생 기간 동안의 목표로는 AI 분야에 대해 학교에서 배우는 것 외에도 공부를 하며 기술을 늘려가고 공부한 AI 기술을 학교에서 배우게 되는 하드웨어와 소프트웨어적 기술에 넣어 개발을 해나가는 것이다. AI라는 분야에 대해 관심이 있는 만큼 AI의 현재 상황과 AI의 개발로 인해 일어나게 될 일들에 대해 그 누구보다도 관심을 가지며 해결방안을 생각해나가야 한다고 생각한다. 아직 최악의 상황이 오지 않은 현재에 집중하여 최악의 상황에 올 피해를 최대한 줄이기 위해 노력하며 미래에는 현재보다 인간의 편리가 증가하여 더욱 발전된 환경으로 만들어 나가야겠다고 생각하게 되었다.

🌟 감상평

AI가 점점 발전해나가고 있다는 사실은 발전해 나가는 gpt, gpt의 사용자 증가와 gpt 이외에도 뤼튼과 같은 여러 AI 기술을 사용한 웹, 앱 증가를 통하여 간접적으로 알고 있었다. 그런데 매일 경제의 위의 뉴스를 통해 수치와 AI의 기술이 기업에 많이 사용되고 있다는 것에 대해 직접적으로 알게 되었다. 또한 3년이라는 시간 동안에 AI 활용 기업이 25.5%나 증가하여 2020년 조사 당시의 응답률보다 11배 넘게 증가한 수치라는 사실이 나의 생각보다 수치가 차이가 많이 나서 굉장히 흥미로웠고 신기하였다. 현재 나는 부산소프트웨어마이스터고등학교라는 소프트웨어 중심의 고등학교에 재학 중인 학생이다. 그래서 위와 같은 뉴스의 정보가 굉장히 나에게 와닿았다. 고등학교에 들어온 후 초반에 인공지능이라는 분야에 관심이 갔는데 위의 뉴스를 통하여 AI를 활용하는 기업의 비율이 점점 늘어나고 있는 것 같아 더욱 인공지능이라는 분야에 관심이 갔다. 그런데 아쉽게도 우리 고등학교가 소프트웨어 중심의 교육을 다루고 있긴 하지만 인공지능이라는 분야에 대해서는 자세히 다루지 않는다고 알고 있다. 우리 학교의 2학년 선배님 중에서 인공지능에 관심을 가지고 스스로 공부를 하여 동아리 프로젝트에 AI를 활용하신 분들이 있다는 것을 알고 있고 또한 최근 학교에서 열린 전공 동아리 결과 발표회 때 인공지능을 활용한 동아리가 앞에서 말했던 동아리 외에도 하나의 동아리가 AI를 활용하여 프로젝트를 제작하여 총 AI를 활용하여 프로젝트를 만든 동아리 2팀을 보았었다. 학교에서 인공지능이라는 분야에 대해 자세히 다루지 않았어도 각자 스스로 공부하여 프로젝트를 제작할 시 학교에서 배운 소프트웨어 기술에 AI 기술을 활용하는 선배님들을 보고 나 또한 인공지능 분야에 관심이 있으니 학교에서 자세히 다루지 않더라도 따로 관심을 지속적으로 가지고 공부하여 공부한 지식을 학교에서 배운 지식에 더하여 프로젝트를 제작할 수 있는 학생이 되는 것을 목표로 2학년을 보내야겠다고 다짐하였고 목표를 이루기 위해 노력할 것이다.

혼자 공부하는 컴퓨터구조 < 7-1 다양한 보조기억장치 >

🌟 보조기억장치

흔히 사용하는 USB 메모리, SD 카드, SSD와 같은 저장 장치

대표적인 보조기억장치 : 하드 디스크, 플래시 메모리

💾 하드 디스크

자기적인 방식으로 저장하는 보조기억장치 ( 자기 디스크의 일종으로 지칭하기도 한다 )

[ 하드 디스크 구성 요소 ]

• 플래터 하드 디스크에서 실질적으로 데이터가 저장되는 구성 요소

• 회전하면서 도로 위를 이동하는 자동차의 바퀴에 해당하는 플래터는 회전하면서 데이터를 저장하는 역할

• 스핀들 플래터를 회전시키는 구성 요소 ( 단위 : RPM )

• 자동차의 축과 같이 스핀들은 플래터를 중심으로 회전시키는 역할

• 헤드 플래터를 대상으로 데이터를 읽고 쓰는 구성 요소

• 자동차 엔진이 도로의 표면을 읽고, 필요에 따라 가속하거나 감속하는 것처럼 헤드는 플래터를 데이터를 읽고 쓰는 역할

• 디스크 암 헤드를 이동시키는 구성 요소

• 자동차의 방향을 제어하는 조향 장치처럼 디스크 암은 헤드를 정확한 위치로 이동시켜 특정 부분의 데이터에 액세스할 수 있도록 함

[ 데이터 저장 ]

트랙과 섹터라는 단위로 데이터를 저장 트랙 : 큰 동그라미 섹터 : 트랙을 작게 나눈 하나하나 단위 -> 정확한 크기는 하드 디스크에 따라 차이가 있지만 일반적으로 512바이트 정도의 크기를 가지고 있다 -> 하나 이상의 섹터를 묶어 블록이라고 표현하기도 한다 실린더 : 여러 겹의 플래터 상에서 같은 트랙이 위치한 곳을 모아 연결한 논리적 단위 -> 연속된 정보는 보통 한 실린더에 기록된다

[ 저장된 데이터에 접근하는 과정 ]

• 탐색 시간 : 접근하려는 데이터가 저장된 트랙까지 헤드를 이동시키는 시간
• 회전 지연 : 헤드가 있는 곳으로 플래터를 회전시키는 시간
• 전송 시간 : 하드 디스크와 컴퓨터 간에 데이터를 전송하는 시간

+ '프로그래머가 꼭 알아야 할 컴퓨터 시간들'의 일부 발췌

-> 많은 시간이 걸린다 -> 시간들이 별것 아닌 것 같아도 성능에 큰 영향을 끼친다

🔦 플래시 메모리

전기적으로 데이터를 읽고 쓸 수 잇는 반도체 기반의 저장 장치

[ 단위 알아보기 ]

• 셀 플래시 메모리에서 데이터를 저장하는 가장 작은 단위
• 페이지 셀들이 모여 만들어진 단위
• 블록 페이지가 모여 만들어진 단위
• 플레인 블록이 모여 만들어진 단위
• 다이 플레인이 모여 만들어진 단위

( 읽기와 쓰기는 페이지 단위로, 삭제는 블록 단위로 이루어진다 )

[ 플래시 메모리 종류 ]

하나의 셀에 몇 비트를 저장할 수 있느냐에 따라 플래시 메모리 종류가 나뉜다

SLC 타입

• 한 셀에 1비트를 저장할 수 있는 플래시 메모리
• MLC나 TLC 타입에 비해 비트의 빠른 입출력이 가능하다
• 용량 대비 가격이 높다
• 보통 기업에서 데이터를 읽고 쓰기가 매우 많이 반복되며 고성능의 빠른 저장 장치가 필요한 경우에 사용한다

MLC 타입

• 한 셀에 2비트를 저장할 수 있는 플래시 메모리
• SLC 타입보다 대용화하기 유리하며 용량 대비 가격이 저렴하다
• 시중에서 사용되는 많은 플래시 메모리 저장 장치들이 MLC타입(혹은 후술할 TLC타입)으로 만들어진다

TLC 타입

• 한 셀에 3비트를 저장할 수 있는 플래시 메모리
• 대용량화 하기가 유리하다
• 일반적으로 수명과 속도가 떨어지지만 용량 대비 가격이 저렴하다

QLC 타입

• 한 셀이 4비트를 저장할 수 있는 플래시 메모리

[ 페이지 상태 ]

• Free 상태 어떠한 데이터도 저장하고 있지 않아 새로운 데이터를 저장할 수 있는 상태
• Vaild 상태 이미 유효한 데이터를 저장하고 있는 상태
• Invaild 상태 쓰레기값이라 부르는 유효하지 않는 데이터를 저장하고 있는 상태

( 플래시 메모리는 하드 디스크와는 달리 덮어쓰기가 불가능하여 Vaild 상태인 페이지에는 새 데이터를 저장할 수 없다 )

[ 가비지 컬렉션 ]

플래시 메모리는 쓰레기값을 정리하기 위해 가비지 컬렉션 기능을 사용한다

-> 유효한 페이지들만을 새로운 블록으로 복사하고 기존의 블록을 삭제하는 기능

출처: 혼자공부하는컴퓨터구조+운영체제

• react에서 useState를 import 받아야 한다

  import { useState } from 'react';

• 변수 선언 / state의 생성과 동시에 가져야 할 초기값을 useState함수의 인자로 넣어주면 state와 setState라는 두가지 요소를 배열 형태로 리턴

  const [state, setstate] = useState(초기값);

• 변수 재선언 / state의 값을 변경하려면 setState 함수를 불러서 인자에 변경될 값을 넣으면 된다

  setState(1); // state의 값을 1로 변경

-setState함수를 이용해서 state의 값을 변경하면 해당 컴포넌트는 화면에 다시 렌더링 되어서 state가 변경될 때마다 화면이 업데이트된다

useEffect : react component가 렌더링 될 때마다 특정 작업(side effect : component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과)을 실행할 수 있도록 한다

-state 변수만 변하는 것을 감지해서 렌더링 되도록 설정 해줄 수 있다

• componentDidMount / 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행
• componentDidUpdate / 리렌더링을 완료한 후 실행 (render()가 업데이트될 때마다 실행)
• componentWillUnMount / 컴포넌트를 DOM에서 제거할 때 실행

-

useEffect(function, deps)

function:실행하고자 하는 함수 deps: 배열 형태. function을 실행시킬 조건(deps에 특정값을 넣게 되면 컴포넌트가 mount될 때, 지정한 값이 업데이트될 때 useEffect를 실행) -useEffect 함수 불러오기

import React, { useEffect } from "react";

• 한번만 실행

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, []);

  useEffect(함수, []) 이렇게 빈칸을 넣어놓으면 첫 렌더링 후 한 번만 렌더링 하도록 만들 수 있다

useRef : 원하는 DOM 혹은 컴포넌트에 접근 가능하게 해주는 시스템

• import { useRef } from 'react';

• useRef는 current를 통해 값에 접근할 수 있다

• 컴포넌트의 참조값이 변경되어도 리랜더링 되지 않는다

• useRef 참조값이 존재하는 컴포넌트를 useState를 활용하여 리랜더링 시켜도 값은 초기화되지 않고 유지된다

• DOM에 직접 접근하기 위해서는 접근하고자 하는 태그에 ref를 사용하면 된다

• DOM에 직접 접근해 스타일 및 className을 조작하여 css를 변경하거나 value값을 추출하는 등의 작업을 진행할 수 있다

• video 등의 미디어 요소에도 활용할 수 있다 (비디오 플레이어의 영상 경로를 변경하여 영상의 내용이 바뀌도록 활용할 수 있다)

• 보통 페이지 스크롤 등에 사용

useLayoutEffect : useEffect와 동일하지만, 모든 DOM 변경 후에 동기적으로 발생 ( DOM을 조작하는 코드가 존재하더라도, 사용자는 깜빡임을 보지 않는다) (useLayoutEffect 내에서 스케줄된 업데이트는 브라우저가 Paint하기 전에 동기적으로 실행(Flush)된다)

• useEffect와 useLayoutEffect의 차이는 Browser paints screen 전후로 실행되는 순서라고 볼 수도 있겠습니다

• css는 선택자(selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다
• 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다

  장점

  중첩, 변수 선언, 연산자 등 많은 장점을 가지고 있다

동적으로 CSS 관리

프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다

변수

변수를 지정해 놓고 바로 사용이 가능

• 프로젝트 내에 정해놓은 컬러를 사용함에 있어 오차를 줄여주고, 사용하는 개발자 입장에서 효율적으로 개발이 가능
• 디자인 컨셉 변경과 같이 대대적으로 변경할 때에도, 변수 선언 부만 수정하면 되니 유지보수성이 뛰어나다

  $color: #ed5b46;
  $borderRadius: 5px;
  

div {

background-color: $color;
border-radius: $borderRadius;

}

## 중첩
셀렉터, 속성을 중첩시키거나 상위 요소를 참조하는 것이 가능하다

label {

  padding: 3% 0px;
  width: 100%;
  cursor: pointer;
  color: $colorPoint;

  &:hover {
    color: white;
    background-color: $color;
  }

}

복잡한 구조의 HTML에서는 각각 요소들에 맞는 디자인을 추가하기 위해 id, class, className 등 태그마다 선언을 해줘야 하는 번거로움이 있으나, 셀렉터 중복 기능의 특성인 하위 항목에 적용되는 부분을 잘 이해하면 HTML 태그 자체에서 속성 값을 줄일 수 있으므로, HTML 코드의 가독성 또한 상승한다

## import
디폴트 디자인이 가능하고, 한쪽에서 선언해둔 컬러 코드나 폰트를 가져다가 다른 scss파일에서 사용하기가 용이하다
-> 그에 따라 유지보수를 효과적으로 할 수 있다

// common.scss

// colors $color1: #ed5b46; $color2: #f26671; $color3: #f28585; $color4: #feac97;

// Size Section $borderRadius: 5px;

// default Tags button { cursor: pointer; color: $color1; background-color: $color2; border-radius: $borderRadius; border: 0px;

&:hover { color: $color2; background-color: $color1; } }

div { padding: 5px; border-radius: $borderRadius; border: $color3 1px solid; }

// style.scss

@import "common.scss";

.login_box { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;

div { border: 0px; }

.box { background-color: $color4; width: 700px; height: 400px; padding: 10px; display: flex; justify-content: space-between; } }

• 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리
• CSS in JS 기술로, JS내에 CSS를 작성하는 라이브러리
• className 기반
• CSS파이링 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
• 클래스명을 해시값으로 자동 생성, 클래스명 오염 방지
• 자바스크립트의 동적인 값들을 온전하게 사용이 가능
• 변수에 따라서 스타일을 바꿀 수 있는 장점을 가짐
• 연산자(&&, || 등)를 이용해서 스타일을 적용 가능
• 자주 사용하는 css를 관리하기 위해 css props를 사용
• GlobalStyle과 ThemeProvider를 사용하여 전역으로 사용할 요소들을 쉽게 정의 가능

  import {createGloabalStyle} from 'styled-components';
  import reset from 'styled-reset';
  

const GlobalStyle = createGlobalStyle` ${reset}

// 전역 스타일

`;

export default GloabalStyle;

```

• 코드 가독성을 위해 컴포넌트를 먼저 선언하고 하단에 작성
• Template Literal을 사용하여 작성하며, const 컴포넌트명 = styled.태그명으로 이루어져 있음 (스타일 상속: const 컴포넌트명 = styled(스타일컴포넌트명))

사용이유

컴포넌트가 많을 경우

1. class 중복으로 생성
2. 다른 컴포넌트에 원하지 않는 스타일이 적용
3. css파일이 너무 길어져서 수정이 어려움

-> 컴포넌트 제작시 라이브러리를 이용하여 js파일에서 스타일을 바로 입힘(컴포넌트마다 고유한 클래스를 가짐)

장점

• Scss라이브러리 설치 없이 Scss 문법 사용 가능
• 자유로운 CSS 커스텀 컴포넌트 생성
• 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 가능
• className을 스스로 생성하기에 className의 중복이나 오타로 인한 버그를 줄여준다
• 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기에 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다
• className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다
• 컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다
• 개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하면 될 뿐이다
• 화면에 컴포넌트가 렌더링 되었는지 추적해 컴포넌트에 대한 스타일을 자동 삽입 -> 코드를 적절히 분배해 놓으면 최소한의 코드만으로 화면을 띄움

scss와의 차이점

• SCSS: css in css 문법으로 js 파일과는 분리 / styled-componenets: css in js 방식으로 컴포넌트가 렌더링 될 때만 해당 스타일 정보를 읽음
• SCSS: 어떤 컴포넌트의 상태값이 변하더라도 반응하기 쉽지않다

    브라우저에 보이지 않은 컴포넌트까지 읽기 때문에 불필요한 컴파          일 과정이 추가된다

• styled-components: 동적인 이벤트가 많은 사이트라면 컴포넌트가 자주 렌더링 될 때 그만큼 스타일 정보도 다시 읽어와야한다 / SCSS: 이미 html문서에 읽혀져 있는 상태이기 때문에 처음에는 스타일 정보를 가져오는 양이 많더라도 그 후 추가적인 렌더링은 상대적으로 적을 것이다

{ 렌더링 속도가 빨라야 하는 인터랙티브한 프로젝트라면 CSS in CSS 개발의 효율성이 중요하고 컴포넌트 위주의 프로젝트라면 CSS in JS }

css in css

• CSS Module, CSS 전처리기(Sass, Less 등)
• 별도의 자바스크립트 전환이 필요 없어 빠른 속도

  css in js

• 자바스크립트와 CSS 사이의 변수를 공유할 수 있음
• 현재 사용 중인 스타일만 DOM에 포함시킬 수 있음
• 별도의 라이브러리 설치가 필요하여 번들 크기 증가
• CSS in CSS에 비해 느림(JS->CSS로의 변환 필요)