전체 글101 한 입 크기로 잘라먹는 타입스크립트 복습용 정리(2) 기본 타입 기본 타입(내장 타입)? : 타입스크립트가 자체적으로 제공하는 타입 ● 원시타입(Primitive Type) : 하나의 값만 저장하는 타입. - number 타입 : 양수, 음수, 소수, Infinity(양의 무한대), -Infinity(음의 무한대), NaN 포함. - string 타입 : " "(큰 따옴표), ' '(작은 따옴표), ` `(백틱, 템플릿 리터럴) - boolean 타입: true / false - null 타입 - undefined - 리터럴 타입: 딱 하나의 값만 포함하는 타입 // 리터럴 타입 예시 let numA: 10 = 10; // 이렇게 설정하면 이제 numA에는 10 이외의 값을 저장할 수 없게 된다. ★ 타입 주석 (type annotation) let 이름:string.. 2023. 7. 13. 한 입 크기로 잘라먹는 타입스크립트 복습용 정리(1) 개론, 시작하기 ● 타입스크립트 (TypeScript) 란? 유연하고 자유로워 버그 발생가능성이 높은 자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어 (자바스크립트 확장판!) 타입스크립트는 "점진적 타입 시스템 (Gragual Type System)"이라는 독특한 타입 시스템을 갖추고 있다. 점진적으로 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고, 타입이 정의되지 않은 변수들에 대해서는 초깃값을 기준으로 타입을 추론한다. (참고) 타입 시스템 비교 (참고) 타입스크립트 동작 원리 0. Node.js 패키지 초기화 npm init 1. @types/node 설치 npm i @types/node @types/node : Node.js 내장 기능들(내장 함수, 클래스 등)의 타입 정보.. 2023. 7. 6. CRA와 Vite 이번에 새 프로젝트를 하면서 Vite(비트; 프랑스어로 빠르다는 뜻)를 처음 사용해 보게 되었다. 좋다는 얘기는 많이 들었는데, 실제로 사용해 보니 정말 마음에 들어서 간단한 사용법 등을 정리해 보려고 한다. 먼저 기존에 사용하던 CRA에 대해 이야기해 보자면, CRA란 Create React App의 줄임말로 별도의 설정 없이 최신 빌드 설정을 할 수 있는 공식적으로 지원되는 방법이다. 편하게 프로젝트를 시작할 수 있는 좋은 방법이지만, CRA를 이용해 프로젝트를 진행하다 보면 개발 모드를 켜는데 종종 문제가 생기곤 한다. (컴퓨터 사양에 따라 문제가 없을 수도 있지만) 모드가 켜지는데 너무 오랜 시간이 걸리기도 하고, 분명 이전에 종료했는데도 포트가 사용 중이라는 문구가 뜬다거나 아예 켜지지 않는 경.. 2023. 7. 5. 멘토링 팁 메모장 📝 보호되어 있는 글 입니다. 2023. 6. 29. HTTP 단방향 통신으로 실시간 채팅 기능 구현하기 프로젝트 마감일이 일주일 좀 넘게 남았을 때, 채팅 페이지를 만들기 시작했다. 주제가 지역 기반 심부름 커뮤니티인 만큼 심부름 의뢰인과 심부름 수행인 사이에 공개적이지 않은 의사소통 공간이 필요했는데, 처음엔 비밀댓글 형식으로 만들려다가 댓글은 새로고침하지 않는 이상 자동으로 업데이트되지 않으니 잦은 상호작용이 필요한 경우 실시간 채팅방 형식이 더 알맞은 것 같다는 데 의견이 모였다. 문제는 실시간 채팅 기능을 어떻게 구현하느냐였다. 검색을 하고 자료를 찾아본 결과 보통 실시간 기능은 웹소켓 프로토콜을 이용하여 개발하는 것 같았다. 하지만 시간이 일주일 정도밖에 남지 않은 상황에서 새로운 기술을 공부하고 적용한다는 것이 서버 쪽도 클라이언트 쪽도 부담이 되었다. 특히 웹소켓으로 주고받은 채팅 내용을 데이.. 2023. 6. 28. useNavigate 와 Link 리액트로 개발을 하다 문득 useNavigate와 Link의 차이가 뭔지 궁금해졌다. 그동안 페이지 이동이 필요한 경우 익숙하다는 이유로 useNavigate를 주로 사용했었는데, 생각해 보니 Link도 비슷한 기능을 하는 것으로 알고 있는데 왜 굳이 두 가지 방법이 존재하는 걸까 의문이 들었다. 먼저, useNavigate는 리액트 라우터에서 제공되는 Hook이고, Link는 리액트 라우터에서 제공되는 Component이다. 리액트 라우터(React Router)란 싱글 페이지 애플리케이션을 만드는 리액트에서 화면 전환, 즉 라우팅을 위해 사용되는 라이브러리이며, 결국 두 가지 방식의 차이는 '훅이냐, 컴포넌트이냐.' 인 것이다. 공식 문서의 예제를 보면, import * as React from "r.. 2023. 6. 28. 초대장 서비스 [ 여기 여기 붙어라 👍 ] 기획 부트 캠프 수료 후 새로운 프로젝트를 시작했다. 이미 예전에 생각해 뒀던 게 있었는데, 여러 인원을 모아 프로젝트를 진행하기에는 좀 간단한 아이디어인 것 같아 백엔드를 공부하는 친구 한 명과 둘이서 만들어 보기로 했다. 이력서에 넣을만한 프로젝트가 될 수 있을지는 모르겠지만, 이번에는 꼭 그때그때 기록을 해 둘 생각이다. 최근 메인 프로젝트 관련 블로깅을 하고 있는데, 메모만 해 둔 내용이 상당히 많아 하나하나 기억해 내느라 고생하고 있다. 이번에 만들어볼 건 간단한 초대장 서비스이다. '친구들끼리 재미 삼아 공유하는 캐주얼한 초대장'이 컨셉이라고 할 수 있다. 좀 웃기긴 한데, 실제로 친한 친구들과 아래와 같은 초대권을 주고받으며 놀다가 나온 아이디어였다 ㅎㅎ 시중 초대장 관련 서비스들은 돌잔치, 청첩.. 2023. 6. 19. 웹에디터 이미지 업로드 훅 커스텀하기 (TOAST UI, 클라우디너리) 게시글 작성 페이지를 맡아 작업하던 중 이미지 업로드와 관련한 문제가 생겼다. 유저의 자유로운 사용성을 위해 웹에디터를 적용하기로 했는데, 이미지 파일을 직접 올리는 경우 base64 형식으로 인코딩 되어 이대로 DB에 저장했다가는 문제가 생길 수도 있었기 때문이다. 꼭 문제가 생기는 게 아니더라도 사진 하나 올리는데 이만한 길이의 문자열이 필요하다면 너무 비효율적이므로 해결 방법을 찾아야 했다. 참고로 사용한 에디터는 TOAST UI이다. 이 에디터를 사용한 이유는 1.이미지 파일을 업로드할 수 있고, 2.기본 UI가 직관적이며 깔끔하기 때문이다. 심부름을 의뢰하거나 의뢰받을 수 있는 커뮤니티이므로 우리는 이 사이트가 모바일에서 주로 사용될 것이며, 직접 찍은 사진을 올리는 경우가 많을 것이라고 생각했.. 2023. 6. 18. 이전 1 2 3 4 5 ··· 13 다음
