본문 바로가기

전체 글

[회고] 4인, 25인, 200인의 리더로서 3~4개월 만에 포스팅을 한다, 게다가 기술 내용 글이 아니다 반년 동안 4명, 24명의 리더와 198명의 운영진으로서의 경험을 하였고 새로운 경험에 색다른 관점의 사고를 할 수 있었다. 그 과정에서 나는 어떻게 중심을 잡았는가에 대한 이야기를 하고자 한다 동등한 위치의 덕장, 서번트 리더를 지향한다 리더는 집단의 성장을 바라보고 팔로워는 본인의 성장을 중시한다 본인의 성장에 어긋나는 집단을 위한 일은 피하기 마련이다 집단을 위한 일이 본인의 성장에 도움이 되게끔 유도한다 즉, Giver가 이익을 보는 분위기를 형성한다 집단의 만족감을 형성하기 위해서는 팔로워 개개인의 소통을 유도한다 개개인의 불편함이 해소되고 리더를 인정하는 순간, 집단은 성공적으로 굴러간다 그게 리더의 역할이라고 생각했다 4인 HTM.. 더보기
[CSS] 웹 앱의 사용성 높이기 서두 PWA 패키징을 적용한 서비스를 개발하며, 모바일 환경에서의 사용성에 대한 고민을 하게 되었다 https://www.piickle.link/ 내게 필요한 대화주제 추천, Piickle 대화주제 추천, Piickle www.piickle.link 🔗 Teo 님에게 멘토링 받은 사항들을 바탕으로, 생각보다 세심하게 보완할 수 있는 부분들이 많아 정리하고자 한다 모바일 환경이 주를 이루는 이 때에 웹 개발자로서 보다 더 네이티브 앱과 같은 사용감을 주기 위해 노력해보자 구현 사항 0. 모바일 테스트 우리 팀은 QA 테스트를 Android Chrome / iOS Safari / Kakao 인앱 브라우저 3가지로 두고 진행하였다 이외의 타겟 단말은 두지 않았고, 점유율이 높은 단말 위주로 개발을 진행하였다 .. 더보기
[Javascript] Map & Set 객체 살펴보기 1. Map & Set 소개 1-1. Map ? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map - JavaScript | MDN The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. developer.mozilla.org Map 객체는 key - value 로 이루어지며, 키의 삽입 순서를 기억한다 또한, 어느 값(any value.. 더보기
[E2E Test][Cypress] Cypress로 E2E 테스트해보기 1. E2E(End to End; 종단 간) 테스트 단위 테스트나 통합 테스트는 개발자의 관점에서 제품 일부분만을 선별하여 테스트한다 종단 간 테스트는 이와 달리 실제 사용자의 관점에서 테스트를 진행하며, 그런 의미에서 기능(Functional) 테스트 혹은 UI 테스트라고 불리기도 한다 예를 들면 “광고 생성을 테스트하기 위해서 광고 상품 정보 페이지에 입력하고 광고 자산(매체)을 연동 페이지로 이동해 페이지와 페이스북, 구글 정보를 입력했을 때 정상 동작한다”가 있습니다. 종단 간 테스트는 사용자의 실행 환경과 거의 동일한 환경에서 테스트를 진행하므로 실제 발생할 수 있는 에러를 사전에 발견할 수 있다 또한, 브라우저를 외부에서 직접 제어하여 API만으로 제어할 수 없는 브라우저 크기 변경, 키보드 .. 더보기
[Javascript] call & apply 로 this 특정시키기 배경 Storybook 학습 → bind 메소드 → call & apply 먼저 .. → this 개념 부실 .... this 전역 스크립트가 실행되거나 함수가 호출될 때, JS 내부 규칙에 따라 동적으로 결정된다 new 키워드 → this는 새로 생긴 객체에 묶임 obj.function() 형태로 메소드로 호출하는 경우 → this는 function을 프로퍼티로 가지는 객체 call / apply / bind 사용하는 경우 → this는 인수로 전달된 객체 ES6 화살표 함수인 경우 → this는 상위 스코프의 this addEventListener 안에서 호출하는 경우 → this는 event.currentTarget 의 (이벤트 리스너가 부착된) HTML 요소 나머지의 경우 → this는 windo.. 더보기