Front-End97 [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 이전에 만들었던 DragNDrop 기능에서 고스트 이미지가 마음에 안 들어, 별도의 컴포넌트로 더 예쁜 커스텀 고스트 이미지를 만들어 보았습니다. 하지만 이로인해 마우스 커서 스타일이 도로 화살표로 돌아와 버렸는데요. 원인은 고스트 이미지를 없애기 위해 빈 이미지를 넣었기 때문에 그런 것 같습니다. react-dnd를 만든 개발자 깃헙에도 들어가 해결방법을 찾아보았지만 해결방법이 딱히 없다는 충격적인 답변을 보기만 했습니다 ㅠㅠ 하지만 해결방법이 없는 건 아닙니다. 왜냐하면 다른 웹사이트에서는 멋지게 드래그 앤 드롭 도중에 커서를 변경해주고 있거든요. 따라서 저는 약간은 과격한 방법으로 문제를 해결했습니다. 해결방법은 바로 드래그 이벤트가 시작되면 전역 스타일에 커서를.. 2023. 3. 21. [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 오늘은 react-dnd를 이용한 드래그 앤 드롭 기능 구현도중 겪었던 커서 변경 문제에 대해 포스팅을 해보려고 합니다. 드래그 앤 드롭을 이용해 drag 이벤트를 발생시키면 자동적으로 마우스 뒤편에 ghost image가 나타나고 마우스는 기본 커서로 변경되는 것을 확인할 수 있습니다. 이는 html5 백엔드 api에서 자동으로 설정된 값이기 때문입니다. 안타깝게도 html5의 백엔드 api는 다루기가 어려운 데다 자유도가 낮아 많은 드래그 앤 드롭 예제에서는 커서변경을 포기하고 기능에 초점을 맞추고 있습니다. 구글에서도 많은 분들이 관련해서 불편함을 토로하는 글을 읽어볼 수 있습니다. 근본적인 해법으로는 드래그엔드랍을 지원하는 백엔드 api를 변경하는 것이지만 np.. 2023. 3. 16. [Firebase] Auth undefined 문제 해결방법 안녕하세요, 개발자 Sean입니다. 사이드 프로젝트로 만드는 어플에서 자꾸만 원인 모를 에러가 발생해 퇴근 후 원인을 분석하다 해결방법을 발견해 관련해서 포스팅하려고 합니다. 현재 프로젝트에서 typescript와 firebase의 auth를 활용해 프론트엔드를 만들고 있는데요, 이 둘 조합해서 사용하는게 여간 까다로운 일이 아니네요. (아마... 제 실력이 떨어져서겠죠..?ㅎㅎ;;) 우선 토큰을 가져오기 위해 auth.currentUser.getIdToken()를 호출하면 타입에러가 발생합니다. 이유는 auth.currentUser 안에 getIdToken() 메서드가 있을 수도 있고 없을 수도 있기 때문입니다. 자세히 이해하지 못했지만 auth 객체가 호출될 때 중간단계(초기화 등)를 거치기 때문이라.. 2023. 3. 15. [UI] styled-components를 이용한 원형 차트 만들기 안녕하세요, 개발자 Sean입니다. 오늘은 원형차트 ui 관련 내용을 포스팅하려고 합니다. 아래 사진의 우측 상단에 들어가는 조그마한 차트입니다. 사실 팀에 합류하고 차트 ui 제작을 해본 경우는 매우 드문데요, 왜냐하면 외부 라이브러리(highchart)를 이용하는 편이 훨씬 생산성이 높기 때문에 직접 차트 ui를 만들지 않았습니다. 하지만 이번에 개편되는 ui 디자인의 경우 외부 라이브러리를 이용하면 디테일한 부분의 스타일을 수정해주어야 하는 번거로움이 생기는데 반해 직접 구현하기에 어렵지 않은 디자인이라 직접 만들어 보기로 했습니다. 리엑트와 스타일 컴포넌트를 이용했습니다. 우선은 아래와 같이 원형차트 컴포넌트 파일을 만들어 줍니다. 여기서 저는 이름을 CircleChart라고 지었는데 보통은 Pi.. 2023. 3. 9. [React] 플랫폼 메인구조(헤더, 사이드바, 푸터) 특정 페이지에만 적용하기 안녕하세요, 프론트엔드 개발자 Sean입니다. 오늘은 플랫폼에서 메인구조(헤더, 사이드바, 푸터)를 특정 페이지에만 적용하려면 어떻게 해야 하는지에 대해 정리한 내용을 올려볼까 합니다. 사실 오늘 플랫폼 리펙토링 중에 페이지를 바꿀 때 마다 상단 헤더의 이미지 아이콘이 깜빡 거리는 사실을 알게 되었습니다. 원인은 페이지를 바꿀 때 메인구조가 리렌더링 되었기 때문이었습니다. 이러한 이유가 발행한 이유는 라우팅 되는 컴포넌트 안에 메인구조 컴포넌트를 삽입하는 형태였기 때문에 페이지를 변경하면 매번 같은 메인구조를 다시 그렸던 겁니다. 예를 들어 라우터는 path='/에 Dashboard.js 컴포넌트를 불러오고 해당 컴포넌트 안에 MainStructure.js 컴포넌트가 들어있는 구조였습니다. 이 문제를 해.. 2023. 3. 2. [React] React를 왜 만들었을까? 안녕하세요, 개발자 Sean입니다. 프론트엔드 면접을 보시다보면 아마 많은 분들이 "React는 왜 만든 걸까요?"라는 질문을 받곤 합니다. 개발에 대해 아무 몰랐던 옛날에는 그냥 어플을 잘 만들려고 만든거 아닌가?라고 생각했는데, 어느정도 경험이 쌓이고 나서 생각해보니 면접관 분들이 듣고자 하는 대답은 따로 있었던것 같다는 생각이 듭니다. 근데 여기에 대해 React를 만든 개발자가 직접 작성해놓은 글이 있다는 사실 아시나요? ㅎㅎ 오늘은 관련 글을 번역해 옮겨볼까 합니다. Why did we build React? 이미 수많은 자바스크립트 MVC 프레임워크가 있음에도 불구하고 왜 우리는 리엑트를 만들었으며 왜 리엑트를 사용해야 하는 걸까요? 리엑트는 MVC 프레임워크가 아닙니다. 리엑트는 compos.. 2023. 2. 17. [React] 모바일 청첩장에 벚꽃 배경 만들기 안녕하세요, 개발자 Sean입니다. 오랜만에 포스팅할 시간이 생겨서 글을 적어봅니다. 친형이 결혼을 하게 되어 갑작스레 모바일 청첩장을 만들어 달라는 부탁을 받아 흔쾌히 그러겠다고 했습니다. 근데 하루도 지나지 않아 언제 다 되는지 주변에서 아우성이네요;; 그냥 뚝딱하면 만들어지는 줄 안 모양입니다 ㅠㅠ 그래도 친형 결혼식이니 조금은 신경을 써서 만들고 싶어 배경에 예쁜 벚꽃이 휘날리는 그럼 청첩장을 후다닥 만들어 주었습니다. 퇴근하고 쉬질 못하니 엄청 피곤하긴 하네요. 아래는 벚꽃이 흩날리는 이펙트의 스크린샷입니다. 시간이 넉넉하면 직접 만들어보고는 싶었는데 기한이 빡빡하다 보니 오픈 라이브러리를 이용했습니다. 라이브러리나 오픈 코드들이 여러 개 있긴 했지만 제가 선택한 라이브러리는 react-snow.. 2023. 1. 10. [React] 최초 렌더링에서 useEffect 실행 생략하기 안녕하세요, 개발자 Sean입니다. 오늘 플랫폼 테스트 진행 중 이상한 버그 하나를 발견했습니다. 차트를 그리는 페이지에서 차트 세팅을 변경해 적용하면 변경된 세팅이 아닌 이전 세팅값으로 차트가 그려지는 현상이었습니다. 왜 이런 현상이 발생하는지 조사해보니, 초기 렌더링 때 상태변화가 이루어지지 않은 상태에서 이전 상태 값으로 차트를 그렸기 때문에 문제가 발생하는 것을 확인할 수 있었습니다. 개인적으로 올바른 해결방법은 아니라고 생각하지만 급한데로 우선은 useEffect에서 초기 렌더링일 때는 함수 실행을 스킵하도록 코드를 짰더니 문제가 해결되긴 했습니다. 방법은 여러가지가 있을 수 있겠지만 제가 사용한 방법은 useRef를 활용하는 것이었습니다. const notInitialRender = useRe.. 2022. 12. 14. [React] React-dnd 사용방법 안녕하세요, 개발자 Sean입니다. 오늘은 플랫폼 상단 탭의 Drag and Drop 기능 리펙터링을 진행했습니다. 베타 테스트용으로 급하게 만드느라 기존의 드래그 앤 드롭은 html5에서 기본적으로 지원하는 내장 기능을 이용해 구현해 놓은 상태였습니다. 하지만 ui/ux가 다소 엉성(?)하고 이를 해결하려면 여러 부수적인 코드를 많이 만들어야 하는 까닭에 많은 사람들이 이용해 안정성을 입증하면서 개발자의 의도대로 커스터마이징이 용이한 React-dnd를 사용하기로 했습니다. 완성된 동작은 아래와 같습니다. React-Dnd를 이용한 드래그 앤 드랍 하지만 사용하는 개발자 수에 비해 어딘가 부실한 설명으로 이해하는데 시간이 다소 걸렸습니다. 따라서 많이 부족하지만 다른 분들의 시간을 아껴드리기 위해 간단.. 2022. 11. 29. [React] 리엑트 코딩 팁 안녕하세요, 개발자 Sean입니다. 퇴근 시간 버스를 놓쳐서 블로그 글을 읽던 와중 꽤 괜찮은 글이 있어 번역해 옮겨 봅니다. 더 나은 리엑트 코드를 위한 팁 코드를 잘 작성하는 것이 왜 중요할까요? 이유는 코드는 가능한 깔끔할수록 유지보수에 용이하기 때문입니다. 좋은 개발자가 되기 위해서, 작동하는 코드가 아닌 작동하는 좋은 코드를 작성할 줄 아는 것은 중요합니다. 그래서 아래에 리엑트를 처음 배울 때 알았으면 좋았을 몇 가지 팁을 공유해 드립니다. Use fragments 리엑트에선 하나의 컴포넌트에 여러 개의 자식 컴포넌트를 리턴할 수 없습니다. 만약에 그런 시도를 하게 된다면 이런 에러 메시지를 보게 될 것입니다. "Adjacent JSX elements must be wrapped in an e.. 2022. 11. 16. [Next] next.js github으로 배포하기 안녕하세요, 개발자 Sean입니다. 저번 주 시작한 회사 블로그 만들기 프로젝트가 끝나 관련해 포스팅을 해보려고 합니다. 3주는 예상한 프로젝트였는데 6일 만에 기능 구현 및 배포가 끝나 버렸네요. next.js의 낮은 러닝커브 덕분인 것 같습니다. 이번에 처음 next.js를 이용하면서 MPA, SSR 애플리케이션을 제작해 보았는데요, 상당히 많은 것에 대해 생각해 보고 오히려 SPA와 React.js에 대해 더 깊게 이해하게 된 것 같습니다. 재미있었습니다 ㅎㅎ 거두절미하고 제가 만든 블로그 어플리케이션은 아래와 같은 방식으로 작동합니다. 1. 데이터 분석가가 주피터 노트북을 이용해 만든 .ipynb 파일을 .json 확장자로 변경한 뒤 2. next.js 어플리케이션의 src/contents 폴더 .. 2022. 11. 14. [Next] Plotly.js 다이나믹 임포트 하기 안녕하세요, 개발자 Sean입니다. 오늘은 본격적으로 회사 블로그 프로젝트 작업에 들어갔는데요, 예상치 못한 복병을 만나게 되었습니다. 애널리스트분들이 주피터 노트북에서 plotly 라이브러리를 사용해 차트를 만들기 때문에 해당 라이브러리를 이용해 차트를 구현해야 하는 상황이었습니다. 따라서 별다른 생각 없이 아래와 같이 라이브러리를 임포트 했습니다. import Plot from 'react-plotly.js'; 그런데 에러가 나오는 것이었습니다! Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will be displayed in the termin.. 2022. 11. 7. 이전 1 2 3 4 5 6 ··· 9 다음
