📚금일 학습 내용 KPT
GraphQL이란? > 페이스북에서 만든 API 를 위한 쿼리 언어이다. 기존 전통적인 데이터베이스의 데이터를 효율적으로 가져오기 위한 SQL과는 달리 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것을 목적으로 한다.
📌Keep
- 즐겁게 코딩하기
❗️Problem
- 문제는 항상 많은데 뭐라고 기술해야하나..
📍Try
- 잘 하고 있어 열심히 하자.
📍오늘 겪었던 많은 어려움은 대부분 미숙함 이였다
📍styled-components에서 DOM으로 전송되는 것처럼 보인다는 에러
맨 처음에는 띠용? 했다. 도대체 어떤 부분이 틀렸다는 걸까. 에러 메세지를 잘 해석해보면 내가 styled.div에 전달하기 위한 특정 prop이 DOM으로 전달되고 있다는 문제였다.
왜 이런 에러가 발생하냐면, DOM 입장에서는 내가 styled에 주기 위한 변수가 하나의 attribute로 동작할 수 있다는 문제점이 발생한 것이다. 해결책은 간단했다. $키워드로 명시적으로 이 변수는 styled-components에서 사용하겠다고 선언해주면 에러가 해결되었다.
export const TooltipWrapper = styled.div<{ $direction: string; $clicked?: boolean }>`📍대체 왼쪽으로 왜 안 가는거죠?
툴팁의 위치를 반응형으로 구현하던 중 제대로 동작하지 않는 문제들이 꽤 많이 발생했다. 근데, 위 아래는 상당히 쉽게 해결했는데 좌,우가 문제였다.
우선 오늘 내가 작성했던 styled-components 코드의 일부를 발췌해보자. 여기서 왼쪽의 코드에는 left값과 transform 값을 left가 아닌 경우에만 조정해주고 있다.
${({ $direction }) => {
if ($direction !== "left") {
return css`
left: 50%;
transform: translateX(-50%);
`;
}
}}왜 이렇게 작성했냐면 바로 이 코드의 구조와 연관이 있다. 자 나는 툴팁을 구현할 때, 툴팁이 해당 태그 정 중앙에서 시작되어 화살표와 메세지가 뜨는 것을 희망했다. 그리고 가상 선택자를 활용하여 화살표와 텍스트를 출력하고자 하였다.
여기서 핵심은 태그 정 중앙에서 시작이다. 그렇다. 정 중앙에서 시작하기 위해서 모든 가상 선택자의 left값과 X위치를 조정했고 사실 위, 아래, 오른쪽은 그 영향을 받지 않았다. 어차피 중간에서 시작하니까!
다만 여기서 왼쪽의 경우는 특수했다. 이미 왼쪽 범위를 50%만큼 밀었고 그 상태에서 Right값을 주니 결과는 다음과 같았다.
다시 정 중앙으로 글씨가 시작했고 가상 선택자의 범위가 내가 의도한 대로 동작하지 않고 깨졌다. 특히 배경 색상은 어떻게 해도 채워지지 않아서 그래서 위처럼 left가 아닌 경우에만 조정하는 방식으로 해결했다.
📍배포 자동화 할 때 브랜치 명명 똑바로 해두기
아니 평소처럼 동일하게 vercel 배포를 연결해두었고, 브랜치를 업데이트 했는데 제대로 업데이트 되지 않는 문제가 발생했다. 원인과 해결은 브랜치 설정이였다. 브랜치를 잘 명시해주자.
📖소회
과제를 했는데 아쉽다. 아쉬워라 아쉬워라... 항상 아쉽다. 그래도 3등으로 제출했으니 위안삼도록 하고 React의 기능을 잘 사용했을까? 하는 고민이 있다. 과연 잘 쓴 걸까..
리팩토링 하면서 테스트코드 작성하면서 더 디테일 하게 확인해보도록 하자.
내일도 🔥🔥🔥
TIL 작성 소요시간 약 25분
