본문 바로가기

분류 전체보기

JavaScript - 유용한 내장 메서드(find, filter, every, some, reduce, repeat) 코드리뷰에서 리뷰어 분들이 사용을 추천해주셨거나, 페어 프로그래밍을 하며 유용하다고 느꼈던 Array와 String 내장 메서드 몇 가지의 사용법을 다시 정리해보자. find find()는 주어진 테스트를 만족하는 첫번째 요소의 '값'을 반환한다. 테스트를 만족하는 값이 여러 개 이더라도 가장 첫번째 값만 확인할 수 있다. 테스트를 만족하는 요소가 없다면 undefined를 반환한다. const arr = [2, 4, 6, 8, 10]; const isOdd = (num) => num % 2; const firstBigEnough = arr.find((element) => element > 7); // 8 const firstOdd = arr.find(isOdd); // undefined filter f.. 더보기
JavaScript - 호출 스케줄링(setTimeout, setInterval, requestAnimationFrame) 지정한 시간에 함수가 실행될 수 있도록 해주는 '호출 스케줄링' 구현 방법에 대해 알아보자. setTimeout setTimeout을 사용하면 지정한 시간이 지난 후에 함수가 실행되도록 할 수 있다. 사용방법 let timerId = setTimeout(func, delay, arg1, arg2, ...) btn.addEventListener('click', () => clearTimeout(timerId)); func - 호출하고 싶은 함수를 넣는다. delay - 지연시키고 싶은 시간을 넣는다. 단위는 ms(밀리세컨드) 이므로 1000을 넣으면 1초 후 실행된다. 기본값은 0이다. arg - 호출하려는 함수의 인자를 전달할 수도 있다. timerId - setTimeout은 식별자를 반환한다. 브라우.. 더보기
웹 접근성(Web Accessibility) 4대 원칙 웹 접근성(Web Accessibility)은 '장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 동등하게 접근하고 이용할 수 있도록 보장한다'는 개념이다. 누구나 정보를 공유할 수 있는 정보 공간, '월드 와이드 웹'에서 웹 접근성이란, 내가 창조하는 인터넷 공간이 차별적인 공간이 되지 않기 위해서는 신경 써야 하는 부분일 것이다. 웹 접근성은 법적 의무사항으로 보장되어 있기도 하다. 한국형 웹 콘텐츠 접근성 지침(KWCAG: Korean Web Content Accessibility Guidelines) 중 가장 최근에 개정된 2.1 버전에 소개된 4가지 대원칙이 제시되어있다. 이 내용들을 눈여겨봄으로써 앞으로 어떤 것을 신경 써야 하는지 간단하게나마 살펴보자. 원칙 1 인식성 (perceivab.. 더보기
cypress - stub 사용법, Alert 테스트 예제, 이벤트타입 'stub' 란? cypress에서 'stub'는 함수가 어떻게 사용되었는지 기록하고 프로그래머가 '함수의 동작을 컨트롤' 할 수 있게 해 준다. 영단어 'stub'는 '그루터기(초목을 베고 남은 밑동)' 또는 '뿌리째 뽑아낸다'는 뜻이다. 비슷한 기능을 가진 'spy'가 스파이처럼 기존 함수를 건드리지 않고 정보만 전달하는 반면, 'stub'는 프로그래머 마음대로 무엇이든 할 수 있도록 통째로 뽑아왔다는 의미에서 'stub'로 지은 게 아닐까 싶다. 'stub'는 유닛 테스트에 가장 흔하게 사용되지만 통합 테스트나 E2E 테스트에서도 유용하다. stub 간단 사용법 stub는 cy.stub() 와 같이 cy 뒤에 체이닝 해서 사용한다. 리턴값이 체이닝 가능한 객체가 아니라 stub이기 때문에 stub .. 더보기
cypress - 테스트 주도 개발(TDD, BDD) 적용 백엔드와 달리 프론트엔드는 테스트 주도 개발(TDD)을 할 수 있는 환경이 잘 갖춰져 있지는 않지만, 테스트도구 사용자들은 만족도가 높은 편이라고 한다. 테스트 도구 중 하나인 cypress는 브라우저 기반의 GUI를 지원하고 문서 정리가 잘되어있어 진입장벽이 낮다. 용어부터 정리하고 넘어가자. 관련용어 정리 TDD(Test-Driven Development) 요구사항에 걸맞는 테스트 케이스를 우선 작성한 다음 ,각 테스트를 통과하기 위한 최소한의 코드를 작성하고 리팩토링 하는 프로그래밍 방식이다. 테스트의 단위는 함수 단위로 매우 작고 거의 모든 함수가 테스트 대상에 포함된다. 모듈크기를 작게하고 모듈간 의존성을 작게한다. add(1, 1)이 2인지 확인하는 것은 TDD 이다. BDD(Behaviour.. 더보기
CSS - vw & vh 단위, em & rem 단위 자주 사용하는 CSS 단위에 대해 정리해보자. vw & vh 단위 vw 브라우저 창 너비값 * 0.01 단위이다. 예를 들어, width를 100vw로 지정하면 너비에 꽉 차게 된다. 'viewport width'을 뜻한다. vh 브라우저 창 높이값 * 0.01 단위이다. 예를 들어, height를 100vh로 지정하면 높이에 꽉 차게 된다. 'viewport height'을 뜻한다. 반응형 웹을 위해 미디어 쿼리를 작성할 때 요긴하게 쓰인다. vw단위를 높이에 지정하거나, vh단위를 너비를 지정할 때 사용해도 무방하다. em & rem 단위 em 부모 요소의 폰트사이즈 값이다. 예를 들어, font-size를 1em으로 지정하면 부모와 동일한 폰트사이즈를 갖는다. '알파벳 m'을 뜻한다. rem 최상위.. 더보기
하루 20분 영어공부 - 2021년 2월 중고거래앱 (Apps for Buying and Selling Used Stuff) 1. 우리나라 인구 약 4명 중 1명 꼴로 이러한 앱을 사용하고 있다고 통계는 보여준다. - Statistics show that roughly a quarter(one out of four) of all Koreans use these apps. 2. 지금은, 더 이상 사용하지 않거나, 반품이 되지 않는 물건을 앱을 통해 판매할 수 있다. - Now, people can use apps to sell items that they don't use, or that they can't return for a refund. 3. 이 방식으로, 다른 사람이 물건을 다시 사용할 수 있어서 자원 낭비를 막을 수 있다. - This.. 더보기
42서울 발표자료 - ft_printf 클래스 & 예발자닷컴 개발기 예발자닷컴 개발기 발표 2020년 여름, 42서울 공식행사인 42데이에서 사이드 프로젝트에 대해 발표할 기회가 있었다. '예발자닷컴'을 함께 만든 동료들과 10주간의 개발기에 대해 공동 발표를 했다. 나는 전체 PPT 스타일링과 '협업'파트 자료 작성 및 발표를 맡았다. 깃허브를 개인 저장소가 아닌 협업을 위해 사용한 경험과 뜻 맞는 동료들과 공동 프로젝트를 진행하는 것의 즐거움을 다른 동료들에게 공유하는데 초점을 두었다. 첨부된 파일은 내가 맡았던 '협업'파트 부분이다. 42서울 ft_printf 클래스 발표 같은 해 가을에는 동료 카뎃분의 추천으로 ft_printf 과제에 대해서 발표할 기회가 생겼다. 같이 발표하게 된 분께서 훨씬 뛰어나셔서 2부에서 구체적인 구현 방법을 다뤄주시고 나는 1부 '입문.. 더보기

티스토리툴바