TypeScript의 꽃🌷이라 할 수 있는 타입추론(Type Inference)과 Generic Type의 부분 타입추론 문제 대해 알아봅니다. 들어가기 앞서.. 여러분은 모나드라는 개념을 알고 있나요? 어떤 개념을 비로소 깨닫는 순간을 ‘Aha moment’라 부르기도 하는데, 더글라스 크록포드의 말을 인용하자면, 모나드를 이해하는 Aha moment를 겪는 순간, 다른 사람에게 모나드를 설명할 수 없게 되는 저주에 걸린다고 한다. 그런데, 모나드만 그러한가? 세상의 많은 이해와 문제들이 비슷한 상황에 놓여 있다. 간략화한 적당한 비유를 통해 설명하는 게 처음 접하는 사람들에게 쉽게 느껴지겠지만, 대부분의 경우는 결국 불필요한 오해를 가져온다. 출처 원문 만약 이 글을 읽고 부분 타입 추론 문제와 이를..

우리가 해결해야 할 문제는 논리적인 가능성과 현실적인 가능성의 중간지대에 놓여있는 경우가 많다. 특히, 이런 상황은 개발직군과 비개발직군에서 극단적으로 치달을 가능성도 있으며, 좀처럼 협의가 이뤄지지 않는 상황이 생길 수도 있다. 각 영역의 가능성을 좁힐 수 있도록 하는 타협점이 어디인지 서로 협의할 필요가 있다. 일반적으로 개발직군은 엣지 케이스를 고려하여 논리적 결함은 없는지를 먼저 검토한다. 논리적으로 발생할 수 있는 가능성에서 발생하는 결함을 용납지 않는 경우가 많다. 반대로 비개발직군은 현실적인 가능성을 우선적으로 검토한다. 따라서 논리적으로 발생할 수 있는 가능성의 엣지케이스를 고려해야 하는 것에 잘 이해하지 못하는 상황이 일어날 수 있다. 제품을 개발할 때는 정책과 정책이 충돌하지 않도록....

기존 코드가 복잡하고 이해하기 어려울수록(코드를 만드는 데 더 많은 투자가 이루어질수록) 코드를 유지해야 하는 압박감을 더 많이 느낀다. 여기서 매몰비용의 오류가 발생한다. 매몰비용의 오류? 미래에 발생할 한계 편익과 한계 비용을 비교하여 의사결정을 해야 함에도 불구하고 사람들이 과거에 지출된 매몰 비용을 고려함으로써 비합리적으로 선택하는 현상 성급한 추상화를 피하라 공유하는 코드를 통해 매개변수를 전달하고 조건부 경로를 추가하고 있다면 이미 추상화가 잘못된 것이다. 추상화가 잘못된 것으로 판단된다면 가장 좋은 전략은 다시 중복코드를 생산해 무엇이 옳은지 보는 것. 즉, 잘못된 추상화에 대처할 때 가장 빠른 방법은 되돌아가는 것이다. 이것은 후퇴가 아니라 더 나은 방향으로 나아가는 길이다. 중복된 부분을..

shadcn이 얼마전 vercel팀에 Design Engineer로 합류했다는 소식이 들려왔습니다. 앞으로도 오픈 소스 커뮤니티를 위한 커스터마이징 가능한 UI 컴포넌트를 계속 만들어낼 것이라고 하며, 근시일 내 놀라운 무언가를 출시할 것만 같습니다. 현재 회사에서 활용중인 antd의 커스터마이징 어려움을 느낀 직후 이 프로젝트를 보고(당시 이 프로젝트는 완전 초기) Design System을 구축하는데 있어서 괜찮은 선택이지 않을까 생각했었는데, 발전되는 모습을 지켜보고 있자니 그때보다는 조금 더 기울어진 것 같습니다. 역사와 함께 알아보는 흐름 shadcn/ui는 눈에 띄지 않는 이름에도 지난 몇 달 동안 인기를 끌었습니다. 주요 이유로는 스스로를 라이브러리라고 부르기를 거부하기 때문인데요, 모든 C..

interface를 써야한다. type을 써도 괜찮다. 이에 관한 의견 차이가 약간 있었고, 이에 타입 선언 규칙을 정리했다. 그래서 무엇을 쓰는게 좋은건가? 나는 사실 Declaration Merging이 필요한 경우를 제외하곤 Type alias만을 사용하는 쪽이긴 한데 깊게 들어가서 차이를 비교해보니, interface를 적절히 사용함으로써 개념적인 정리와 이해에 대한 장점이 있었고 (프로젝트마다 다르겠지만)성능적인 이점도 있는 것을 알게 되었다. 결론은.. "객체" 에 대해서 interface를 선호하고, Inheritance 관련한 부분 이외엔 type을 사용하는 쪽으로 정리했다. 😄 이 글은 그 정리에 대한 결과이다. Primitive types 💡 Primitive types을 사용할 때 t..

TypeScript의 Type은 어떻게 나누어지는가? 1. Static 정적 유형은 "컴파일 타임" 또는 "프로그램을 실행하지 않고" 이미 알고있는 유형을 의미 user-defined type(function, tuple, array, object ...), primitive type(string, number, boolean ...) 으로 세부 분류. 2. Generic Generic은 단일 데이터 형식이 아닌 다양한 데이터 형식으로 작업할 수 있는 구성 요소를 만드는 데 사용 3. Decorators 클래스 선언, 메서드, 속성, 접근자 및 매개변수에 첨부할 수 있는 특수한 데이터 유형 let any: any let number: number = 5 let never: never = any // ❌ ..

프로그램 언어의 다형성(多形性, polymorphism; 폴리모피즘)은 그 프로그래밍 언어의 자료형 체계의 성질을 나타내는 것으로, 프로그램 언어의 각 요소들(상수, 변수, 식, 오브젝트, 함수, 메서드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질을 가리킨다. 출처 - 위키백과 다형성(컴퓨터 과학) 다형성(Polymorphism)은 프로그래밍 언어 이론에 깊이 뿌리를 둔 개념이며 다양한 종류가 있습니다. 이 글에서는 타입스크립트의 함수를 두 종류의 다형성으로 바라보고 생각합니다. 즉, 인수 타입에 따라 다르게 동작하는 함수(i.e. ad-hoc polymorphisms)와 다양한 수의 인수를 취하는 함수(i.e. parametric polymorphisms)입니다. Union type 만..

올해 서른, 내년도 서른이겠지만 지금까지의 신년 계획은 실패로 끝날게 뻔할 금연뿐이었지만 올해의 시작은 새로운 다짐과 마음가짐으로 시작하고 싶었다. 하지만 많은 시간을 고민해보아도 미래의 모습이 잘 상상이 되지 않았고, 그렇게 제대로 그려지지 않은 미래에 대한 실현 의지도 생기지 생기지 않을 것 같았고, 한편으로는 나이를 들어감에 어떤 책임감과 압박감에 염려가 되기도 했다. "풀을 베는 사람은 들판의 끝을 보지 않는다" 프랑스 속담에 있는 말으로, 농부가 풀을 벨 때 들판의 끝을 보면 '이 넓은 들의 풀을 언제 다 베지?'라는 푸념과 함께 의욕을 잃는다는 것이다. 이번 계획을 통해 의욕을 잃지 않고 즐거운 마음으로 풀을 베는데 집중하며, 앞으로 다가올 낯선 시간을 보다 현명하게 이용할 수 있는 밑바탕이 ..

올해 6월 중순 새로이 시작한 사이드 프로젝트 팀원들과 서비스 오픈을 앞두고 1박 2일간의 나들이를 다녀왔다. (처음 계획을 전달받았을 때 서비스 오픈을 앞두고 1박 2일간의 해커톤인 줄 알고 굉장한 기대를 했다...) 결론부터 말하자면 오랜만에 MT와 같은 느낌으로 바람도 쐬고, 맛있는것도 먹으며, 좋은 시간을 보내며 리프레시할 수 있었다. 그리고 같은 프론트엔드 개발자 분과의 대화를 통해 다시 무언가를 깨닫게 된 의미 있는 시간이었다. 팀원분은 나와 마찬가지로 디자이너에서 전직한 1년차 프론트엔드 개발자이며, 현시점에서 각 분야의 일한 기간이 나와는 정확히 반대인 케이스다. 지난밤, 프로젝트 진행 간 어려운 부분이 있으시다며 다음날 카페에서 라이브 코딩으로 알려주실 수 있는지 물어보셨다. 거절할 이유..

Next.js의 개발 서버는 기본적으로 3000 포트에서 실행되도록 설정되어 있습니다. 개발 환경에 따라 다른 포트에서 개발 서버를 실행해야 경우가 종종 생기는데 이를 변경할 수 있는 방법을 알아봅시다. 1. 직접 변경하기 // package.json { ... "scripts": { "dev": "next dev -p 3005", "build": "next build", "start": "next start" } ... } -p 옵션을 통해 뒤에 입력된 포트로 개발 서버가 실행됩니다. 2. 환경변수 사용하기 // package.json { ... "scripts": { "dev": "next dev -p ${PORT-3000}", "build": "next build", "start": "next st..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. 지난 글(TypeGuards와 Narrowing)에서 언급했던 Opaque 타입에 대해 알아보겠습니다. 소개 우선 타입스크립트의 타입은 기본적으로 유형의 구조가 동일하다면 호환 가능합니다. 코드와 함께 살펴보겠습니다. type Username = string; type Password = string; Username 타입과 Password 타입은 모두 string이기 때문에 타입스크립트에서는 호환 가능합니다. 개발자는 다른 개념으로 각각의 타입을 생성했지만 타입스크립트는 그..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. Narrowing과 type guards Narrowing은 type guards를 사용해 type을 좁혀 더 정확하게 만드는 과정입니다. type guards는 type의 범위를 좁히는 데 도움을 주는 특별한 검사 방식을 말합니다. 이해가 쉽도록 예제로 풀어보겠습니다. 여기, 천 단위 구분 기호를 추가해주는 함수가 있습니다. export function withCommas(value: number) { const formatter = new Intl.NumberFormat(..

개발자로서 Git은 매우 중요한 부분입니다. Git과 상호작용 하지 않고 하루를 보낼 수는 없습니다. 일반적으로 터미널에서 Git을 실행하거나 Sourcetree와 같은 GUI도구를 사용합니다. 우리는 Git의 명령어를 기억하고, 작성하는 것이 어렵고 소모적인 것을 알고 있습니다. GUI툴을 사용한다면 Git 명령어를 외울 필요가 없어 정말 쉽게 사용할 수 있습니다. 직관적으로 보이고 또 강력한 부가기능들도 포함되어 있습니다. 하지만 터미널에서만 Git을 실행하는 것을 좋아하는 fan이 분명 존재합니다. 터미널 fan을 위한 효율적인 어떤 방법이 없을까요? 우리는 Git Alias를 설정해 Git 명령어를 별칭으로 저장해 Git을 좀 더 쉽고 빠르게 사용할 수 있습니다. 그럼 Git Alias는 어떻게 ..

개발자로서 업무를 진행하다 보면 자연스럽게 markdown을 접하고 사용하게 됩니다. 마크다운은 텍스트 기반의 경량 마크업 언어로 쉽고 간단하게 서식이 있는 문서들을 작성하는데 용이합니다. README.md는 물론 issue template, pull request template를 만들어 사용하기도 하고 어떤 분들은 TIL과 스터디 자료를 정리해 개인 리포지토리에 저장하기도 합니다. 저 또한 마찬가지로 클린코드 스터디를 진행하며 md파일로 정리했던 섹션이 있었습니다. 저는 마크다운으로 작성하며 내용이 많아지니 미리 보기에 대한 니즈가 있었습니다. VS Code 내에서 관련 Extension이 있는지 찾아보고 사용해보니 그 외의 기능들도 경험이 좋아 추천하고자 글을 작성합니다. Markdown All i..

github의 pull request는 draft 상태로 올릴 수 있는 기능이 존재합니다. * private 리포지토리는 유료 플랜이 필요 Draft 상태의 PR은 작업중인 상태로 Merge를 막을 수 있습니다. 언제, 어떻게 사용할 수 있을까요? 현재 회사에서는 Draft PR을 다음과 같은 규칙을 만들어 활용하고 있습니다. 1. topic으로 다른 개발자와의 의견 조율 및 소통이 필요할 때 2. 변경사항이 많아 리뷰가 힘들어짐을 방지하기 위해 PR을 나누어 올릴 때 순차적으로 Merge하기 위해 즉, PR을 올리는 행위는 테스크가 완료되어 코드리뷰를 하고 Merge하기 위한 것으로 정리할 수 있었기에 git-action은 그 시점에서 필요한 것이고, Draft PR에서도 git-action이 동작하는..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. 2022.07.02 - [개발/type-challenges] - 타입스크립트 타입 정복: 내장 유틸리티 타입을 만들어보자 지난 글에서는 타입스크립트에 내장되어 자주 사용하게 되는 유틸리티 타입들을 직접 구현해보는 문제들을 소개해 드렸습니다. 어떠셨나요? 이 문제들은 type-challenges의 쉬움~보통 난이도에 해당하는 유형이었습니다. 지난 글에서 살펴본 기본적인 keyof, in, Indexed Access Types와 더불어 설명하지 못했던 Conditional Typ..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org keyof operator keyof operator는 객체 유형의 키의 문자열 또는 숫자 리터럴 조합을 생성합니다. type Point = { x: number; y: number }; type P = keyof Point; // 'x' | 'y' in operator JavaScript에서 in..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. type-challenges는 TypeScript의 공식 사이트의 playground를 통해 이루어집니다. 그리고 타입을 통해 정확하게 요구사항을 타입을 구현해 냈는지 테스트도 진행합니다. 아래는 가장 첫 문제, 몸풀기에 해당하는 hello-world 문제입니다. TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or Ja..

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 잠재적인 버그를 피할 수 있는 장점이 있습니다. 또, 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 기술할 수 있어 코드의 가독성을 높이고, 예측 가능하게 합니다. 이는 곧 프로젝트의 유지보수성의 향상에도 도움이 될 수 있습니다. 게다가 IDE는 이를 분석해 자동완성 기능까지 제공하니 생산성의 향상에도 도움을 줍니다. TypeScript를 처음 접한다면, 타입을 선언하는 데에 어려움이 다소 존재할 수 있습니다. 컴파일 에러를 피하기 위해 any로 지정하는 경우도 종종 생깁니다. any는 앞서 말한 TypeScript의 장점을 모두 상쇄합니다. 최대한 쓰지 않으려고 하는 게 중요하겠죠. 타입을 선언하는데에 어려움이 있는 것은 타입 시스템에 ..

프로젝트 진행 간 아래와 같은 문제가 발생한 경험이 있나요? 1. 같은 커밋에 위치했는데 A 개발자는 프로그램이 문제없이 동작하고, B 개발자는 프로그램이 에러가 발생한다. 2. 변경사항을 pull 받고 install 했더니 코드의 변경사항은 없는데 package-lock.json파일의 변경사항이 있다. 너무나 익숙하지만 어떤일을 하는 녀석인지 대부분 모르고 지나가는 package-lock.json에 대해서 내용을 정리해 글을 작성합니다. package.json 그리고 package-lock.json 기본적으로 package.json은 npm에 패키지를 배포하기 위해 반드시 필요한 "문서"입니다. 또한 프로젝트의 의존성 관리를 위한 명세라 할 수 있습니다. npm 버전 5 이상에서 npm install을..

여느날처럼 프로젝트를 둘러보며 둘러보며 코드를 구석구석 청소하고 있었다. 그러던 중 약 10개월 전 작성 된 코드중 정상적으로 동작하지 않는 코드를 발견했다. 해당 코드의 commit history가 남아있어 PR을 살피며 이부분은 명백히 프로그램이 개발자의 의도에 따라 동작하지 않는 버그로 판단을 내릴 수 있었다. 나는 당연하게도 본래 의도한 대로 동작할 수 있도록 코드를 정리하며 해당 버그를 수정했다. 오랜시간 보고되지 않고 숨어있던 버그를 해결한 것에 안도감과 뿌듯한 마음이 들었다. 그런데 버그를 수정한지 며칠 후 해당 부분이 제대로 동작하지 않는다는 리포트가 들어왔다. 여지껏 그렇게 동작하던 것이 프로그램의 버그였고 지금에서야 정상적으로 동작하는것이 맞다. 하지만 사용자 입장에서는 그간 사용해왔던..

개발직군에 대한 관심도가 날이 갈수록 증가하며 사내에서도 다른 분야의 직원들이 생기기 시작했다. 누군가는 취미로, 만들고 싶은 아이템을 실현하기 위한 도구로 또는 커리어의 전환을 위해 각자의 목적을 가지고 있었다. 개발팀 내에서는 이들을 위해 사내 개발 스터디 그룹을 만들고 지원하고자 하는 계획을 세웠다. 그 첫걸음으로, 회의를 통해 '개발자가 되고싶은 히치하이커를 위한 안내서'라는 큰 주제 아래에서 각자 준비해 발표하도록 했다. 나는 디자이너에서 전환한 비전공자 출신 프론트엔드 개발자다. 그 과정에서 힘든점도 있었고 누구보다 그 상황을 이해할 수 있을 거라 생각했다. 그렇기에 나와 같은 상황의 동료를 이끌어 줄 수도 있다는 생각에 기대와 설렘이 있었고 한편으로는 걱정이 되기도 했다. 발표를 준비하며 출..

진행 중인 프로젝트 내 비슷한 로직을 처리하는 Modal UI가 10개가량 존재하는 것을 발견했다. 자연스럽게 컴포넌트로 추출되었을 법 한데 무엇 때문인지 각각 존재하고 있었다. // 초기 컴포넌트의 형태 type Payload = { foo: string; bar: string; baz: string; }; type WithRequestComponentProps = {}; const WithRequestComponent = ({}: WithRequestComponentProps) => { const { register, handleSubmit } = useForm(); const onSubmit: SubmitHandler = (payload) => { // 서버로의 요청 }; return ( ); };..

JavaScript의 변수를 선언할 수 있는 방법으로 var, let, const가 있습니다. 각 키워드로 선언한 변수들은 어떤 차이가 있는지 알아보겠습니다. var ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었습니다. var 키워드로 선언된 변수에는 어떤 특징이 있을까요? 중복 선언이 가능하다 var 키워드로 선언한 변수는 중복 선언이 가능합니다. 어떤 말인지 코드로 살펴보겠습니다. 예제와 같이 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 가능합니다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작합니다. 반면, 초기화문이 없는 변수 선언문은 무시됩니다. 따라서 만약 동일한 이름의 변수가 이미 선언된 것을 모르..

이직 후 새로운 회사에서는 이전까지 프로젝트 일정을 핑계 삼아 제대로 하지 못한 Pull Request(PR)와 코드 리뷰 문화에 익숙해지기 시작할 때쯤 느꼈던 불편한 부분들과 이를 어떻게 개선하고자 하였는지에 대해 경험을 공유합니다. 어떤 문제가 발생했나? 제목에만 의존적인 PR 거의 대부분이 제목에만 의존적인 PR로 제목과 함께 변경된 코드들로만 내용을 Reviewer가 추측하고 있었고, 간혹 리뷰를 직접 말로 주고받고 하다보니 중복되는 Comment가 발생하기도 했다. 개발자는 코드로 말한다지만... 코드가 자신을 설명할 수 있다면 정말 좋겠지만, 문제영역과 깊숙하게 연관되어 있는 내용에 대해서는 코드만으로 설명이 어려울 때가 많았다. 오랜 기간 진행되어온 프로젝트로 각자 담당하고 있는 파트가 존재..

지난 포스트에서 잠깐 다루었던 콜 스택(call stack)에 대해 알아보고, 조금 더 나아가 자바스크립트는 한 순간 하나의 작업만 처리할 수 있는 단일 스레드 기반의 언어임에도 불구하고 동시에 많은 작업을 수행할 수 있는지 알아보겠습니다. 스택과 큐 콜 스택에 알아보기 전 스택과 큐 자료구조에 대해 간단히 알아보고 넘어가겠습니다. 스택은 출입구가 하나인 데이터 구조입니다. 순서대로 a, b, c 데이터를 넣었다면 꺼낼때는 반대로 c, b, a순서로 꺼내게 됩니다. (FILO, First In Last Out) 큐는 양쪽이 열려있는 파이프를 떠올리면 됩니다. 종류에 따라 양쪽 모두 입/출력이 가능한 큐도 있으나 일반적으로 큐에 순서대로 a, b, c 데이터를 넣었다면 꺼낼때는 a, b, c 순서대로 꺼내..

this와 execution context 자바스크립트의 혼란스러운 개념 중 하나로 this키워드에 대해 알아보도록 하겠습니다. 더불어 실행 컨텍스트(execution context)도 간단히 알아보겠습니다. 실행 컨텍스트 또한 중요한 개념이기에, 다른 글에서 더욱 자세히 알아보겠습니다. this와 실행 컨텍스트, 이 두가지 개념을 함께 이해하면 더이상 this가 혼란스럽지 않을 것 입니다! 들어가기 앞서 실행 컨텍스트에 대해 먼저 간단히 알아보겠습니다. 실행 컨텍스트(execution context)란? 자바스크립트 엔진은 코드를 실행하기 위해서 실행에 필요한 여러가지 정보(변수, 함수, 스코프, this)들을 알고 있어야 합니다. 실행에 필요한 정보를 형상화하고, 구분하기 위해 자바스크립트 엔진은 이..

strict mode란? ECMAScript5(ES5)에서 소개된 strict mode(엄격 모드)에 대해 알아보겠습니다. 자바스크립트의 엄격 모드는 일반 코드와는 다른 시멘틱을 가지고 있기 때문에, 이를 지원하지 않는 브라우저에서는 엄격모드와 비-엄격 모드의 코드가 다른 방식으로 동작할 것입니다. 엄격 모드와 비-엄격 모드의 코드는 공존할 수 있습니다. 따라서 선택적으로 사용하는 것이 가능합니다. 엄격 모드에서는 평범한 자바스크립트의 시멘틱에 몇 가지 변경을 일으킵니다. 1. 기존에 조용히 무시되던 에러들을 throwing 합니다. 2. Javascript 엔진의 최적화 작업을 어렵게 하는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일 코드보다 더 빨리 작동할 수 있습니다. 3..

스코프(Scope, 유효 범위)란, 간단히 말하면 특정 장소에 변수를 저장하고 나중에 그 변수를 찾기 위해 정의된 규칙입니다. var foo = 0; function myFunction() { var foo = 100; console.log(foo); } myFunction(); // (1) console.log(foo); // (2) (1)의 결과와 (2)의 결과는 각각 어떻게 될까요? 결과는 (1)은 100이 되고, (2)는 0이 됩니다. 예시에서 전역에 선언된 변수 foo는 어디에서든 참조할 수 있는 반면에 함수 myFunction 내에서 선언된 변수 foo는 함수 내부에서만 참조할 수 있고 외부에서는 참조할 수 없습니다. 이러한 규칙을 스코프라고 합니다. 만약 스코프가 없다면 같은 식별자로 쓰인 ..

함수란 어떤 작업을 수행하기 위한 로직을 정의 한 코드블록 입니다. 일반적으로 반복 되는 작업을 함수로 정의하고 재사용하여 효율적인 프로그래밍을 가능하게 합니다. 이외에 객체의 메소드, 정보 은닉, 클로저 등의 기능을 수행 할 수 있습니다. 1. 함수 정의 자바스크립트에서 함수를 정의하는 방법은 3가지가 있습니다. 1. 함수 선언문 2. 함수 표현식 3. Function 생성자 함수 1-1 함수 선언문 함수 선언문은 일반적으로 함수를 정의 할 때 사용되는 방법입니다. function 키워드와 함께 함수명, 매개변수(parameter), 함수 몸체로 이루어져 있습니다. // 함수 선언문 // // 함수명은 해당 함수를 구분할 수 있는 식별자(Identifier)로 // 함수 선언문에서 함수명은 반드시 필요..