내가 보려고 만든 개발 공부 일지

화면에 컨텐츠를 보여주기 위해선 API를 호출하고 데이터를 가져와서 해당 UI에 적절히 렌더링 해줘야 한다. 이때 API 요청에 대한 응답이 올때까지 사용자에게 "요청중" 이라는 상태를 보여주는게 좋은 사용자 경험일 것이다. 이 상태를 로딩마크로 보여주는데 (원이 빙글빙글 돌아간다던가 아니면 텍스트가 움직인다던가) 가장 무난한 모양의 로딩마크를 css로 구현하는 법을 끄적거려본다. 위 스타일1, 2 의 차이점은 1은 그냥 일정하게 회전만 하는 모습이고, 2는 뭔가 테두리가 늘어났다 줄었다 하면서 좀더 역동적으로 회전하는 모습이다. 스타일-1 /* style.scss */ .loading { div { border: 9px solid orange; border-radius: 50%; border-color..

React로 카카오톡과 같은 채팅 컴포넌트를 만들던 중 발견한 버그와 해결한 방법을 기록해봅니다. 위 이미지는 내가 만들고있던 Chatting.tsx 컴포넌트다. 기록된 메시지들이 보이는 부분이 ChattingList.tsx 이고, 메시지를 입력하는 아랫부분이 ChattingInput.tsx 이다. ChattingInput 에 텍스트를 입력하고 Enter를 누르거나 전송을 클릭하면 입력된 텍스트가 ChattingList에 추가되는 기능을 구현했다. 그런데, 영문을 입력하면 정상적으로 ChattingList에 잘 추가가 되었지만 이상하게 한글만 입력하면 입력된 텍스트와 그 텍스트의 마지막 부분이 잘려서 두번 이벤트가 발생하는 것이었다... 위 이미지와 같은 현상이 발생했다. 그래서 개발자도구에서 break..

함수형 프로그래밍 - Functional programming (FP) 객체지향 프로그래밍 - Object oriented programming (OOP) 개발자라면 이 둘에 대해 한번쯤은 들어봤을 개발 패턴이다. FP 든 OOP 든 개발 방식의 차이일뿐, 뭐가 더 좋고 나쁘고는 없다. [ 함수형 프로그래밍 ] 전달받은 인자값을 중심으로 결과값을 반환하는 간결한 방식의 프로그래밍으로 데이터를 함수 내부에서 따로 저장하거나 하지 않는다. 한 번에 하나의 작업만 수행하는 함수들의 조합으로 로직을 처리한다. 예) func(obj) : 함수 인자값으로 객체, 함수 등을 넘겨 작업을 수행. 특징 : 함수안에 함수, 여러 함수로 구성된 고차함수, *순수함수 *참고로 순수함수란 ? 다음과 같은 조건을 충족하는 함수를..

넘블에서 주도하는 챌린지중 프론트엔드 클론 코딩 챌린지에 참여한 후 작성하는 프로젝트 관련 정리 글입니다. 리디북스 or 클래스101 의 실제 사이트를 보고 3주 안에 클론 코딩하는것이 임무였고, 필자는 리디북스를 선택하여 개발을 진행했습니다. API는 넘블에서 제공하는것을 사용하였고 React, Typescript 베이스로 개발하였습니다. 상태 관리는 Redux, 간단한 아이콘은 react-icons 라는 라이브러리를 사용했습니다. 필자는 회사를 다니고 있기에 평일에는 거의 작업을 못했고, 주말에 작업을 몰아서 진행하였기 때문에 꽤나 빡센(?) 3주였습니다.. 중간에 삽질도 하면서 아까운 시간을 많이 까먹기도 했지만,, 어찌어찌 할 수 있는데 까지만 구현하고 마무리를 지었습니다. 😵 [ 주요코드 설명 ..