Daehyunii's Dev-blog

리다기를 읽기 시작했다. 오늘부터 리액트를 다루는 기술을 읽기 시작했다. 기존에 리액트를 접한 경험이 없었기 때문에, 데브코스에서 리액트를 본격적으로 다루기 전에 기본적인 내용을 학습하는것이 좋다는 판단이 들어 인프런에서 '제로초' 리액트 강의를 들었고 지금은 데브코스를 통해서 리액트 강의를 들으며 공부하고 개별적으로 '리액트를 다루는 기술'을 같이 읽기 시작했다. 오늘은 리액트의 특징과 JSX 기본적인 문법들에 대해서 공부했다. 2022.12.20 - [📚 Language & CS knowledge/React] - JSX란? JSX란? JSX란? 자바스크립트의 확장 문법이며 XML과 매우 유사하다. 우선 JSX는 브라우저에서 실행되기 전 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태의 코드로 ..

컴포넌트 스타일링 1. 스타일시트 적용 외부 CSS파일을 import하여 사용하는 방법이다. 2. Inline style 적용 동적으로 스타일을 결정하는 경우에 요소의 속성으로 style을 주는 방법이다. 3. CSS in JS 적용 여러 라이브러리가 있는데 강의에서는 emotion이라는 라이브러리를 사용했다. yarn add @emotion/react @emotion/styled @emotion/styled styled API for emotion. Latest version: 11.10.6, last published: a month ago. Start using @emotion/styled in your project by running `npm i @emotion/styled`. There are..

React란? 1. React 소개 리액트는 라이브러리이다. 리액트를 구성하는 기능들은 최소한의 노력으로 최대의 효율을 내기 위함이다. 2. React 특징 Reactive Programming이다. React는 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다. MVC에서 리액트는 V만 관리한다. 여기서 View는 컴포넌트이다. 컴포넌트는 재사용이 가능한 독립적인 객체이며 런타임 시점에 사용된다. 컴포넌트는 트리 구조로 나타낼 수 있다. 컴포넌트 조합으로 View를 구성한다. Virtual DOM이다. 필요한 부분만 한 번에 렌더링한다. 성능보다는 개발을 쉽게 하기 위해 사용되었다. 2. create-react-app, JSX 2.1 create-react-app 새로운 리액트 앱을 만..

컴포넌트 Slots slot이라는 태그를 사용하여 상위 컴포넌트에 작성한 하위 컴포넌트가 slot 부분에 들어가서 화면이 그려진다. slot 태그에 name을 지정할 수 있고, 이를 v-slot으로 받을 수 있다. v-slot 디렉티브는 #이라는 약어로 사용할 수 있다. 상위 컴포넌트 abc 하위 컴포넌트 Hello Hi 동적 컴포넌트 동적으로 컴포넌트를 바꿔줄 수 있는 기능이다. component 태그에 is라는 속성을 사용하여 동적으로 바뀔 컴포넌트 이름을 작성해준다. 여기서 컴포넌트 이름은 스크립트 안에 지정된 이름이나 전역 컴포넌트 이름만 사용 가능하다. 위와 같은 방식으로 currentComponent의 값을 변경 시켜주어 동적으로 컴포넌트를 바꾸면 컴포넌트가 unmounted 되고 다시 cre..

Node.js와 NPM 1. node.js 자바스크립트 런타임이다. 브라우저에서 자바스크립트가 동작할 수 있는 환경을 만들어주는 것이다. 더 안정적인 LTS 버전을 사용하자. npm node.js 패키지 매니저이다. 여러 패키지를 설치하여 우리가 개발하기 용이하게 해준다. nvm node.js 버전을 바꾸면서 사용할 수 있도록 도와주는 패키지이다. 이 때, node.js가 설치되기 전에 설치를 해야 한다. nvm-setup 또는 명령어로 설치할 수 있다. n 이미 node.js가 설치되어 있는 상태이고 삭제하기 어렵다면 nvm 대신 n 패키지를 설치하면 좋다. npm으로 설치할 수 있고, 원하는 node.js 버전을 설치할 수 있게 도와주는 패키지이다. 프로젝트를 npm으로 관리하고 싶으면 아래 명령어로..

조건부 렌더링 1. v-if, v-else-if, v-else 해당 디렉티브를 사용하여 조건문을 사용할 수 있다. 각 요소 중간에 다른 요소가 들어가지 않으면 true, false에 따라 렌더링을 해준다. 참고로 빈 배열이나 객체는 truthy한 값이라 결과가 true로 나온다. Hello Vue! Application Good Morning~ 만약 v-else-if에서 div 태그를 렌더링하지 않고, 그 내부의 요소만 렌더링하고 싶다면 template 태그를 사용하면 된다. v-if는 falsy한 값이 나오면 lazy하다고 할 수 있다. 구조적으로 생성조차 하지 않기 때문에 초기 렌더링 비용이 낮지만, 전환 비용은 높다. 2. v-show 조건에 따라 요소를 보이거나 보이지 않게 해주는데, CSS st..

Computed와 Watch 1. computed 계산된 데이터를 추가해두는 옵션이다. 아래와 같이 함수가 여러번 실행된다고 했을 때, 이미 계산된 값을 또 계산하는 것은 비효율적일 수 있다. const App = { data() { return { count: 3, }; }, methods: { double() { return this.count * 2; }, }, }; const vm = Vue.createApp(App).mount('#app'); {{ count }} {{ double() }} {{ double() }} {{ double() }} computed는 계산된 결과를 캐싱하기 때문에 같은 로직을 또 실행하지 않고 저장된 값을 사용하게 된다. 연산을 낭비하지 않는 장점을 가지게 된다. co..

Vue란? 사용자 인터페이스를 만들기 위한 프로그레시브 자바스크립트 프레임워크이다. Vue 3 버전이 현재 가장 최신 버전이며, Vue 2 버전에서 Vue 3 버전으로 넘어가고 있는 과도기이다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와 통합이 쉽다. 레이아웃을 처리하는데 유용하다. 1. 선언적 렌더링 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링할 수 있다. 데이터와 DOM이 연결되었으며 반응형 데이터가 되었다고 말할 수 있다. 데이터가 바뀔 때 연결되어 있는 화면도 바뀌는 것을 반응성이라고 한다. 반응형 데이터를 선언하고 화면에 렌더링해보자. 참고로 setInterval() 콜백함수는 this가 참조하는 곳이 달라질 수 있기 때문에 화살표함수로..