본문 바로가기

전체 글48

커버 이미지 업로드 구현하기 ( react-dropzone + react-image-crop ) 커버이미지 1. 노션 2. ko-fi 개인 토이프로젝트를 진행하면서 유저 페이지에 커버 이미지를 넣으면 좋겠다고 생각했습니다. 그래서 커버 이미지 업로드하는 걸 구현해봤습니다! ko-fi의 커버 이미지 업로드 창입니다. 이 형태를 보고, 이전에 사용했던 react-dropzone 라이브러리를 쓰면 좋겠다고 생각했습니다. 사진 업로드 저도 ko-fi처럼 모달을 만들어서 이미지를 업로드하도록 했습니다. 1. 모달 만들기 React Portal을 이용해서 모달을 만들었습니다. 해당 내용은 이번 포스팅의 목적이 아니니까 스킵하도록 하겠습니다. 모달에 이미지를 업로드 시킬 Dropzone 컴포넌트와 사용자가 이미지를 크롭할 수 있는 ImageCrop 컴포넌트를 만들어서 import 시켰습니다. import Rea.. 2022. 2. 18.
Amplify 폰트 적용 안되는 경우 - failed to decode downloaded font: <url> 폰트를 다운받아 프로젝트 안에 넣고, 아래와 같이 설정해줬습니다. 로컬에서 돌렸을 때는 폰트가 잘 적용되었는데 배포를 하고 나니까 적용이 안되어 있더라고요??! @font-face { font-family: "Pretendard"; src: url("../font/Pretendard-Regular.woff2") format("woff2"), url("../font/Pretendard-Regular.woff") format("woff"), url("../font/Pretendard-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Pretendard"; src: url("../.. 2022. 2. 3.
React Debounce 검색 기능 요즘 검색 기능을 보면 대부분의 사이트에서 글자 입력마다 결과가 바로바로 보이는 것을 확인할 수 있습니다. 해당 기능을 단순히 input의 onChange마다 API 콜을 하게된다면 비효율적으로 많은 API 콜이 발생하게 됩니다. 특히 API 요청 수의 제한이 있거나 수에 따라 결제가 이루어진다면 해당 방식은 문제가 발생하게 됩니다. 아래는 코엑스를 입력했을 때, 글자 하나하나 API 요청을 하고 있는 모습입니다. Debounce 이를 해결하기 위해선 debounce라는 개념을 알아야합니다! debounce는 연속해서 함수를 호출 했을 때, 마지막 함수만 호출하도록 하는 방법입니다. // 검색어 입력을 받는 state const [searchAddress, setSearchAddress] = .. 2022. 1. 26.
랜딩페이지 UI 제작 일기 - 헤더 리서치 디자인 시안없이 혼자서 랜딩페이지를 만들어보려고 하니 UI가 막막했습니다. 그래서 여러 사이트를 보면서 어떻게 구성했는지 살펴보기로 했습니다. 헤더 우선 최상단에 보이게 되는 헤더부터 살펴보았습니다. 토스 PC 토스 소개 페이지 토스 채용 페이지 토스 페이먼츠 토스 블로그 토스의 서비스 별 페이지 및 블로그를 들어가보니 공통적인 규칙을 발견할 수 있었습니다. max-width : 1140px width: 92% margin: auto 그리고 마우스를 메뉴에 올려놓으면(hover) 해당 메뉴의 디자인이 아래와 같이 보이게 됩니다. 채용 페이지와 페이먼츠 소개 페이지 같은 경우, 메인에 이미지나 영상이 있습니다. 헤더의 배경을 투명하게 만들어 이미지와 영상이 더 잘보이도록 해놓은 것을 확인할 수 있었습니다... 2022. 1. 20.
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /package.json 새해를 맞아 맥북을 초기화 시키고 개발환경을 다시 맞췄는데, 이전에는 실행됐던게 아래와 같은 에러가 뜨면서 되지 않았습니다. 검색해보니 Node 버전을 v16으로 낮추면 정상작동하는 것을 알 수 있었습니다. 그래서 저는 16.13.0으로 버전을 수정하니 잘 작동하는 것을 확인할 수 있었습니다~ ref : https://stackoverflow.com/questions/69693907/error-err-package-path-not-exported-package-subpath-lib-tokenize-is-not-d Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the p.. 2022. 1. 9.
리액트 차트 그리기 - apexcharts 노마드코더 강의를 보고 ApexCharts.js를 정리하는 글입니다. https://apexcharts.com ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. apexcharts.com import ApexChart from 'react-apexcharts'; 일단 react-apexcharts 라이브러리를 import합니다. 차트의 타입으로는 line, area, colum.. 2021. 12. 20.
Github로 인생 관리하기 - 번역 Github로 인생 관리하기 인생에는 다양한 일이 발생할 때도 있고, 아무것도 일어나지않고 지루할 때도 있습니다. 조금이라도 자기가 바라는 방향으로 나아가기 위해 ‘일단 Issue를 써볼까’라는 레포 life를 작성해보는건 어떠신가요? 이것은 ‘엔지니어와 인생’ 커뮤니티의 Advent Calender2021 17일간의 일기입니다. 엔지니어와 인생은, 기술력을 인생의 베이스로 부르는 사람들의 커뮤니티입니다. 이 일이에서는 개발자라면 많은 사람들이 쓰는 github를 사용해 조금이라도 스트레스를 푸는 인생을 살자라고 생각하는 방법을 소개합니다. 유사한 케이스스터디로서 유사한 케이스로서 Backlog를 사용하여 가정 내 작업을 관리한 기사나 [인터뷰] 여름감사인사(お中元,오츄겡)검토 등, 가정내의 태스크 관리.. 2021. 12. 19.
우아한테크코스 4기 프론트엔드 - 프리코스 후기 이번에 운좋게 우아한테크코스(우테코) 서류와 1차 코딩테스트에 합격하여 프리코스를 진행할 수 있었습니다. 프리코스에서는 매주 과제를 해결하여 제출하는 방식이었습니다. 매주 과제를 해결해나갈 때마다 피드백을 주시고, 코딩을 할 때 어떤 점을 신경쓰면 좋은지 알려주셔서 많은 공부가 되었습니다. 덤으로 다른 분들의 PR을 보면서 많은 공부가 되었습니다. 과제는 숫자야구, 자동차경주, 자판기 문제로 아래 링크에 있습니다. https://github.com/woowacourse/javascript-baseball-precourse GitHub - woowacourse/javascript-baseball-precourse: 숫자 야구게임 미션을 진행하는 저장소 숫자 야구게임 미션을 진행하는 저장소. Contribu.. 2021. 12. 19.
숏링크 변환 구현 - Node.js 숏링크 쇼핑몰같은 곳에서 주소창을 보면 긴 url(롱링크, 이제부터는 롱링크라고 표현하겠습니다)을 확인하실 수 있을겁니다. 정보들을 url 파라미터나 쿼리 스트링으로 저장하여 관리하다보면 url 길이가 길어질 수 밖에 없습니다. 해당 url을 공유할 때 롱링크는 미관상 보기 안좋은 편입니다. 이를 위해 나온 게 숏링크입니다. 대표적으로는 bit.ly 서비스가 있습니다. + ) 링크를 변경하는 서비스의 경우 보통 마케팅 데이터도 같이 처리하는 곳이 많다고 들었습니다. 브랜치, 앱스플라이어 등등 플로우 숏링크 생성 롱링크를 서버에 전송 (POST) 서버에서 숏링크 코드를 생성 ( shortid 라이브러리 사용 ) 숏링크 코드, 롱링크, 숏링크에 대한 데이터를 DB에 저장 숏링크 반환 숏링크 접속 숏링크로 주.. 2021. 11. 20.

티스토리툴바