56

Typescript - Tuple(튜플)과 Enum 자료형

바닐라 JS에선 number, string, boolean, array, object의 자료형만 다뤘던 것 같은데 타입스크립트에선 새로운 자료형이 등장. 먼저 Tuple 자료형. 예전에 파이썬 처음에 입문할 때 잠깐 봤던 거 같기도 한데...아닌가... 찾아보니깐 있네ㅎㅎ 어쨌든 타입스크립트 버전으로 봐야지 뭐 먼저 튜플의 정의를 간단하게 하면 길이와 순서가 정해져 있는 array 정도로 받아들이면 될 것 같다. const color: [number, number, number] = [12, 32, 52]; 위와 같은 식으로 타입을 정해준다는 것은 길이가 3이고 number만 와야하는 배열이 되어야함을 알려준다. type HTTPResponse = [number, string]; const goodRes..

웹/Typescript 2022.07.18

TypeScript - 유니온 타입

타입스크립트는 변수의 타입을 지정해주는 게 기본이다. 하지만 역시나 개발자들은 자유도가 높은 걸 좋아한다. 타입을 한 가지가 아니라 여러가지로 설정해줄 수 있다. let age: number | string = 12; age = 23; age = "24"; | 기호를 써서 age에 올 수 있는 타입을 number 또는 string이라고 지정해줄 수 있다. 그래서 age 자리에 number를 넣거나 string을 넣어도 에러가 발생하지 않음. type Point = { x: number; y: number; }; type Loc = { lat: number; long: number; }; let coordinates: Point | Loc = { x: 1, y: 35 }; coordinates = { la..

웹/Typescript 2022.07.13

포트폴리오 웹사이트 클론코딩 회고록

https://www.youtube.com/watch?v=OPaLnMw2i_0&list=PL6QREj8te1P7gixBDSU8JLvQndTEEX3c3 어떤 스프린트를 해볼까하다가 Next를 좀 더 익숙하게 다뤄보고자 하는 마음에 클론코딩을 하나 더 해보기로 했다. 저번에 했던 포트폴리오 웹사이트인데 전혀 다른 구성과 디자인으로 해보았다. 일단 완성본부터 보자. 솔직히 유튜브 영상 썸네일이 너무 까리해보여서 선택하기는 했음. SPA(single page application)이고 페이지 구성은 -헤더와 푸터 -Hero 섹션 -Projects 섹션 -Technology 섹션 -Timeline 섹션 - Accomplishments 섹션 헤더와 푸터는 그렇게 어려운 부분이 없었다. 컴포넌트를 좀더 잘게 쪼개어 ..

javascript - async 활용 try catch 문

내가 통상 쓰던 async는 then과 catch를 결합하여 좀 길긴 하지만 한 줄로 끝내는 방식 then과 catch를 활용하는 방법 외에 다른 방법으로 async를 활용하는 방법을 배워서 이렇게 정리해봄. try { nonExistentFunction(); } catch (error) { console.error(error); // expected output: ReferenceError: nonExistentFunction is not defined // Note - error messages will vary depending on browser } 기본적인 형식은 이러함 사실 거의 똑같음 then 대신 try catch는 그래도 이런 느낌 const func = async () => { try ..

웹/Javascript 2022.07.11

7월 1주차 스프린트 회고 - 미국주식 주가조회 웹사이트

1일차 기획 단계. 1주일동안의 스프린트 주제를 정하는 거다보니 어디까지 해야될지 감도 잘 안 오고 어떤 걸 활용해야 될지도 잘 모르겠었다. 특히 API를 활용하여 웹사이트를 만들려고 컨셉을 잡았는데 비슷한 카테고리의 API임에도 각자 제공하는 정보도 너무 달랐고 고르는 데 애를 먹었다. 그래서 큰 주제만 정했다. 바로 '주식' 가장 관심이 가는 주제를 처음으로 스프린트 해봐야 의지가 잘 살아날 것 같아서 그렇게 정했다. 그래서 github이나 다른 public API들이 뭐가 있을까 찾아보다가 https://www.alphavantage.co/를 활용하기로 결정했다. 문서도 읽기 편해서 접근성이 좋았다. 그래서 여러 개의 데모 json 파일들을 둘러보며 마무리. 2일차 기획 + 삽 푸는 단계 json ..

Next.js 포트폴리오 만들기 회고

이 글은 '개발하는 정대리' 님의 Next.js 포트폴리오 사이트를 듣고 실습한 후에 작성하는 회고록입니다. https://www.youtube.com/watch?v=KvoFvmu5eRo&t=5717s 사용된 스택 - Next js - tailwind css - Notion API - LottieFiles (그림 삽입) 구현 목표 1. 홈페이지 - LottieFiles에서 Lottie 삽입하기 - Tailwind 라이브러리에서 헤더와 푸터 가져오기 - 포트폴리오 페이지와 링크 연결 - 헤더와 푸터에서 홈페이지 링크 연결 2. 프로젝트 페이지 - Notion에서 데이터 테이블 생성한 후 fetch로 데이터 가져오기 - 가져온 데이터를 컴포넌트 하나를 map하는 구조로 화면 생성 - 컴포넌트에 삽입할 데이터..

웹/Next.js 2022.06.30

React - useReducer 훅 알아보기

처음 보는 useReducer라는 훅이다. 당연히 공부할 때 공식 문서는 국룰이다. 강의를 들으면서 살짝 응용을 해보긴 했는데 공식문서에 나와있는 예시가 더 이해가 쉬운 듯하다. 오늘 처음 배워서 일단 쉬운 걸로 매커니즘을 이해하는 것이 우선이라고 생각한다. 일단 useReducer는 useState가 너무 많아지거나 복잡해질 때 이를 효과적으로 활용하기 위해 등장했다. 그래서 useState와 구조가 크게 다르지 않다. 위의 구조로 되어있다. useState에서 [원하는 변수, 변수조작함수]=useState(초기상태) 거기에 조금 더 추가된 것들이 있다. 앞에 구조는 똑같고 뒤에 reducer라는 애가 init라는 애가 새로 생겼다. 먼저 reducer가 어떻게 작동하는지 보자. 흔한 예시다. 버튼을 ..

웹/Javascript 2022.03.14

React - useEffect 훅 알아보기

useEffect는 예전에도 배웠었지만 기억이 조금 희미한 관계로 다시 정리해보려 한다. useState와 마찬가지로 정말 중요한 훅이라고 생각하기 때문. 일단 useEffect 공식문서 먼저 보자. useEffect를 알아보기 전에 effect라는 게 뭔지 알아보자. side effect나 effect라 불리는 녀석은 눈에 보이지 않는 행동들을 의미한다고 보면 된다. 예를 들어 데이터를 fetch하거나 구독을 설정하거나 리액트 컴포넌트의 DOM을 수정하는 것을 의미한다. 구독 설정 보이는데요? 그거는 데이터에 따라서 ui가 바뀌게 만들어놓은거고 멍충아 이제 아래 예시를 보자. useState처럼 리액트에서 그냥 불러오면 되고 useEffect 안에 저런 함수가 있다. useEffect 안에 있는 함수는..

웹/Javascript 2022.03.13

React - useRef 훅 알아보기

useRef라는 새로운 훅에 대해서 알아보자. reference할 때 ref를 따온 건데 어떤 걸까. const refContainer = useRef(initialValue); useState와 비슷하게 const 변수에 설정할 초기값을 넣어줌으로써 활용한다. (빈칸으로 둬도 됨) useRef의 예시이다. inputEl을 선언한 후에 input 값에 ref = {inputEl} 이라는 속성을 넣어준다. 그러면 우리는 이제 inputEl을 통해 이 input에 접근할 수 있게 된다. 단 .current 프로퍼티를 통해서. 예를 들어 input 박스 안에 'abcde'를 입력했다고 하자. 이 박스 안에 있는 값을 불러오기 위해 inputEl.current.value를 불러오면 된다. inputEl.curr..

웹/Javascript 2022.03.10

React - Portal 포털 알아보기

리액트를 배울 때 가장 많이 보이는 구조는 바로 ReactDOM.render(, document.getElementById('root')); 이다. HTML 파일에 id:'root'인 div에 을 렌더링해주고 리액트로 열심히 컴포넌트 만들고 지지고 볶고 하면서 에 넣어주는 구조이다. 여기서 의문점! 항상 root라는 div 에만 우리가 렌더링을 해야 하나? 당연히 아니다. 하지만 ReactDOM.render는 같은 페이지에서 복수로 일어날 수 없다. 예를 들어 ReactDOM.render(, document.getElementById('root')); ReactDOM.render(, document.getElementById('root2')); 이런 구조는 있을 없다는 것이다. 이를 해결해주는 것이 바로..

웹/Javascript 2022.03.10
728x90