혜르미온느

애플의 WWDC22가 2022년 6월 6일부터 10일까지 개최되었다. (한국시간 7일 새벽 2시~) 2022 Apple Worldwide Developers Conference 말 그대로 개발자 컨퍼런스인데, 애플이 향후 진행할 전략들에 대하여 염탐할 수 있는 컨퍼런스이다. https://developer.apple.com/wwdc22/ WWDC22 Join the Apple worldwide developer community for an all-online WWDC22. developer.apple.com 이번 2022 WWDC에서 기대되었던 AR/VR/MR 등의 언급은 없었고, M2에 대한 이야기, 맥북에서 new 디자인에 대한 이야기 등이 언급되었다고 한다. 그 중에서도 웹 개발자로써 알고있으면 ..

어느날 마주한 한 커밋 내용 'tree shaking'을 위한 수정. tree Shaking이 뭐지? Tree Shaking tree shaking이란 나무를 흔든다는 뜻을 그대로 적용시켰다고 할 수 있다. 나무를 흔들었을 때, 약한 나뭇잎들이 떨어지고 알짜만 남듯 실제로 사용하지 않은 코드들은 제하고, 사용되는 코드들만 빌드시킨다는 의미이다. 'build'에서 알 수 있듯이 이는 webpack에 들어있는 기능이다. 예를들어 import * from './utils'; 라는 코드가 있다. 하지만 import 한 곳에서 utils 안에 있는 것 중에 하나만 사용한다면? 굳이 모든 코드를 다 불러서 import 시켜야할까? 이러한 경우를 해결해 주는 방법이 tree shaking이라고 할 수 있다. 하지만 ..

회사에서 팀 내 기술 세미나를 듣던 중, 우연히 netflix oss라는 것을 접하게 되었다. N년 전, 넷플릭스는 기존 레거시 시스템을 모두 MSA로 바꾸는 혁신이 있었다고 한다. 실제 실리콘밸리에서는 기존 체계를 무너뜨리고 혁신하는 것을 netflixed라는 신조어로 표현할 정도로 넷플릭스는 변화의 중심에 서있다. 넷플릭스가 이러한 변화 가운데 MSA 시스템을 구성하는데 있어서 라이브러리를 만들었고, 그 시행착오를 정리하여 이것을 오픈소스로 공개하였다. Netflix Open Source Software. 이것이 줄여져 netflix OSS라고 불리우고 있다. 보통 포스팅을 하기 전에 여러 자료들을 찾아보고, 그 자료로 공부하여 나름 이해한 버전으로 적어보려하는데 왜인지 netflix oss는 모든게..

google I/O라는 것이 있다. 말 그래도 구글에서 개최하는 것으로 매년 개최되는 개발자 컨퍼런스와 같은 것이다. 나는 직접 듣지는 않고, 이제 실시간으로 들으신 고수분들께서 정리해 놓으신 것을 확인하며 냠냠 먹는 편인데, 이번에 CSS가 좋은 기능을 많이 탑재하는 것 같다 개인적으로 FE는 CSS를 아예 배제하고 살아가는 분야는 아니라고 생각하여 CSS의 동향같은 부분은 파악하려고 하는 편이다. 그런데 이제 다 정리하려고 하니 너무 많은 부분들이 있어서 흥미롭게 본 주요 기능들의 요약과 관련 정보 URL을 첨부해두려고 한다. 체크해 둔 부분을 더 자세하게 알고 싶으면 하단 URL에서 확인하면 된다 color-mix() : 색상 혼합하기 기능. 괄호 안의 컬러들을 서로 조합시켜주며, % 조절도 가능하..

이전에 스토리 북에 관하여 포스팅을 한 적이 있다. 당시에는 스토리북이 무엇인지 몰라 알아보고자 하는 용도로 포스팅을 하였고, 여전히 스토리북을 직접 구현해본 적은 없다. 인터넷을 항해하던 중 스토리북 작성을 하면서 마주한 문제를 정리한 블로그가 있어 메모 목적으로 저장해두려고 한다. ✔️ 이전에 작성한 스토리북 포스팅 URL https://hyermione.tistory.com/17 storybook ui란? 만약 우리가 IT계열이 아닌 그 어떤 다른 직업을 가지고 있다고 가정할 때, storyBook이라는 말을 처음 듣는다면 어떤 생각이 떠올랐을까? 나는 단연 이야기, 혹은 동화책 등에 관한 내용일거라 생 hyermione.tistory.com https://hyermione.tistory.com/1..

지난번에 npm 설치 관련 권한 에러에 대해서 해결하는 방법을 포스팅 한 것이 있다. https://hyermione.tistory.com/78 npm 전역 설치 시, 권한 거부 해결방법 1 오랜만에 react 테스트를 하려고 vsCode를 열었다. 근데 왜인걸 npm install을 하려는데 안된다..! 왜지 옛날에는 잘 되었는데???? npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/n.. hyermione.tistory.com 해결은 되었으나 포스팅에서 언급한 것 처럼 매번 관리자 권한으로 설치해야하는 어려움이 있다. 하단의 캡쳐에 보이는 것 처럼 sudo를 통해서 명령어를 한 번 실행하였고 제대로 설치됨을 확인하였..

오랜만에 react 테스트를 하려고 vsCode를 열었다. 근데 왜인걸 npm install을 하려는데 안된다..! 왜지 옛날에는 잘 되었는데???? npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/node_modules/npm/node_modules/ansi-align npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/ansi-align' npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_..

센트리를 보다가 발견한 오류. 무료버전을 쓰고 있어서 월 5,000건이 전부인데, 주말이 지나고 오니 한 오류에서만 3,700건을 수집해버렸다...! 용량이 있었는데, 없었습니다. 이 오류의 특이사항은 모두 Yeti에서 수집되고 있다는 점-! Yeti를 처음 들어본 나는 내 친구 예지를 생각하고 말았다.. 하여 알아보는 Yeti란 무엇인가. Yeti를 알려면 먼저 웹문서에 대하여 정리하는 것이 필요하다. 웹문서란 웹문서란 어려울 것 없이 웹 상에 존재하는 웹 페이지들을 의미한다. (페이지 = 문서) 우리가 검색했을 때, 포털 사이트들에서 보여주는 검색 결과가 웹문서들이라고 생각하면 된다. 이 중 포털사이트 NAVER는 로봇 프로그램이 인터넷을 자동으로 돌아다니며, 국내외 넓은 웹상에 뿌려진 웹문서들을 수..

[!이시중] 2021년 11월 24일 21:40에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/65 에서 확인할 수 있음. 개발을 하다 보면 잘 나가다가 어느 순간 막힐 때가 있다. 갑자기. 지난 토요일의 나는 토이 프로젝트를 진행하며, 네이버 api 중 영화 검색 api를 연결하려고 시도했다. 이제 와서 왜였을까? 라고 생각하지만 그 당시에 갑자기 api를 연결해야 하니까 express를 설치하자!라는 생각이 들었다. 개발을 잘하시는 분들은 그게 왜?라고 생각하실 수도 있지만 나는 node.js를 통하여 백엔드를 구현해 본 적도 없을뿐더러 이미 다른 곳에서 제공하는 api들은 axios를 통해서 데이터를 잘 불러오고 있었기 때문이다. https://hyermione.tis..

요새 웹접근성에 관한 프로젝트가 한창이다. 웹 접근성을 처리하는 방법은 이미지에 alt를 추가하는 정도밖에 몰랐는데, 정말 복잡하고 세심한 처리가 필요함을 느끼고 있는 요즘. 이를 정리해보려한다. 웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다. - 위키백과- ARIA 상단에 언급한 image에 alt 속성을 추가하는 것은 이미지를 설명하기 위한 대체 텍스트를 넣는다는 의미이다. 만약 시각적으로 이미지를 볼 수 없는 상황에서 alt에 설정된 속성을 읽음으로써 image를 파악할 수 있는 것이다. 현..