Jacob's Development Blog

2021.03.12 - [Side-Project] - 얼떨결에 만들어본 CSS 사이드 프로젝트 얼떨결에 만들어본 CSS 사이드 프로젝트 세상에 뭐든 잘하는 괴물 같은 사람이 많다. 왜 난 아니지... 근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자. 넋두리... 사실 이 프로젝트의 첫 시작은 프론트 개발 code-masterjung.tistory.com 위에 있는 첫 번째 사이드 프로젝트를 계속하고 있던 중 사실 몇 가지 마음에 들지 않는 것들이 있었다. 1. 처음에는 깃허브에만 올려두고 누가 보면 좋고 아니면 혼자 볼 것이다!라고 시작했지만, 글도 올리고 내 글에서 쓴 예제를 위 스토리북에서 구현하다 보니, 구조나 스토리북 관련 설정들이 마음에 들지 않았다. 뭐랄까... 스토리..

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

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

atlassian에서 만든 react-beautiful-dnd를 이것저것 궁금해져, 내부 코드를 보기 전에 기본 구현 학습을 위해 먼저 만들어 봤다. 자연스러운 애니메이션이나 특별한 기능은 없지만, 기본 드래그 앤 드롭이 어떻게 동작하는지 학습하는 데에는 나쁘지 않은 경험이었다(쉽지 않아~~). 기본적인 이벤트에 대한 설명은 이미 정리해놓은 블로그가 많고 더 특이하거나 추가된 내용도 없기 때문에 생략한다. HTML Drag and Drop API - Web APIs | MDN HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elemen..

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