Frontend
-
CRA + Typescript + EsLint, Prettier 프로젝트 설정하기Frontend/React 2023. 8. 18. 15:29
매번 프로젝트마다 빠질 수 없는 프로젝트 설정 잊어버리지 않기 위한 기록이다. CRA + Typescript 프로젝트 설치하기 npx create-react-app my-app --template typescript ESLint 설정하기 npm init @eslint/config 명령어 입력 후 아래 몇 가지 프로젝트 설정을 선택하면 ✔ How would you like to use ESLint? · problems ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · react ✔ Does your project use TypeScript? · Yes ✔ Where does your co..
-
[HTML5] Canvas API 기초 2 - 마우스로 선 제어하기Frontend/Javascript 2023. 8. 5. 16:47
지난 포스팅에서는 캔버스 기초로 선을 캔버스에서 원하는 위치에 그리고, 선의 스타일을 조절했다. 이번에는 마우스를 통해 캔버스에 그림을 그리고 다양한 옵션을 적용해보자! (0, 0)에서 시작해 마우스 움직임에 따라 직선그리기 마우스가 움직일 때 mousemove 이벤트 리스너만 추가해서 만들 수 있다. beginPath()를 해주는 이유는 매번 마우스가 움직일 때마다 path에 다른 색상을 적용하기 위해서다. See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen. 마우스 눌렀을 때 움직임에 따라 선 그리기 일반적으로 그림판에 그림을 그릴 때처럼 마우스를 누르고 움직였을 때 선이 그려지도록 했고, 마우스에서 손을 떼고 마우스가 캔버스..
-
[HTML5] Canvas API 기초 1 - 선그리기Frontend/Javascript 2023. 8. 4. 23:02
HTML5 기본 태그인 Canvas API에 대해 알아보자. 서점에 나와있는 캔버스 관련 책은 굉장히 두껍게 나와있는데 그만큼 파면 팔수록 어려운 분야이다! 캔버스는 javascript를 통해 제어할 수 있으며 애니메이션, 게임 그래픽, 데이터 시각화 등 다양한 방면으로 활용할 수 있다. 오늘은 캔버스의 기초 사용 방법을 알아보자! 2d로그릴지, 3d로 그릴지 선택하기 보통은 2d로 많이 활용하지만 3d로도 활용할 수 있다. HTMLCanvasElement.getContext(contextType) contextType 2d webgl, bitmaprenderer (3d) 채워진 정사각형 그리기 여기서 중요한 것은 사각형을 그리기 전에 캔버스의 가로, 세로 넓이를 지정해줘야 한다. fillRect(x,..
-
[React] 프론트엔드에서 PWA 적용하기Frontend/React 2023. 7. 31. 16:36
내가 회사에서 개발에 참여한 첫 번째 웹 사이트는 mobile-first로, '주요 사용자가 모바일을 통해 유입한다.'는 가정하에 앱처럼 만들어졌다. 네이티브 앱과 비교했을 때 웹은 오프라인 지원이나 푸시 알림 등 지원되지 않는 단점이 있다. 이러한 단점을 극복하기 위해 나온 것이 바로 Progressive Web App, PWA이다. 별도의 네이티브 앱 개발 없이 웹 기술만으로도 네이티브 앱이 가진 장점을 제공할 수 있다. Progressive Web App 웹은 검색이 쉽고 많은 사람들이 어플리케이션을 설치하는 것을 꺼리는 경향이 있는데 PWA는 쉽게 링크로 공유할 수 있고, 또 홈화면에 추가도 빠르게 가능하다. 네이티브 앱은 오프라인 상태에서도 캐시된 데이터를 통해 동작 가능하며,이를 통해 빠르게 ..
-
[Javascript] 오늘 날짜 구하기, 오늘 날짜 전까지 조회하기Frontend/Javascript 2023. 7. 27. 10:17
오늘 날짜 구하기 자바스크립트의 Date 객체를 통해 오늘 날짜 구하기 const today = new Date() // console.log(today); // Thu Jul 27 2023 09:27:40 GMT+0900 (한국 표준시) 오늘 날짜를 쉽게 구할 수 있지만, 원하는 형식으로 포맷팅이 필요해보인다. 오늘 날짜 전까지 조회하기 🌟 생년월일은 과거 날짜만 유효하기 때문에 생년월일 유효성 검사에 적합하다. 생년월일을 YYYYMMDD 형식으로 받아 이 날짜가 오늘 날짜 전인지 확인하는 함수를 만들어보자! const isDateBeforeToday = (dateString: string) => { const today = new Date(); const year = parseInt(dateStrin..
-
[프론트엔드] 카카오 소셜 로그인 연동하기(with REST API)Frontend/React 2023. 7. 10. 13:23
카카오 소셜로그인 연동하는 방법에 대해 알아보겠습니다. 카카오 디벨로퍼 설정하기 카카오 디벨로퍼에서 내 어플리케이션 > 어플리케이션 추가하기 .env에 카카오 디벨로퍼에 설정된 앱키(REST API 키) 복사하기 // .env REACT_APP_KAKAO_CLIENT_ID=REST_API_APP_KEY_넣기 3. Redirect URI 등록하기 // local에서 사용할 Redirect URI http://localhost:3000/oauth/kakao/login 로그인 버튼 클릭 시 인가코드를 받기 위한 url로 이동 카카오 인증서버로 인가코드를 받기 위한 요청을 보내기 // 인가코드를 받기 위한 요청 주소 export const KAKAO_AUTH_DOMAIN = 'https://kauth.kakao..
-
[Toy Project 기록하기 11] 프로젝트를 마치며Frontend/Projects 2023. 3. 22. 14:38
한겨울에 시작했던 프로젝트가 어느새 따뜻한 봄이 되고 마무리되었습니다. 프로젝트를 회고하며 제가 느낀 점을 몇 자 적어보았습니다. 프로젝트를 돌아보며 돌잡이 프로젝트는 클라이밍에 관심이 있는 사람들이 모여 소통할 수 있는 커뮤니티입니다. 클라이밍 관련 커뮤니티가 암벽 등반 갤러리를 제외하고 거의 없는 데다가 갤러리는 익명으로 글을 쓸 수 있어 욕설이나 비방 글도 많이 올라와서 이용하기에 불편한 점이 많았습니다. 그래서 이메일 인증한 유저만 사용할 수 있는 클린한 클라이밍 커뮤니티를 만들고자 이 프로젝트를 시작했습니다. 아무것도 없던 빈 폴더에 백엔드 환경 설정부터 시작하여 프론트엔드에서 데이터를 가져와 화면에 보여주고 제대로 작동되기까지 자그마치 2달이라는 시간이 걸렸습니다. 사실 어마어마한 기능이 있는..
-
[Toy Project 기록하기 10] React-Query로 무한스크롤 구현하기Frontend/Projects 2023. 3. 21. 16:00
서버에서 데이터를 가져올 때 모두 한꺼번에 가져올 수 없기 때문에 필요한 데이터 개수만큼 잘라서 보여주는 '페이지네이션'이 필요합니다. 보통 필요한 개수를 정하고 상황에 맞춰 정렬 기준이 조건에 추가됩니다. 이러한 페이지네이션에는 오프셋 기반 페이지네이션과 커서 기반 페이지네이션이라는 두 가지 방식이 존재하는데요. 두 방식의 개념과 각각의 특징에 대해 알아보겠습니다. Offset-based Pagination DB의 offset 쿼리를 이용해 페이지 단위로 구분하여 특정 페이지에 대한 데이터를 가져옵니다. 일반적으로 구글이나 커뮤니티 게시판에서 자주 다루는 페이징 처리 방식입니다. 장점 페이지에 대한 데이터를 빠르게 검색할 수 있으며 페이지 이동이 쉽습니다. 단점 페이지 이동 시마다 데이터베이스에서 전체..