Jacob's Development Blog

웹 개발을 처음 할 때 열심히 외웠던 페이지가 만들어지는 과정. 아무런 경험 없이 무작정 외우다 보니 휘발성 기억이 돼버렸다. 지금도 물론 배워나가는 단계지만, 이제는 암기가 아닌 이해를 해보려고 이 글을 작성한다. 다시 한번 보자. 참고로 사실 웹 브라우저가 어떻게 동작해야 한다는 표준은 없다. 이 글은 크롬을 기반으로 설명하며, 모든 브라우저에 대응되는 글은 아님을 꼭 인식하자. 렌더러 프로세스(Renderer Process) 렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다. 렌더러 프로세스 안에서는 메인 스레드가 우리가 구현한 대부분의 코드를 처리하게 된다. 렌더러 프로세스의 핵심 역할은 HTML, CSS, JS를 사용자가 인터렉션 할 수 있는 웹 페이지로 만드는 것이다. DOM..

세상에 뭐든 잘하는 괴물 같은 사람이 많다. 왜 난 아니지... 근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자. 넋두리... 사실 이 프로젝트의 첫 시작은 프론트 개발자로서 CSS가 부족하다고 느낄 때가 많았지만, 얼렁뚱땅(?) 화면만 만들고 끝내는 경우가 많았다. 뭐 지금까지는 큰 문제는 없었다. UI가 깨지면 밤을 새우면서 고쳤고 주변 개발자들한테 도움도 많이 요청했다. 그러던 중 지금 회사에서 사내에서 여러 프로젝트에 사용할 목적으로 디자인 라이브러리를 만들게 되었다. 처음에는 어려운건 "material-ui" 랩핑 해서 쓰고 쉬운 것만 직접 만들어서 사용하면 되겠지!"라는 생각으로 시작했다. 정말 오만하면서도 만만하게 생각했던 것이었다. 그리고 만들려고 해 보니 정말 일..

요구 사항에 따라 자동으로 늘어나는 textarea를 구현해야 될 때가 있다. 그전에 textarea에서(input도 동일) caret의 색상을 변경하고 싶다면 아래의 속성을 변경해 주면 된다. caret-color: lightskyblue; 하지만 두께 등도 변경하고 싶다면 기본 제공해 주는 것으로는 불가능하며, 따로 만들어야 한다. 이 글을 쓰는 시점에서는 위 속성만 커스텀이 가능하다. 높이가 변하는 textarea를 구현하는 건 어렵지 않다. 바닐라나 react나 크게 다른 건 사실 없긴 하다. input에 데이터가 입력될 때마다 ref를 가져와서 scrollHeight의 높이만 더해주면 되기 때문이다. const handleResizeHeight = useCallback(() => { if (re..

커머스의 배송 상태, 음식 배달앱에서 배달 상태에 따라 타임라인 형식으로 구현된 화면을 많이 볼 수 있다. 교육 서비스인 우리 앱에서는 현재 구현할 일이 없어 혼자 한번 구현해 봤다. 실제 상태가 존재하지 않다 보니, hover를 통해 상태가 이동되도록 구현하였다. 여기 코드에서 조금 눈여겨볼 방법은 'component selector'를 사용했다는 것이다. 안타깝게도 react-native에서는 지원하진 않지만, 일반적인 웹과 웹뷰에서는 사용할 수 있다. const Date = styled...; const Title = styled...; const Contents = styled...; const TimelineItem = styled.div` position: relative; padding: 2..

프론트엔드 개발자로 있다 보면, 한 번쯤은 들어봤을 용어이다. 사실 CSS도 알고 JS도 이미 알고 있다. 그렇다면 직역을 해보자면, 자바스크립트 안에 있는 CSS 정도일 것이다. 이것도 당연 이해가 된다. 언뜻 보면 어렵지 않아 보이는 이 개념이 왜 궁금한 것일까. 조금 더 깊게 파보자. 기존 CSS 사용 방식에는 어떤 문제가 있었을까? css는 기본적으로 전역으로 사용된다. 그래서 우리는 class name을 통해 CSS를 제어하기 시작했다. 또한 한 엘리먼트(element)에 여러 개의 클래스 이름을 붙였다. 참고로 className은 class와 동일하다. class 이름이라고 부르기가 애매해서 className이라고 적었다. 아래 간단한 예를 보자. 만약 버튼의 배경색을 파란색으로 해달라는 요구..