study/프론트엔드🔯

프로젝트를 진행하면서 국가별 도시 이름 데이터를 가져오는 API가 필요했다. 여러 API들을 사용해보고 countriesnow API를 선택했는데, 여러 API들을 사용해보면서 느낀점을 정리해보려고 한다. 1. REST Countreis API https://restcountries.com/v3.1/all 국가별 정보들을 제공하는 API로 API key를 따로 발급받을 필요가 없다는 큰 장점이 있다. 하지만, 내가 원하는 국가별 지역 데이터들을 제공하지는 않았다. 국가의 여러 정보들을 원한다면 쓰기 좋을 것 같다. 2. OpenCage Geocoding API https://opencagedata.com/ OpenCage - Easy, Open, Worldwide, Affordable Geocoding ..

개요 프로젝트에서 글쓰기 기능이 있어서 텍스트 에디터를 찾아보다 TOAST UI Editor를 알게 됐다. NHN에서 만든 건데 다른 에디터들에 비해 완전 쉽고 옵션도 편하게 설정할 수 있어서 강추한다~! TOAST UI에는 텍스트 에디터 말고도 다른 컴포넌트들도 많아서 앞으로 자주 사용하게 될 것 같다. 사용법 1. 설치 npm install --save @toast-ui/react-editor 2. Editor import '@toast-ui/editor/dist/toastui-editor.css'; import { Editor } from '@toast-ui/react-editor'; const SignatureWritePage = () => { return ( ); }; export default..

개요 방학 동안 진행할 프로젝트에서 React Query를 쓰게 되었다. 현업에서는 거의 필수라는 말을 듣고 이게 대체 뭐길래?! 싶었다. 프로젝트 프론트 리더분이 저번에 내가 만든 UMC 미션을 보시고, React Query를 쓰면 따로 로딩 화면을 만들지 않아도 된다고 하셔서 더 기대가 된다. React Query란? React Query는 데이터 캐싱, Fetching, 동기화를 쉽게 해주는 라이브러리다. Redux 단점 1. 장황한 Boilerplate 코드 Redux 기본 원칙을 만족시켜야 하기 때문에 코드가 너무 장황해진다. Redux-toolkit을 써서 좀 줄였긴 하지만 여전히 하나의 API 요청을 처리하기 위해 여러 개의 Action, Reducer를 만들어야 한다. 2. API 요청을 ..

프론트엔드 배포는 EC2로만 해봤었는데 이번에 UMC 미션하면서 netlify를 알게 되었다. vercel과 비슷한 사이트인 것 같은데 정적 사이트를 아주 쉽게 배포할 수 있어서 앞으로 많이 사용할 것 같다. https://www.netlify.com/ 100GB까지 무료로 사용할 수 있고, Build도 300분까지 무료라서 AWS의 과금이 두려운 사람에게 완전 추천한다.🤩🤩 회원가입하고 로그인하면 아래와 같이 뜰 건데, 깃허브 리포지토리와 연동해주면 된다. 원하는 브랜치를 선택해주고, 아래에서 빌드 설정을 해주면 된다. 자동으로 빌드를 해주기 때문에 따로 vscode에서 npm run build를 해줄 필요가 없다. 프로젝트 폴더가 안에 들어가있다면 Base directory를 설정해주면 되는데, 나는..

개요 프론트엔드 개발을 하다 보면 쿼리 파라미터 값을 추출해야 할 때가 있다. URLSearchParmas() 방법만 알고 있었는데 UMC 웹 스터디를 진행하면서 useLocation을 알게 되었다. 방법1. useLocation()사용 useLocation은 현재 페이지 경로 정보 객체를 반환하는 react-router-dom 함수다 search 속성에 쿼리 파라미터 정보가 있으니 이를 사용하면 된다. import React from 'react'; import { useLocation } from 'react-router-dom'; function MyComponent() { // useLocation 훅을 사용하여 현재 경로 정보를 가져옴 const location = useLocation(); /..

ChatGPT가 나오고 코드 짜기 진짜 편하다~~ 한 지 0.3초 된 거 같은데 Vercel에서 무려 리액트 컴포넌트를 만들어주는 인공지능을 만들었다. 2023년 9월 15일에 출시했는데 난 방금 알았다.. 아직 Private Alpha 버전이라 쓰고 싶으면 대기해야 하고 2주 정도 뒤에 메일이 오면 사용할 수 있다. https://v0.dev/ v0 by Vercel Generate UI with simple text prompts. Copy, paste, ship. v0.dev 아직 승인메일이 안 와서 직접 사용해보진 않았지만 다른 분들이 하신 걸 보면 정말 엄청난 것 같다. 여름쯤 figma dev mode Anima 플러그인 보고도 놀랐던 것 같은데 사실 피그마 디자인부터 잘 생각하고 만든 거 아..