CSS에는 다양한 속성이 있지만, 사용할 때는 은근히 까다로운 속성도 있습니다. 아래 몇 가지 쉬운면서도 어려운 CSS 속성을 예제를 통해 알아보겠습니다. clip-path clip-path는 요소의 시각적 영역을 제어하는 CSS 속성입니다. 이 속…

웹 디자인 및 개발에서 크로스 브라우저 호환성은 항상 큰 주제입니다. CSS의 규칙은 이 문제를 해결하는 데 큰 도움을 줍니다. 이 규칙을 사용하면 특정 CSS 기능이 브라우저에 의해 지원되는지 여부를 확인하고 조건부로 스타일을 적용할 수 있습니다…

디자인 패턴의 프론트엔드 적용 사례 디자인 패턴은 반복적으로 나타나는 프로그래밍 문제를 해결하기 위한 입니다. 이번 글에서는 대표적인 디자인 패턴을 프론트엔드에 어떻게 적용할 수 있는지, 간단한 예제 코드와 함께 살펴봅니다. 모듈 패턴 (Module…

프론트엔드에서 애니메이션을 구현하는 방법은 다양합니다. CSS 속성만으로도 구현이 가능하죠. 하지만 단순한 애니메이션이면 몰라도 조금만 난의도가 올라도 CSS 코드는 매우 복잡해집니다. 아래 몇 가지 예를 들어 프론트엔드에서 애니메이션 구현하는 방…

CSS의 z-index 속성은 웹 페이지에서 요소 간의 순서를 조절할 때 중요한 역할을 합니다. 그러나 z-index의 동작 방식을 제대로 이해하지 못하면 혼란스러운 상황에 빠집니다. 도대체 어디가 문제인지 알 수 없게 되어버리죠. 오늘은 CSS를 …

지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유)에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 , 개발 생산성에 초점을 맞춘…

는 쉽지 않다. 처음 배울 때는 ‘이 정도쯤이야?’라는 생각이 들 정도로 쉬워 보인다. 실제로 러닝커브가 그리 높지는 않다. 그래서 과거에는 주로 신입이나 경력이 짧은 사람에게 맡기는 경우가 많았다. 당시에는 프론트엔드 영역이 명확히 나뉘어 있지 않…

이 글은 Introducing Sass Module)를 참고하여 정리하였다. 최근, SCSS(사스, Sass)에 모듈 시스템(Module System)을 지원하기 위한 새로운 feature들이 몇가지 승인(accepted)되었다. 그 중에 at-ru…

요즘 프론트엔드 개발자들은 (Visual Studio Code)를 가장 많이 사용한다. 그렇다보니 버그 수정이나 기능추가가 상당히 빠르다. 또한 Typescript와의 호환성도 훌륭하다. 아마도 MS에서 둘다 만들었기 때문이라 생각한다. 그리고 VS…

그 동안 로 작업하면서 배운것들에 대해 알아보자. flexbox의 기초 flexbox의 기초를 다룬 좋은 글이 많기 때문에 여기서 다시 다룰 필요는 없을것 같다. 만약 flexbox에 대해 잘모르거나 잘 생각나지 않는분들이라면 아래 링크를 한번씩 …

공지사항이나 FAQ 페이지에는 가 많이 사용된다. 이라고도 하는데, 기본적인 리스트에서 각 항목을 터치(클릭)하면 세부 내용이 확장되는 형태의 UI다. 비교적 간단한 UI기 때문에 css와 javscript를 적절히 조합하면 누구나 손쉽게(feat.…

react에서 modal 뷰 구현을 위해 react-modal 패키지를 사용한다. 근데 이 react-modal을 쓰다보면 한가지 문제에 부딪힌다. 바로 모달 외부의 dimmed 영역이 스크롤되는 문제다. 예제를 살펴보자 (모바일이라면 반드시 새창으…

최근 몇년간의 웹 생태계는 마치 전쟁터와 같았다. 아니, 지금도 전쟁중이다. 각종 도구들부터 시작해서 웹 프레임워크까지, 한시라도 눈을 떼면 뒤쳐져버리기 일쑤다. 요즘, 국내에서도 프론트엔드 개발자라면 리액트(react)나 뷰(vue) 둘 중 하나는…

의문은 아래와 같은 코드에서 시작되었습니다. 객체를 매개변수로 받는 함수에 새롭게 만든 객체를 인자로 전달하였습니다. 그리고 함수에서 obj 변수에 새로운 객체를 할당하였습니다. 과연 는 어떤 값이 출력될까요? Call By Value 가끔 일하…

이벤트 버블링 / 캡쳐링 특정 DOM 노드에서 발생한 이벤트는 부모 또는 자식으로 전파됩니다. 자기자신(currentTarget)에서 부모로 전파되면 이벤트 버블링(event bubbling)이라 하고, 부모에서 자기 자신으로 전파되면 이벤트 캡쳐링…

nextjs 로 프로젝트를 진행한지도 반년 가까이 흘렀습니다. nextjs는 서버사이드렌더링(SSR)과 code splitting 등을 지원하는 reactjs 전용 프레임워크입니다. 2 년도 채 안되는 시간에 벌써 5.x(곧 버전 6 도 나올것 같네…

react v16.3.0 이 릴리즈 되었습니다. 개인적인 생각으로는 가장 큰 변화는 두가지 정도입니다. 첫번째는 몇몇 lifecycle method 가 deprecated 되었습니다. 그리고 새로운 Context API 가 추가되었습니다. 그 외에 …

CSS 는 일련의 가중치에 따라서 어떤 속성을 우선적으로 적용할 것인지 결정합니다. 우선순위에 대한 정보는 조금만 검색해보면 나오므로 간단히 링크로 대체합니다. 현재 회사에서는 nextjs((https://github.com/zeit/next.js/…

React 프로젝트에서 가장 많이 사용되는 테스트 모듈로 Jest가 있습니다. react 와 Jest 둘 다 페이스북이 만든 오픈소스 프로젝트입니다. 같은 회사에서 만든 오픈소스기 때문에 서로 호환이 잘 될거라는 믿음으로 사용하고 있습니다. 호환성과…

this 는 어렵지 않습니다. this 를 어렴풋이 알고는 있지만, 누가 물어봤을때 제대로 대답해 줄수 있도록 정리해보겠습니다. 많은 개발자들이 javascript 의 this 를 혼란스러워합니다. 사실 개념 자체가 어렵진 않습니다. 다만, 다른 프…

async, await 는 ES8(ECMAScript2017)의 공식 스펙(링크)으로 비교적 최근에 정의된 문법입니다. 를 사용하면 비동기 코드를 작성할 때 비교적 쉽고 명확하게 코드를 작성할 수 있습니다. 자바스크립트는 싱글 스레드 프로그래밍언어기…

원본: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ 의역, 오역이 가득합니다. 개인적으로 정확한 개념을 잡기 위한 번역입니다. 불필요하다 생각한 내용은 과감히 제거했습니…

리액트를 개발하다보면 이런 코드를 본적 있을것입니다. this(아마도 react 클래스 객체)에 속한 어떤 메서드를 다시 this 에 bind 한다라?? 굳이 왜 이런짓을 해야하는지 의문이 들만합니다. 리액트에서 이러한 코드가 빈번하게 작성되는 이유…

원본 : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 2 년이나 지난 글이지만, 컴포넌트를 어떻게 구현해야 하는 문제에 있어서는 이만한 가이드가 없다고 생각해서 번역해…

react-router v4 가 릴리즈 되면서 라우팅 적용 방식이 바뀌었습니다. 이전버전(v3)까지는 일반적으로 사용하는 정적 라우팅(Static Routing)이였다면, 동적 라우팅(Dynamic Routing)이 적용되었는데요. 여기서 말하는 정…