Youngble_개발스토리

STEP 1. 디자인 시스템이란 무엇인가? 2. 왜 디자인 시스템을 사용하게 되었나? TL;DR 디자인 시스템은 일관성과 통일된 디자인 컴포넌트 집합체이다. 디자인 시스템은 오직 디자이너를 위한게 아니다. 조직 전체 구성원을 대상으로 '제품을 만드는 방법'을 다룬다. 개발자로써 리액트 컴포넌트 atom design으로 최대한 재사용성을 위해 확고한 디자인 시스템 및 운영이 필요하다. 나는 사실 디자인 시스템이 디자이너를 위한 하나의 에셋처럼 모아놓고 쓰는거라고 생각했고 주니어 개발자로써는 '아 저런식의 일관된 브랜딩된 디자인을 쓰고 무슨 색과 폰트를 쓰는구나'로 그저 참고용으로 생각했다. 실질적으로 와닿지도 않았고 여러 디자이너와의 협업을 했다고 하더라도 짧은 기간내에 이뤄졌기때문에 디자인 시스템을 확립..

회사 입사한지 어느덧 4개월이 다되가는 시점에서 내가 가진 역량을 실무에 응용하고 경험해보고 다른사람이 만든 코드의 스타일을 보고 이해하며 프로젝트를 진행해본거같다. 앞으로 프로젝트를 빌드업하며 고도화해야 할건 많지만 서비스 프로젝트에 쌓여있는 새로운 기획들과 리뉴얼들로 과연 프로젝트의 원하는 기간에 맞춰 기능과 서비스를 만들면서도 새로 접목해보고 사용하는 여유가 있을까 싶기도하다. 접목하더라도 깊게 생각해보고 고심해서 만들시간은 있을까도 싶다. 리팩토링을 하건 써보지않았지만 미래를 봤을때 협업을 위해서도, 기능속도의 향상을 위해서도 필수적이다라고 생각하는 기술스택들을 접목해볼 수 있는 스케쥴이 될까도 싶다. 지금까지는 프론트엔드로써 현재 배운것을 응용+접목하고 새로운 스택에 포커싱을 7할정도 투자하고 ..

간절하지 않다면 역경을 이겨내지못하고 포기하게 되는데 역경은 우리를 몰아내기위해서가 아닌 얼마나 간절히 원하는지 깨달을수있는 기회를 준다는 말이 참 와닿았다. 인생에 걸쳐서 사람들은 많은 역경과 고난이 있고 나 또한 여러번 있었던거 같다. 여러번의 역경이 왔을때 나는 얼마나 절박하고 간절했냐에 따라 결과가 달랐던거 같다. 같은 역경속에서도 그저 버티고 흘러흘러 살아왔던 역경과 내가 정말 간절히 원했기에 버티고 앞으로 나갔을때는 달르다. 그만두라고 할때 나의 간절함이 역경보다 컸기에 역경을 딛고 정상에서 뒤돌아보면 소중한 경험이 되고, 간절함이 없어 버티다 그만둘때 뒤돌아보면 후회가 남는거같다. 지금 또한 마찬가지라고 생각한다. 예전보다 나은 삶과 상황이지만 나의 간절함과 초심을 잃는다면 언제나 무너져버릴..

현재 서비스 프로젝트 마이택스에서 더 환급으로 마이그레이션 완료 후, QA와 고객 피드백이 있는지 보면서 추가적인 작업중 Sourcemap 난독화 와 소스맵 원본코드 제거를 거친후, AWS CloudFront를 통한 운영 사이트를 업데이트를 빠르게 적용을 해야하기때문에 기존 CDN (Content Delivery Network)에서 Local Edge가 아닌 Origin을 업데이트를위해 cache 삭제 및 재 업데이트할 수 있는 Invalidate에 대해서 알아보았다. 설정 자체는 어렵지 않지만 AWS 사이트로 가서 회사 계정으로 들어가서 설정을 바꿔주거나 하는 권한이 없기때문에 팀원으로써는 CTO님에게 전달받은 github actions의 secret 값을 사용하여, 배포후에 Invalidate하게 만..

요새 블로그 관리는 너무 안했다. 휴가라고 제주도도 놀러가고 코로나도 걸리고 골프도 해보겠다고 골프 레슨과 연습을 퇴근후에 하고있는 개발자.. 할건 항상 많은데 그래도 오랜기간 하고싶었던거나 쉬면서 일하는 생활을 하고싶어서 요근래는 조금 많이 쉰거같다. 레거시 작업이후에 새로운 리뉴얼 과정에서 이미 기존에 쓰던 ui/ux 삭제/변경이 있고 api 변경도 생기고 뭔가 이제 추가작업도 있지만 삭제와 변경 작업이 생기다보니 재활용에 대해서 많이 생각하게 되는거 같다. 업무 시간상 많은 시간을 투자해서 예전 처음에 배울때처럼 element 컴포넌트 하나하나 만들어서 쓰고있진 않지만, 작업하다보면 중복되는 컴포넌트나 페이지가 생기기 마련이라 그럴때는 범용성으로 다시 컴포넌트 Props나 state, 비즈니스로직을..

오늘 branch flow 관련하여 CTO님께서 설명 가이드를 해주셨다. 기존의 단순한 main, develop, sub branch 이외에도 상황에 따라 flow 전략이 달라질수있고 어떻게 활용해야 해당 branch 가 꼬이지 않고 유지할 수 있는지 알게 된거 같다. 이러한 발단은 다음과 같다. 운영서비스 중인 운영 사이트와 개발 테스트를 위한 개발 dev 사이트 두개가 있는데, 작업 테스트는 develop 브랜지를 통해 CI/CD 배포를 하고 이러한 모든 작업을 마치고 정식 운영 서비스로 main 브랜치를 통해 배포가 되어있는 상태였다. 그러던 중 two issues 가 발생하였다. 첫번째는 대표님께서 급하게 다른 관련 업체사람들과 미팅과정에서 사용하고있는 데이터가 잘 활용한것인지 필요했기때문에 개발..

너무 바빴다.. 진심 지난주 주말부터 요번주 주말까지 새벽까지 풀로 달렸다. 스케쥴이 바쁜거였을까 타이트한 일정을 만들어서 바쁜거였을까 아직도 헷갈린다(이하생략...) 개인공부도 못하고 휴가계획도 제대로 못짜서 지금 상태는 멍하다. 요번주에 진행하면서 오 새로운거다! 좀더 보는 시야가 넓어졌다 라고 느낀점은 크롤링 관련인데, 직접적으로 내가 크롤링을 했다는게 아니라 robots.txt라는 것과 sitemap.xml이라는 것이였다. robots.txt SEO 부분 영역에서 구글이나 다른 검색엔진에서 웹사이트에 대한 검색엔진 로봇들의 접근을 조절하여 해당 서비스를 크롤링해서 해당 자료를 다른사람이 본다거나, 보면 안되는 라우팅 부분을 설정해줘서 이를 disallow 하는 부분이였다. 왜냐하면 크롤링 할경우 ..

요새 어떻게 기존 코드의 class 명을 유지하고 지을까.. css는 어떻게 작성해야할까.. 디자이너와의 협업시 디자인시스템이라는게 있는데 무엇일까.. 핸드오프로 같이 할때 최적은 무엇일까 등등 고민하다 css관련 class명에 대한 보물을 찾아서 이거다! 싶은게 있어서 간단하게 왜 선택하였는지 어떤 특징이 있는지 간단하게 이야기 하려고 한다. 그 이름은 바로 Tailwind CSS !! 사용 목적, 결정한 이유 기존 프로젝트의 css 사용 방식이 순수 css로써 클래스명을 정의하고 사용 하였다. 다른 사람이 만들었기 때문에 유지보수도 힘들다고 판단하였고 해당 클래스명 명명 방법론도 BEM, SMACSS, OOCSS 등 충분한 이해가 필요하여야 추가적인 작업이 가능하기 때문에 런닝커브(?)와 CSS이해하..

지금까지 그리고 앞으로도 기초, 기본이 되는 관련 지식 공부, 써보지않은 프레임워크, 라이브러리를 사용 해나가겠지만 이거 외에 요새 실무적인 효율성, 협업, 유지보수, 현재 트랜드로 사용되는 이유와 필요성을 고려하고 생각하는 시간을 가지게 되었다. 그전에 어떤건지 대충은 알았지만 공부나 사용 우선순위가 아니라 미루었거나 해보고 싶었지만 체감상 그전에 혼자 경험할 수없고 찍먹하기에는 껍데기만 핥을거 같아 미루었던 부분에 대해서 생각하고 정리하여 리스트를 만들면 좋겠다고 생각했다. 어떠한 고충이 있었고 느꼈는지, 그래서 앞으로 어떤걸 배우고 접목시킬지 서술하려고 한다. 결국 '왜' 라는게 생기기 마련인것 같다. 이러한 생각과 결정을 한 이유는 현재 자사의 서비스에서 jQuery, JSP 로 사용된 레거시 코..

오늘 새벽으로 약 1달의 걸쳐 읽었던 코어자바스크립트를 다 읽었다. 앞부분부터 this 바인딩, 콜백함수 관련해서까지 정말 설명도 잘하고 쉽게 알지 못하는 걸 잘 설명했다고 느꼈는데 클로저, 프로토타입, 클래스 부분은 그전에 공부를 안해봐서 그런지 몰라도 난해하기도하고 설명을 뭔가 중간을 뛰어넘고 바로 예제를 주고 그거에 대한 설명이 조금 부족하지 않나 싶었는데 솔직히 코어자바스크립트 책이 기본적인 지식을 하나하나 알려주는 책은 아니고 이미 어느정도 알고 핵심내용을 좀더 깊게 다루는 내용이라 이부분은 내가 더 공부해야겠다고 느꼈다. 또한 이 클로저 같은경우 리액트의 useState도 클로저를 이용하여 만든것이라고 리액트 프로젝트의 react/cjs/react.development.js 경로로가면 볼수있..