css

tailwind css 사용 후 환경설정을 하는데 tailwind.config.js에서 다음과 같은 메시지가 떠서 어떤 종류인지 알아보았다.해당 메시지를 직역하자면 '파일은 CommonJS 모듈이며 ES 모듈로 변환될 수 있습니다'로 해석된다. 모듈? 모듈은 많이 들어봤는데 CommJS 모듈과 ES module이라는 것이 어떤 건지 모르기에 한 번 알아보았다. 1. Common JSCommonJS는 서버 사이드 JavaScript를 위해 개발된 모듈 시스템이며, Node.js가 이를 채택하면서 널리 사용되기 시작하였다. 때문에 Node.js 에서 자바스크립트 패키지를 불러올 때 사용되며, 브라우저에서도 사용될 수 있다. ※ Common JS 사용법모듈을 정의하고 내보낼 때 module.exports를 사..

개인 과제 중 아래와 같이 글이 길이가 설정한 범위의 영역보다 길어질 경우 나머지 부분을 ... 처리하는 과정에서 튜터님의 도움을 받아 처음 보는 방법으로 해결하여 기록하려 한다.  여러 방법을 시도해보았지만 제대로 작동하는 것이 없었고, 튜터님이 제안해 주신 방법만 적용되어 그 코드가 왜 작동되는지 한 번 알아보았다. ※ overflow: hidden →  가로/세로 영역에서 범위를 초과한 컨텐츠들을 보이지 않게 처리해 준다.※  display: -webkit-box→  웹킷 기반 브라우저에서 요소를 블록 컨테이너인 flexbox로 설정한다.※   -webkit-line-clamp: 1 → 줄 수를 1줄로 제한하며, 텍스트가 한 줄을 넘기면 잘라낸다.※  -webkit-box-orient: vertic..

프로젝트를 하던 중 아래와 같은 경고 문구를 만났다. 코드가 작동은 원활하게 잘 되는데, 경고 문구가 떠있는 건 뭔가 찜찜해서 해결해보고자 하였다.※ 에러 발생명확한 오류 지점이 있으면 디버깅을 해보겠는데, 딸랑 경고문구 하나라 문제를 찾기 어려워 튜터님께 도움을 구했다.※ 해결 방법 문제는 background가 알수 없는 props라고 하는 점이었는데, React 내부적으로 background라는 임의의 키워드를 사용하고 있어 중복되는 문제였다. 때문에 DOM에 접근하는 게 아닌 스타일 시트에만 사용하는 키워드이기 때문에 background 앞에 $을 명시적으로 붙여 사용하니 경고 문구가 사라졌다!(해결해 주신 튜터님께 무한 감사를...) => Transient Props?이 방법을 Transient ..

예전에 본 토스 디자인 컨퍼런스에서 잊히지 않았던 트랜지션 효과가 있어서 여태껏 생각만 하다가, 팀 프로젝트 하는 김에 한번 써 보았다. 생각만 하던걸 구현해 보니 난이도와 상관없이 뭔가 기분이 업되는 느낌? 토스 디자인 컨퍼런스 SIMPLICITY 23 제겐 랜덤 추첨이라는 운이라는 건 존재하지 않는지 큰 규모의 컨퍼런스는 아쉽게도 당첨되지 못하고, 감사하게도 온라인으로 준비해 주신 컨퍼런스나 다시 보기 영상을 주로 보는데요. 작년 토스 디자인 컨퍼런스 Simplicity23을 보며 감동의 물결에 휩쓸려 나간 적이 있습니다. (뜬금없지만 올해 인프콘은 제발 꼭..! 스태프라도.. 인력 안 필요하신가요? ㅠㅠ) 원래도 예쁜 디자인을 좋아해서 프론트엔드의 길을 걷고 있는데 이런 결과물을 집에서 볼 수 있다..