데브코스

벌써 데브코스를 시작한지 3주..! 학교수업이랑 병행하니 힘들어도 데브코스에 전념하다 보니 따라가기 벅찬 부분은 없지만 내용이 생각보다 쉽지 않았다. 그래도 내가 데브코스에 들어오기 전 가장 배우고 싶었던 컴포넌트 관점에서 vanilla 자바스크립트를 다룰 수 있어서

과제가 시작되었다. 어려운 기능은 아니었고 에러처리와 투두리스트의 기본 기능인 삭제와 count를 추가하면 됐는데 막상 만들어진 형식에서 의존성을 최대한 줄이면서 컴포넌트로 상태 관리에 신경쓰다보니 어려웠다. new 키워드를 붙이지 않고 컴포넌트를 만들 경우 에러처리

브라우저에서 페이지 로딩 시 쌓이는 것뒤로 가기, 앞으로 가기 등이 이것을 이용한 것일반 url 형식을 따르므로 querystring도 자유롭게 붙일 수 있음ex) /list?page=2&limit=10세션 히스토리에 새 url상태를 쌓는다.history.pushSta

데브코스의 첫 프로젝트가 시작되었다..! 이전에 로토님의 강의에서 vanillajs에서 리액트 같은 라이브러리의 상태관리, 라우터를 흉내내는 실습을 통해 많은 것을 배울 수 있었다. 이것을 토대로 약 10일 간의 노션 클로닝 프로젝트가 시작 되었고 난이도가 꽤 있었다.

윈도우의 이벤트리스너로 스크롤을 지정하여서 화면의 마지막에 다다르면 함수를 호출하는 형식이다.사용자가 화면에 마지막에 다다랐을 때를 계산하기 위해서 세 가지 값을 이용하였다.window.innerHeight브라우저 창의 높이(창의 상단바나 주소바 포함 x)window.

고양이 사진첩에 이어 고양이 사진 검색기를 만들어 보았다. 이전에 비해 검색이 들어가다보니 조금? 더 어려운 느낌이었다. 컴포넌트 간의 의존성 분리, 렌더링의 흐름은 이전 강의랑 코드 흐름은 매우 비슷하여서 성능 최적화와 관련된 디바운스와 로컬 캐쉬를 중심으로 글을 작

draggable 속성을 추가해 li 태그가 드래그 가능한 요소로 바꾼다.드래그앤드롭 이벤트 기능은 dragstart, dragover, drop세가지 요소로 구현할 수 있다.dragstart : 드래그가 시작됐을때 발생, 로컬스토리지나 객체에 값을 집어넣듯이 setD

2차원 레이아웃 구조, 왼쪽 위부터 지그재그 방향으로 정렬grid-template-rows : 행 높이 정렬(명시적)grid-template-columns : 열 너비 정렬(명시적)fraction(사용 가능한 공간의 너비 비율) 단위 사용 가능행의 높이를 비율로 최대

SCSS란? CSS 전처리기로 CSS 구조를 가독성있고 더 유지보수 하기 좋게 하는 도구 Sass vs Scss 나는 Sass가 Scss랑 거의 같이 쓰이는 말인줄 알았는데 차이가 있었다. 바로 Sass에서는 중괄호와 세미콜론이 없고 들여쓰기로 코드를 작성해야

BEM 방법론을 잘 모르고 저번 과제에 BEM 방법론을 썼다가 코드리뷰를 받을때 BEM 방법론을 아예 모르는데 흉내만 내고 있다는 생각이 들었다.. 마침 다음 과제에 BEM 방법론으로 레이아웃을 개발하는 요구사항이 있으므로 한번 정리하고 이해할 후에 제대로 사용해보자.

인터페이스란? 개체(객체, 배열, 함수, 클래스 등)를 정의하는 타입으로 ?, readonly 키워드를 사용한다. 타입과 인터페이스는 외관상 약간의 차이 빼고는 거의 차이점이 없지만, 인터페이스는 객체 타입을 정의할때 보통 많이 사용된다고 한다.(타입을 써도 상관은

제네릭이란? `` 으로 지정하고 싶은 타입을 지정해 길어지는 타입선언을 하나의 변수로 사용 T는 타입변수를 의미하고 함수를 호출할때 앞에 붙이는 `` 안의 타입이 들어가게 된다.

하지만 가져올 때 데이터와 타입을 구분하기 위해 type키워드를 가져올때 붙여주면 보기 편리하다.기본으로 가져올 경우 네임스페이스를 통해 접근해야 한다.내보낼 때 네임스페이스를 만드는 것도 가능하다.이렇게 중복되는 이름을 방지하여 편리하게 사용이 가능하다. 하지만 최근

최상위 옵션 5가지 compilerOptions 프로젝트를 자바스크립트를 변환할 때 주는 옵션들 files 타입스크립트를 자바스크립트로 변환할 때 어떤 파일을 사용할건지 지정(폴더 단위로 지정 가능) exclude 제외하고 싶은 경로 지정(대표적으로 n

모든 속성을 명시하지 않아도 된다.모든 속성을 명시해야만 한다.읽기 전용으로 만들 수 있다.유니온 타입을 받아 속성을 만들고 속성이 어떤 타입이 될지 명시하는 용도하나의 객체 타입에서 원하는 속성으로 새로운 객체 타입을 만듬user는 PickUser와 동일한 형식을 지

기존의 바닐라 자바스크립트나 Jquery로 개발하는 방식과는 달리 자동으로 데이터가 변하면 DOM 요소도 자동으로 바뀌게 해주는 반응형 데이터를 만드는 아주 유용한 프레임워크이다.기본적인 코드 형식이다.App 이라는 view Application을 DOM 요소인 \`라

특정 데이터를 입맞에 맞게 가공하여 화면에 보여지게 하는데 유용기존의 반복문에는 배열을 200개 가져와서 뿌려줬다면 이제는 400개를 뿌려줘야하는데 처음 계산된 upperTodos값이 캐싱되어 그 이후 ul태그에서는 연산을 하지 않고 그대로 뿌려주기만 하는 최적화를 한

클래스 속성에 데이터 연결하는 법을 알아보자!클래스 속성에 데이터를 연결해 동적인 스타일을 주고 싶을 때는 v-bind와 객체 리터럴을 사용하면 된다.기본적으로 클래스를 - 같은 특수문자로 이어서 쓰게 되면 CamelCase로 인식하기 때문에 '를 사용하였고, 띄어쓰기

네이버 모바일 클론 과제를 하다가 메인 컨텐츠가 벽돌처럼 차곡차곡 쌓이는 레이아웃 기능을 구현해야 했다. 예전에 캐러셀 슬라이드를 이용해 요소들이 넘어가는 기능을 구현해본 것 말고는 레이아웃과 관련된 지식이 없어서 어떻게 할까 고민하던 중! 팀원 분이 마침 Masonr

네이버 모바일 클론 과제를 하다가 메인 컨텐츠가 벽돌처럼 차곡차곡 쌓이는 레이아웃 기능을 구현해야 했다. 예전에 캐러셀 슬라이드를 이용해 요소들이 넘어가는 기능을 구현해본 것 말고는 레이아웃과 관련된 지식이 없어서 어떻게 할까 고민하던 중! 팀원 분이 마침 Masonr

if v-if를 통해 조건에 따라 요소의 조건부 렌더링이 가능하다. else if, else도 사용 가능하다. v-if와 v-for는 분리해서 사용하자. 동일 엘리먼트에 v-if와 v-for을 동시에 사용할 경우 v-if의 우선순위가 더 높기 때문에 문제가 발생

v-for 요소를 반복하여 렌더링 가능하다. 배열 배열의 경우는 배열의 아이템 외의 인덱스도 참조가 가능하다. in이 아닌 of도 똑같이 작동한다. 객체 기본적으로 key-value의 value를 참조할 수 있다. 마찬가지로 두번째 인자, 세번째 인자를 통해

기본 사용법 v-on을 이용해 이벤트를 바인딩한다. 보통, 이벤트를 선언하는 부분에서 호출한 곳의 이벤트를 조작하여 핸들러를 구현하는데 호출한 곳에서 인자로 $event로 넣어주면 된다. 복합 이벤트 핸들러 하나의 이벤트에 여러개 핸들러 함수를 등록할 수 있다.

Props 기존의 createApp을 통해 만든 최상위 App 컴포넌트는 id를 가지고 있는 html구조와 연결해서 사용했지만, 나머지 컴포넌트는 html과 연결하는 것이 아니라 내부에 로직을 직접적으로 작성하여 사용한다. props는 특정한 컴포넌트 바깥에서 내부

웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러package.json 생성개발 의존성으로 webpack과 터미널에서 webpack을 동작하게 해주는 cli 설치webpack을 동작시킬 수 있는 명령 추가루트에 webpack이

드디어 Vue를 끝내고 리액트로 넘어왔다. 시간에 쫓겨서 강의를 듣다가(마저 다 듣지도 못함 ㅠ) 정리할 시간이 없어서 Vue에 대한 포스팅을 더이상 하지 않았다. 어제부터 리액트 강의가 시작되었는데 그동안 리액트에 대해 내부원리를 잘 모르고 그냥 느낌만 알고 구현했었

최적화에 관해서 다양한 훅들을 배웠다. useMemo 함수 컴포넌트는 자신의 상태, 부모로부터 내려준 prop, 부모의 상태가 변경되면 리렌더링을 한다. 이때, 리렌더링 시 오래걸리는 연산이 있을 경우 리렌더링이 잦을 경우 똑같은 연산을 매번하여 성능이 안좋아져 버

스토리북 강의를 듣다가 부모에서 자식에게 내려준 children을 조작하기 위해서 React.children을 사용하는 코드를 접했다. 처음보는 형태인데 왜 사용하는걸까?위와 같이 생각한 이유는 그동안 개발하면서 부모에서 자식으로 내려준 children값들은 그냥 렌더

리액트 강의를 수강하던 중 멘토님께서 일주일동안 그동안 못했던 일 같은 것들을 매일 꾸준히 시간과 목표를 구체적으로 정해놓고 챌린지형태로 하는게 어떻냐고 제안하셨다. 나는 데브코스 과정중에 가장 아쉬웠던 점이 노션 클로닝 프로젝트를 제대로 하지 못한 것이었는데 항상 해