프론트엔드 개발

모듈이란? 여러 기능들에 관한 코드가 모여있는 하나의 파일 모듈화는, 거대한 문제를 작은 조각의 문제로 나누어 다루기 쉽도록 하는 과정 모듈화를 통해 얻는 장점으로는, 파일들간에 중복적으로 발생할 수 있는 이름 충돌 방지 서로 간의 코드를 분리함으로써 모듈성 높여준다. 모듈간의 재사용성을 높여준다. 모듈화를 하지 않았을 때 발생하는 점 아래 예시에서는 html에서 module1.js 파일과 module2.js 파일을 만들어서 예시를 해보겠습니다. index.html module 1 function callMyName () { console.log("taenami"); } module 2 callMyName("taenami"); // taenami 위에서 module1.js 파일에서 callMyName 함..

지난 시간에 var, let, const를 비교하면서 공부를 하였는데, 이번 시간에는 TDZ란 무엇이고, 추가적으로 공부를 하기 위해서 작성하였습니다 1. TDZ란? TDZ란 변수가 선언되고 초기화되기의 범위를 TDZ(Temporal Dead Zone)에 있다고 합니다. var, let, const를 보면서 TDZ에 대해 배워보겠습니다. 2. var와 let, const 비교 1) var console.log(myName); // undefined var myName = "taenami"; var는 선언하기 전에 사용할 수 있습니다. 위와 같이 선언한 myName이라는 변수는 error가 발생하는 대신, undefined가 나오는데, var로 선언된 변수는 *호이스팅 되기 때문입니다. 2) let, co..

JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식이 있습니다. 함수 선언식과 함수표현식이란? 함수 선언식 (function declartion) 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a,b) { return a + b; } 함수 표현식 (function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a,b) { return a + b; } 함수 선언식과 함수 표현식의 차이 주요 차이점은, 호이스팅에서 차이가 발생합니다. 함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다. 함수 표현식은 별도의 변수에..

Could not find a declaration file for module 'superagent-promise'. 'C:/Users/taenam.DESKTOP-VMNKLBD/Desktop/managent/my-app/node_modules/superagent-promise/index.js' implicitly has an 'any' type. Try `npm i --save-dev @types/superagent-promise` if it exists or add a new declaration (.d.ts) file containing `declare module 'superagent-promise';` next js로 만든 프로젝트를 빌드할 때, 위와 같은 에러가 나왔는데, npm으로는 추가가 ..

어느 때처럼 개발 후 git으로 github에 있는 repository에 push를 하려고 하였으나 아래와 같은 에러가 나타났다. 어느 사이트에서 좋은 자료가 있어, 내용을 공유하고자 한다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access 'https://github.com/[..

next-iron-session을 공부하고 있는데, 하위 폴더 examples의 next-typescript 폴더만 clone하고 싶었어요. 이처럼 github에서 특정 폴더만 clone하고 싶어서 구글링을 하였습니다. 공부하는겸 공유하는겸 올렸어요 ~~~~ 출처는 마지막에 있습니다 ~ 1. git 연결 (1) 폴더만들기 mkdir next-typescript (2) 폴더로 이동 cd next-typescript (3) git init 하기 git init 2. git 저장소 연결 git remote add origin 저장소주소 git remote add origin https://github.com/vvo/next-iron-session.git 3. git sparse checkout 활성화 git ..

이번 시간에는 Next JS에 Typescript를 더하여 사용해 볼 것인데, 공식 홈페이지를 보며 따라 하였다. Typescript 예제 사용방법 - 첫 프로젝트를 시작할 때, npm 또는 yarn을 이용하여 사용할 수 있다. npx create-next-app --ts # or yarn create next-app --typescript - 기존 프로젝트가 있다면, tsconfig.json 파일을 루트 폴더 바로 아래에 위치시킨다. Next.js는 이 파일을 기본값으로 자동 구성한다. 사용자 지정 컴파일러 옵션과 함께 고유한 tsconfig.json을 제공하는 것도 지원한다. 그런 다음 터미널에서 'npm run dev' 또는' yarn dev'을 실행하면 다음과 같이 컴파일이 완료되었다고 확인할 수..

제네릭이란? Generic: 통상적인, 일반적인 라는 뜻을 가졌고, 타입스크립트에서 Generic은 재사용 가능한 컴포넌트를 생성할 때 사용되며, 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있다. Generic을 특징 다양한 타입을 받을 수 있기 때문에, 유연하다 컴파일 시에 타입 안정성을 보장한다. 재사용 가능하다. 제네릭 함수 (Generic Funtion) function PrintItems(args: T): T { console.log(args); return args; } const numberArray = [1,2,3,4,5]; const textArray = ["오늘", "즐거운 하루", "보내세요"]; const bool = true; const text = "오늘도 공부중입니다"; c..