공부 | Tailwindcss 더 잘 사용하기(class-variance-authority, tailwind-merge)
2024. 4. 24. 21:16
공부/프론트엔드
Tailwindcss를 더 효과적으로 활용하기 ❓상황tailwindcss를 사용하여 신규 프로젝트를 개발을 하던 도중 동료분께서 내가 작성한 코드를 보고 패키지들을 추천해줬다.그래서 해당 패키지들을 알게되었고, 이를 프로젝트에 적용시키려고 한다. 기(起) 나는 가독성을 높이기 위해 코드를 줄이는 것을 좋아한다. 그래서 단축평가를 모든 코드에 녹아내려고 노력을 한다. tailwindcss에서 제공해주는 스타일을 적용해주기 위해 클래스를 적어야한다.조건부로 클래스를 적을 때는 단축평가를 사용할 수 없는데 그 이유는, Boolean 값이 클래스에 적혀져 나오기 때문이다. 예를들어 isOpen 이라는 변수의 Boolean 값이 true라면 'opened-modal' 이라는 클래스..
공부 | CSR, SSR 그리고 Next.js
2023. 7. 5. 03:26
공부/프론트엔드
CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. ❓상황 원티드 프리온보딩 챌린지 7월 참가하여 주어진 사전과제가 있었다. 사전과제를 못했는데, 강의 이후에 다시한번 과제를 내주셨다. 두번째 과제인 history API를 이용한 react-router-dom의 간단한 기능을 구현했고, 첫..
오류 | addEventListener 이벤트 탐지
2022. 10. 25. 23:09
공부/프론트엔드
자바스크립트로 HTML 요소 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는다. ❓상황 자바스크립트로 HTML 요소를 innerHTML로 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는 상황 🔎 원인 파악 오류가 아니라, innerHTML로 HTML 요소를 추가하면, 형제 노드와 하위 노드에 등록된 addEventListener가 없어진다고 한다. [javascript] 자손의 이벤트 리스너를 파괴하지 않고 innerHTML에 추가 할 수 있습니까? - 리뷰나라 다음 예제 코드에서는 onclick“foo”라는 텍스트가 포함 된 범위에 이벤트 핸들러를 연결합니다 . 핸들러는 alert(). 그러나 부모 노드의에 할당하면 innerH..
공부 | HTML, CSS 말 줄임(단일 행, 다중 행) 스타일 정리
2022. 10. 12. 21:46
공부/프론트엔드
단일 행과 다중 행에서 글자가 많을 경우 말줄임(...) 스타일 적용하기 ❓상황 단일 행과 다중 행 말줄임을 강의 수강했을때 처음 접하게 되었고, 이를 학습하여 정리하게 되었음. 📖 말 줄임이란? 글자의 길이가 긴 경우, 특정 구간을 넘어가면 ...을 표시하여 텍스트의 길이를 제한할 수 있다. 흔히 쇼핑몰에서 텍스트가 많은 상품명이 있는 경우가 많다. 의식하진 않았겠지만, 텍스트가 많다고해서 디자인이 뒤틀리거나 하지 않다. 그 이유는 말 줄임 스타일을 적용함으로써 디자인을 변화시키는 것을 감소하기 때문이다. 🧮 정리 말 줄임 : 단일 행 텍스트의 양이 많아서, 한 줄로 표현되지 않고 여러줄로 표현되었다고 가정해보자 Lorem Ipsum is simply dummy text of the printing a..
공부 | HTML, CSS 웹 접근성(스크린리더) 정리
2022. 10. 11. 18:52
공부/프론트엔드
웹 접근성(스크린리더) ❓상황 스크린 리더에 탐지되지 않게 하는 방법을 강의로 처음 접하게 되었고, 이를 학습하여 정리하였음. 📖 스크린리더란? 스크린리더는 컴퓨터의 화면을 다양한 언어로 음성으로 표현하는 것을 뜻한다. 흔히, 트위치에서 스트리머에게 후원을 할때 후원 텍스트를 기계가 읽어주는 것을 생각하면 된다. 🧮 정리 HTML : aria-hidden aria-hidden 속성은 HTML Tag 요소의 속성으로 사용된다. aria-hidden 속성이 입력된 HTML Tag가 접근성 API에 노출되었는지 여부를 나타낸다. 접근성 API에 노출이 되었다면, 스크린리더가 음성으로 표현할 수 있고, 반대로 접근성 API에 노출이 되지 않았다면, 스크린리더가 음성으로 표현할 수 없다. 😤 제목입니다. 예시로 ..