[TypeScript] - 기본다지기2(Complier Option)

이전 블로그에서 마지막에 TypeScrip의 컴파일러 옵션을 설치했다. (tsc --init) 설치가 완료되면 tsconfig.json이라는 파일이 하나 생성된다. 엄청 많은 주석들이 반겨준다. 여기서 필요한 설정만 관리할 수 있게끔 싹다 지우고 하나하나씩 설명해 보도록 하겠다. 1. ComplierOptions 컴파일에 관련된 모든 설정들이 들어있다. { "compilerOptions": { "target": "ESNext", // 컴파일 후 생성되는 js의 파일 버전(ESNext는 js의 최신버전) "module": "ESNext", // 모듈 시스템을 바꿀 수 있다. "outDir": "dist", // 생성될 js 파일들이 위치할 폴더 "strict": false, // 타입 조절을 엄격하게 할것..

• format_list_bulleted TypeScript
• · 2023. 10. 28.
• textsms

[Typescript] - 기본 다지기(실행 및 설치 방법)

🤔타입스크립트의 실행 방식? TypeScript 파일은 노드 환경에서 바로 실해되지 않는다. 노드는 자바스크립트 런타임 이기 때문이다. 그래서 TypeScript 파일을 JavaScript 파일로 컴파일 후 그 파일을 노드에서 실행하는 방식을 사용한다. 이 과정에서 모든 타입들을 검사 하고 오류가 없으면 타입과 관련된 모든 코드들은 사라진 체로 JavaScript 파일로 변경된다. ⚒️실행 환경 구축하기 1. NodeJs 패키지 초기화(npm init) 2. NodeJS의 타입들이 저장된 패키지 설치 ( npm i @types/node) -> TypeScript가 컴파일 하는 과정에서 NodeJS에서 제공하는 기본 기능(예 conosle.log)들을 이해시키기 위해 필요! 3. TypeScript Com..

• format_list_bulleted TypeScript
• · 2023. 10. 27.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 3차 개인프로젝트 - 회고록

배포링크 : https://www.mymovieapp.store 깃허브 : https://github.com/7jjin/My-Movie 🔥JinCha 리액트를 배운지 2주가 지나고 1주일 간의 짧은 개인 프로젝트 시간을 가졌다. 리액트를 처음 배웠고, 소규모 프로젝트인 만큼 어떤 새로운 아이디어를 도출해 개발하는 것 보단 클론 코딩을 통해 지금 까지 배운 리액트를 적용해보자는 마인드가 강했다. 여러 사이트가 있었지만 최근 취미를 두고 있는 영화와 관련된 사이트를 찾아봤다. 그 중 왓챠가 디자인이 맘에 들었고, 전체 적인 틀은 그대로 따라 하되, 내가 원하는 기능을 몇개 넣어봤다. ⚒️ 추가한 기능 (리액트X) 기능1 : 일별(주간) 박스오피스 정보 가져오기 + 포스터 처음 영화 사이트를 만드려고 할 때 ..

• format_list_bulleted 프로젝트
• · 2023. 10. 23.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - Redux toolkit

🤔 Redux Toolkit 이란? Redux Toolkit은 Redux를 더 사용하기 쉽게 사용하기 위해 만들어진 React의 도구이다. Redux의 문제점을 해결하기 위해 개발된 도구라고 생각하면 된다. 잠깐! Redux란?? props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리입니다. Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있습니다. 그러면 이런 Redux를 두고 Toolkit을 사용하는 걸까? Redux 단점 Redux 스토어 구성이 너무 복잡하다. Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. Redux에는 너무 많은 상용구 코드가 필요하다. 이러한 문제점을 해결해준다니 안 쓸 이유가 없다. 실제로 써봤는데 코드량도 줄어든..

• format_list_bulleted 포스코x코딩온
• · 2023. 10. 8.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 2차 팀프로젝트 - 회고록(feat. 최우수상)

배포 링크 : https://port-0-syos-2rrqq2blmiwyaxo.sel5.cloudtype.app/ 깃 허브: https://github.com/7jjin/SYOS 🔥SYOS( Share Your Own Space) 2차 프로젝트가 시작하고 주제를 정하는데 오랜 시간이 걸리지 않았다. 이것저것 말해보다가 요즘 "데스크 셋업" 을 꾸미는 사람들이 많길래 주제를 이쪽으로 정했다. SYOS는 나만의 데스크 셋업 공간과 정보를 공유하고 데스크 셋업을 추천받을 수 있는 웹사이트입니다. 아이디어가 참신하고 이전에 없던 내용이라 기대가 컷다. 처음으로 백엔드랑 연결해서 프로젝트를 하는 것이라 기대 반 걱정 반이였다. 초반에 컨트롤러를 어떻게 나누고 DB에는 어떻게 저장를 할까 고민을 하면서 시간을 보냈..

• format_list_bulleted 프로젝트
• · 2023. 10. 7.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React useEffect

🤔 useEffect 란? 모든 컴포넌트에는 생성되고 업데이트 되고 사라지는 생명주기를 가지고 있다. 이를 각각 Mount, Update,UnMount로 부른다. Mount : DOM이 생성되고 웹 브라우저 상에 나타남. Update : Props or State가 바뀌었을 때 업데이트 함. Unmount : 컴포넌트가 화면에 사라질 때. 이 처럼 컴포넌트의 생명주기를 역할을 하는 것을 useEffect()함수를 사용해서 조절할 수 있다. ✏️ 사용 방법 1. 기본 형태 useEffect(function,deps) ● function : 랜더링 이후 실행할 함수를 써준다. ● deps : function을 실행 시켜줄 조건을 써준다. 배열 형태로 사용한다. 이 값의 따라 useEffect가 실행될지 안될..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 28.
• textsms