본문 바로가기

Front-End97

[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.
[Highcharts] 유연한 그룹핑 바차트 만들기 안녕하세요, 개발자 Sean입니다. 베타 버전 배포까지 2회의 스프린트밖에 남지 않아 최근 굉장히 피로에 쩔은 나날을 보내고 있습니다... 오늘은 최근에 새롭게 도전해본 '유연한 그루핑 바차트'에 대해 포스팅해보려고 합니다. 사실 이름이 따로 정해져 있는 건 아니고 제가 그냥 멋대로 지은 이름입니다 ㅎㅎ;; highcharts를 이용해서 아래와 같은 그룹핑 바차트를 만들었습니다. 여기서 그룹핑이란 일정 기간동안의 데이터를 모아서 나타내는 것을 말합니다. 예를 들어 한 달 동안의 데이터를 합친다거나 일주일간의 평균을 내거나 하는 방식으로 말이죠. 하지만 여기서 문제가 하나 발생했습니다. 위처럼 차트 시간이 길어질수록 바끼리 포개지는 문제가 발생했습니다. 생각해보면 당연한 현상입니다. 시각적으로 색깔 구분이.. 2022. 10. 13.
[React] Build 후에 CSS 사라짐 현상? 이번 주 가벼운 마음으로 개인 프로젝트를 진행하다가 배포 업데이트를 하려고 build를 하고 build 된 어플을 실행시켜 보았다. 그런데 이게 뭔 일인지.... 스타일이 몽땅 사라져 있는 것이었다. 이전에 똑같은 방식으로 build 해서 배포할 때는 아무런 문제가 없었는데 갑자기 지금에 와서야 이러는 이유를 모르겠다. 거기다 로컬에서 돌렸을 때는 스타일이 모두 잘 적용되어서 돌아가고 있었다. 무엇이 문제인지 한참을 헤메다가 원인을 찾게 되었다. 원인은 styled-components의 GlobalStyles 컴포넌트 때문이었다. 지금까지 index.js에 컴포넌트보다 상위의 위치에 컴포넌트를 위치시켰는데, 문서를 살펴본 결과 컴포넌트와 같은 위치 혹은 더 아래의 위치에 를 위치시켜야 한다고 한다. im.. 2022. 8. 14.
[CSS] 반응형 웹페이지의 높이 설정 오늘 사이드 프로젝트를 반응형으로 업데이트하는 작업을 진행하다가 웹페이지의 높이 설정 문제에 부딪혔다. 콘텐츠가 있는 부분까지만 높이가 설정되다 보니 스타일이 이상하게 적용되는 문제가 있었다. 이 부분 어찌어찌 해결했던 경험이 있는데, 이번에 기왕이면 자세히 알아보려고 구글링을 하다가 좋은 글이 있어 번역해 옮겨보려 한다. HTML vs Body: How to Set Width and Height for Full Page Size CSS는 어렵고 복잡하지만 동시에 유연하다. 그렇기 때문에 어지저찌 하다보면 스타일이 적용되기도 한다. 페이지는 여전히 로딩되며, 에러 또한 나타나지 않는다. 페이지의 높이나 너비에 있어서 HTML 엘리먼트를 어떻게 설정해야 하는지 혹시 알고 있는가? body 엘리먼트는? 혹시.. 2022. 7. 30.
[React] 리엑트 컴포넌트가 두 번 렌더링 되는 이유? 이번 스프린트를 마치기 전 데모를 해보다가 화면상 표시되는 데이터가 실제 데이터와 다르다는 사실을 발견했다. 원인을 찾아보니 동료 개발자가 의도치 않게 자료형에 Mutation을 일으켜 잘못된 데이터가 표시된 것이었다. 그리고 Mutation이 발생한 이유는 2회 컴포넌트가 렌더링 되면서 함수가 두 번 실행되었기 때문이라는 사실도 알게 되었다. 사실 이전 부터 궁금하긴 했었다. useState 혹은 useEffect를 사용한 컴포넌트에서 콘솔을 찍으면 항상 두 번 프린트되었기 때문이다. 그래서 오늘은 관련해서 왜 그런지 찾아보았고 재밌는 글을 발견해 번역해 옮겨 본다. My React components render twice and drive me crazy 모던 리엑트를 사용하는 수 많은 프론트엔드 .. 2022. 7. 29.
[CSS] CSS Glitch Art 효과 CSS은 아무리 공부해도 마스터했다는 느낌이 들지 않는다. 경험 많은 프론트엔드 개발자 분들도 CSS는 마스터라는 개념이 없다고 종종 말씀하시는데, 정말 공감하는 바이다. 하지만 그렇다고 공부를 아예 포기하는 것도 문제가 있다. 결국 디스플레이에 스타일을 입히는 것은 프론트엔드가 해야 하는 주요 업무 중의 하나이기 때문이다. 관련해서 재밌는 포스트가 있어 번역해 옮겨본다. CSS Glitch Art Effect 이번 포스팅의 주제는 Glitch Art이다. Glitch Art가 무엇일까? 사실 Glitch Art는 틱톡 로고에 사용된 아트로 우리에게 친숙하다. 깜빡거리고 진동하는 효과로 우리의 시선을 끄는 마법과 같은 느낌이 있다. Glitch Art는 이미지가 깨지며 흠집이 생기는 느낌을 표현한다. 틱.. 2022. 7. 23.
[React] 리엑트 디자인 패턴: Return Component From Hooks React Design Patterns: Return Component From Hooks "Partical Application"으로 부터 영감을 받은 새로운 형식의 패턴: Material-UI와 타입스크립트를 이용한 예제와 함께 훅이 리엑트 커뮤니티에 소개된 지 수년이 흘렀고, 이로 인해 코딩 패턴에 많은 변화가 생겼다. 이번 글에서는, 'partial application'에서 영감을 받은 새로운 패턴에 대해 공유해보고자 한다. 필자는 이를 'Return Component From Hooks'라고 부른다. 간단한 예제로 시작해보자: 팝업 메뉴를 여는 버튼을 추가하자 메뉴를 열고 닫는 상태 관리 메뉴 아이템 클릭 핸들러 import React from "react"; import Button from.. 2022. 6. 30.
[React] 2022 리엑트 컴포넌트 디자인 패턴 많은 스타트업에서 그러하듯 초기 프로토타입 플랫폼은 인하우스가 아닌 외주 업체를 통해 제작하는 경우가 많다. 현재 필자가 개발자로 근무하는 회사의 플랫폼도 외주 업체에 의해 제작된 애플리케이션이다. 다행히 꼼꼼하고 실력 있는 개발자께서 만들어 주셔서 유지 보수에 문제가 있는 것은 아니지만, 몇몇 부분에서 코드를 읽고 이해하기 난해한 부분들이 있다. 특히, 디자인 패턴에 있어서는 일관성 문제로 코드를 이해하는데 시간을 많이 잡아먹는 문제가 발생하고 있다. 파일명 혹은 클래스명을 토대로 이해하기로는 container - presenter 패턴을 이용한 것으로 생각되나, container와 presenter의 구분이 모호해지는 회색 영역이 코드의 대부분을 차지하며 props drilling 지옥이 필자를 괴롭.. 2022. 6. 30.

티스토리툴바