행복을 담는 블로그

any, unknown, union 타입 1. any 타입 : typescript에서 어떤 타입의 값이든 다 저장할 수 있는 슈퍼 타입 object 타입과 같은 최상위 타입이라고 생각할 수 있다. ex) let anything: any; anything = 5; // 숫자 타입으로 초기 설정 anything = 'Hello'; // 문자열 가능 anything = { id: 1, name: 'John' }; // JSON 형태로 가능 🧐 any를 typescript에서 써도 되나요? typescript를 사용하는 이유는 프로그램의 타입 안정성을 확보하기 위함! 근데 any 타입을 사용하면, 타입을 지정하는 것이 아니기 때문에 코드 안정성과 유지 보수성을 저해할 수 있다..! ..

타입을 왜 제대로 알아야 하는가? 📌 변수란? : 프로그래밍 언어에서 데이터를 저장하는 공간 변수에 저장되는 데이터는 여러가지 타입을 가진다. 숫자, 문자열, 논리값, 배열, 객체 등 ✅ 타입을 잘 못 사용하는 경우? 잘못된 타입을 사용하면 오류가 발생한다. 컴파일 타임에 오류가 발생하지 않고, 실행 시간에 발생하여 오류 발생 시점을 찾기가 어렵다. ✅ 타입 안정성과 코드 품질 타입 안정성이란 예상한 타입대로 코드가 동작함을 보장한다. 타입 안정성이 높을수록 코드 품질이 좋아지며 오류를 줄 일 수 있다. 코드 안정성이 향상되며, 테스트와 디버깅 시간을 줄일 수 있다! ✅ 원활한 협업에도 도움! 타입을 명확하게 명시하면 코드의 가독성이 높아진다. 다른 개발자들이 이해하기 쉽고, 유지보수가 용이하다. 기본 ..

전역 상태 관리 최근 몇 년 사이 많은 회사에서 redux와 redux-toolkit으로 전역상태 관리를 하였는데, 최근 더 쉬운 방법 중 하나인 Zustand가 급부상을 하고 있다. npm trend npm trend 분석을 해보면, 최근에 zustand의 사용량이 redux-toolkit 과 비슷하게 급부상 중이며, 그 뒤로 recoil, jotai, valtio 등이 있다고 한다. 그렇다면 zustand는 어떤 장점때문에 많은 유저들이 redux에서 zustand로 바꾸고 있는걸까? Zustand https://zustand-demo.pmnd.rs/ 공식문서를 확인해보자. Zustand는 redux와 같은 flux 아키텍처로 동작한다. 즉, redux에서 했던 기능들이 zustand에서 가능하다고 ..

내일 발표를 앞두고 있는 아웃소싱 팀 프로젝트가 거의 마무리가 되어 가고 있다... 내일 발표 준비를 위해 피그마에 각자 구현한 기능들을 정리해 보았는데 블로그에도 기록해보고자 한다. 아 일단 이번 프로젝트가 어떤 프로젝트인지 먼저 간단히 소개를 하자면, 한마디로 " 유튜버 광고 분석 서비스 " 이다. 즉, 광고주가 제품을 유튜버에게 제공하기 위해서 어떤 유튜버를 고를 것인가에 대해서 고민을 할텐데, 이 서비스를 통해 유튜버의 구독자수, 최근 영상의 조회수, 댓글수, 좋아요수 등을 한 눈에 보기 쉽게 분석할 수 있는 서비스이다! 내가 이번 프로젝트에 맡은 부분은 채널 분석을 할 수 있는 디테일 페이지를 만드는 부분이었다. 원래는 그래프 부분에서 방사형 그래프로 분석을 하면 보다 효과적으로 분석 정보를 나..

패키지 설치하기 yarn add react-router-dom 페이지(원래 단일 페이지) 컴포넌트 작성 -> 다중 페이지 Router.js 파일 생성. router를 구성하는 설정 코드 작성 (ex : redux 할 때도 설정 파일을 따로 만들어 주입함) App.jsx import 하고(2번) 적용 : 주입 페이지 이동 테스트 원래 페이지 localhost:3000/여기 router라는 주소가 들어간다. React router hook useNavigate : 특정 버튼을 눌렀을 때, 다른 페이지로 이동하도록 하는 기능을 제공한다. html의 a 태그랑 비슷하다 /* pages > Works,jsx */ function Works() { const navigate = useNavigate(); retur..

이번 아웃소싱 프로젝트를 진행하기 위해서는 youtube api를 불러와서 사용해야하는데, 이를 위해서는 api key가 필수로 필요하다. 하루에 불러올 수 있는 할당량이 정해져있기 때문에, 할당량이 다 차면 하루가 지난 후 받을 수 있다. 1. 구글 계정을 생성하고 로그인한다. https://cloud.google.com/ 구글 클라우드 사이트로 들어간다. 2. 새 프로젝트를 시작한다. 프로젝트 명을 적고 새 프로젝트를 만든다. 3. 검색창에 youtube data api를 치고 Youtube Data API v3를 선택한다. 4. Youtube Data API v3 사용을 클릭한다. 5. 아래 순서와 같이 API 키 생성을 한다. 6. 이렇게 키 생성이 완료 된 것을 확인 할 수 있다. 7. API ..

📌 Axios란? : node.js와 브라우저를 위한 Promise 기반 http 클라이언트 쉽게 말해, http를 사용하여 서버와 통신하기 위해 사용하는 패키지이다. Axios 설치하기 yarn add axios Json-server 설정하기 db.json 파일을 만들고, 기본 데이터를 설정한다. yarn json-server db.json --port 4001 ▶️ 기존 서버가 아닌 db를 확인 할 수 있는 새로운 포트를 열겠다. 4000 포트를 여는 명령어가 너무 길기 때문에, package.json 파일에서 "serve" 라는 새로운 명령어를 지정해준다. "scripts": { "serve": "json-server db.json --port 4001" } yarn serve ▶️ 4000 포트를..

const [letters, setLetters] = useState(null); const fetchLetters = async () => { const { data } = await axios.get("http://localhost:4000/letters"); setLetters(data); }; useEffect(() => { fetchLetters(); }, []); 컴포넌트가 렌더링이 처음 됐을 때, 비동기 함수가 실행되기 이전에 map이나 filter 함수가 먼저 호출된다. 따라서 letters에 아무 데이터가 들어있지 않는다면, 해당 데이터를 읽어 올 수 없으므로 오류가 난다. async보다 map 또는 filter 함수가 먼저 돌아간다. Error가 난 LetterList로 들어가보면, f..