TypeScript : 컴파일러 | tsc | tsconfig json 옵션

1. 컴파일러 (0) 프로그래밍 언어로 작성된 소스 코드 => 다른 프로그래밍 언어로 변 (1) 특정 프로그래밍 언어가 정적언어로서 정체성을 유지 가능한 도구 (2) 타입 검사 해줌 (3) 코드 변환 가능 (4) 최적화 2. tsc (1) 타입스크립트 컴파일러 (2) js 코드로 변환시킴 (3) 명령어 - tsc --init : tsconfig.json 생성 명령어 - tsc index.ts : index.ts를 컴파일 - tsc src/*.ts : src 디렉토리안에 있는 모든 ts 파일 컴파일 - tsc index.js --declaration --emitDeclarationOnly : @types 패키지를 위한 .d.ts 파일 생성 명령 [참고] Documentation - tsc CLI Optio..

• format_list_bulleted TypeScript
• · 2023. 12. 12.
• textsms

TypeScript : 개발환경 구축 ( Windows기반 )

1. TypeScript (1) JavaScript에 대한 기본적인 숙련도 (JS 기반 프로그래밍 언어) (2) 컴파일 시간에 변수의 타입 체크 (실행시간 x) 2. 개발환경 구축 ( Windows기반 ) (1) Node.js 설치 필수 - 설치되어있으면 그대로 활용, 재설치는 완전히 삭제 후 재설치 필요 (2) 설치 완료 후, powerShell에서 실행 확인 - 노드 설치 : nvm install [설치버전] (노드 버전 18 설치 추천) - 노드 버전 확인 : node -v - 활성화 : nvm use [설치한 노드버전] (예시 : nvm use 18.16.0) - 설치 확인 : npm -v (3) 명령 프롬프트 (cmd) - TypeScript 글로벌하게 설치하기 npm install typesc..

• format_list_bulleted TypeScript
• · 2023. 12. 12.
• textsms

리액트 : Modal 모달 팝업 외부 영역 클릭시 닫기 기능 + 배경 스크롤 막기

import React, {useEffect} from 'react'; import styled from 'styled-components'; import WriteNewFix from './WriteNewFix'; import {useDispatch, useSelector} from 'react-redux'; import {showPublicModal} from '../../redux/modules/publicModalSlice'; import PublicModal from './PublicModal'; function Modal() { const publicModal = useSelector(state => state.publicModal); const dispatch = useDispatch(); ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 11.
• textsms

리액트 : 파이어베이스 데이터 저장 후 홈 화면 리랜더링하기

새 글을 추가시, 파이어베이스에 데이터는 저장되는데 홈 화면에서 새로고침을 해야 데이터가 보이는 상황 1) WriteNewFix.jsx - dispatch(add(newData)); 새글 작성시 데이터 추가하는 부분에서 dispatch를 사용해서 리덕스로 상태값 변경요청 2) fixList.js import {createSlice} from '@reduxjs/toolkit'; const initialState = []; const listSlice = createSlice({ name: 'fixList', initialState, reducers: { setList: (state, action) => { return action.payload; }, addList: (state, action) => { ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 11.
• textsms

리액트 : 카카오 지도 Web API 사용하기

https://apis.map.kakao.com/web/ 1. 토큰발급 후 : Guide > 지도를 띄우는 코드 작성 > 전체 코드 확인 ( 필요에 맞게 수정해서 사용) 1) sript태그는 index.html 부분에 추가하였음 const {kakao} = window; 2) kakao 객체를 사용하기 위해, window 객체로부터 스크립트에서 로드한 kakao api를 가져와야하기에 상단에 작성 useEffect(() => { const container = document.getElementById('map'); const option = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new kakao...

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 8.
• textsms

[프로그래머스 | JavaScript] 시저 암호

(1) 내 코드 function solution(s, n) { let answer = ''; for (let i = 0; i 아스키코드 //str.charCodeAt(index) let ascii = s.charCodeAt(i); if (ascii >= 65 && ascii 90) { //대문자Z를 넘어가면 A로 ascii -= 26; } } else if (ascii >= 97 && ascii 122) { //소문자z를 넘어가면 a로 ascii -= 26; } } ////String.fromcharCode(아스키숫자) answer += String.fromCharCode(ascii); } return answer; } 1) 아스키코드 변환 문자 -> 아스..

• format_list_bulleted 코딩테스트
• · 2023. 12. 7.
• textsms