본문 바로가기

Frontend168

[ 자바스크립트(JavaScript) ] filter + join 메서드로 가독성있는 코드 작성하기 📍 filter + join 메서드로 가독성 있는 코드 작성하기 string | null 타입을 가지는 a, b를 사용하여 a·b로 나타내야한다. 만약, 둘 중에 하나라도 null일 경우 ·를 표시하지 않고, string 타입만 나타내야한다. 예를 들어 a = 'foo'이고, b = 'bar'일 때 둘 다 값이 존재하면 foo·bar로, a타입만 존재하면 foo, b타입만 존재하면 bar, a와 b 둘 다 존재하지 않는 경우 null 혹은 ''을 나타내야한다. 이럴 때 어떻게 가독성 있게 코드를 작성할 것인가? 리액트에서 사용할 때 AS-IS는 조건식과 join 메서드를 사용하여 a && b ? [a, b].join('·') : a || b로 나타냈는데, 가독성이 너무 떨어졌다. 그래서 TO-BE 처럼 .. 2022. 11. 15.
[ 리액트(React) ] && 대신 삼항연산자 사용하기 📍 && 대신 삼항연산자 사용하기 리액트로 렌더링 view를 그릴 때 종종 && 연산자를 이용해 조건부 렌더링을 할 때가 있을 것이다. 여담으로 &&연산자는 Logical AND, 단축평가(short circuit evaluation)라고 하며, 일반적으로 왼쪽에서 오른쪽으로 피연산자를 평가하여 처음 만나는 연산자가 falsy인 경우 false를 반환하고, 모든 연산자가 truthy 한 경우 마지막 연산자를 반환하는 개념이다. falsy는 Boolean context로 변경될 때 false로 평가되는 값으로 JS에서는 false, 0, -0, "", null, undefined, NaN가 있다. truthy는 falsy와 반대로 Boolean context로 변경될 때 true로 평가되는 값으로 JS에서.. 2022. 11. 7.
[ 자바스크립트(JavaScript) ] shuffle 함수를 만들어보자 📍 shuffle 함수를 만들어보자 JS로 shuffle 함수를 만들 때 가장 먼저 생각나는 메서드는 sort() 일 것이다. 아마도 다음 코드처럼 구성하지 않았을까?? // sort shuffle const arr = [1, 2, 3, 4, 5]; const shuffle = arr.sort(() => Math.random() - 0.5) console.log(shuffle); 👉🏾 [ 5, 3, 2, 1, 4 ] 구현 로직을 살펴보면 배열을 순회하면서 Math.random() 메서드를 사용하여 나온 랜덤 한 값에 -0.5를 하여 sort() 메서드를 거치게 된다. 만약, Math.random() - 0.5를 한 값이 양수라면 오름차순으로 정렬되고, 음수를 리턴하면 내림차순으로 정렬된다. arr 배열을.. 2022. 11. 5.
[ GraphQL ] Schema type 중 리스트와 Non-null 타입에 대해 알아보자 📍 Schema type 중 리스트와 Non-null 타입에 대해 알아보자 graphQL로 API 요청을 할 때 쿼리에 다양한 타입을 넣을 수 있다. 스칼라 타입들이 기본으로 제공되는 것은 다들 알고 있을 것이다. /** * 1. Int: 부호가 있는 32비트 정수. * 2. Float: 부호가 있는 부동소수점 값. * 3. String: UTF-8 문자열 * 4. Boolean: true | false * 5. ID: 캐시의 키로써 자주 사용되는 고유 식별자를 나타낸다. ID타입은 String과 같은 방법으로 직렬화되지만, ID로 정의하는 것은 사람이 읽을 수 있도록 하는 의도가 아닌것을 의미한다. */ 하지만, 이번 작업에서 API 요청 시 단순 스칼라 타입이 아니라 리스트 타입으로 요청하는 경우도 .. 2022. 11. 1.
[ 자바스크립트(JavaScript) ] window.history.pushState와 history.replaceState을 알아보자 📍 window.history.pushState와 history.replaceState을 알아보자 history.pushState()는 브라우저의 세션 기록 스택에 새롭게 추가한다. 문법은 다음과 같은데, (pushState(state, unused, url?)) state는 사용자가 새로운 페이지로 이동할 때마다 popstate 이벤트가 발생한다. unused는 역사적 이유로 존재하며, 생략할 수 없다. 추후에 변경 예정이므로 당분간 빈 문자열('')을 사용하자. url을 사용하면 해당 URL로 이동하지 않지만, 나중에 사용자가 브라우저를 재 시작하면 해당 URL 로드를 시도할 수 있다. 반환 값은 undefined이다. 포인트는 URL값은 현재 URL과 동일한 출처(same origin)여야 하는데,.. 2022. 10. 26.