Jacob's Development Blog

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

너무 깊은 내용은 다루지 않는다. 사실 나도 모른다. 적어도 개발자가 svg를 다룰 때 알면 도움이 될만한 정도로 내용을 정리해 보려고 한다. 일반적으로 래스터 이미지의 크기를 변경하는 경우 어떻게 하면 될까? img 태그의 속성으로 width와 height를 지정해도 되고, css selector를 통해 스타일 값을 부여해줘도 된다. png 하지만 내가 다룰려는 요소가 svg라면 조금 다르게 결과가 나올 수도 있다. 왜냐하면 svg의 크기 조정은 단순 이미지의 크기 조정보다는 더 많은 크기 조절 옵션을 제공하기 때문에 조금 복잡하다. 위 이미지의 svg을 다운로드하여 width와 height값을 넣어줬다. 과연 제대로 동작할까? ... 거의 똑같이 나오는거 같다. 근데 실수로 height를 날려버렸다...

svg가 jpg나 png보다 좋다고 말하는 것을 많이 들어봤을 것이다. 그래서 왜 좋냐고 물어본다면 정확히 대답한 사람은 없었다. svg가 크기를 늘리거나 줄여도 안 깨져~ 물론 틀린 말은 아니지만, 더 알고 싶다...! SVG (Scalable Vector Graphics) 상호작용(interactivity)과 애니메이션(animation)을 지원하는 2차원 그래픽스를 위한 확장형 마크업 언어(XML) 기반 벡터 이미지 포맷이다. svg의 장점 백터 기반의 svg는 래스터 이미지(or 비트맵 이미지)와는 다르게 화면 크기가 달라져도 깨지지 않는다. 다만 화면 크기가 달라지면 svg는 "더 크게(혹은 작게) 다시 그려라"라고 명령하면 그만이기 때문이다. svg 이미지는 이미지 그 자체라기보다는 일련의 그..

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

더보기 넋두리... 오랜만에 받은 2주의 휴가. 사실 전부 주말근무 대체 휴가다. 신규 서비스 오픈으로 인해 어쩔 수 없이 대체휴가를 내야 했고, 연말에 몰아 쓴(?) 덕분에 시간이 많이 생겼고 너무 행복했다. "아 드디어 내 공부를 할 수 있겠구나...!" 물론 회사일도 재밌긴 하지만, 파이썬부터 블록체인까지 너무 해보고 싶은 공부가 많았다. 그리고 그 하고 싶던 공부를 하기 시작했다. 하다 보니 문뜩 심심해졌다. 왜지? 나는 이번 회사에서는 온전한 프론트 개발자였다. 늘 내가 친 코드는 화면에 모두 보였다. 그런데 파이썬으로 백엔드를 만들다 보니 크게 보이는 게 없었다. 리액트를 view로 쓸 거기 때문에 템플릿을 써서 장고로 어드민을 굳이 만들고 싶지가 않았다. "그래서 내가 쉬는 시간마다 아니면 ..