본문 바로가기

전체 글72

바빌론 그 대장정의 시작 / WebGL 부터 조져보자 / WebGL 개념과 2D 구현을 예시와 함께 진행중이던 프로젝트가 기획부터 다시 들어가게되어 개발 일정이 조금 붕 뜨게되었다 그래서 추후 개발 예정인 웹 3D 관련해서 공부를 시작! 쫌쫌따리 커밋남기고 메모했던 내용 블로그에 남겨보쟈르 WebGL 개념 1. 기초 WebGL은 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 javascript 라이브러리. 3D API 라기보다는 레스터화 엔진에 가까움. WebGL 로 그래픽 작업을 수행하려면 점, 선을 그리고 텍스쳐를 구현하는 코드를 작성해야함. (3D API 는 장면, 카메라, 조명 등을 선언하고 라이브러리 내장 메서드로 그래픽을 바로 구현해 낼 수 있음.) → 레스터화 : 벡터 그래픽 형식의 이미지를 레스터 이미지(픽셀, 점, 선 등 도형으로 표현되는 이미지)로 변환하는 과정 WebGL은 GPU.. 2022. 12. 20.
자동 스크롤 문제 해결 / scrollTop = scrollHeight 적용 안됨 문제 발생 채팅창을 구현하며 채팅을 입력했을 때 자동으로 채팅창 가장 하단으로 스크롤이 내려가도록 하는 기능을 구현하게 됨 document.getElementsByClassName('class').scrollTop = document.getElementsByClassName('class').scrollHeight 스크롤 높이를 사용하여 조작하려고 시도했지만 가장 최신 채팅이 아닌 아래서 두번째 채팅을 기준으로 스크롤링됨 → 콘솔을 찍어봤을 때 scrollTop 과 scrollHeight 의 값이 같게 적용되지 않았음. 하지만 이게 정확한 원인인지 파악할 수 없음 해결 과정 DOM 을 직접 수정하는 방법을 적용할 수 없기 때문에, ref 를 사용하여 적용해보기로 함 전채 채팅을 감싸고 있는 ‘chat-li.. 2022. 9. 22.
onPressEnter 한글 중복 입력 이슈 해결 문제 발생 CustomInput 컴포넌트를 사용하는 데 onPressEnter 액션으로 채팅을 보내는 로직에서 한글을 작성하면 두번 입력되는 현상 발생 → 엔터 액션은 두번 실행됨 해결 과정 KeyboardEvent 속성 중 isComposing 속성을 활용 영어를 제외한 다른 언어들은 한 글자에 알파벳 한 개보다 많은 정보를 담고있어, 글자가 처리되기 전에 함수가 실행되고 모두 처리된 후 함수가 다시 실행되어 중복되는 현상이 발생하는 것 isComposing 속성을 활용하여 모든 글자가 처리된 후 함수가 실행되도록 한다 // CustomInput.tsx // before const onKeyDown = (event: KeyboardEvent) => { if (event.key === 'Enter' &&.. 2022. 9. 22.
ChartJS를 뚝딱거려보자 / react-chartjs-2 그리드 숨기기 / tooltip 커스텀하기 / 리사이징 / callback 함수 사용 오늘 작업한 페이지에 차트가 사용된당. 통계 페이지인데, 날짜별 데이터 변화를 꺾은선 그래프로 나타내고있다 그래서 react 로 차트를 그릴 수 있는 라이브러리를 생각해보다가, (일단 내가 사용해봤던 라이브러리는 Apexchart !) 내가 작업하는 페이지가 이전에 진행되던 프로젝트의 기능과 합쳐진다는 기획이 있어서 이전 프로젝트를 작업하신 다른 프론트엔드 개발자분께 어떤 라이브러리를 쓰셨는지 여쭤보고 같은 라이브러리를 사용하기로 했다! 그건 바로 ChartJS ! 리액트에서 쉽게 사용하려면 react-chartjs-2 라는 라이브러리를 함께 설치해줘야 한다고 해서, 같이 설치했다 같이 사용해보고, 상세한 config 를 어떻게 했는지 포스팅해보게따 가장 기본적인 차트를 그리면서 사용법을 알아보자 imp.. 2022. 9. 5.
인클루시브 디자인 / 구글은 어떻게 디자인 하는가 회사에서 매 주 MWM 이라는 시간을 갖는다 (회사이름) Weekly Meet up 이라는 뜻인데, 팀장님이 과제를 주시기도 하고 같은 주제에 대해 이야기하는 시간을 갖기도 한다! 이번엔 포스트모템을 배우고 우리 프로젝트에 적용하는 시간과, 미리 주어진 프론트엔드 과제인 인클루시브 디자인에 대해 이야기 해보는 시간을 가졌었다. 그 중 인클루시브 디자인은 책도 빌려서 읽어봤기 때문에, 블로그에도 따로 포스팅하려고 한다! 일단 인클루시브 디자인이란, 성별, 국적, 인종, 문화적 차이와 상관없이 누구나 쉽게 사용할 수 있는 디자인을 의미한다. Design For All, Universal Design 이라고도 한다는데, 유니버셜 디자인은 좀 더 건축이나 제품 디자인에 치중되는 개념이라면 인클루시브 디자인은 더.. 2022. 9. 1.
Custom Modal 컴포넌트와 appear-disappear 애니메이션 / 모달 컴포넌트 깜빡임 해결 / 컴포넌트 깎는 노인 / 생명주기는 중요하니까 새 프로젝트를 들어가면서 받은 미션! ant design 을 쓰지 않고 최대한 컴포넌트를 직접 만들어보는거였다. 본격적으로 프로젝트를 시작하기 전에 여러가지 공통 컴포넌트들을 만들었는데(버튼, 체크박스, 셀렉트박스 … ) 그 중 모달 컴포넌트를 만들면서 생긴 문제와 해결 방법에 대해 적어보려고 한다 일단 내가 만든 모달 컴포넌트의 전체적인 구조를 보자! // CustomModal.tsx // ... return ReactDOM.createPortal(_Modal, modalElement!); 일단 createPortal 을 사용해서 root DOM 외부에 모달 노드를 생성했다. 이렇게 root 노드 외부에 모달 노드를 생성하면 모달의 z-index와 같이 다른 컴포넌트와 상호작용을 고려해야 하는 점이 많.. 2022. 9. 1.

티스토리툴바