TypeScript Study, TodoList, TailWindcss + styled-components
기존에 적용하던 css나 JS styled-components 방식이 아닌 tailwind-styled-components를 적용한 TodoList를 만들어 보았다.
일반적으로 css를 tailwind로 바꾸는 것이 아닌 styled-components까지 이용하기 때문에 tailwind-styled-components를 설치해준다.
보다 편리한 사용을 위해 Tailwind CSS IntelliSense 확장자 또한 추가해준다.
위 확장자를 이용하면 기본적인 css옵션들을 확인하기 편리하다.
tailwind.config.js
tailwind의 장점 중 하나인 커스터마이징을 해당 파일에서 진행한다.
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
darkmode: [],
// main color setting 가능
theme: {
extend: {
colors: {
primary: "#8ffebf",
},
spacing: {
"1per": "1%",
"2.5per": "2.5%",
"5per": "5%",
"95per": "95%",
},
},
},
variants: {
extend: {
borderWidth: ["hover"],
},
},
};위와 같이 세팅을 해주고, 예시로 넣어둔 primary와 같이 main color를 지정해두거나 spacing 안의 값들처럼 자주 쓰는 사이즈에 대해 이름과 값을 지정해줄 수 있다.
지정된 값의 경우 기존에 쓰는 tailwindcss의 기본값처럼 사용 가능하다.
const TextContainer = tw.div`
w-full h-auto box-border bg-primary
overflow-hidden truncate whitespace-nowrap
px-2.5per`;위 예시는 tailwind와 styled-components를 함께 사용한 것으로 다음과 같이 지정한 div의 경우 <TextContainer> ... </TextContainer> 와 같은 형태로 사용 가능하다.
isComposing
Enter키로 input값을 받기 위한 KeyChange를 설정하면서 커서가 해당되어있는 마지막 글자가 함께 입력되는 문제가 발생했다.
검색을 해보니 크롬브라우저 상의 한글 문제인 것으로 보였다.
자음 모음이 조합되어 구성되는 문자이다 보니 키보드 커서가 존재하는 상황에 이벤트핸들러가 2번 호출되는 문제라고 한다.
isComposing의 경우 입력문자가 조합문자인지 아닌지를 boolean 타입으로 반환하는 프로퍼티라고 한다.
따라서 해당 프로퍼티를 조건에 추가해주도록 한다.
▷ 수정 전 코드 및 상황
if (e.key === "Enter") {
//Enter 키 입력 여부 확인
▷ 수정 후 코드 및 상황
if (e.key === "Enter" && e.nativeEvent.isComposing === false) {
//Enter 키 입력 여부와 조합문자 구성 여부 확인
회고
간단하게 post, delete만 되어있는 Todo-list이므로 아직 수정, 추가할 부분이 많음.
금주 중 간단하게 시도해보고자 하는 프로젝트가 아직 많이 있으므로 다수의 프로젝트에 대한 기본적인 틀들을 다져 둔 후에 수정하는 방식으로 진행할 예정.
차후에 추가하고자 하는 부분
◻︎ 수정기능 넣기
◻︎ 제목 및 작성자 추가해보기
◻︎ css 부트스트랩이나 라이브러리로 바꿔보기
