programing/Web
-
[Storybook] 스토리북에 대해 알아보자programing/Web 2020. 6. 15. 21:08
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 Storybook이라는 툴에 대해 알아보도록 하겠습니다. Storybook이란? Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. Storybook은 React나 Vue, Angular를 위한 고립된 환경에서 컴포넌트 UI 개발을 위한 오픈소스 툴입니다. React의 철학 중 하나가 "고립된 컴포넌트를 이용해 재사용성을 높이는 것"임을 생각하면, 꽤나 잘 어울리는 설명이라고 생..
-
[Deno] Deno에 대해 알아보자programing/Web 2020. 5. 31. 16:29
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 2020년 5월 13일, Deno 1.0이 릴리즈가 되었습니다. 니콜라스 씨도 유튜브에서 Deno에 대한 언급을 한 적 있는데, 도대체 Deno는 무엇일까요? 부족하지만 한번 정리를 해보았습니다. Deno? A secure runtime for JavaScript and TypeScript. Deno는 구글의 V8엔진과 Rust, Tokio로 개발된 JavaScript와 TypeScript 런타임입니다. Node.js를 개발했던 Ryan Dahl이 Node.js를 개발하며 했던 후회들을 개선하기 위해 만들었다고 합니다. 한글 자료는 배영님의 노션을 참고해주세요! Node.js를 개발하며 했던 10가지 후회들 We feel th..
-
[Web] Cross Browsing with Scrollingprograming/Web 2020. 5. 23. 19:34
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 스크롤링 기능으로 인한 크로스 브라우징 경험 후기를 공유하고자 합니다. element.scrollIntoView() 홈페이지를 개발하다가, 상단의 메뉴를 클릭하면 해당 섹션으로 부드럽게 스크롤되는 기능을 구현하기 위해 scrollIntoView()함수를 사용했습니다. 평소에 크롬을 쓰는 저는 로컬에서 테스트를 해 보니 잘 작동했습니다. 그런데 어느 날 사파리로 테스트해보니, 부드럽게 스크롤링되지 않고 순식간에 해당 위치로 스크롤이 점프했습니다. 혹시나 해서 MDN의 scrollIntoView()문서를 보니, 사파리에서는 smooth behavior를 지원하지 않는다고 나와있습니다. (CSS의 scroll-be..
-
React vs Vue.jsprograming/Web 2020. 5. 19. 14:20
면접에서 리액트와 뷰를 비교하는 질문이 많이 들어옵니다. 개인적으로 느낀 차이점들과 다른 정보들을 정리해봤습니다. (뇌피셜이 많이 들어 있으므로, 팩트 체크가 필요합니다..) 1. 리액트는 JS로 모든 것을 구현할 수 있지만, 뷰는 기본적으로 마크업과 스타일, 스크립트를 써야 한다. 리액트는 JSX와 styled-components과 같은 외부 라이브러리를 이용해서 js로 마크업과 스타일을 구현할 수 있다. 하지만 뷰는 기본적으로 템플릿 언어이기 때문에, HTML로 마크업을, js로 스크립트를, css로 스타일을 구현해야 한다. (물론 JSX문법도 지원한다.) 이 부분은 취향 차이겠지만, 고전적인 HTML CSS JS를 배운 초보자들에겐 뷰가 더 익숙할 듯 하다. 2. 둘 다 가상 DOM을 사용한다. 뷰..
-
-
[CSS] scroll-snapprograming/Web 2020. 2. 18. 10:25
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 참고 https://css-tricks.com/practical-css-scroll-snapping/ Practical CSS Scroll Snapping | CSS-Tricks CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building css-tricks.com
-
[CSS] CSS Layout & patternprograming/Web 2020. 2. 18. 10:19
대중적으로 사용되는 CSS 레이아웃과 패턴을 모아놓은 사이트입니다. https://csslayout.io/ CSS Layout Starting with the most basic part, you can customize easily for each specific need. By composing them, you can have any possible layout that exists in the real life. csslayout.io
-
[React] 클래스 컴포넌트 vs 함수 컴포넌트programing/Web 2020. 2. 9. 19:22
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 리액트에서 클래스 컴포넌트와 함수 컴포넌트 둘 다 사용이 가능합니다. 그렇다면 둘의 차이점은 무엇일까요? this 가장 큰 차이점은, this가 바뀌느냐 바뀌지 않느냐입니다. 클래스 컴포넌트의 경우, this가 실시간으로 바뀝니다. 그러나 함수 컴포넌트의 경우, this는 컴포넌트가 렌더링된 시점으로 고정됩니다. (아마도..) 자세한 내용은 하단의 링크를 참고해주세요. 참고 https://www.hamadevelop.me/reactfunctionclassdiff/ 리액트 function component와 class component는 어떻게 다를까? 리액트 function 과 class의 차이를 다룬 글 번역 www.hamad..