[TIL]
1.[TIL #1] git clone& Branch 연습
git clone 방식과 branch 연습문제로 branch 명령 연습해보기
2.[TIL #2] git flow 연습
it flow 전략 한 사이클을 경험해보는 연습
3.[TIL #3] 클론코딩 - 메뉴(서브, 메인)
스타벅스 랜딩 페이지(홈페이지) 클론코딩 - 서브 메뉴, 메인 메뉴, 드롭다운 구현
4.[TIL #4] 클론코딩 - 전역배지 with 라이브러리
스타벅스 랜딩 페이지(홈페이지) 클론코딩 - 전역 배지 with 라이브러리
5.[TIL #5] 클론코딩 - 비주얼 섹션
스타벅스 랜딩 페이지(홈페이지) 클론코딩 - 비주얼 섹션, 공통 버튼 구현, gsap라이브러리로 시간차 이미지 띄우기
6.[TIL#6] 클론코딩 - 슬라이드 구현(Swiper)
스타벅스 랜딩 페이지(홈페이지) 클론코딩 - 슬라이더 구현(수직 롤링, 수평 슬라이드)
7.[TIL #7] 클론코딩 - 유튜브 영상 배경(iframe API)
스타벅스 랜딩 페이지(홈페이지) 클론코딩 - Youtube iframe API 사용하여 비디오 배경 넣기
8.[TIL #8] 클론코딩 - 스크롤 위치 계산 애니메이션(scrollmagic)
스타벅스 랜딩 페이지(홈페이지) 클론코딩 - 스크롤 위치 계산 애니메이션(scrollmagic)
9.[TIL #9] 클론코딩 - footer & 상단 이동 버튼 구현(ScrollToPlugin)
스타벅스 랜딩 페이지(홈페이지) 클론코딩 - footer & 상단 이동 버튼 구현
10.[TIL #10] swiper pagination bullet 커스텀
내가 원하는 사이트를 클론 코딩해보는 과제를 받았다.아래 이미지 처럼 슬라이더 영역이 있어서 swiper 라이브러리로 구현하고자 했다.swiper에서 제공하는 pagination은 기본이 파란색 bullet이다.이는 내가 클론 코딩할 사이트의 bullet과 스타일이 달
11.[TIL #11] Grid 첫 사용기
[TIL #11] Grid 첫 사용기
12.[TIL #12] 토글버튼 클릭 시 메뉴 드롭다운
반응형 웹을 위해서 팝업 메뉴를 제작하고자 함 \- 햄버거 버튼을 클릭하면 메뉴가 펼쳐진다. \- 메뉴가 펼쳐진 상태에서 다시 클릭하면 메뉴가 닫힌다.원래 페이지를 덮는 팝업 메뉴여서 백그라운드 class를 생성했다.기본적인 구조를 구현하고, 메뉴 상위 클래스와 버
13.[TIL #13] 햄버거 버튼 애니메이션 only HTML/CSS
자바스크립트 없이 HTML과 CSS로 햄버거 버튼 만들기!:checked 클래스와 체크박스를 사용해, JavaScript 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현할 수 있습니다.
14.[TIL #14] JS 1일차
자바스크립트 데이터 타입, 변수, 함수 기초
15.[TIL #15] JS 2일차
자바스크립트 - 구조 분해 할당, argument 객체, 즉시실행함수(IIFE), 콜백 함수
16.[TIL #16] JS 3일차
화살표 함수, this, 콜백에서 this
17.[TIL #17] JS 4일차
연산자(논리연산자, 부정연산자, 삼항연산자), 반복문(switch문, while문, for문 )
18.[TIL # 18] JS 5일차
표준 내장 객체(=메소드) 문자 표준 내장 객체, 숫자 표준 내장 객체, Math 수학 관련 객체
19.[TIL # 19] JS 6일차
표준 내장 객체(=메소드) Array 표준 내장 객체, Object 표준 내장 객체, Data 표준 내장 객체
20.[TIL # 20] JS 7일차
데이터의 불변성과 가변성, 메모리 누수
21.[TIL # 21] JS 8일차
자바스크립트 동기/비동기, 자바스크립트로 비동기 프로그래밍 하기: Promise, async/await
22.[TIL # 22] JS 9일차
Class에 대해서 알아보자
23.[TIL # 23] JS 10일차
자바스크립트 동작 원리(콜 스택, 콜백 큐, 이벤트 루프)
24.[TIL # 24] JS 11일차
이벤트 캡처링, 이벤트 버블링
25.[TIL # 25] JS 12일차
웹팩사용해보기! 자세한 정리는 번들러 시리즈 참고
26.[TIL # 26] Vue 1일차
Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 뷰를 사용해서 간단한 영화 검색 구현해보기
27.[TIL # 27] Vue 2일차
Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공한다.
28.[TIL # 28] Vue 3일차
Vue 기초, Todo List 실습, 컴포넌트 중요성, Props, Emits
29.[TIL # 29] VSCode 테마 커스텀하기(배경색, 주석색, 글자색 바꾸기)
Visual Studio Code 테마를 커스텀해보자!
30.[TIL # 30] Vue 4일차
Snowpack, nanoid , slot, Vue 이벤트 수식어, watch
31.[TIL # 31] Vue 5일차
Vite 시작, 데이터 바인딩, 동적 컴포넌트, 텔레포트
32.[TIL # 32] Vue 6일차
플러그인 만들기, vuex 스토어 사용해보기(Core Concepts)
33.[TIL # 33] Vue 7일차
Provide/Inject
34.[TIL # 34] Vue 8일차
Vue Router 시작하기
35.[TIL # 35] Vue 9일차
Vue Router 간단 실습
36.[TIL # 36] Vue 10일차
Vue Router - Named Views, Naviation guards, accessToken, Scroll Behavior
37.[TIL # 38] Vue 11-12일차
노션프로젝트(1) - router, store기본셋팅, contenteditable, XSS이슈
38.[TIL # 39] Vue 13일차
노션 프로젝트(2) - 워크스페이스 생성, 목록 조회, 목록 출력, 삭제
39.[TIL # 40] Vue 14일차
노션 프로젝트(3) - 워크스페이스 페이지 클릭 시 상세정보, 단일 워크스페이스의 상세 내용, 수정
40.[TIL # 41] Vue 15일차
노션 프로젝트 (4) - 하위 페이지가 추가되는 기능, 재귀 컴포넌트
41.[TIL # 42] Vue 16일차
노션 프로젝트 (5) - 포스터 이미지 넣기, 삭제, 제목 경로
42.[TIL # 43] TypeScript (1)
TypeScript - 타입 선언
43.[TIL # 44] TypeScript (2)
TypeScript - 타입 추론, 타입 단언, Non-null 단언 연산자, 타입 가드, 인터페이스, Readonly
44.[TIL # 45] Vue Vite 환경에서 SCSS 파일 전역으로 사용하기
Vite 환경에서 SCSS 파일 전역 설정
45.[TIL # 50] 환경 변수 관리하기( .env 파일 )
NPM 프로젝트에서 환경 변수 관리하기 - dotenv 패키지
46.[TIL # 46] Vue 이메일/비밀번호 유효성 검사
Vue 이메일/비밀번호 유효성 검사에 따른 DOM 제어
47.[TIL # 47] Vue Composition API (1)
Vue Composition API 소개 (1)
48.[TIL # 54] 헤로쿠(heroku) 배포 해보기
헤로쿠 주식회사(Heroku, Inc)는 웹 애플리케이션 배치 모델로 사용되는 여러 프로그래밍 언어를 지원하는 클라우드 PaaS이다.
49.[TIL # 48] 파이어베이스 찍먹하기 (1)
파이어베이스는 구글(GOOGLE)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로, 이걸 활용하면 여러분도 앱을 개발하고, 개선하고, 키워나갈 수 있다. / 파이어베이스 셋팅, 초기 구성
50.[TIL # 49] 파이어베이스 찍먹하기 (2)
파이어베이스 구조, 배포하기
51.[TIL # 51] Vercel 배포해보기
프로젝트를 Vercel 로 배포해보기!
52.[TIL # 52] Node.js 찍먹하기 (1)
Node.js - Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임
53.[TIL # 53] Node.js 찍먹하기 (2)
새로운 프로젝트 생성 테스트해보기 위한 최소한의 백엔드 코드만 작성하고자 한다.
54.[TIL # 55] Vite 환경 변수 및 Netlify 배포 시, 환경 변수 설정
Vite 환경 변수 사용 및 Netlify 배포 시 환경 변수 설정하기!
55.[TIL # 56] React Basic
React 의 작동 원리와 특징에 대해서 이해한다. React 로 간단한 시계를 만들어본다.
56.[TIL # 57] React Basic (2)
리액트의 생명 주기(Life Cycle) / useEffect / useRef React 의 이벤트 처리
57.[TIL # 58] React Basic (3)
React 컴포넌트에 스타일 적용하는 방법을 이해한다.
58.[TIL # 59] React Basic (4)
React 의 Reducer 와 Context 를 이해한다.React 로 axios 요청을 보내고, 데이터를 받아오는 방법을 이해한다.
59.[TIL # 60] React Basic (5)
React Router 이해하기!
60.[TIL # 61] React Basic (6)
Redux 이해하기!
61.SPA vs MPA 개념, 장단점
SPA가 탄생한 이유 / SPA vs MPA 개념, 장단점 / 어떤 아키텍쳐를 사용해야할까?
62.REST, RESTful API 알아보기
REST(Representational State Transfer)는 네트워크 리소스를 정의하고 처리하는 방법을 설명하는 일련의 원칙을 기반으로 하는 아키텍처 스타일이다.
63.React toastify 라이브러리 style custom 하기 (with Styled-Components)
React toastify 라이브러리, 스타일 커스텀
64.웹 성능 최적화를 위한 useSWRInfinite 활용: 무한 스크롤 적용 방법
useSWRInfinite를 사용하여 무한 스크롤을 구현해보자! (with. Intersection Observer)
65.비디오 스트리밍 서비스 구축 학습하기 (HLS / DASH)
컨텐츠 보호: 불법 다운로드 방지를 위한 시스템 구축, 비디오 스트리밍 서비스의 일반적인 아키텍처 학습하기, 크로스 브라우징을 지원하는 비디오 플레이어 개발
66.Next.js 프로젝트 ECharts 번들 크기 최적화 하기
@next/bundle-analyzer 설치하여 번들 사이즈 확인 후 최적화 해보기
67.React에서 string 형태 HTML 태그 안전하게 렌더링하기(feat. DOMPurify)
DOMPurify와 같은 라이브러리로 HTML을 정화하여 안전하게 HTML을 렌더링하기
68.Tailwind CSS로 다크 모드/라이트 모드 구현하기
Next.js + Tailwind CSS에서 다크 모드/라이트 모드 구현하기
69.Next.js App Router에서 authOptions 관련 에러 해결하기
Type error: Route "src/app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route. "authOptions" is not a valid Route e