본문 바로가기

분류 전체보기48

우아한테크캠프 5기 후기 서론 서론이 좀 길다. 일단 작년 11월로 거슬러 올라가야한다. 나는 작년 우테코 프리코스에 참여했지만, 최종에서 떨어져서 코스에 합류하지 못했었다. 우아한테크코스 4기 프론트엔드 - 프리코스 후기 이번에 운좋게 우아한테크코스(우테코) 서류와 1차 코딩테스트에 합격하여 프리코스를 진행할 수 있었습니다. 프리코스에서는 매주 과제를 해결하여 제출하는 방식이었습니다. 매주 과제를 해 zih0.tistory.com 이젠 말할 수 있다. 1 당시에 우테코 과제를 PR만 올리고 우형 사이트에 과제 제출을 안했었다..(그래도 개인적으로 연락해서 다음 과제는 계속 받을 수 있게 해주셨다. 점수는 0점 처리) 당시엔 글을 제대로 안읽은 내 자신이 너무 창피해서 이 사실을 숨겼고 그냥 떨어졌다고 말하고 다녔다. 이를 만회.. 2022. 9. 8.
GA, Hotjar를 이용해서 유저 행동을 분석해보자 Hotjar를 도입하게 된 이유 사이드 프로젝트를 진행하면서 프로토타입을 배포하고 인스타 광고를 태워봤다. GA를 봤을 때, 간단한 프로토타입이어서 페이지가 별로 없음에도 랜딩페이지에 비해 메인 기능을 가진 좌석 시야 비교 페이지의 page_view가 낮았다. 무언가 잘못되었음을 느꼈다. 그래서 좀 더 유저의 행동을 시각적으로 보고 싶었기에 Hotjar(핫자)를 도입해봤다. Hotjar에는 1. 유저의 화면을 녹화해주는 기능 2. 유저가 클릭한 곳을 히트맵으로 보여주는 기능이 있다. 이 기능들이 사이드 프로젝트의 UX를 개선하는데 큰 도움이 되었기에 기록한다. (세션타임 증가 및 좌석 시야 비교 페이지로의 전환) 수정하기 전 랜딩페이지 우리는 프로토타입에서 올림픽홀만 데이터를 수집하고 구현했지만, 앞으.. 2022. 6. 4.
drag & drop 파일 커스텀 훅 제작 블로그를 시작하고 2번째로 올렸던 react-dropzone 라이브러리의 useDropzone hook을 입맛에 맞게 직접 구현해봤다. https://zih0.tistory.com/2 React-dropzone react-dropzone은 input을 감싼 태그(div)에 getRootProps()를 지정해준다. div를 클릭했는데 어떻게 파일을 업로드하지? 라는 의문에 깃헙 코드를 찾아봤고 window.showOpenFilePicker() 라는 함수를 이용하여 구현하고 있었다. 감싼 태그(div)에 click, keydown 이벤트 발생 시 해당 함수를 실행시켜 파일 업로드를 받는다. 해당코드 Difference 나는 위의 과정을 기존 html의 input 태그와 label 태그의 for-id 속성을 .. 2022. 5. 22.
스윙하고 싶다. 1월, 친구의 창업 제안에 가슴이 뛰었다. 사업에 뜻이 있었다기보다는 내 손으로 서비스를 제작해보고 싶었고, 창업은 남의 일이라고만 생각했는데 막상 기회가 찾아오니 심장이 뛰었다. 그래서 SSAFY를 3일 듣고 그만뒀다. 1월부터 3월 정식런칭까지 사무실에서 미친 듯이 개발했다. 그리고 대망의 3월 1일, 우리 4명은 모두 밤새면서 서비스를 테스트하고 버그를 고쳤고 아침 9시에 배포를 완료했다. GA를 켜놓고 실시간 접속자 수를 보고 있었는데 100명, 200명... 1000명이 되자 서버가 터졌다.. 나중에 알게 된건데 백엔드 서버가 아닌 DB 서버가 터졌었다. 이렇게 동접이 많이 일어날 줄 몰랐었던 친구는 DB 서버를 프리티어 윗단계 인스턴스를 썼었고, 근본적으로 쿼리를 잘못 짜서 엄청 비효율적이게 .. 2022. 5. 16.
Lambda Function URLs https://aws.amazon.com/ko/blogs/korea/announcing-aws-lambda-function-urls-built-in-https-endpoints-for-single-function-microservices/ AWS Lambda Function URL 발표 – 단일 기능 마이크로서비스용 내장 HTTPS 엔드포인트 | Amazon Web Services AWS Lambda를 사용하여 탄력적이고 확장 가능한 애플리케이션을 구축하기 위해 마이크로서비스 아키텍처를 채택하고 있습니다. 이러한 애플리케이션은 비즈니스 로직을 구현하는 다수의 서버리 aws.amazon.com 2022년 4월 6일 (한국 4월 7일) Lambda Function URLs 의 일반 제공에 대해 알려드립니다... 2022. 4. 17.
yarn-berry에서 prettier plugin 적용법 https://toss.tech/article/node-modules-and-yarn-berry node_modules로부터 우리를 구원해 줄 Yarn Berry 토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다. toss.tech 위 토스 테크 블로그를 보고 yarn-berry를 적용해야겠다고 생각했습니다. yarn-berry의 장점은 위 블로그에 자세하게 나와있으니 한번 참고해보세요. :) yarn-berry로 마이그레이션 후, 이전에 적용되었던 prettier plugin들이 적용되지 않는 것을 깨달았습니다. prettier 이슈에 가보니 역시나 해당 이슈에 대한 내용이 있었습니다. 기존에는 node_modu.. 2022. 3. 16.
tailwindcss 클래스 정렬 플러그인 설치 npm install -D prettier prettier-plugin-tailwindcss 해당 플러그인은 tailwindcss 공식 Prettier 플러그인입니다. 클래스명을 tailwindcss가 정한 기준대로 나열해주니 한결 코드가 깔끔해지는걸 느낄 수 있습니다. formatting 적용 예시 ... ... 문서에 따르면 컴포넌트 레이어 -> 유틸리티 레이어 순으로 정렬시키고 있다고 합니다. margin이나 padding처럼 top bottom left right 특정 위치만 스타일을 주는 경우에, 전체적으로 스타일을 주는 margin이나 padding 뒤에 오도록 정렬합니다. ... 유틸리티 레이어들의 클래스명 정렬 순서는 박스가 하나 있다고 생각하고, 해당 클래스를 통해 박스가 레이아웃에.. 2022. 3. 13.
CRA Vite로 마이그레이션하기 (TS) The State of JS 2021이 공개되고 Vite의 만족도와 관심도가 압도적인 걸 보고 현재 CRA로 진행중인 프로젝트에 적용해보았습니다. https://2021.stateofjs.com/ko-KR/libraries/build-tools Vite Vite는 공식문서에 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고 작성되어 있습니다. 네이티브 ESM을 사용하여 빌드 시간을 단축시켰습니다. Vite는 처음에 전체를 번들링한 후 변경된 부분만 묶어 빌드를 빠르게 해줍니다. CRA 프로젝트에 Vite 적용하기 1. vite 설치 & package.json 수정 yarn add -D vite @vitejs/plugin-react vite-plugin-svgr 우선 vite와.. 2022. 3. 5.
n일 동안 보지 않기 팝업(모달) 구현 ( react-cookie ) 쿠키의 만료기간(expires) 옵션을 활용하여 "n일동안 보지 않기" 기능을 구현해봤습니다. 모달용 쿠키를 만들어 해당 쿠키가 존재하면 모달을 띄우지 않는 방식으로 간단하게 구현했습니다. 리액트에서 쿠키를 쉽게 접근하기 위해 react-cookie 라이브러리를 설치합니다. npm install react-cookie yarn add react-cookie 1. 모달 먼저 모달을 만듭니다. import React from "react"; import styled from "styled-components"; const Container = styled.div` width: 100vw; height: 100vh; display: flex; justify-content: center; align-items:.. 2022. 2. 27.

티스토리툴바