본문 바로가기
728x90
반응형

source-code229

Jest를 통한 unit test 테스트 코드. 초기 스타트업 개발자, 특히 프론트엔드 개발자들이 가장 놓치기 쉬운 요소가 아닐까. 왜? → 제품의 명확한 기능이나 디자인 시스템이 갖춰지지 않은 상태로 개발이 진행되는 경우가 많기 때문. 끊임없이 바뀌는 요구 사항과 화면 설계서를 열심히 반영하다 보면... (거기다 기간은 어찌나 촉박한지) 기껏 작성한 테스트 코드가 쓸모 없어지는 경우가 비일비재해지며, 이런 일이 반복되면서 오히려 테스트가 생산성을 떨어뜨리는 주범이 되기도 한다. 현 서비스 역시 이러한 상황 속에서 운영 및 개발이 진행되어 왔는데... 초창기 때만 해도, 테스트 코드가 없다고 해서 별 다른 불편함이 느껴지지는 않았다. 구현된 결과물은 직접 서비스를 동작하면서 확인할 수 있었고 (끽해야 버튼 몇 개 클릭이니) 수정 사항이 .. 2023. 8. 18.
aria-label 을 통한 웹 접근성 향상 대부분의 웹 콘텐츠에는 해당 요소를 설명하는 text가 존재한다. // 버튼 닫힘 // 이미지 각 element 들은 해당 요소를 설명하는 문자열을 감싸고 있기 마련이며, 이를 통해 각기 다른 상황의 사용자들도 해당 웹에서 동일한 경험을 할 수 있다. (접근성이 향상된다) 그러나 웹을 작성하다 보면 접근할 수 있는 기본 이름이 누락되거나, DOM에 해당 element에 의미를 부여할 수 있는 내용이 존재하지 않는 경우가 발생한다. (대표적 예시 = 텍스트 없이, SVG 혹은 글꼴 이미지 텍스트로 이뤄진 버튼) 이와 같은 상황에서 aria-label을 사용할 수 있다. → 해당 element와 상호작용하는 문자열 정의 가능! 이를 통해 접근성을 개선하고, 스크린 리더기 사용자 및 기타 보조 기술 사용자가 .. 2023. 8. 18.
image decode method를 통한 콘텐츠 scrollHeight 계산 채팅 기능 개발 중, 다음과 같은 요구사항이 있었다. 채팅방 접근 시, 사용자는 맨 마지막 메시지를 볼 수 있어야 한다. (스크롤은 아래에서 위로 발생한다) 사용자는 한 번에 여러 개의 이미지 데이터를 전송할 수 있다. 이 때, 이미지 개수에 따라 UI가 달라진다. (카카오톡 처럼) server는 해당 이미지를 socket event로 전파한다. 이 때, 이미지는 Presigned URL 형태로 제공된다. 기존 요구사항 1을 처리하기 위해, 채팅 메세지 목록 데이터를 받아온 후, 최하단으로 강제 스크롤을 발생시켰다. 이 때 강제 스크롤은? → 채팅방 element의 scrollTop을 해당 element의 scrollHeight만큼 이동하면 간단히 구현할 수 있다. 하지만, 채팅 목록에 이미지가 생기면서.. 2023. 8. 18.
응집도 지난 주 테스트 코드에 대해 고민했다. 동시에 단일 책임 원칙에 대해 깊이 공감하고, 실제로 적용하기 위해 노력했다. 컴포넌트를 작성할 때마다, 해당 컴포넌트의 역할이 무엇인지 명확히 정의했다. 어떤 기능을 수행하는가, 이를 수행하기 위해 필요한 함수들은 무엇인가 등을 계속해서 되물었다. 그런데 문제. 각 컴포넌트 혹은 함수들의 역할 에만 집중하다보니, 대부분의 로직이 잘게 흩어지게 되었다. 물론 단순히 로직이 흩어졌다는 점을 문제라고 할 순 없다. (하나의 컴포넌트나 함수는 하나의 역할만을 수행해야하니!) 하지만 코드를 몽땅 작성하고 돌아보니... 정작 해당 로직들이 합쳐진(특정 단위 기능을 수행해야하는) 모듈에서는 그래서 이 모듈은 무엇을 위해 존재하는거지? 가 혼란스러운 상황에 빠지고 말았다. 또한.. 2023. 8. 17.
공유, 공유, 공유 스타트업에서 팀으로 일한다는 건, 끊임없이 소통해야 한다는 뜻이다. 아이디어를 떠올리고, 디벨롭하고, 디자인과 개발을 해나가는 일련의 과정 속에서, 멈춤 없이 서로의 생각과 진행 상황을 공유해야한다는 뜻이다. 반대로 말하자면, 서로의 생각과 진행 상황이 공유되지 않으면... 굉장히 답답하다. 나의 일을 하는데 지장이 생긴다. 프론트 개발자로서 특히 필요한 소통은 → 다른 프론트엔드 개발자 / 디자이너 가 있겠다. 1. 다른 프론트엔드 개발자 git hub를 적극 활용하는 수밖에 없다. 현재 팀에서는 issue와 pull request를 통해 잔여 task를 파악하고, 작성한 코드를 서로 리뷰하는 형태로 개발을 진행하고 있다. 여기서 직접적으로 각자의 결과물 공유는 pull request를 통해 이뤄지는데.. 2023. 8. 17.
socket io Client API https://www.youtube.com/watch?v=djMy4QsPWiI 기본 사용 methods io url, options를 입력받아, Socket class를 반환. import io from 'socket.id-client' const socket = io.connect('http://localhost:3001) emit() 메시지를 내보냄(서버로 전달) → 특정 이벤트를 실행시킴. // client const sendMessage = () => { socket.emit('send_message', () => {message:'hello'}) } // server io.on('connection', (socket) => { socket.on('send_message', (data) => { .. 2023. 8. 17.
프론트엔드 디자인 패턴, 함수형 프로그래밍 https://velog.io/@eunbinn/modularizing-react-apps [번역] 잘 알려진 UI 패턴을 사용하여 리액트 애플리케이션 모듈화하기 기존에 잘 알려진 UI 패턴을 프런트엔드 개발에 적용하는 과정을 적은 글입니다. 리팩토링하는 과정을 단계별로 쫓아가며 UI 패턴을 실제 리액트 사례에 적용하는 방법을 살펴보고 그 이점을 확 velog.io https://velog.io/@teo/functional-programming 다시 쓰는 함수형 프로그래밍 > 참 좋은데 어떻게 표현할 방법이 없네... 오랜 기간 개발을 공부하게 되면서 여러가지 패러다임의 변화를 겪었는데 그 중에서 인상깊었던 것중에 하나는 객체지향 패러다임에서 함수형 패러다 velog.io 그 주 업무를 하며 고민했던 내용.. 2023. 8. 17.
DOMContentLoaded event / load event window 객체에는 문서의 load와 관련된 두 가지 (유사해 보이는) 이벤트가 존재한다. DOMContentLoaded DOMContentLoaded 이벤트는 HTML 문서가 완전히 구문 분석되고, 모든 지연된 스크립트( // loading 종료 여부 판단 예시 function doSomething() { console.info("DOM loaded"); } if (document.readyState === "loading") { // Loading hasn't finished yet document.addEventListener("DOMContentLoaded", doSomething); } else { // `DOMContentLoaded` has already fired doSomething().. 2023. 8. 17.
Web Socket 웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다. interface WebSocket 웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스. WebSocket 객체는 웹 소켓 서버 연결의 생성과 관리 및 연결을 통한 데이터 송수신 API를 제공합니다. WebSocket() 생성자를 통해 WebSocket 객체를 생성할 수 있습니다. 생성자 새로운 WebSocket 객체를 생성해 반환합니다. WebSocket() properties WebSocket.binaryType 연결에 사용되는 이진 .. 2023. 8. 17.
728x90
반응형

티스토리툴바