진행 중인 팀 프로젝트에서 데이터를 그래프 형식으로 나타내야할 일이 생겼다. 여러가지 그래프 라이브러리 중에서 최종적으로는 recharts를 사용하게 되었다. 📊 다양한 그래프 라이브러리의 존재 정말 다양한 그래프 라이브러리가 있었다. 그 중 후보군은 두개로 좁혀졌다. 1. ApexCharts 2. Recharts 기본적인 선정 기준은 다음과 같았다. 1. 러닝커브(학습 소요시간)이 낮고 2. 깔끔한 UI를 갖고 있고 3. 적당한 커스텀이 가능하며 4. 관련 레퍼런스가 많을 것 다음 선정 기준을 잡기 위해 내가 구현해야 할 기능에 대해 알아보고 라이브러리의 기술로 구현이 가능할 지에 대해 찾아보았다. 📍 구현 기능1. x값 기준 그래프 부분 색상 변경 : 이게 안된다..?!?!?! 내가 구현할 그래프는 ..
말로만 들어본 웹팩. 평소에 CRA를 통해 프로젝트를 만드는데, 이 CRA설치에 웹팩이 포함되어있어 웹팩파일을 직접 설정하는 경우가 없었다. 이번에 VSCode 익스텐션을 만들어보며 웹팩 설정도 같이 해보게 되어 기록! 🌟 Webpack이란? 웹의 규모가 커질 수록 파일 간의 관계가 복잡하고 무거워져서 브라우저 로딩 시간이 길어지는 현상이 나타난다. 이때 웹팩을 사용하여 파일 정리 및 최적화를 해줄 수 있다. 웹팩은 여러개의 파일을 하나로 합쳐주는 자바스크립트 모듈 번들러이다. 쉽게 말해 웹팩을 통해 여러개로 나눠진 파일을 하나의 번들로 모듈화하여 로딩 속도도 줄이고 가독성과 유지보수성도 향상시키는 역할을 한다. 만약 번들의 크기가 너무 커질 경우 초기 로딩 속도는 저하될 수 있는데 이땐 웹팩에 코드 스..
컴포넌트 하나를 만들기 위해서 폴더 하나에 컴포넌트 파일 하나와 스타일링 파일 하나를 각각 담는 경우가 많다. 파일마다 보일러 플레이트도 존재하기 때문에 컴포넌트의 개수가 많아질수록 매번 수동으로 다 만들기에 번거로움을 느껴 효율적인 작업을 하기 위해 익스텐션을 만들어봐야겠다는 생각을 하게 되었다. 💪🏻 만들고 싶은 익스텐션 여러 스타일링 도구에 적합한 익스텐션을 만들고 싶었기 때문에 구분이 필요했다. 일단은 내가 사용해본 styled componenet와 scss 대상으로 만들었다. 추후 더 추가할 예정! 생각한 동작은 아래와 같다. 1. 원하는 컴포넌트 위치의 상위 폴더에 우클릭을 한다. 2. "{컴포넌트명} {스타일링도구}" 을 입력받는다. 3. 컴포넌트명의 폴더가 생기고 하위에 컴포넌트 파일과 스..
TailwindCSS에서 SCSS로 바꾸는 도중 문제가 발생했다.!! 근데 해결하고 보니 어처구니 없는 기초적인 실수라서 다시는 같은 실수를 하지 않기 위해 부끄럽지만 기록해보려 한다. 🚨 문제 발생 토글 버튼을 직접 구현하는 과정에서 css가 적용되지 않는 문제가 발생했다. 원래대로라면 체크박스 형식의 input 선택 유무에 따라 .btnInputBody 와 .btnInputBall의 속성이 바뀌어야 한다. 하지만 속성이 바뀌지 않았다..ㅜㅜ tailwindCSS로는 무난하게 구현했었는데 왜 문제가 발생했을까? import styles from "./input.module.scss" ; .btnInput { input{ display:none } input:checked { .btnInputBody{ ..
Next13의 서버 컴포넌트를 활용한 data fetching 방법에 대해 공부하다보면 상당부분이 react-query와 흡사하다는 것을 느낄 수 있다. Next13의 data-fetching 그리고 react-query Next 13 버전에서는 fetch() api를 지원하여 서버 컴포넌트 내부에서 data fetching이 좀 더 간편하도록 도와준다. fetch 옵션을 통해 캐싱 , revalidate 등의 기능도 쉽게 사용할 수 있다. 여기서 한가지 궁금증이 생겼다. 그렇다면 next13에서 react-query 사용할 필요가 없을까?? 보통 react-query를 사용하는 이유의 대부분이 next13의 fetch api가 지원하고있는 기능을 사용하기 위해서라고 생각한다. 캐싱, 동기화 및 업데이트..
코어 자바스크립트라는 책을 읽다가 자바스크립트의 작동 원리에 대해 정확히 알고 싶어서 정리하게 되었다. 자바스크립트는 단일 스레드 기반의 언어자 동기적인 언어이다. 즉 순차적으로 한번에 하나의 작업만 처리할 수 있다. 자바스크립트가 실행되는 환경을 자바스크립트 런타임이라고 한다. 자바스크립트에도 다양한 런타임이 있고 각각의 런타임은 환경과 규칙을 정의한다. 브라우저 : 웹 브라우저에서 실행되는 자바스크립트 코드를 위한 환경이다. Node.js : 브라우저 외부에서 자바스크립트가 실행 가능하도록 한다 ( ex 서버 작업 ) React Native : 모바일 앱 개발을 위한 환경이다. Electron : 데스크톱 애플리케이션을 위한 환경이다. 웹 개발을 주로 하는 프론트엔드 개발자로서 웹에서의 동작 방식이 ..
CI/CD 말은 많이 들어봤는데, 큰 규모의 프로젝트는 개발해본 적 없는 나로서는 한번 배포하면 다시 배포할 일이 그렇게 많지는 않았기 때문에 접할 기회가 마땅히 없었다. 꼭 써보고 싶었는데 이왕 쓸 거 제대로 알고 쓰자는 의미에서 CICD에 대해 찾아보게 되었다. ➰ 개발부터 배포까지 배포가 되기까지는 어떤 과정을 거칠까? 개발 > 빌드 > 테스트 > 릴리즈 > 배포 개발 개발자가 소스코드를 원격저장소에 push한다. 빌드 소스코드 파일이 실행 가능한 형태로 변환되는 것이다. 작성한 소스 코드 파일을 컴파일하여 바이너리코드로 변환하고, 링크를 거쳐 실행 파일이나 라이브러리 파일 등을 생성하는 과정으로 이루어진다. 테스트 실행가능한 결과물이 의도한대로 동작하는지를 테스트한다. 릴리즈 테스트를 마친 후 결..
개발을 수차례 해봤지만 대용량 트래픽을 마주할 일이 없다는 이유로 배포는 항상 netlify나 github pages를 통하여 간단하게 해결했다.. 과거 딱 한번 AWS를 사용해본 적이 있으나 개발도 제대로 할 줄 모르던 시절에 겪어본 경험이라서 이번 기회에 AWS로 배포를 해보고자 마음 먹었다. + 자동화! 🧐 고민 : AWS의 어떤 방법을 통해 배포해야 하나 aws에서 제공하는 서비스가 너무 많아 어떤 방식으로 배포를 해야 할 지 선택해야 했다. EC2를 사용하는 방법과 CloudFront + S3를 사용하는 방법 중에서 고민을 했다. 일단 각 용어의 개념을 정리해보았다. ✨ AWS? 아마존닷컴에서 운영하는 클라우드 컴퓨팅 플랫폼이다. 퍼블릭 클라우드 컴퓨팅 서비스를 제공한다. IaaS ( Infra..
다양한 상태를 관리하며 더 효율적인 상태관리에 대하여 고민하게 되었다. 📌 상태(state)는 무엇인가? 상태는 변하는 데이터이다. 더 정확히 말하자면 리렌더링에 영향을 미치는 변하는 값이다. 리액트에서 페이지는 주로 props나 상태에 영향을 받아 컴포넌트가 변화할 때 리렌더링이 된다. 리렌더링이 유발되면 가상 dom에서 변경된 부분만 캐치하여 실제 dom에 반영되고 우리가 의도한대로 값을 변경하여 보여준다. 📌 상태 관리의 종류 상태는 지역상태와 전역상태로 나뉘고 그에 따른 관리 방법이 다르다. 지역 상태 ( local state ) 관리 한 컴포넌트 안에서 useState를 통하여 상태를 선언하고ㅁ 상위 컴포넌트에서 하위 컴포넌트로 props를 넘겨 전달하는 props drilling 방식의 상태관..
리액트와 파이어베이스 DB를 사용하여 테니스 커뮤니티 프로젝트를 진행하였다. 기능 구현을 마치고 최적화 단계에 들어섰고, 처음으로 경험해보았던 최적화 과정이었기 때문에 나름 고군분투를 겪어 이와 관련된 내용을 정리해보고자 글을 작성하게 되었다. 😥 처참한 초기 성능 Lighthouse를 사용하여 성능 평가를 하였다. 결과는 처참.. 기능 구현에 초점을 맞춰 프로젝트를 진행하다보니 이런 처참한 결과가 나온 것 같다. (ㅠㅠ..) 여러 페이지가 있지만 일단 가장 맨 처음 보이는 메인 페이지를 기준으로 성능 최적화를 진행하였다. 이 게시물에서는 Lighthouse의 performance만 살펴볼 예정이다. accessibility는 다음 게시물에..! 👁🗨 현상 파악 성능 최적화 = 로딩 최적화 + 렌더링 ..
📌 구현화면 버튼을 누르면 새로운 input이 생기고, UX를 위하여 새로 생긴 input 창에 바로 focus 되는 방식으로 동작하기를 원했다. 📌 구현내용 1. input Ref 만들기 questions은 나열하는 질문들의 값을 담는 state이고, lastInputRef는 가장 마지막의 input 값을 담기 위한 ref이다. map 함수를 사용하여 questions를 컴포넌트의 인자에 담아 렌더링 시킨다. 이때 lastInputRef도 인자로 담아 보낸다. 이렇게 하면 모든 질문의 input의 값을 거쳐서 결국 마지막에 렌더링 되는 마지막 input의 값이 lastInputRef에 담기게 된다. const [questions, setQuestions] = useState(); const lastIn..
😚 프로젝트 소개! 테니스 커뮤니티 "Tenning" 테니스가 취미인 내가 직접 만들어본 테니스 커뮤니티 다양한 게시판으로 테니스인들이 소통할 수 있는 공간을 만들었다! 로그인 후 글쓰기, 댓글, 북마크 기능을 사용할 수 있으며 마이페이지를 통해 정보수정과 활동 내역 모아보기가 가능하다 ✨ 개발 계기 프로젝트를 만들게 된 계기는 내 진짜 실력에 대한 불안감이 들었기 때문이다. 누군가의 도움없이 혼자서 고민하고 배우는 과정이었기에 잘 하고 있는 건지에 대한 의구심이 들었다. 기여도 100%의 서비스를 만들 수 있게 된다면 서비스 개발과정 전체의 흐름을 알면서 얻는 것이 많지 않을까? 그래서 불안을 좀 잠재울 수 있지 않을까? 싶은 마음에 시작하게 되었다. 🙄 기술 선택에 대한 고민 우선 CSR을 선택할 지..
구현 화면 태그를 입력한 뒤 엔터를 누르면 등록되는 방식으로 구현하였다. 태그의 X표시를 누르면 태그가 삭제된다. 구현과정 1. 기본 구조 생성 우선 기본적인 디자인을 잡아보자. 입력한 태그를 담을 tags state를 만들어 map 함수를 활용해 뿌린다. const [tags, setTags] = useState([]); {tags.map((tag, idx) => ( {tag} × ))} ; 사용한 스타일 컴포넌트의 css는 다음과 같다. const TagInputContainer = styled.div` ${flexICenter} flex-wrap: wrap; gap: 0.5em; background-color: ${(props) => props.theme.colors.gray.xxs}; paddin..
Next를 접하면서 생긴 궁금증이 있다. Next는 서버 사이드 렌더링 기법을 사용하고 서버 사이드 렌더링은 서버에서 컴포넌트를 해석하여 사용자에게 보여줄 페이지를 구성한다. 별도로 구현한 백엔드 서버가 있는 것도 아닌데 여기서 서버는 어떤 서버를 말하는 것일까..? 궁금해서 찾아보게 되었다. 📌 서버란? 클라이언트의 요청에 응답하여 서비스를 제공하는 프로그램이다. 이때 제공하는 서비스에 따라 종류가 여러개로 나뉘게 된다. ex ) 웹 서버, db 서버, 캐시 서버 등 📌 웹 서버와 웹 애플리케이션 서버 서버의 다양한 종류가 있지만 관련 핵심인 웹 서버와 웹 애플리케이션 서버에 대해 얘기해보고자 한다. 🎇 웹 서버 ( Web Server ) 클라이언트로부터 http 요청을 받아 정적인 컨텐츠( html,..
개요 Tailwind를 사용하던 중 아래와 같이 여러개의 카드 컴포넌트에 각각 다른 flex-basis를 줘야하는 일이 생겼다. 결론 : 객체 만들어 활용하기 나는 많은 속성을 주는 것이 아니였기 때문에 className 전체를 객체화 시켜서 활용하였다. const flexRow: IFlexRow = { 0: "h-auto w-auto", 0.2: "h-auto w-auto basis-1/5 ", 0.5: "h-auto w-auto basis-1/2 ", 0.8: "h-auto w-auto basis-4/5 ", }; 후에 props로 객체의 key 값을 받아 객체를 할당하였다. export default function Card({ title, children, basis }: ICard) { retu..
