스켈레톤 UI란? 데이터가 렌딩되기 전, 사용자가 보게 될 화면의 윤곽을 먼저 그려준다는 것을 의미한다. 스켈레톤은 해골이라는 의미를 뜻하는데, 사람의 형상 전에 뼈가 되는 해골이 있는 것과 비슷한 의미라고 생각하면 이해가 쉽다. 왜 사용해야하는가? (한국 사람들에게만 특정되는 부분은 아니지만 한국에서 서비스 하는 회사/사람의 입장으로) 빨리빨리와 IT 강국의 맛에 익숙한 한국 사람들은 사이트가 조금이라도 느리면 바로 이탈해버리는 경우가 많다. 하지만 모든 애플리케이션들을 서버와 통신을 하며 로딩되는 시간이 필요할 수 밖에 없다. 이 때, 단순 흰색 화면만 노출된다면 많은 사람들이 렉먹은 줄 알고, 이탈하게 될 것이다. (일단 나부터) 스켈레톤 UI를 사용하게 되면 단순 로딩바를 돌리는 것 보다 이탈률이..
세상은 넓고, 내가 모르는 것은 많다. 얼마나 더 열심히 공부해야 많은 것을 알게되는걸까. IE가 서비스를 종료함에 따라 다양한 브라우저에 대하여 알아보던 중, 정말 좋아보이는 브라우저를 발견하였다. LT 브라우저 람다테스트에서 나온 LT 브라우저는 개발자들에게 꽤 사용해봄직한 브라우저가 아닐까 싶다. (나도 아직 당당하게 말 할 만큼 오랜 기간을 사용하지 않아서 확신이 어렵다.) https://www.lambdatest.com/lt-browser LT Browser for Live Mobile View Debugging | Perform Mobile Website Test Perform Live Mobile View Debugging of your website on different devices w..
일단, 프리마커란? https://hyermione.tistory.com/58 Freemarker(프리마커)가 대체 뭘까 [!이시중] 2021년 10월 19일 23:02에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/37 에서 확인할 수 있음. 근래 프리마커 (freemarker)라는 단어를 많이 들었다. 말하기 부끄럽지만.. 사실 처음 들.. hyermione.tistory.com assign - 변수할당 블럭 단위의 사용도 가능함 // ${name} abcdefghigklmnop // ${alphabet} attempt, recover - try-catch문 중첩문 사용 가능 // 시도 할 로직 // 실패 시, 시도 할 로직 autoesc - 자동 이스케이핑 // 문자 ..
애플의 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이라고 할 수 있다. 하지만 ..
실무에서 git 없이 일을 진행하는 회사는 거의 없다. 물론 git 외의 비슷한 서비스를 사용하는 곳들도 있겠지만 전세계적으로 git의 사용률이 압도적이다. git이란 무엇인가. 위키백과에 따르면 git은 다음과 같이 정의되어있다. 깃은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 또는 이러한 명령어를 가리킨다. - 위키백과 git을 써야하는 이유 git을 써야하는 이유를 나는 크게 두 가지로 볼 수 있다고 생각한다. 그리고 두 가지의 관점에서 볼 때, 위키백과는 git을 아주 잘 설명하고 있다고 생각한다. 버전 관리를 위해 여러 개발자들과 협업을 위해 먼저 깃은 컴퓨터 파일의 변경사항을 추적할 수 있는데, 이러한 기능을 통하..
회사에서 팀 내 기술 세미나를 듣던 중, 우연히 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..
gitignore은 말 그대로 git에 올리는걸 무시해주는 설정을 말한다. 예를들어 node_modules 혹은 access 키 등 노출을 하면 안되거나 용량이 크거나 혹은 기타 등등 불필요한 모든 파일이 이에 해당한다. 방법 1 git repository를 생성 할 때, 파일을 함께 만들어준다. 방법2 최상단에 .gitignore파일을 만들고, 하단의 형식에 맞게 직접 작성해준다. # 파일 제외 (파일명.확장자) 파일명.txt # 현재 경로에 있는 파일만 제외 (다른 경로의 동일한 파일명은 추적) /파일명.txt # 특정 경로안의 특정 파일 제외 폴더명/파일명.txt # 특정 폴더안의 파일 전부 제외 폴더명/ # 해당 확장자 파일 전체 제외 *.txt # 예외 !제외할 파일명.txt 방법3 최상위에 ...
- Total
- Today
- Yesterday
- 사파리
- 프론트앤드
- js테스트
- frontend
- gitRebase
- 크롬
- 깃
- CSS
- 자바스크립트
- sentry
- npm
- 리코일
- 김민태
- 리액트상태관리
- 센트리
- BFCache
- Git
- 프론트엔드
- TIL
- react
- vue
- 리액트
- js
- 모바일사파리
- 깃명령어
- 센트리모니터링
- 리액트훅
- storybookUI
- javascript
- reacthook
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |