2주간 리액트를 배우고, 처음으로 협업 프로젝트를 진행하게 되었다. 실질적으로 공부했던 기간은 일주일 남짓. 강의를 들으면서도 리액트에 대해 전혀 이해하지 못했지만, 늘 그랬듯이 결국 해낼 거라는 위험한 자신감으로 첫 협업 프로젝트를 맞이하게 되었다.

ContextAPI, Route 외 경로별칭, 확장자 생략 alias, passive:true을 통한 성능향상, requestAnimationFrame를 통한 성능향상 등 배우면서 기록한 리액트 팁

아직 리액트에 대해 감이 잡히지는 않는다. 배운 내용들을 응용하면서 프로젝트를 진행해봐야 조금 감이 잡힐 듯 하다.

드디어 리액트 입문! 과 동시에 자신감 하락. 왜 Vue가 더 쉽다고 하는지를 뼈저리게 느끼는 중. 하지만 결국 흐름은 명확하게 있는 듯하니, 공부하다보면 사랑스러워 지지 않을까 싶다. 오래보아야 사랑스럽다. 리액트도 그렇다. 제발 그래야만 한다.

지금까지 두려움 반, 귀찮음 반으로 애써 무시하던 API 숨김, 결국 해야했다..!

바닐라 자바스크립트로는 이해하는데 한참 걸린, 어쩌면 아직도 이해하지 못한 Router를 RouterLink, RouterView 만으로 구현할 수 있다는게 사랑스럽다. 물론 바닐라 자바스크립트의 로직들이 숨어있는 것이겠지만.

검색 우선순위를 높히는 쉽고 대표적인 SEO최적화 방법

프로그래머스 웹 데브코스 1기를 시작한지 2달, 방구석에서라도 가을을 즐기기 위한 짤막한 회고.

export default로 install 이라는 이름의 함수를 통해 app과 option(이름변경가능)을 가지는 원하는 플러그인을 만들 수 있다.install 안에는 app(변경가능).config.globalProperties."$함수" = (옵션, 옵션) ⇒ {}

import \* as Vue from 'vue' 'vue'에서 상대경로를 입력하지 않는다면 node_modules의 패키지를 가져오는 것번들러: App.vue를 브라우저에서 동작할 수 있도록 해주는 것npm i -D parcel 개발용 parcel 설치<scri

<script defer src="./main.js"></script> 내부에서 script를 작성할 때 defer 옵션을 통해 페이지로드 후 실행되도록 해줘야 함npm init 프로젝트 초기화 및 관리 npm init -y으로 생성 후 수정으로 편하게 할

active:active 는 active로 생략가능title—small은 html표기법으로, 'title—small': small 으로 해줘야함'title--small color--orange':small'' 처럼 안에서는 띄어쓰기로 여러개의 클래스 사용가능classO

디렉티브: v-으로 시작되는 것 v-if, v-...ex)v-bind:class="{ orange: active }" <button v-on:click="">Toggle</button>fruits: \[ 'Apple', 'Banana', 'Cherry' ]

@mixin 을 통해 재활용 할 수 있는 값을 설정할 수 있으며,@mixin으로 설정한 값은 @include 설정값을 통해 불러올 수 있다.@mixin large-text($size: 30px) 처럼 $size 매개변수 설정, : 30px기본값 설정 등 함수로도 사용

Drag&Drop 강의를 듣던 중 알게 된 웹워커를 공부하다 보니, 서비스워커라는 매력적인 API도 알게되어 스터디 겸 정리해보았다. 웹워커는 무거운 작업을 백그라운드에서 실행하기 위해, 서비스워커는 PWA(프로그레시브웹앱)을 위해 주로 사용되고 있다. 다만 웹워커와

CSS에 관한 TIL은 배우는 것의 대략적인 내용을 제목에 써놓고, 이후 필요한 내용이 있을 때 네비게이터를 통해 참고하는 **참고서의 개념으로 정리**할까 한다.

drag & drop api를 간단히 말하자면, draggable속성을 이용해 요소를 드래그 할 수 있고, droppable을 이용해 요소를 드롭할 수 있다는 것이다.사용방법은 드래그를 위해 html태그에 draggable="true"를 추가하고 draggable at

디자인패턴: 소프트웨어 개발을 하면서 반복적으로 일어나는 다양한 이슈들을 해결하는데 도움을 주는 일종의 증명된 기술 디자인패턴이라는 용어를 처음 접한다면 디자인 레이아웃 같은 개념이라 생각할 수 있다. 하지만 사실 디자인패턴의 디자인은 우리에게 익숙한 미적 개념보다는

자바스크립트에서 무한스크롤 UI를 구현하는 방식을 살펴보면서, 무한스크롤을 구현할 때 사용하면 좋은 디바운스와 쓰로틀 방식까지 알아보려 한다.무한스크롤은 페이스북, 인스타그램 등에서 주로 볼 수 있는 방식으로, 아래로 스크롤하다가 마지막 컨텐츠를 볼 즈음 다음 컨텐츠를

인프라에 대한 지식이 있어야 하기 때문에 난이도가 높다.하지만 알고 있으면 배포된 서버에 문제 해결이 가능하거나 다른 서버의 호스팅에도 높은 이해도를 가질 수 있다.EC2, Azure, 네이버 클라우드 플랫폼, Google compute Engine ... 등등매달 비