목록2023/06 (22)
치춘짱베리굿나이스
Web Share API 2차로 갈만한 가게를 추천해주는 웹앱 개발에 참여하면서, 특정 장소나 장소 모음집 (컬렉션) 을 다른 사람에게 공유해줄 수 있는 기능을 만들 일이 생겼다 스마트폰에서 공유 버튼을 누르면 대부분 같은 UI의 팝업이 뜨는데, 이걸 보니 공유 기능이 각자 독자적으로 개발된 것이 아니라 자바스크립트 또는 HTML 등에서 제공해주는 특정 API를 사용하겠구나 싶었고, 실제로도 그랬다 이 API를 사용해서 어떻게 링크 공유를 해줄 지 알아보자 설명 MDN에서의 설명 번역 The Web Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the..
scroll-snap 웹앱 등지에서 스크롤을 넘기다 보면 특정 컴포넌트에서 자석같이 멈추는 느낌의 스크롤을 볼 수 있다 위의 이미지에서도 중간즈음까지 스크롤을 넘기면 자동으로 컴포넌트의 왼쪽에 맞춰서 착 달라붙는 것을 볼 수 있다 임의로 자석 스크롤, 쫀쫀 스크롤이라고 부르고 있었는데 CSS에서의 정식 명칭은 scroll-snap이었다 (이하 위와 같은 동작을 ‘스냅’ 이라고 부르도록 하겠다) 이 모션을 위한 총 3개의 스크롤 관련 CSS 속성이 존재하는데, 하나는 부모 컨테이너에 적용하고, 두 개는 스크롤이 스냅되길 원하는 자식 박스에 적용하면 된다 세 개의 속성들 scroll-snap-type (부모) scroll-snap-type: [ x | y | block | inline | both] [ ma..
두 태그를 묶은 이유는 내가 헷갈려서 white-space 공백 문자를 어떻게 처리할지에 대한 속성이다 '안녕하세요. 이것은 치춘 블로그 (blog.chichoon.com) 입니다.\n만나서 반갑습니다. 이것은 white-space 처리용 예문입니다.\n이것은 white-space 처리용 예문입니다.' 예문은 다음과 같다 normal white-space: normal; 연속으로 나타나는 공백 (여러 개의 공백) 을 하나로 합친다 개행 문자도 다른 공백 문자와 동일하게 처리한다 줄이 너무 길어 넘칠 경우, 자동으로 줄바꿈한다 nowrap white-space: nowrap; 연속으로 나타나는 공백을 하나로 합친다 줄 바꿈은 에서만 이루어진다 자동 줄바꿈이 이루어지지 않는다 pre white-space: ..
'localhost:9000' 출처로부터 발생한 'locahost:8080/graph' 를 향한 fetch 접근은 CORS 정책에 의해 차단되었습니다: Preflight 요청에 대한 응답이 접근 제어 체크를 통과하지 못하였습니다: 'Access-Control-Allow-Origin' 헤더가 요청한 리소스에 존재하지 않습니다. 불투명한 응답이 필요한 경우, 요청 모드를 no-cors로 설정하여 CORS가 비활성화된 리소스를 fetch하세요. 많은 프로젝트들을 좌절케 하는 그 녀석이다 나도 프론트엔드 처음 공부할 때 이 녀석 때문에 프로젝트 하나가 터진 적이 있었다 (크흠,,,) 그 때의 과오를 잊지 않기 위해 정리하기… 사전 지식 도메인, 스킴, 포트 CORS를 보기 전에 도메인, 스킴, 포트가 무엇인지 ..
헐 https://stackoverflow.com/questions/72148525/tailwindcss-3-classes-doesnt-override-previous-classes 위와 같은 경우에 px-0과 px-3은 같은 priority를 갖기 때문에 px-3이 px-0을 덮어씌우지 않는다 당연히 클래스명은 오른쪽에 있는 것이 왼쪽에 있는 것을 덮어씌우는 줄 알았는데! 전혀 아니었다 디자인 시스템에서 테일윈드를 쓰면서 클래스명을 덮어씌워야 하는 경우가 종종 생기는데, 당연히 우측에 배치된 클래스명이 좌측의 클래스명을 덮어씌울 줄 알았지만 형제 관계의 클래스는 서로 우선순위가 동일하기 때문에 스타일시트 상의 순서에만 영향을 받는다고 한다 이것 때문에 팀원이랑 씨름을 했는데 위와 같은 사실을 알게 되고..
롯데월드를 약 10년만에 다녀왔습니다 아틀란티스와 혜성특급을 탈수있게 되었다 세상을 즐길 수 있는 폭이 조금 넓어졌습니다 내 프로젝트를 위한 소규모 디자인 시스템을 만들어보고 있습니다 프로젝트 디자인이 전부 중구난방이기도 하고 모 프로젝트에서 디자인시스템 팀에 참여하고 있는데 꽤나 재밌는거같아서요 아마 다른사람들이랑 같이해서 재밌는걸수도 포스팅이 덜 올라오는 이유 레퍼런스 교차검증하면서 쓰다가 보류상태에 접어든게 너무 많아요 슬슬 하던일에도 적응됐고 여유도 생겼으니 다시 적으려고 합니다 암튼 잘살고있습니다 이상!!! 끝!!!!! 연락은 댓글주세요