React51 [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] 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. 코드 리팩터링하기 안녕하세요, 개발자 Sean입니다. 소프트웨어 엔지니어링은 다른 공학과는 다르게 무형의 어떤 것을 만들어낸다는 특징이 있습니다. 그렇기 때문에 어플을 만들어 나가는 과정에서 무수히 많은 예상치 못한 결과를 만나기도 합니다. 또한 잘 계획되지 못한 기능 구현은 끔찍한 코드 실타래를 만들어 내고 이는 필연적으로 원인을 알 수 없는 버그와 에러로 이어지죠. 그리고 이번 주에 제가 그런 실수를 범했습니다. 애널리틱스라는 분석 페이지를 제작 중이었는데요, 음... 복잡한 기능인 데다가 개념 이해가 어렵다 보니 일단은 만들고 보자 라는 생각으로 무작정 키보드부터 두드리고 본 결과 약 1천줄의 ... '의미를 알 수 없는 변수명'과 '왜 이렇게 짜인 건지 이해할 수 없는 컴포넌트 구조'로 점철된 코드가 만들어졌습니다.. 2022. 10. 13. [Highcharts] 유연한 그룹핑 바차트 만들기 안녕하세요, 개발자 Sean입니다. 베타 버전 배포까지 2회의 스프린트밖에 남지 않아 최근 굉장히 피로에 쩔은 나날을 보내고 있습니다... 오늘은 최근에 새롭게 도전해본 '유연한 그루핑 바차트'에 대해 포스팅해보려고 합니다. 사실 이름이 따로 정해져 있는 건 아니고 제가 그냥 멋대로 지은 이름입니다 ㅎㅎ;; highcharts를 이용해서 아래와 같은 그룹핑 바차트를 만들었습니다. 여기서 그룹핑이란 일정 기간동안의 데이터를 모아서 나타내는 것을 말합니다. 예를 들어 한 달 동안의 데이터를 합친다거나 일주일간의 평균을 내거나 하는 방식으로 말이죠. 하지만 여기서 문제가 하나 발생했습니다. 위처럼 차트 시간이 길어질수록 바끼리 포개지는 문제가 발생했습니다. 생각해보면 당연한 현상입니다. 시각적으로 색깔 구분이.. 2022. 10. 13. [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. 이전 1 2 3 4 5 다음
