본문 바로가기

강의 실습159

Hello TS World! 한 입 크기로 잘라먹는 타입스크립트 - Hello TS World onebite-typescript\section1 폴더 경로를 vscode 로 연 뒤에 터미널에서 node.js 패키지 초기화 명령어 입력. 이후 전부 enter 눌러 기본값으로 설정. - Terminalnpm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what the.. 2024. 6. 10.
타입스크립트의 동작 원리 한 입 크기로 잘라먹는 타입스크립트 - 타입스크립트의 동작 원리 - 이번 시간에 살펴볼 내용 타입스크립트는 어떤 과정을 거쳐 동작할까? 왜 그렇게 동작하는 걸까? - 대다수의 프로그래밍 언어는 어떻게 동작할까? 사람 - 프로그래밍 언어 / 컴퓨터 - 기계어 컴파일(Compile) : 프로그래밍 언어를 컴퓨터가 이해하기 쉬운 형태로 변환. 컴파일러 : 컴파일 하는 친구 * 컴파일러의 컴파일 과정 JavaScript(코드) → AST(추상 문법 트리) → 바이트 코드(컴퓨터가 실행) - 타입스크립트는 어떻게 실행될까? TypeScript 의 컴파일 과정 TypeScript → AST(추상 문법 트리) → 타입 검사(Type Checking) → 검사 성공 : AST를 자바스크립트로 변환 → JavaScrip.. 2024. 6. 7.
자바스크립트의 한계점과 타입스크립트 한 입 크기로 잘라먹는 타입스크립트 - 자바스크립트의 단점과 타입스크립트 - 개요 * 이번 시간의 목표 자바스크립트에는 정확히 어떤 한계점이 있는가? 타입스크립트는 이 한계점을 어떻게 극복하는가? 타입스크립트가 다른 언어 대비 갖는 차별점은 무엇인가? * 배경 지식이 하나 필요합니다 자바스크립트에 정확히 어떤 한계가 있고 왜 있는지 이해하기 위해서 앞으로의 타입스크립트 학습을 위해서 * 타입 시스템 모든 프로그래밍 언어는 타입 시스템을 가지고 있다. - 타입 시스템이란? 값들을 어떤 기준으로 묶어 타입을 규정할 것인가? (Number 타입 / Boolean 타입 / String 타입) 코드의 타입을 언제 검사할지? 어떻게 타입을 검사할지? → 이런 규칙들을 모아둔 체계 : 언어의 타입 관련된 문법 체계 .. 2024. 6. 4.
타입스크립트를 소개합니다 한 입 크기로 잘라먹는 타입스크립트 - 타입스크립트를 소개합니다 - 타입스크립트 창시자 : Anders Hejlsberg (앤더스 하일스버그) - MS 엔지니어, C#의 창시자. 2012년에 탄생. - 타입스크립트 = 오픈소스 - 타입스크립트의 인기 더는 피할 수 없는 대세가 되어버린 타입스크립트 STATE OF JS 2022 (https://2022.stateofjs.com) : 매년 전 세계 자바스크립트 개발자들을 대상으로 설문 조사하는 공신력 있는 단체. 2022년도 설문결과에 따르면 100명의 자바스크립트의 개발자 중 89명은 타입스크립트를 사용하고 있다. 취업시장에도 프론트/백엔드를 막론하고 자격요건과 우대사항에 타입스크립트 존재. 2023년 프로그래머스 설문에서 배우고 싶거나 배울 필요성을 느.. 2024. 6. 3.
개발 환경 준비하기 한 입 크기로 잘라먹는 타입스크립트 - 개발 환경 설정하기 Node.js 18v (LTS - Long Term Support : 장기적으로 지원되는 버전) 또는 20v 설치 설치링크 : https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org node.js 와 npm 이 잘 설치 되었는지 명령 프롬프트를 통해 확인. - CMD node -v     v20.10.0 npm -v     10.2.3 Visual Studio Code 설치 - 자신의 OS 에 맞는 버전 설치 설치링크 : https://code.visu.. 2024. 5. 21.
Open Graph 설정하기 Open Graph 라는 것은 meta 데이터에 해당하는 속성이다. 1. Open Graph 설정 (1) 썸네일 지정 (2) 사이트 이름 (3) 사이트 설명 - index.html ... ... 이후 빌드 후 배포한다. - CMD npm run build > emotion_diary@0.1.0 build > react-scripts build Creating an optimized production build... Compiled with warnings. [eslint] src\components\DiaryItem.js Line 30:17: img elements must have an alt prop, either with meaningful text, or an empty string for de.. 2024. 2. 16.
Firebase로 프로젝트 배포하기 DEPLOY2 프로젝트 배포 방법) - 서버 구축하기 - 배포 솔루션 Firebase 이용하기 구글 검색창에 'firebase' 검색 후 홈페이지 접속. 이후 시작하기 버튼 클릭하여 Firebase 콘솔 접속. 참고링크 : https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 이후 '프로젝트 만들기' 클릭. 프로젝트 이름 지정 후 체크박스 체크 후 '계속' 클릭. Google 애널리틱스 체크 해제 후 '프로젝트 .. 2024. 2. 15.
배포 준비 & 프로젝트 빌드하기 DEPLOY1 1. 프로젝트 타이틀 바꾸기 head 태그 내의 title 태그에 프로젝트 타이틀이 있다. public\index.html 에서 수정한다. - index.html ... 감정 일기장 ... 'React App' 에서 '감정 일기장'으로 수정한다. 사이트의 성격을 설명할 수 있는 요약을 작성하는 부분도 수정한다. 'Web site created using create-react-app' 에서 '나만의 감정 일기장'으로 수정한다. - index.html ... ... 마지막으로 언어를 'en' 에서 'ko' 로 수정한다. - index.html ... ... 페이지마다 타이틀이 바뀌도록 수정한다. 먼저 상세 페이지(Diary 컴포넌트) 부터 수정한다. - Diary.js ... // 타이틀 변.. 2024. 2. 14.
프로젝트 최적화 Optimization 최적화 확인 방법 2가지) - 정적 분석 : 코드의 상태를 보고 판단 - 동적 분석 : 프로젝트를 켜서 도구의 힘을 빌려 낭비되는 부분 찾기 ((React Developer Tools)개발자 도구의 Components 탭 - General - Highlight updates when components render 체크 활용) 1. Home 최적화 1) ControlMenu 컴포넌트 최적화 Home 화면의 헤더에서 화살표를 통해 날짜 변경시 필터와 버튼 부분이 렌더링 된다. Home 컴포넌트가 렌더링 되면 자식인 DiaryList 도 렌더링 되고 또 그 자식 요소인 ControlMenu 컴포넌트도 렌더링 된다. - DiaryList.js import React, { useEffec.. 2024. 2. 13.

티스토리툴바