TIL

1) FORM/ INPUTform태그는 사용자 입력을 수집하는데 사용하는 양식을 의미한다. html에서 다른 페이지(서버)에 정보를 보낼 때 사용된다.input은 type속성에 따라 여러가지 방법으로 표시될 수 있다. input type="button" 단순한 푸쉬 버

1.Node.JS란?Node.JS는 웹 브라우저에 종속적인 자바스크립트에서 외부에서 실행할 수 있는 런타임 환경을 크롬V8엔진을 제공하여 여러 os에서 실행할 수 있는 환경을 제공하게 된다. 이것을 Node.js라고 한다.2..createElement(),appendC

semantic Web이란 무엇인가? 일반적으로 html 5웹페이지는 semantic 웹페이지다. Semantic tag를 통해 만든 web이 semantic web! 다시 말해보자면, 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 (Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 의미 그리고 관련성을 가지는 거대한 데이터베...

대소문자 바꾸기문자 길이배열 slice문자열 찾기위 설명에서 "프로그래밍"이라는 단어가 포함됐는지 알고 싶다.indexOf()함수는 문자열에 특정 문자열이 들어있는지 확인하고,만약있다면"프로래밍"이라는 오타를 "프로그래밍"이라고 바꾸어 준다.코드를 설명해보면,1.inf

HTTP는 HyperText Transfer Protocol의 약자HyperText=문서와 문서가 링크로 연결되어 있음을 뜻함transfer=HTML로 만든 웹페이지 문서(파일)를 보낸다Protocol=컴퓨터끼리 어떻게 html파일을 주고 받을지에 대한 소통방식 약속H

DOM돔이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이다.자바스크립트는 이 model로 웹페이지에 접근하고 페이지를 수정할 수 있다.한마디로, DOM은 HTML인 웹페이지와 스크립팅언어(Javascript)를 서로 잇는 역할이다. 그래서 Javascr

Interaction예를 들어 옷 쇼핑몰에서 사진 위에 마우스를 올렸을때(mouse over) 다른 각도의 제품 사진으로 바꿔서 보여주는 것interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요하다.특정요소에 interactive한 반

한번도 getElementById와 querySelector의 차이점에 대해 크게 생각해본 적이 없다. 이번에 클론코딩으로 자바스크립트를 작성하는데 지금 정리해서 알아두면 좋겠다는 생각에 기록해 본다!

자바스크립트를 공부하다가 slice,splice,split의 차이가 너~무 헷갈리는 것이다. 영어단어도 비슷하게 생겨가지규..😭 그래서 이번에 정리해서 머릿속에 집어 넣어야겠다\~~!! 오늘은 인도 개발자의 도움을 받았다! 글로벌한 개발자 세계><우선 metho

코딩공부를 하다보면 터미널 사용은 기본이라고 할 수 있다!여전히 어렵기도 하지만 더 터미널을 잘 사용하는 개발자가 되고 싶은 마음은 간절하다🤨이번기회에 간략하게 리눅스와 터미널에 대해 정리를 해보고자 한다.리눅스(linux)는 1991년 라이너스 토발즈가 개발한 운영

개발자라면 꼭 알아야하는 툴은 바로 Git과 github이다.꼭꼭 잘 알아둬야 하기에 블로그 작성을 통해 정리해보려고 한닷~!Git의 공식 명칭은 분산버전관리 시스템(VCS)이다.쉽게말하면 프로젝트 파일의 변경 사항을 추적하는 시스템이라고 할 수 있다. 이를 통해 개발

문제twoSum함수에 숫자배열과 '특정수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를배열에 담아 return하라.nums:숫자배열target: 두 수를 더해서 나올 수 있는 합계return: 두 수의 index를 가진 숫자 배열예를 들면

인증 쉽게 설명해서 유저의 아이디와 비번을 확인하는 절차 비밀번호 어떻게 관리해야하는가? 우선적으로 법에 정해져있어서!( 보안규칙) 데이터베이스에 저장 시 개인정보를 해싱하여 복원할 수 없도록 함 암호화는 어떻게 할까? 단방향 해쉬란? 본래 해쉬 함수는 자료구조

email input/password input/Button(onClick) 온 클릭에 fetch함수 들어간다. -->client 클라이언트가 요청을 보내면 서버에서 응답이 온다. method post로 써야 body에 뭘 넣을 수 있다. get 쓰면 안된다

백엔드랑 소통하기 위해선 fetch()함수 사용이 기본이다.이번에 1차 프로젝트를 진행하며 굉장히 많이 쓴 fetch함수 사용법에 대해 기록을 해보려고 한다.백엔드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받는다.이때 자바스크립트 web API fetch

백엔드에서 가지고 있는 데이터는 많고 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용된다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 한다.예를 들면 게시판의 이전/다음 페이지를 끊어 보여주는 기능으로 익숙하다.pagination은 프

자바스크립트를 쓸 수 있다. Expo? React Native를 빠르게 시작할 수 있다. 상대적으로 라이브러리 수가 적다. 업그레이드 속도 빠르다. Touchable Opacity Core Components Styling default가 display: flex

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미하위 클릭 이벤트가 발생했는데 이 이벤트가 계속해서 상위로 전달된다.왜? 1개만 클릭했는데 여러개의 이벤트가 전달되어 발생하는 것일까?그 이유는 브

웹서비스의 역사에 대해 먼제 복습해보자.1세대 웹은 전통적인 Web System Architencture이며 정적인 웹이다.웹 서버가 HTML 페이지 전체를 클라이언트(웹 브라우저)에게 전송한다.초창기 웹사이트는 단순한 정보 제공위주였다. 특별한 기능이 없었으며 무엇보

코어 자바스크립트를 읽고 공부한 부분을 정리해보고자 한다. 📍데이터 타입의 종류 기본형: 숫자, 문자열, 불리언, null, undefined, symbol 참조형: 객체, 배열,함수, 날짜, 정규표현식 => 일반적으로 기본형은 할당이나 연산시 복제되고 참조형은

DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들이 문서구조,스타일, 내용등을 변경할 수 있게 돕는다. DOM은 구조화된 nods,property,method를 갖고 있는 Object로 문서를 표현한다.웹페이지

1)REST API란?2)RESTful의미3) Restful API와 GraphQL 차이점은 무엇인가?Rest (Representational State Transfer)모든 resource들을 하나의 EndPoint에 연결해놓고 각 Endpointsms 그 resou

콜백지옥 콜백지옥이란 무엇인가? 이는 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 예를 들면, 위처럼 콜백 안에 콜백을 계속 무는 형식의 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵다. 완전 콜백 지옥인 것이다-! 이러한

ES6에 추가된 점ES5까지의 자바스크립트에서는 var를 이용해서 변수를 정의했고 그게 유일한 방법이었다.ES6에서는 Const,let이라는 새로운 변수 정의 방법이 생겼다.var가 가진 문제가 무엇이었을까?1) 함수 스코프var의 첫 번째 문제는 정의된 변수가 함수

우선 렌더링이란 HTML,CSS,Javascript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 여기서 알아야할 것은 모든 브라우저가 같은 렌더링 엔진을 사용하지는 않는다.

📍실행 컨텍스트? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트의 동적 언어 성격을 가장 잘 파악할 수 있는 개념이다. 이에 앞서 스택과 큐의 개념을 알아야 할 필요가 있다. > 스택:출입구가 하나뿐인 깊은 우물과 같은 데이터 구조 큐: 양쪽이 모

개발자들이 쓰는 도구로, 개발하면서 도움될만한 기능들이 있다,각각의 브라우저(크롬,사파리등등)이 개발자도구를 제공하고 있다.맥에서는 command+option+i누르면 개발자도구 뜬다.Element 패널페이지와 스타일 검사 및 편집을 한다.application탭\_스토

자바스크립트에서 this는 어디서든 사용할 수 있다. 특히 자바스크립트에서는 함수와 객체(메서드)의 구분이 느슨하기에 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다.js에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다.실행 컨텍스트는 함

다른 코드의 인자로 넘겨주는 함수. 콜백함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행할 것이다.콜백함수는 제어권과 관련이 깊다.위 코드를 보면 2번째 줄에서 timer변수를 선언하고 여기에 setInterval을 실행한 결과를 할당했다.setI

개발자라면 필수로 알아야 할 git!다시 한번 핵심만 정리해보쟈!!🙃git은 분산 버전 관리 시스템으로 프로젝트 파일의 변경사항을 추적하는 시스템이다.이를 통해 개발자들이 효율적으로 협업할 때 사용할 수 있다.Git에서 commit은 정말 필수다. commit이란 프

아마존에서 제공하는 클라우드 서비스로 네트워킹을 기반으로 가상 컴퓨터와 스토리지, 네트워크 인프라 등 다양한 서비스를 제공하고 있다.유저가 직접 서버를 구입하고 설치할 필요없이 AWS를 이용하면 손 쉽게 클라우드로 서버를 구축할 수 있다.서버 가상화 기술이라고 볼 수

Cascading style Sheet: 웹의 디자인을 담당함js파일에 css파일을 import해서 사용한다.특징: 직접 class,ID네이밍하며 작성한다. 사용법이 간단하다. 하지만 요소들이 많이질수록 관리가 힘들어지고 직관성이 떨어진다.Syntactically Aw

애자일 개발 프로세스는 일정한 주기를 가지고 끊임없이 프로토 타입을 만들어내며 그때 그때 필요한 요구를 더하고 수정하여 하나의 커다란 소프트웨어를 개발해 나가는 프로세스를 의미한다.다시말해, 애자일 개발 프로세스란 어떤 특정 개발방법론을 의미하는 것이 아니고 애자일(A

객체지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로 프로그램을 여러 개의 독립된 객체들과 그 객체즐간의 상호작용으로 파악하는 접근법이다. 각 객체들은 서로 메시지를 주고 받을 수 있고 데이터를 처리할 수 있다.(객체들간의 소통)OOP 장점1.코드 재사용이 용이하

🧐 클로저? > - 자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수 함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에 정의하는 것 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 이미 생명 주기상 끝난 외부 함수의 변수

자바스크립트는 프로토타입 기반 언어이다.클래스 기반 언어에서는 상속을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(프로토타입)으로 삼고 이를 복제(참조)하여 상속과 비슷한 효과를 얻는다.위 그림은 아래 코드를 추상화한 것이다.왼쪽(실선)의 꼭짓점에는 Cons

Cross Origin Resource Sharing(CORS)란 무엇일까? CORS란 Cross Origin Resource Sharing의 약자로 브라우저의 현재 웹페이지가 이 페이지를 받은 서버가 아닌 다른 서버의 자원을 호출하는 것을 의미.예를 들어보자. 나는

근본적으로 웹사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법이다.그러나, 적응형 웹과 반응형 웹은 사이트 설계부터 구동까지 많은 차이가 있다!적응형 웹은 서버나 클라이언트에서 웹에 접근한 디바이스를

ES5까지의 자바스크립트에서는 var를 이용해서 변수를 정의했고 그게 유일한 방법이었다.ES6에서 const와 let을 이용하는 새로운 변수 정의 방법이 생겼다. 그 이유에는 var가 가진 문제들이 있었기 때문이다.var는 어떠한 문제를 가지고 있었는가?var가 가진

프로미스는 비동기 상태를 값으로 다룰 수 있는 객체다.프로미스를 사용하면 비동기 프로그래밍을 할 때 동기 프로그래밍 방식으로 코드를 작성할 수 있다.콜백패턴의 문제자바스크립트에서는 비동기 프로그래밍의 한 가지 방식으로 콜백 패턴을 많이 사용했었다.그러나 콜백 패턴은 콜

async await을 이용해서 비동기 코드를 작성하면 프로미스의 then 메서드를 체인 형식으로 호출하는 것보다 가독성이 좋아진다.그렇다고 async await이 프로미스를 완전히 대체하는 것은 아니다. 프로미스는 비동기 상태를 값으로 다루기에 async await보

이벤트 위임이란 이벤트 리스너를 부모 요소에 붙이는 것을 말한다. 하위 요소에 이벤트가 발생하면 이벤트 버블링때문에 부모 요소에 연결된 리스너가 실행된다.이 테크닉의 장점은 1) 사용하는 메모리 양이 감소한다.이벤트가 발생하는 모든 요소마다 리스너를 추가할 필요가 없고

DOM이벤트가 상위요소로 전파되는 현상DOM에서 이벤트가 발생했을 때 거기에 등록된 이벤트 리스너 함수가 있으면 실행을 시도한다. 그리고 이벤트는 부모요소를 통해 DOM트리 위쪽으로 전파되며 거쳐가는 DOM요소마다 같은 일(이벤트 리스너 확인 및 실행)이 반복된다. 이

둘다 생성자 역할을 하지만 상속을 구현하는 방법에는 큰 차이가 있다.ES5에서는 생성자 함수를 상속받기 위해 prototype에 새 객체를 복사하는 등 여러가지 작업이 필요하지만 클래스는 그런 과정이 필요없다. extends키워드로 상속받을 함수를 명시하고 constr

1. closure가 있어서 좋은 점? > 클로저는 독립적인 변수를 가리키는 함수이다. 또는 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 하지만 대개는 정의한 함수를 리턴하고 사용은 바깥에서 하게된

1. 클래스형 컴포넌트 vs 함수형 컴포넌트 > 리액트를 사용하여 프론트엔드 개발을 할 때 두 가지방법으로 컴포넌트를 선언할 수 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만 함수형 컴포넌트에 리액트 훅을 지원해주어 현재는 공식 문서에서 함수형 컴포넌트와 훅을

String Reversal // reverse('apple') === 'leppa' // reverse('hello') === 'olleh' solution 2.solution 3.solution reduce() 메서드는 배열의 각 요소에 대해 주어진

1.Array Chunking // chunk([1, 2, 3, 4], 2) --> [[ 1, 2], [3, 4]] // chunk([1, 2, 3, 4, 5], 2) --> [[ 1, 2], [3, 4], [5]] // chunk([1, 2, 3, 4, 5, 6,

Printing Steps // steps(2) // '# ' // '##' // steps(3) // '# ' // '## ' // '###' // steps(4) // '# ' //

Constructor()constructor는 자바스크립트에서 class를 만들 때 호출되는 것이다.컴포넌트가 마운트 될 때, 컴포넌트가 스크린에 표시될 때, 컴포넌트가 웹사이트로 갈 때 constructor를 호출한다. 컴포넌트의 인스턴스를 새로 만들 때마다 생성자

state와 props는 react component에서 데이터를 다루는 대표적인 두 가지 방법이다.props는 부모 컴포넌트가 자식 컴포넌트에게 주는 데이터이고 해당 데이터는 직접적으로 수정할 수 없는 값이다.state는 컴포넌트 내부에서 가지고 있는 값으로써 변경할

의존성을 분석해 모듈을 번들(여러개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발할 때 수 많은 라이브러리들을 사용하는데 빌드(build)라는 과정을 통해 하나의 파일로 만들어준다. 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은

리덕스는 자바스크립트를 위한 상태 관리 프레임워크다. 리액트를 사용하는 많은 프로젝트에서 리덕스도 같이 사용하는데 이유는 왜일까?컴포넌트 코드로부터 상태 관리 코드를 분리할 수 있다.서버 렌더링 시 데이터 전달이 간편하다.로컬 스토리지에 데이터를 저장하고 불러오는 코드

면접에서 이런 질문을 받았다. 일반 컴포넌트와 순수 컴포넌트의 차이를 아시나요? 흠.. 면접에서 처음 알게된 순수 컴포넌트에 대해 정리해보고자 한다 ^--^우선 React.Component는 ES6 class를 사용하여 react 컴포넌트를 정의할 때에 기초가 되는 c

Absoulte length units pixels (px): 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위 폰트 사이즈를 px로 쓰게 되면 화면에 고정이 된다. %로 width 지정해주면 컨텐츠가 유동적으로 변한다. Relative length units

큐는 쉽게 예를 들자면 티켓을 사기 위해 줄을 서서 기다리고 있는 것과 비슷하다. 티켓팅 카운터에 도착하기 위해 사람들은 줄을 서서 기다려야 한다.Queue는 First in first out 원칙을 따른다.ADD to Queue => array.unshift();

1\. 메모리 할당프로그램이 사용할 수 있게 운영체제가 메모리를 할당한다=> 저 수준의 언어는 이를 개발자가 명시적으로 처리해준다.=> 고 수준의 언어는 개발자가 이를 신경쓰지 않아도 된다.변수와 함수를 선언하고 함수 표현식을 이용하는 것 모두 메모리를 할당하는 과정2

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가르킨다, 이벤트(event handler)라고도 한다.지정된 타입의 이벤트가 특정 요소에 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.작성된 이벤트 리스너는 먼저 해당 객체나 요

useState와 useRef의 기능상의 공통점은 함수형 컴포넌트에서 동적으로 상태 관리를 할 수 있게 해준다는 점이다. 예시로, 버튼이 클릭되었을 때 주어진 state를 Human!이라는 string으로 변환하는 동일한 프로그램을 useState와 useRef를 통해

setState는 비동기(async)다. 그래서 for loop안 현재 value는 0이다. 이전의 setState가 완료되면 setState가 업데이트되도록 하자. 비동기이기에 함수로서 state를 업데이트하는 것이 좋다!2.setCount() Function안에 화

useEffect는 함수형 컴포넌트에서 side effect 처리를 위해 사용된다. 그리고 class형 컴포넌트의 componentdidmount, componentdidupdate와 같은 역할을 함수형 컴포넌트에서 해준다.클래스형 컴포넌트함수형 컴포넌트 useEffe

Context란? 모든 레벨에서 수동적으로 props를 전달하는 거 없이, context는 컴포넌트 트리를 통해 데이터를 전달할 방법을 제공한다.

아토믹 디자인은 다시 말해 디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식을 의미한다.Atoms: 하나의 구성요소Molecules:원자들의 모음Organisms: 분자들의 모음Templates: 유기체들을 모아 템플릿으로 생성

useReducer는 state관리에 사용되는 hook이다.이 말은 즉 useState의 대안이 되기도 한다는 의미 그렇다면 useState vs useReducer는 무슨 차이를 가지는가?useState는 useReducer를 사용해서 만들어진다. 그럼 언제 useR

코드를 작성하다가 동료가 Optional chaining 연산자에 대해서 알려줬는데, 유용하게 사용할 수 있을 것 같아서 기록해본다~! Optional chaining 연산자 ?. Optional chaining 연산자 ?.는 체인의 각 참조가 유효한지 명시적으로

state를 업데이트하면 컴포넌트는 re-render가 된다. 위 useEffect의 setRenderCount는 infinite loop에 빠지게 된다.여기서 알아야 하는 것이 useRef, Ref는 state와 매우 비슷하다. 이것은 컴포넌트가 re update되지

제네릭 (Generics)? 제네릭은 c#,java등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용된다. 특히 한가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다. 제네릭의 한 줄 정의와 예시 제네릭이란 타입을 마치 함수의 파라미터처

Context API는 상태의 중앙관리를 위한 상태관리 도구리덕스와 다르게 여러 저장소가 존재할 수 있다. Context API는 크게 전역 상태가 저장되는 context, 전역 상태를 제공하는 provider, 전역 상태를 받아 사용하는 consumer로 나뉜다con

Given a string s, find the length of the longest substring without repeating charactersExample 1Input: s = "abcabcbb"Output:3Explanation: The answer i

Given a signed 32-bit integer x, return x with its digits reversed.If reversing x causes the value to go outside the signed 32-bit integer range −231,

Given an integer X, return true if x is palindrome integer. An integer is a palindrome when it reads the same backward as forward. For example, 121 is

디자인패턴은 소프트웨어 개발에 발생하는 다양한 이슈들을 해결하는데 도움을 주는 일종의 증명된 기술들이다.이러한 상황에서는 이러한 패턴을 사용하면 좋을 것이라는 일종의 방향성을 제시해준다.싱글톤 패턴은 특정 클래스의 객체를 한 개만 유지하는 패턴이다.전역에서 접근할 수

Write a function to find the longest common prefix string amongsts an array of strings. If there is no common prefix, return an empty string "". Exam

useReducer란? useRedcuer Hook은 react가 상태관리를 위한 reducer function에 접근할 수 있게 해준다. useState Hook과 매우 비슷한데, 차이점이라면 useReducer는 좀 더 복잡한 로직과 상태관리에서 사용되는 경우가

useCallback은 2개의 argument(callback function, 의존성배열)를 갖는다.의존성 배열의 값이 바뀌었을 때 memoized callback 함수를 리턴한다.🐹Memoization은 무엇인가?memoized,momoization은 최적화 기술

useMemo는 useCallback과 비슷하다. memoized callback을 리턴하는 대신, memoized value를 리턴한다.useMemo는 2개의 arguments(함수, 의존성 배열)를 갖는다. 매 렌더시, 의존성배열의 값에 아무런 변화가 없다면 use

헷갈리는 forEach, for in, for of를 정리해보고자 한다.forEach는 모든 요소를 반복하며 콜백함수를 실행한다.오직 Array객체에서만 사용가능한 메서드. 반복문이 아니라 함수이다.for...in은 객체에 사용할 수 있다. 객체의 key값과 value

아래 array안에 object가 있는 예시를 살펴보자.foodArray안 각 object를 iterate하기 위해 for loop를 쓰고자 한다.forEach를 사용하면 for loop와 동일한 결과를 얻을 수 있다.forEach는 모든 array안에 존재한다. 위

{{데이터 바인딩}}하는 이유??1\. HTML에 하드코딩해놓으면 나중에 변경이 어려움2.Vue의 실시간 자동 렌더링이 된다.=>Vue는 data를 변경하면 data와 관련된 HTML에도 실시간으로 반영이 된다.3\. 애초에 값이 바뀔 일 없으면 데이터 바인딩안해도 된

라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야 한다. 라우팅은 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 SPA에서 주로 사용하고 있다.SPA 싱글 페이지 애플리케이션: 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로

Vue 3에서 새로 등장한 The composition API에 대해 알아보자.1.Group logic together in a setup function2.Easily create reusable logic(Functions)예시 코드를 살펴보자.ref를 사용할 때는