본문 바로가기

전체 글530

[ CSS ] parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 📍 parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 제목이 어려울 수 있지만 background: transparent인 Parent Div 밑에 clickable 할 수 있는 Child div가 있을 때 클릭하는 방법을 작성하려고 한다. 기존에는 부모 Div만 클릭 할 수 있어 자식 Div는 클릭할 수 없었지만 css의 pointer-events 속성을 이용하여 해결 할 수 있었다. 글로 이해하기 힘들다면 하단의 그림을 보자.(그림은 발(🦶🏾)로 그렸다.) 내가 해결한 방법은 부모 Div에 pointer-events: none을 주고, clickable 할 target Div에 pointer-events: all을 주자. 추가로 poin.. 2022. 11. 23.
[ 자바스크립트(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.