TIL

Week 1. 알쏭달쏭한 JS 기초 문법 학습 🔥JS는 동적타이핑언어이다. 동적타이핑이란, 변수에 타입을 미리 선언할 필요 없이 값을 할당하면 값의 타입에 의해 자동으로 변수에 타입이 정해진다는 뜻이다.형변환이란, 다른 타입끼리의 연산이 필요할 때 적절한 자료형으로

추상화 | 모델링: 현실의 개체를 특성 관점으로 바라보아 객체로 만드는 것👇🏻모델: 추상화 | 모델링을 통해 만들어진 대상👇🏻DOM: (브라우저가 이해하기 쉽게) 추상화된 HTML 태그들을 객체로 만든 것문서노드: document. 모든 노드에 접근하기 위해선

코드가 계산되는 것.값으로 다룰 수 있음.변수에 담을 수 있음.함수의 인자로 사용될 수 있음.함수의 결과(return 값) 로 사용될 수 있음.JS의 함수는 일급 함수이다. 일급 함수는 일급 시민의 조건들을 충족하고 있다는 뜻이다.조합성과 추상화의 도구조합성: 일급 함

Week2. 함수형 자바스크립트함수형 프로그래밍에선 인자와, 리턴 값으로 소통한다. 내부의 변수를 console.log와 같이 변화를 일으키는 함수나 메서드에 보내지 않고, return을 통해 리턴된 값을 개발자가 이후에 활용하도록 한다.인자를 iterator라 한 이

함수형 프로그래밍에서 map, filter, reduce를 활용해 중첩 함수로 표현할 수 있지만 이는 코드의 가독성을 떨어트린다. go, pipe 함수를 통해 함수를 값으로 다뤄 코드의 표현력을 높일 수 있다.go 함수는 인자로 함수리스트를 받아 첫 번째 인자값을 초기

Week2. range, 느긋한 L.range, take, L.map 등 전반적인 지연성 정리reduce 순서: arr를 만들고 👉🏻 iterator를 만들고 👉🏻 그 다음 next()로 순회.generator로 만든 range.L.range: arr를 만들지

Week 3. 문제를 풀고 부족한 부분 확인하기.this스코프 개념을 잘 알아야 this를 이해할 수 있음. 공부하기!즉시실행함수즉시실행함수는 window(전역)를 침범하지 않음.즉시실행 함수를 통해 외부에선 접근을 못하는 내부 함수를 만들어 private한 효과를 줄

TIL | Vanila JS 기본 역량 2

Week 5. CSS 심화float: 요소를 보통의 흐름에서 벗어나게 함. (어딘가에 둥둥 떠 있다!)둥둥 띄우거나, 레이아웃을 좌우로 분리할 때 사용.block 요소를 가로정렬 시킬 때도 사용float 해제를 시키지 않으면 부모가 자식 인지를 못함.주변 text나 인

Week 6. 첫 배포 연습 !! 아자아자 👏History API 기반의 SPA를 배포하기 위해선 404 에러 처리 옵션이 필요.원인: 1개의 inex.html 파일에 여러 경로로 오기 때문에 index.html을 찾지 못해 404 에러 발생.👉🏻 npx serv

Week 6. 무한 스크롤 구현 방식 화면 전체 height와 스크롤 위치로 스크롤이 컨텐츠 끝에 다다랐는지 체크해서 처리하는 방식 intersection observer 방식 내가 지정한 DOM 객체가 보고 있는 viewport? 시야에 닿았는지 감지하는 방식

3D 효과를 주기 위해선 원근감이 필요함.부모 요소에게 속성으로 주는 경우perspective: 거리속성으로 사용할 경우 부모요소에게 걸어주기ex) perspective(300px) : 300px 만큼 멀리 보이도록perspective-origin: x축 y축원근 기준

Week 7. SCSS내가 좋아하는 SCSS! 기초를 다시한 번 잡고 가즈아~!~!CSS Preprocessor(전처리 도구): 전처리 도구는 웹 브라우저에서 직접 동작하지 않기 때문에node.js환경을 통해 CSS로 변환작업을 거쳐야 함.Sass: 코드 블록이 없음블

Vue3은 비교적 최신 버전으로 현재 Vue2 > Vue3으로 넘어가는 과도기이다.Vue 공식문서{{ }}: 이중 중괄호 구문반응형(반응성) 데이터: 데이터가 바뀌면 화면도 바뀐다.v-\_\_\_ : html에서 JS 요소를 사용할 때Vue.createApp(App).

TIL | 신세계 Vue 탐험 (2)v-bind에 여러개의 클래스를 달고 싶을 경우,class 값으로 {키: 값} 형태로 넣어주면 됨.

Week 7. Vue 신세계 탐험(3)Vue 과제 제출 기한을 맞추기 위해 강의 내용은 간단히 키워드로 정리

Week 8. 드디어 babel 🤩ES5 이상의 버전을 구형 브라우저에서 동작할 수 있도록 낮추는데 사용되는 transcompiler⚠️ Babel이 없는 기능을 새로 만들어주지는 않음npm i -D @babel/core @babel/cli@babel/core: 바벨

Week 8. Vue Router 기초Vue router를 이용하면 SPA를 손쉽게 구현 가능하다.설치: npm i vue-router@next Vue 3 버전에 맞춰 vue-router도 next(4버전)로 설치.등록$route: router와 관련된 정보 저장$ro

리액트 첫 시작! 원래는 Vue 발만 담궜다가 빼기 싫어서 깊게 공부하려고 했는데, 최종 프로젝트에서 Vue로 진행할 수 없을 것도 같아 React도 공부해보려고 한다! 아자아자자자자 👊 다 뿌셔버료 hooks useEffect 1. 무언가 변화가 있을 때 감지(

React Query로 서버 상태 관리하기if 카카오useQuery, useMutation 훅들을 사용해 컴포넌트 내부에서 API 요청 및 관리를 수월하게 함.API 호출 후 내부적으로 관리하는 queryClient를 통해 API 데이터 캐싱.똑같은 API 요청 시 Q

규모가 큰 프로젝트의 경우, 하나하나 테스팅하고 있을 시간이 없다. 따라서 자동화된 테스팅 툴을 사용해 테스팅을 진행한다.코딩앙마 - Jest 강좌강의 내용을 정리해보려고 한다.규모가 큰 프로젝트의 경우, 하나하나 테스팅하고 있을 시간이 없다. 따라서 자동화된 테스팅