Today I learn

자바스크립트에는 타입이 존재하는데, string(문자열), 숫자, boolean, undefined, 배열, 개체 등이 있다. typeof 연산자는 데이터의 타입을 알고 싶을 때 사용할 수 있다. 변수를 선언하고 할당했을 때, 할당된 값의 타입을 알고자 할 때도 사용할

HTML 속성(attribute)은 두 가지로 구성되는데, attribute name(속성 이름)과 attribute vale(속성 값)이다.문단을 표현하는 HTML 요소는 p(paragraph) 인데, section이라고 임의로 결론내림.mdn에서 찾아보니 secti

비교 연산자 : ===,!==, <, >, <=, >=논리 연산자 : &&, ||, ! 조건문 작성 (배열 매서드에서는 immutable/mutable 여부가 중요하다고 한다.)for문 : 초기화, 조건문, 증감문 순서로 괄호 안에 작성.while문 :

인라인 스타일CSS에서 여러 속성을 사용해서 텍스트를 꾸미거나 정렬 등을 할 수 있고, 이 때 selector를 사용해서 특정 요소에 속성을 지정해줄 수 있다. 오늘 배운 것 중 생각나는 속성들은...text-aglin 텍스트 정렬font-family 글꼴 설정colo

복습은 1주차 내용 전부를 했지만, 블로그에는 평일에 진도를 따라 잡느라 빠르게 넘어가서 더 찾아보지 못했던 내용들 위주로 정리한다.(integar < float : 정수는 실수의 하위 집합)Number()와는 다르게 이 두 함수는 일반 문자는 무시하고, 숫자만

레이아웃을 만들 때 Flexbox를 사용할 수 있다. felxbox는 다양한 속성들을 가지고 있는데, 부모 요소에 적용해야 하는 속성들과 자식 요소에 적용해야 하는 속성들이 있다. display : flex 자식 박스 요소 정렬, 차지하는 크기 설정 flex-direc

브라우저가 동작할 때 HTML을 읽어내리다가 스크립트 요소를 발견하면 파싱을 중단한다.중단한 상태에서 스트립트 요소 로드 + 파싱 후 다시 HTML 파싱한다.이렇다 보니 HTML 상단에 스크립트가 있을 때, head 부분에 무거운 스크립트 요소가 있을 디스플레이에 표시

GUI는 아이콘이나 폴더 같이 그래픽으로 나타낸 것. prompt : 키보드 입력을 확인&편집할 수 있는 한 줄의 공간. CLI 명령어 사용자 계정과 관리자 계정이 나뉘어져 있는 이유는 보안을 위해서. (악성코드, 해킹)절대경로 : 기준점으로부터 절대적 위치. 여기서

배열은 순서(순서는 인덱스, 0부터)가 있는 값으로, 대괄호를 사용해 만든다. 각각의 원소는 쉼표로 구분.arr = 1, 2, 3 일 때 arr3을 하면 없는 값이기 때문에 ‘undefined’가 나옴.arr.length : 배열의 길이(속성)를 알아내도록 해줌.a

레이아웃을 만들 때, 브라우저의 기본 스타일이 방해가 되는 경우가 있음. 브라우저마다 여백, 글꼴 등이 기본적으로 다르기도 함.여기서 비교 가능 : https://codepen.io/gka/pen/pdKrxw세 박스가 모두 flex-grow : 1 일 때,fl

각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있음.객체 내부 값을 가지고 오는 방법에는 dot notation, braket notation 두 가지가 있다. ⇒ braket notation은

원시 자료형 : 객체가 아니면서 매서드를 가지지 않는 6가지의 타입으로 원시 자료형의 데이터 보관함 한 칸에는 하나의 데이터만 넣을 수 있음. ⇒ string, number, bigint, boolean, undefined, symbol, null ⇒ 원시 자료형은

ECMAScript라는 자바스크립트의 표준의 여러 버전 중, 2015년에 출시된 버전이 ES6이다. 현재 ES2019까지 출시되었지만 ES6에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가됨.(ex: let, const, 템플릿 리터럴 등)spre

length 속성은 배열과 문자열에서만 사용되고, 객체에서는 사용할 수 없다. 그래서 객체.legnth를 했을 땐 'undefined'가 반환됨. 매서드는 어떤 객체의 속성으로 정의된 함수를 말한다. gethere은 now 객체의 속성으로 정의된 함수인 '매서드'라고

함수와 함수가 선언된 어휘적 환경(변수 및 함수 선언의 형태)의 조합. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됨.클로저 함수 : 외부 함수의 컨텍스트에 접근할 수 있는 내부 함수를 뜻함. 외부 함수의 실행이 종료된 후에도 클로저

DOM(Document Object Model)은 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model.(문서 객체 모델)DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직일 수 있게 만들 수

onclick은 값을 덮어쓰기하고, addEventListener는 누적한다. .target : 이벤트가 발생한 대상 객체를 가리킴. Bare minimum 이후 advanced 과제를 해결할 때 새롭게 배운 내용을 정리해본다. 복수의 if 조건문을 switch문으로

처음 프로젝트를 시작했을 땐 당연히 advanced까지 과제를 모두 완료하는 것이었다.(😀) 하지만 폼을 제출했을 때 새로운 게시글(디스커션)이 올라가도록 하는 기능을 구현할 때 많이 헤매서 자연스럽게 'bare minimum이라도 완료하자!'로 목표가 바뀌었다.구현

부제 : Section 2의 서막을 여는 고차함수 ! section 2에서는 앞으로 공부해나갈 때 필요한 도구들의 사용법을 배운다.프로그래밍 컨셉 : 고차함수, 객체지향개발 편의 툴 : 리엑트, 비동기개발 환경과 흐름 : 웹서버, 네트워크본격적으로 커리큘럼상으로도 알고

순차적 프로그래밍 => 절차 지향 프로그래밍 => (구조체) => 객체 지향 프로그래밍순차적 프로그래밍은 말 그대로 순서대로 작동하는 프로그래밍이다. 반복적인 동작이 필요할 때는 goto문을 이용해 특정 위치로 강제하는 방법을 사용했는데, 이 방법은 코드가 커질수록 흐

자바스크립트는 프로토타입 기반 언어라고 불린다. 프로토타입은 원형 객체를 말한다.앞서 객체 지향 프로그래밍에 대해서 배우면서 클래스 등을 배웠지만, 프로토타입에 대해 검색하면서 자바스크립트에는 클래스라는 개념이 없었고 대신 프로토타입이 존재했다는 걸 알게 되었다. (E

언더바 과제는 객체와 배열을 다루는 Underbar라는 라이브러리를 직접 구현하면서 자바스크립트 내장 매서가 어떻게 콜백 함수를 활용하는지 원리를 알아보는 과제였다.과제의 Bare Minimum을 완료하는 것이었다. advanced, nightmare는 시간내에 어려울

node.js는 비동기 이벤트 기반 javascript 런타임.모듈 : 어떤 기능을 조립할 수 있는 형태로 만든 부분 모든 모듈은 모듈을 사용하기 위해 불러오는 과정이 필요한데, node.js는 가장 상단에 require 구문을 이용해 다른 파일을 불러올 수 있음.

리액트는 자바스크립트의 라이브러리로 좀 더 효율적으로 프론트엔드 개발을 하기 위해 사용한다. 1\. 선언형 : 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성한다. => 코드를 작성할 때 '페이지가 어떻게 보일지(내가 무엇을 원하는지)'에만

전통적으로 한 페이지에서 다른 페이지로 넘어갈 때 MPA(Multiple Page Application) 방식을 사용했다. 다른 페이지로 넘어갈 때 HTML 문서 전체를 새로 불러오는 방식이었다. MPA는 사용자와 서비스 사이의 상호작용이 증가하면 트래픽이 증가하고,

props는 컴포넌트의 속성으로, 외부(부모나 상위 컴포넌트)로부터 전달 받은 값을 말한다.React 컴포넌트는 자바스크립트의 함수와 클래스로 props를 함수의 인자처럼 전달 받아 이를 기반으로 화면에 어떻게 표시되는지 기술하는 리액트 요소를 반환. 컴포넌트가 최초

아래와 같이 이벤트에 함수 자체가 아니라 함수의 실행을 전달하게 되면 리턴값이 onClick으로 전달되어서 함수의 결괏값이 전달된다. (+랜더링 할 때마다 해당 함수가 호출되기 때문에 성능 저하 문제)이벤트 핸들러는 props로 전달할 수 있다.\*props.child

일단 개념들 정리 하기 크게 클라 & 서버 / api / 브라우저 작동 : 보이지 않는 곳 - url,uri,ip,port,domain,dns/http/브라우저 보이는 곳 : ajax, ssr & csr 정리할 거고 - 최대한 요약 추가로 톡방에 올라온 유튭 영상

REST = Representational Sate Transfer (로이 필딩)REST API : 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식. REST API 작성 시 지켜야 할 규칙아래는 각 단계

React에서는 페이지를 만들기 이전에 컴포넌트를 만들고, 조립하는 상향식 방법을 사용. (테스트 용이, 확장성.)단일 책임 원칙으로 한 요소에서는 한 기능만을 책임지도록 함.데이터는 단방향으로 흐르게 만들어 모든 state는 항상 특정한 컴포넌트가 소유하고, 그 st

: getFlight 함수 전에 FlightDataApi.js의 상단에서 로컬 스토리지로 flightList를 flight 키에 저장한 것을 가져와 json이라는 변수에 할당한다. 그리고 로컬 스토리지는 문자형 데이터 타입만 지원하기 때문에 JSON.parse를 써서

SOP(Same-Origin-Policy) = 동일 출처 정책은 '같은 출처의 리소스만 공유 가능 하다'는 정책이다.여기서 말하는 '출처'는 프로토콜, 호스트, 포트의 조합으로 하나라도 다르면 동일 출처가 아니게 된다.이 정책은 잠재적으로 해로울 수 있는 문서를 분리해

어제 수업하면서 구글로 node.js 서버 관련한 내용을 찾아봤는데, 'Express라는 것도 배울 것 같군...?' 그렇게 생각했었다.그리고 역시나 오늘은 Express와 함께 구르는 날이었던 것이다... 🫠제출 과제는 월요일까지 하는 거라 오늘은 간단하게 개념 학

오늘 해결했어야 하는 문제들은 위와 같았다. 처음에는 내가 서버의 입장이 되어서 코드를 작성해야 한다는 점이 잘 받아들여지지 않아서 한참동안 코드를 읽어봐야 했다. 파일 목록들 중에서 가장 상위에 있는 파일은 app.js라는 파일이고, 그 다음이 라우터들이 담긴

벌써 section 2가 끝이 보인다는 게 실감난다. my agora states를 처음 만들 때가 어제같은데 오늘은 거기에 서버를 연결해서 데이터를 불러오도록 해주었다! section 1에서 구현한 my-agora-states를 React로 다시 개발하기: 정말 정말

재귀 함수는 자기 자신을 호출하는 함수를 말한다. 재귀로 문제를 해결하기 위한 과정: 문제 작게 쪼개기 => 가장 작은 단위로 쪼개기 => 가장 작은 단위 문제 풂으로써 전체 문제 해결재귀를 사용하는 경우주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있을 때중첩

JSON = JavaScript Object Notation데이터 교환을 위해 만들어진 객체 형태의 포맷JSON.stringify : 객체를 JSON으로 변환⇒ stringify하는 과정을 직렬화(serialize)라고 함JSON.parse : JSON을 객체로 변환

사용자 인터페이스 (User Interface) : 사람들이 컴퓨터와 상호 작용하는 시스템.GUI (Graphical User Interface, 그래픽 사용자 인터페이스) ex: 우리가 보는 운영체제의 화면, 애플리케이션 화면 등 현대 사회에서는 GUI가 중요한 역

: 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조 잡기 위한 목적와이어프레임 표현할 때 품질 수준을 ‘피델리티(fidelity)로 표현하며 3가지 레벨로 나뉨.Low Fidelity Wireframe : 손으로 빠르게 그린 수준Middle Fidelity Wi

어제 피그마를 이용해서 인프런 웹 페이지를 구현해보(려고 노력해보)았는데오늘은 인프런 페이지를 보면서 어떤 디자인 패턴들이 사용되었는지 살펴보고, UX/UI를 '피터 모빌의 벌집 모형' 등을 통해 분석해보는 시간을 가졌다. 내가 해당 요소들을 전문가 같이 분석할 수 있

:부품 단위로 UI 컴포넌트를 만들어 나가는 개발(기획 단계에서부터 디자이너, 기획자와 이 컴포넌트 부품들을 함께 공유힐 수 있음)프로젝트 규모 & 복잡도 증가, 작업하는 팀원들 수 증가 다양한 디바이스 등장으로 더 복잡해진 CSSCSS 전처리기는 CSS가 구조적으로

이번 과제는 App.js에서 불러오지 않는 UI 컴포넌트들을 구현했기 때문에, Storybook에서 UI들의 작동을 확인하면서 진행했다. 모달이라는 것은 기존 브라우저 페이지 위에 새로운 윈도우 창이 아니라 레이어를 까는 것을 말한다. 모달이 띄워진 경우 모달 창을 닫

hasText : text가 들어오는 input창에 값이 들어왔는지 아닌지, 값의 유무를 갖는 상태 inputValue : input창에 들어온 값을 갖는 상태 options : input값을 포함하는 자동완성 추천 항목 리스트 (초기값으로 dummy data? 이미

전역 상태 (Global) : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 (ex: 사이트 다크 모드, 언어 설정(국제화) 기능 ) 지역 상태 (Local) : 특정 컴포넌트 안에서만 관리되는 상태 (다른 컴포넌트와 데이터 공유하지 않는 Form 데이터

전역 상태를 관리할 수 있는 저장소인 Store를 제공함으로써 상태 관리에 도움을 줌.: 상태 변경 이벤트 발생시, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됨 ⇒ Action 객체가 Dispatch 함수의 인자로 전달 ⇒ Dispatch 함수가 Acti

이번 과제도 과제 파일 자체를 이해하는 데 조금 오래 걸렸다. 다른 사람이 작성한 코드의 구조를 파악하는 건... 정말 어렵구나...🥹이해한 바를 정리하기 위해서 일단 그림을 조금 그려봤다! 그냥 과제의 중심이 되는 Items나 Cartitems에만 집중했고 noti

웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간.(💡 인터넷은 웹보다 좀 더 포괄적 개념으로, ‘전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망’을 의미.)웹 표준 등장 배경 : 이전에는 브라우저 간 호환이 되지 않아서 개발자들

장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근, 이해할 수 있도록 보장하는 것. (소외계층만을 위한 것은 아님)국내에서는 웹 접근성에 대한 인식이 낮은 편.웹 접근성 효과 사용자층 확대다양한 환경 지원사회적 이미지 향상웹 콘텐츠 접근성 지

회선교환 방식 : 발신자와 수신자 사이에 데이터를 전송할 전용선 미리 할당 & 둘을 연결하는 방식. 즉시성이 떨어진다 패킷교환 방식 : 패킷(pack + bucket, 소포 같은 느낌)이라는 단위로 데이터를 잘게 나누어 전송하는 방식. 각 패킷에는 출발지와

오늘 배운 쿠키나 세션은 인증과 보안에 대한 내용이었다. 개념에 대해 정리도 좀 하고, 오늘 실습이 꽤 길고 내용이 많았어서 그 내용에 대해서도 정리를 해야겠다. 어제 배운 바에 의하면 HTTP는 무상태성을 가지고 있기 때문에 서버가 클라이언트의 상태를 보존하지 않는다

해시 함수(Hash Function)을 이용해 암호화를 진행하는 방식. 다른 암화화 방식들과 다르게 해싱은 암호화만 가능하다. 해시 함수의 특징 : 항상 같은 길이 문자열 리턴, 서로 다른 문자열에 동일 해시 함수 사용시 반드시 다른 결과값, 동일 문자열에 동일 해시

인증을 중개해주는 매커니즘으로, 보안된 리소스에 액세스 하기 위해 클라이언트에게 제공하는 프로세스를 단순화하는 프로토콜 (ex: 소셜 로그인 - 카카오/네이버로 간편 로그인 등)자주 사용하고 중요한 서비스들의 ID와 Password만 기억하면 이를 통해 외부 서비스에도

여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것필요에 따라 데이터의 특징을 잘 파악(분석)하여 정리하고 활용하기 위해 선배 개발자들이 연구해둔 방법이 자료구조라고 할 수 있겠다! 자료구조의 종류는 당장 구글에 자료구조 분류라고 쳐보면 알 수 있듯이 굉장히 많

그래프의 여러 구조 중 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태.트리는 계층적 자료 구조 = 데이터가 바로 아래에 있는 하나이상의 데이터에 한 개의 경로와 하나의 방향으로만 연결됨.트리는 비선형 구조 = 하나의 데이터 아래에 여러 개의

어려웠던 자료구조 문제 풀이 하나하나 뜯어보기 주어진 인접행렬에서 한 정점으로부터 다른 정점으로 이어지는 길이 존재하는지 반환matrix, from, to가 주어짐방문했던 정점을 기록해둘 방법 : checkList라는 false들이 담긴 배열을 만들어준다. false는

브라우저는 웹 서버에서 양방향으로 통신을 하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 위해 응용계층의 대표적인 프로토콜인 HTTP를 통해서 송수신을 하게 된다. 브

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다. @keyframes 키워드를 사용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. 어제에 이어 오늘 과제에서는 @keyframes과 CSS 애니메이션을 구현해보았다.: 제목은 Title

번들링 자체는 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다.프론트엔드 개발에서 번들링은 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정을 말함. “사용자에게 웹 어

오늘은 어제 배운 웹팩, 번들링을 리액트 파일일 때 적용해보는 과제를 수행했다. 리액트로 번들링은 처음이라... 조금 헤맸지만, 그래도 하나하나 해보면서 어제보다 좀 더 웹팩의 기능에 대해서 이해하게 된 것 같다. 리액트 앱을 새롭게 만들어서 번들링을 진행한 건 아니고

가상의 DOM객체로 실제 DOM의 사본과 같은 개념.React는 실제 DOM 객체에 접근해 조작하는 대신 이 가상 DOM 객체에 접근해 변화 전과 변화 후를 비교하고 바뀐 부분만 적용.Virtual DOM은 추상화된 자바스크립트 객체의 형태를 가짐.💡Remind DO

개발자가 스스로 커스텀한 훅을 의미하며, 이를 사용하면 반복되는 로직을 함수로 뽑아내 재사용 가능.일반 함수 내부에서는 리액트 내장 Hook 불러 사용할 수 없지만, Custom Hook에서는 리액트 내장 Hook을 불러 사용할 수 있음. 어떤 각각의 컴포넌트들이 동일

🍩 과제 목표 json-server 이용해 서버를 열고, CRUD에 맞춰 fetch를 이용해 서버에서 데이터 받아오거나, 추가하거나, 수정하기 React.lazy(), Suspense 적용하기 Custom Hook 만들어 적용해보기 : useFetch, useScr

: 전자 회로 및 기계 장치로 구성 (ex : 입출력장치, 중앙처리장치, 기억장치): 하드웨어 위에서 하드웨어 제어하며 작업 수행하는 프로그램.: 컴퓨터가 처리할 수 있는 형태로 데이터와 명령 받아들이는 물리적인 장치들 (ex: 키보드, 마우스, 스캐너, 태블릿, 조이

오늘은 개념을 배우면서 조금 아리송하군...하다가 과제를 하면서 눈물을 한 바가지 흘렸지만 나름대로 배운 게 있는 것 같아서 + 오랜만에 정말 좋은 페어분을 만나서 즐거웠던 하루였다. 과제 할 때는 진짜 에러 해결이 안 돼서 힘들었는데, 해결되고 나니... 짜릿하다.

TDD는 '테스트 주도 개발'로 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론이다. TDD를 통해 소프트웨어를 개발한다는 것은 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미한다.테스트를 먼저 작성하는 것은

최적화는 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것을 말한다.컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미하며, 웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표

클라우드 등장 이전에는 전산실 등에 컴퓨터를 배치하고 인터넷을 연결하여 서비스를 제공했다.서버가 요청에 대한 수용 능력이 한계에 도달하면,같은 공간에 더 많은 컴퓨터를 제공하여 한 대가 해결할 수 있는 요청을 여러 대가 나누는 방식컴퓨터 한 대의 성능을 높이는 방식위와

소프트웨어 시스템이나 애플리케이션 개발 및 유지보수 목적으로 수행되는 활동의 절차로 개발에 대한 전체적인 가이드라인을 제공소프트웨어 개발 프로세스 모델: 소프트웨어 개발 생명주기(SDLC = Software Development Life Cycle)를 기반으로 만들어짐

브라우저에서 API 요청시 브라우저 현재 주소와 API 주소 도메인이 다를 경우 데이터에 접근하려면 CORS 설정이 필요했다. Remember CORS?교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용

알고리즘은 어떤 문제를 해결하기 위해서 일련의 절차를 정의하고, 공식화한 형태로 표현한 일종의 문제의 풀이 방법, 해(解). 프로그래밍에서는 input 값을 통해 output 값을 얻기 위한 계산 과정을 의미한다고 한다.😈 사실 비전공자 개발자 지망생들에게 알고리즘이

정규표현식(정규식:正規式)은 문자열에서 특정한 규칙에 따른 문자열 집합을 표현하기 위해 사용되는 형식 언어이다. 정규표현식은 특정한 규칙을 갖는 문자열로 이루어진 표현식이며, 정규표현식에서의 특수 문자는 각각의 고유한 규칙을 갖고 있습니다. 우리는 이러한 규칙들을 조합

분명 이렇게만 설치하면 tsc 명령어로 컴파일을 실행할 수 있다고 했는데, 해당 명령어를 찾을 수 없다는 문구tsc: command not found 가 떠서 여러가지 방법들을 찾아보다가 brew를 이용해brew install typescript를 해주라는 글을 봤고,

프로젝트를 진행할 때 멘토님께서 '테스트 코드도 작성해보세요~' 말씀하셨는데, 테스트 코드까지 작성할 여력은 없다고 판단해 그냥 지나갔었다. 그에 대한 아쉬움이 남아 최근에 TDD 강의를 듣기 시작했다. 재밌네.. 테스트...?🥹자세한 설정은 공식문서 참고watch를

Challenge1.remember the state of Header Menu2.add finished or done state to todo item3.edit text of todo item (show small text input)브라우저상의 localStora

목업이라는 말이 있듯이 Mock이라는 것은 진짜를 흉내낸 가짜를 말한다. mock 함수라는 건 진짜를 흉내낸 가짜 함수라는 뜻이다. 테스트를 할 때 중요한 원칙 중 하나가 한 번의 테스트에서는 한 개의 대상만 테스트하자는 것인데, 의존성이 존재할 경우 내가 원하지 않는

취업 준비를 하면서 느낀 건데 생각보다 Vue.js를 쓰는 회사들이 많았다. 코드너리에서 React 다음으로 Vue를 사용하는 회사들이 많았던 것을 생각하면 놀랄 일은 아닐지도...이번에 취뽀를 하게 되고 (갸악🥹) 회사에서 Vue.js와 관련 툴들을 사용할 예정이라

mitt는 특정 이벤트를 만들어서 서로 다른 컴포넌트들에 송출하는 느낌의 라이브러리이다. Vue2에서는 EventBus가 있었다고 하는데, Vue3에서는 mitt를 사용하는듯.(혼자서 예시 코드를 작성해보려고 하다보니 좀... 미흡한 부분이 있다.)Vue 라이프사이클

https://engineering.ab180.co/stories/satisfies-safe-upcasting“satisfies” 키워드는 literal (값) 이나 변수를 안전하게 upcast 하는 기능을 수행한다.\*업캐스팅(하나의 데이터 타입을 다른 데이