프로젝트 중 카드 오른쪽 위 케밥 아이콘을 누르면 메뉴가 보이는 기능을 넣어야 했다.그런데 문제. 카드를 누르면 해당 글 상세 페이지로 넘어가게 되어 있는데 아이콘을 눌러도 페이지가 넘어가는 일이 발생했다.대충 이벤트 전파 관련인줄은 알았지만, 정확히 모르고 있어서 이번 기회를 통해 공부했음 이벤트 전파DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 한다.표준 DOM 이벤트에서 정의한 이벤트 흐름엔 다음 3가지 단계가 있다.1. 캡처링 단계: 이벤트가 하위 요소로 전파2. 타깃 단계: 이벤트가 실제 타깃 요소에 도달3. 버블링 단계: 이벤트가 상위 요소로 전파 보통 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타겟 단계와 버블링 단계의 이벤트만 실행된다..
트러블슈팅 : MuiOutlinedInputInput contains an input of type text with both value and defaultValue props. DOK 프로젝트를 진행하면서 MUI를 사용하였는데, 아무래도 처음 쓰다보니 예시 코드를 가져와서 값을 변경하는 방식을 많이 사용하였다.그러다보면 가끔 위와 같은 에러가 떴다.대충 text 타입의 input에서 controlled와 uncontrolled가 같이 사용되고 있다는 말인 것 같은데 controlled와 uncontrolled는 처음 들어봐서 찾아보니 그동안 react에서 뭔가 께름직 했던 input 사용 방식과 연관이 있었다. Controlled & Uncontrolled우선 Form 요소에는 input, text..
웹 프로젝트를 하다보면 날짜나 시간을 나타내야 하는 경우가 있다.이 때 간단하고 체계적으로 포멧을 관리하기 위해 라이브러리를 사용할 수 있다.팀 내에서 가장 먼저 날짜 라이브러리를 사용해야 했던 나는 구글링으로 찾아보고 가장 많이 나오는 라이브러리, 블로그에서 추천하는 라이브러리를 기준으로 Moment.js를 선택했다.이후 오피스아워 시간에 들은 코치님의 조언블로그를 믿지 마라..!블로그는 대부분 우리같은 취준생들이 얕은 지식으로 블로그를 운영하는 경우가 많고, 프로젝트 또는 상황 마다 선택 기준이 달라지기 때문에 남이 추천한다고 해서 무작정 좋은 게 아니라고 하시며 라이브러리나 필요한 패키지를 잘 선택하는 방법을 알려주셨다. Tips1. 구글링 할 때는 한글보단 영어로 검색 -> 되도록 공식문서 보기2..
내가 맡은 파트 중에 사용자가 글을 등록하는 Form 페이지가 있었다. 피그마로 디자인을 하고 문제가 없어서 코드로 구현까지 마친 후 테스트를 위해 직접 작성하려고 하는데, 어딘가 어색하고 불편한 느낌이 들었다. (아무도 피드백을 주진 않았지만... 그냥 내가 불편했음) 그동안 단순하게 제목과 글만 쓰는 블로그에서만 폼을 작성해보다 보니, 날짜, 시간, 가격, 위치 등 다양한 내용을 작성하는 폼을 디자인하는 게 어색했던 탓이었다. 물론 처음 디자인도 나쁜 건 아니었지만, 전문적이지 않은 느낌이 계속 들었는데 나는 '누가봐도 초짜가 만든 사이트'처럼 보이게 두고 싶지 않았다..! 그래서 이것저것 참고해보니 역시 폼 작성과 관련된 가이드가 어느정도 정해져 있었다. 🔗참고한 사이트 왼쪽 사진이 초안이고, 오른..
