본문 바로가기

전체 글235

[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.
[Next] 회사 블로그 만들기 안녕하세요, 개발자 Sean입니다. 이번에는 회사 블로그 제작 프로젝트를 진행하게 되었습니다. 음... 근데 우리 회사의 블로그는 다른 블로그와는 성격이 조금 달라 많은 고민거리가 있었습니다. 일반적인 기업 블로그는 단순히 텍스트와 이미지 그리고 짧은 코드 정도만을 보여주면 원하는 기능을 대부분 구현할 수 있기 때문에 Medium과 같이 이미 완성된 블로그를 사용한다고 알고 있습니다. 그렇지만 이번 프로젝트의 경우 기존의 방법으로는 원하는 기능을 충분히 서포트할 수 없는 문제가 있었습니다. 저희가 필요한 블로그는 기업 데이터 분석 블로그이기 때문에 동적인(인터렉티브한) 차트가 중요했습니다. 그리고 무엇보다 이런 동적인 차트를 개발자의 도움 없이 블로그에 포스팅할 수 있어야 했죠. 문제는 애널리스트 분들이.. 2022. 11. 4.
[React] Single Responsibility Principle 리펙토링 하기 안녕하세요, 개발자 Sean입니다. 저번 포스팅에서 SOLID 원칙에 대한 공부를 해봤으니 본격적으로 코드 리펙토링에 들어가려고 합니다. 우선은 오늘 제가 수정할 코드는 아래와 같습니다. const Analytics = () => { //States const [isLoading, setIsLoading] = useState(false); //Hooks const dispatch = useDispatch(); const analytics = useSelector((state) => state.analytics); const user = useSelector((state) => state.user); useEffect(() => { getTabList(); }, []) //Methods const getT.. 2022. 11. 1.
[React] 리엑트에 SOLID 원칙 적용시키기 안녕하세요, 개발자 Sean입니다. 오늘은 베타 버전을 끝마치고 이제는 뭘 해야 할까... 뒹굴대다가 본격적으로 리펙토링을 가지는 시간을 좀 가져볼까 합니다. 그래서 리펙토링을 어떤 원칙을 가지고 접근하면 좋을까 고민하다 아래와 같은 좋은 글이 있어 옮겨봅니다. Applying SOLID principles in React 소프트웨어 산업이 성장하며 개발자들이 수많은 우여곡절을 겪음에 따라 모범사례와 우수한 소프트웨어 설계 원칙이 나타나고 미래에 똑같은 실수를 방지하기 위해 개념화되었습니다. 특히 객체 지향 프로그래밍의 세계에서 이러한 모범사례가 수많이 개발되었고 SOLID는 의심의 여지없이 더욱 영향력을 키우게 되었습니다. SOLID는 각각의 글자가 다섯개의 설계 원칙을 의미하는 축약어 입니다: Sin.. 2022. 10. 31.
[React] 선언형과 리엑트 안녕하세요, 개발자 Sean입니다. 라이브러리를 공부할 때 다른 참고서나 설명 블로그를 참조하는 방법도 좋은 방법이지만 뭐니 뭐니 해도 공식 라이브러리 설명 페이지가 개발자의 의도를 가장 잘 설명하겠죠? 따라서 저도 이번에 한 번 처음부터 찬찬히 살펴보려고 합니다. 어느정도 리엑트에 대한 이해도가 생긴 상태에서 공식 페이지를 읽어보니 새삼 이전에는 생각치 못했던 여러 의문이 생겼습니다. 그중 하나가 아래와 같은 설명입니다. 선언형 React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다. 선언형 뷰는 코드를 예측 가능하고 디버그 하기 쉽게 만.. 2022. 10. 20.
[React] 커스텀 훅 이용하기 안녕하세요, 개발자 Sean입니다. “Young man, in mathematics you don't understand things. You just get used to them.” ― John von Neumann 컴퓨터의 아버지로 불리는 폰 노이만 선생님께서 하신 말씀입니다. 일찍부터 알았더라면 어땠을까... 생각하게 되는 명언이죠 ㅎㅎ 최근 리엑트를 매일같이 다루면서 다시 한번 떠올리게 되어 적어보았습니다. 이전에 리엑트를 공부할 때 커스텀 훅과 관련된 내용을 읽어본 기억이 납니다. 그때까지만 해도 커스텀 훅의 필요성을 느끼지 못했기 때문에 뭔가 대단히 어렵고 사용하기 난해한 기술로 여기고 여태까지 단 한 번도 사용하지 않았는데요, 업무를 보면서 그리고 코드에 대해 익숙해지면 질 수록 그 필요성.. 2022. 10. 19.
코드 리팩터링하기 안녕하세요, 개발자 Sean입니다. 소프트웨어 엔지니어링은 다른 공학과는 다르게 무형의 어떤 것을 만들어낸다는 특징이 있습니다. 그렇기 때문에 어플을 만들어 나가는 과정에서 무수히 많은 예상치 못한 결과를 만나기도 합니다. 또한 잘 계획되지 못한 기능 구현은 끔찍한 코드 실타래를 만들어 내고 이는 필연적으로 원인을 알 수 없는 버그와 에러로 이어지죠. 그리고 이번 주에 제가 그런 실수를 범했습니다. 애널리틱스라는 분석 페이지를 제작 중이었는데요, 음... 복잡한 기능인 데다가 개념 이해가 어렵다 보니 일단은 만들고 보자 라는 생각으로 무작정 키보드부터 두드리고 본 결과 약 1천줄의 ... '의미를 알 수 없는 변수명'과 '왜 이렇게 짜인 건지 이해할 수 없는 컴포넌트 구조'로 점철된 코드가 만들어졌습니다.. 2022. 10. 13.
[Highcharts] 유연한 그룹핑 바차트 만들기 안녕하세요, 개발자 Sean입니다. 베타 버전 배포까지 2회의 스프린트밖에 남지 않아 최근 굉장히 피로에 쩔은 나날을 보내고 있습니다... 오늘은 최근에 새롭게 도전해본 '유연한 그루핑 바차트'에 대해 포스팅해보려고 합니다. 사실 이름이 따로 정해져 있는 건 아니고 제가 그냥 멋대로 지은 이름입니다 ㅎㅎ;; highcharts를 이용해서 아래와 같은 그룹핑 바차트를 만들었습니다. 여기서 그룹핑이란 일정 기간동안의 데이터를 모아서 나타내는 것을 말합니다. 예를 들어 한 달 동안의 데이터를 합친다거나 일주일간의 평균을 내거나 하는 방식으로 말이죠. 하지만 여기서 문제가 하나 발생했습니다. 위처럼 차트 시간이 길어질수록 바끼리 포개지는 문제가 발생했습니다. 생각해보면 당연한 현상입니다. 시각적으로 색깔 구분이.. 2022. 10. 13.
웹앱에 슬랙 연동하기 안녕하세요, 개발자 Sean입니다. 오늘은 개발 중인 웹 어플에다가 슬랙을 연동하는 작업을 했는데요, 슬랙을 연동하게 된 이유는 신규 유저가 들어올 때마다 알림이 필요했는데 메일은 너무 식상하고(아재 냄새나요)... 모든 팀원들이 슬랙을 사용하니 슬랙으로 공유받으면 좋겠다는 이유에서 였습니다. 사실 slack이 굉장히 관련 블로그가 많은 편이라 따로 설명을 하지 않더라도 쉽게 연동방법을 찾을 수 있습니다. 따라서 대략적인 순서만 알려드리자면 아래와 같습니다. 그리고 기억을 더듬으며 작성해서 대략적인 느낌(?)에 의존해서 알려드립니다. 1. slack 어플 만들기 우선은 슬랙안에 어플을 생성해야 합니다. 뭐 거창 한 건 아니구 아래 링크로 가셔서 그냥 어플 만들기 버튼만 누르고 이름 설정하면 끝입니다. h.. 2022. 9. 28.
프론트엔드에서 페이지 로딩 속도 문제 해결하기 안녕하세요, 프론트엔드 개발자 Sean입니다. 만약 개발중인 애플리케이션의 규모가 크거나 빅데이터를 다루는 서비스라면, 다들 페이지 로딩 속도 문제 고민을 해보셨을 것이라 생각합니다. 이는 유저의 경험에 아주 안 좋은 영향을 미치기 때문에 꼭 해결을 해야 하는 문제이기도 하지요. 하지만 위와 같은 상황에서 사실 프론트엔드가 근본적인 해결책을 낼 수는 없습니다. 대부분의 경우 서버의 응답이 곧 페이지 로딩 속도이기 때문이죠. 오늘 포스팅에서는 위와 같은 상황에서 저는 어떤 생각을 했고 어떻게 유저의 경험에 미치는 영향을 최소화했는지 경험을 공유하고자 합니다. 사실 초보 개발자가 짧은 머리로 고민해 만든 일종의 트릭이기 때문에 추천드리지는 않습니다. 그리고 혹시 더 좋은 방법을 아시는 분들은 댓글로 노하우를.. 2022. 9. 19.
[JS] 배열 데이터 순서가 갑자기 바뀔때는 mutation을 의심해보자 어제오늘 필자를 극한으로 괴롭히던 문제가 있었는데 오늘 동료 개발자와 열띤 논의 끝에 원인을 찾아냈다. 문제 서버로 부터 받아온 배열 데이터의 순서가 렌더링 과정에서 변경되는 문제가 발생했다. 서버로 받아온 데이터 렌더링 도중 변경되는 데이터 원인 자식 컴포넌트 중에 해당 데이터 배열에 .sort()를 사용한 코드가 있었다. 문제의 코드 {data && data ?.sort((a, b) => b.exposure - a.exposure) .map((el, i) => { return ( .sort()는 mutable 한 매서드로 원본 배열의 순서를 변경한다. 따라서 기존의 데이터 배열 원본을 변경시켰고 이에 따라 같은 배열을 사용하는 다른 컴포넌트에도 영향을 미쳤던 것이었다. 해결방법 문제의 코드를 깊은 복.. 2022. 9. 6.
[JS] 주니어 레벨의 프론트엔드 개발자가 되려면? 신입 개발자로 일을 하면서 여러 가지 상황에 부딪힐 때마다 드는 생각은 '이게 최선인 걸까?' 하는 고민이다. 그만큼 아직은 배워야 할게 많다는 뜻일까. 성장에 대한 고민을 하면서 여러 블로그 글을 읽다가 재밌는 글이 있어 번역해 옮겨본다. 2022년에는 주니어 프론트엔드 개발자(리엑트)라고 불릴 수 있을까? 안녕하세요. 많은 사람들이 소프트웨어 엔지니어를 희망하고 발리에서 재택근무와 고소득의 라이프 스타일을 바라고 있습니다. 그렇지 않은 사람이 있을까요? 하지만 몸 값이 높은 주니어 프론트엔드 개발자가 되는 것은 그렇게 쉬운 일은 아닙니다. 해가 갈수록 채용 담당자는 주니어 레벨의 개발자에게 더 많은 요구와 엄격한 잣대를 요구하고 있습니다. 바로 지금 여기서 당신이 주니어 레벨의 FE로 불릴 수 있는지.. 2022. 8. 26.

티스토리툴바