타입스크립트

drag and drop 기능을 구현해서 당연하다는 듯이 라이브러리를 찾아 썼는데, 웬걸 - 가로로 움직이는 슬라이드 구현을 하고 그 안에 보여지는 부분은 아래위로 스크롤이 되어야 한다. 게다가 웹앱인지라 터치로 드래그까지 되야하는 상황이었다. 처음에 구현했을 때는 siwper라는 리액트 라이브러리를 사용했고, 슬라이드 안쪽 부분에도 다른 드래그 라이브러리를 추가해서 진행했는데, 여러 가지 이유에서 제대로 구현을 할 수가 없었다. 간단하게 사유를 이야기해보자면, 라이브러리까지 충돌을 한다. 간편하게 쓰자고 라이브러리 쓰는데 서로 충돌해서 난장판이 된다. 충돌 안되는걸 찾았더니 가로 슬라이드 구현을 도운 라이브러리가 모든 마우스 이벤트를 다 뺏어가서 다른 라이브러리가 먹히지 않는 일도 발생했다. 결국은 하..

맨날 정해져있는 템플릿을 이용한 기능 개발만하다가 모처럼 새로운 UI를 짜야하는 일이 생겼다. 밑밥을 깔아보자면 ㅋㅋ... 처음부터 빌드한 프로젝트가 아니라 중간에 끼여든 프로젝트였기에 코드를 읽을 때부터 버벅이긴 했다. 자 이제 밑밥은 깔림. 내가 해야할 목록 1. swiper 라이브러리를 쓴다. 2. navigator 버튼을 나오게하고 첫 슬라이드에서는 왼쪽 버튼이 사라지게 마지막 슬라이드는 오른쪽 버튼이 사라지게한다. 3. 슬라이드는 마우스 드래그로도 가능하게한다. Code import React, { useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; const Projects = () => { const [sw..

▪ Literal types const userName1 = "Bob"; let userName2 = "Tom"; const는 상수로 변하지 않는 값을 선언할 때, let는 재할당이 가능한 값을 선언할 때 사용합니다. 저 상태에서 VSC같은 에디터에서 마우스를 올려보면 const는 "Bob"이라고 선언 된 값이 뜨고, let은 let userName2 : string이라는 타입 값이 뜹니다. let은 언제든 다른 값으로 변할 수 있기 때문입니다. userName2 에 숫자를 넣고 싶다면? let userName2 : string | number = "Tom"; 이렇게 타입을 둘 다 명시해줍니다. type Job = "police" | "developer" | "teacher"; interface User..