블로그

이정환 Winterlood

[마감되었습니다] 한 입 크기로 잘라먹는 타입스크립트 사전 등록 이벤트

안녕하세요 이정환입니다 😃강의 출시와 함께 이벤트가 마감되었습니다.관심가져주시고 신청해주신 800여분의 여러분께 진심으로 감사드립니다.강의는 아래 링크로 보러가실 수 있습니다(현재 얼리버드 30% 할인 중입니다)https://inf.run/9ZRN 강의 소개유튜브 영상으로 보기한 입 크기로 잘라먹는 시리즈의 2번째 강의 한 입 크기로 잘라먹는 타입스크립트는배워도 배워도 자꾸만 헷갈리는 타입스크립트를 개념 이해와 함께 제대로 배워보는 강의입니다.복습을 위한 핸드북 제공강의를 들으면서 함께 보시거나, 강의 수강 이후 복습하시기 용이하도록강의 내용과 100% 일치하는 핸드북을 제공합니다.커리큘럼 소개🌱 Section 1. 타입스크립트 개론기술을 잘 이해하려면 그것이 어떤 배경에서 탄생했는지 알 필요가 있습니다.1섹션 에서는 타입스크립트의 탄생 배경을 살펴보며 타입스크립트가 해결하고자 했던 문제가 무엇이고 타입스크립트가 어떤 특징을 가지고 있는지 자세히 살펴봅니다.🌱 Section 2 ~ 3. 타입스크립트 기초 다지기가장 기본적인 타입스크립트의 문법을 살펴봅니다.동시에 타입스크립트가 말하는 타입이란 정확히 무엇인지그리고 타입들이 서로 어떤 관계를 맺고 어떻게 상호작용하는지 살펴봅니다.🌱 Section 4 ~ 6. 다양한 타입스크립트 문법 살펴보기함수 타입 정의, 함수 오버로딩, 인터페이스, 클래스 등타입스크립트의 다양한 기능과 문법을 살펴봅니다.🌱 Section 7 ~ 9. 마법사 처럼 타입을 직접 조작하기타입스크립트의 가장 독특하면서도 강력한 기능인 타입 조작 기능에 대해 살펴봅니다.제네릭, 인덱스드 엑세스 타입, 맵드 타입, Keyof 연산자, 조건부 타입 등아주 다양한 타입스크립트의 타입 조작 문법을 살펴봅니다.🌱 Section 10. 유틸리티 타입 이용하기타입스크립트가 기본적으로 제공하는 여러가지 유틸리티 타입들에 대해 살펴봅니다.유틸리티 타입을 지금까지 배운 지식을 이용해 직접 구현 해봅니다.🌱 Section 11. 리액트에서 타입스크립트 사용하기(보너스)이대로 끝나면 아쉽죠? 그래서 보너스 섹션으로 준비했습니다.아주 간단한 투두 리스트를 함께 만들어보며리액트 프로젝트에 타입스크립트를 적용하는 방법에 대해 살펴봅니다.닫는 말마지막으로 신규 강의를 끝까지 마무리할 수 있도록 계속해서 응원해주신기존 수강생 분들과 독자 분들 그리고 주변 지인 분들께 모두 감사드립니다.또 이 글을 보고 관심을 가져주신 모든 인프런 유저 여러분께도 감사드립니다.

프론트엔드･타입스크립트･프론트엔드･자바스크립트･typescript･javascript

우리가 코딩을 못하거나 포기하는 이유 (팩폭주의)

1. 시작도 못하거나 시작했다 하더라도 그냥 안해서 2. 어떤 프로그램을 만들지 모르고 남들이 하니까 막연하게 해서 3. 한 종류의 코딩언어를 단기간에 끝내려고 해서 4. 많은 종류의 코딩언어를 알기만 하고 깊이 안 파고들어서 결론 이런 사람들 대부분(본인포함)은 의욕만 앞서다가 지쳐서 코딩을 포기함

웹 개발･html･css･javascript･웹개발･java･코딩･작심삼일･귀차니즘･게으름･팩트폭력

자바스크립트 그리고 소프트웨어 개발

저는 "리액트 훅" 강의를 만든 아저씨입니다. 자바스크립트가 이렇게 강력해졌다는 사실에 감탄했습니다. 그리고 제 생각을 옮겨보려고 합니다. 어쩔 수 없이 제 나이와 인터넷 역사가 나옵니다. 꼰대로 보이기는 싫지만 변천사이니 옛날 얘기를 조금 하겠습니다. 김대중 정부는 전국 인터넷 망을 깔았습니다. 그 후 PC방이 생겼고 저는 이메일 주소라는 걸 만들었습니다. 이메일 주소 만들기가 한시간 수업 주제였습니다. 모든 기관과 기업은 홈페이지를 만들었습니다. 홈페이지는 단순했습니다. 그림 몇개 띄우고 정보글을 올렸습니다. 홈페이지와 소프트웨어는 다른 개념이었습니다. 소프트웨어는 사람들이 일을 할 때 쓰는 도구였습니다. 홈페이지는 홍보나 검색할 때 잠깐 보는 매체였습니다. 그런데 지금은 홈페이지가 곧 소프트웨어가 되었습니다. 스프링 프레임워크에서는 "클라우드 네이티브 소프트웨어" 라는 용어를 만들었습니다. 진정 클라우드에서 작동하는 소프트웨어입니다. 그냥 정보를 보던 웹 페이지가 일을 하는 도구인 소프트웨어를 완전히 대체했다는 이야기로 이해됩니다. 아직 저도 이런 얘기가 익숙하지 않습니다. 그래도 웹페이지에서 도는 게 로컬 컴퓨팅으로 돌리는 것 보다 뭔가 약하거나 느릴거라는 의심이 듭니다. 하지만 유명 데이터 분석 도구를 만드는 Palantir 가 만든 모든 소프트웨어는 웹에서 동작합니다. 이런 변화가 가능했던 이유는 자바스크립트의 발전 때문입니다.  리액트 강의를 만들면서 자바스크립트가 ui 프로그래밍을 엄청 쉽게 만들었다는 것에 감탄했습니다. 회사들은 소프트웨어를 점점 클라우드화 시키고 있습니다. 유지보수, 배포, 과금 처리가 쉽기 때문입니다. 앞으로 자바스크립트 발전이 더 기대됩니다.  

프론트엔드･js･react･javascript

아셀

자바스크립트, 더 이상 고민하지 마세요!

웹 페이지부터 서버, 애플리케이션까지 뚝-딱만들 수 있는 만능 프로그래밍 언어, 자바스크립트!​하나라도 해당되신다면 꼭! (｡•̀ᴗ-)✧✓ 개발자로의 취업을 앞두신 분✓ 코딩/웹 개발을 시작하는 분✓ 자바스크립트의 개념을 탄탄히 쌓고 싶은 분✓ 다양한 프로젝트로 실력을 늘리고 싶은 분> 딱 맞는 자바스크립트 강의 보러 가기 <한 눈에 보는 추천강의 PICK내가 찾던 '그' JS 강의 살펴보기(1) JS Best 강의(2) 왕초보를 위한 강의(3) 한 번에! 올인원 강의(4) 가볍게 시작하는 무료 강의​"제일 많은 수강생에게 인정받은 강의로 시작하고 싶어요"(1) 인프런이 자신있게 소개하는 최고의 JavaScript 강의제대로 파는 자바스크립트 (JavaScript)✓ 평점 4.9점✓ 수업 80개 (13시간 3분)✓ 수강생 2,142명가장 최신의 자바스크립트에 대해 배우고 싶다면? 학습을 위해 복붙 가능한 실습 명령어+코드까지코어 자바스크립트✓ 평점 4.8점✓ 수업 8개 (1시간 57분)✓ 수강생 3,868명2시간만에 JS 핵심을 빠르게 배우고 this, 콜백, 스코프 등에 대한 동작원리 학습하기시나브로 자바스크립트✓ 평점 5.0점✓ 수업 118개 (19시간 56분)✓ 수강생 426명자바스크립트의 동작원리를 '제대로' 배우고 how가 아닌 why에 집중하는 정석 강의인프런에서만 만날 수 있는 맞춤형 자바스크립트 강의!왕초보를 위한 강의, 올인원 강의,그리고 가볍게 시작하는 무료 강의까지더 많은 강의로 나에게 딱 맞게 시작할 수 있으니까더 이상 고민하지 마세요! ദ്ദി˶ˊᵕˋ˵)>> 내게 맞는 강의 보러 가기 <<

웹 개발･자바스크립트･JS･코딩･프로그래밍언어･웹개발･프론트엔드･javascript･프로젝트･개발자･무료강의

Reclusive Newbie

[타입스크립트 코리아 : 기초 세미나 4강]의 TSLint 설정 업데이트 내용

해당 영상이 오래되어 TSLint 설정 방법이 현재와 다르게 변경되었습니다.TSLint는 더 이상 유지보수되지 않기 때문에 ESLint로 변경해야 합니다.ESLint는 TSLint보다 다양한 플러그인과 규칙을 제공하며, 더 나은 유지보수가 되고 있습니다.ESLint를 설치하려면 터미널에 간단한 명령어를 입력해야 합니다.ESLint 설치yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser환경 설정환경 설정을 위해서는 공식 매뉴얼에서는 .cjs 확장자로 설정 파일을 만들 것을 권장합니다.그러나 이렇게 설정하면 Visual Studio Code에서 경고가 발생하는 경우가 있으니 .json 확장자로 설정하는 것이 좋습니다..eslintrc.json 파일을 만들고, 내용을 아래와 같이 작성하면 됩니다.$ touch .eslintrc.json{ "root": true, "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "ignorePatterns": ".eslintrc.js", "parserOptions": { "project": ["./tsconfig.json"] }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:@typescript-eslint/strict" ] }이렇게 하면 더 이상 TSLint를 사용하지 않아도 되며, ESLint의 다양한 기능을 활용할 수 있습니다. 

웹 개발･tslint･eslint･typescript･linting･lint･javascript･node.js

Javascript 의 bind vs apply 차이와 용도?

1. bind 용도:-.함수의 this 값을 영구적으로 바꿉니다.-.새로운 함수를 반환합니다.-.나중에 실행할 함수를 미리 준비할 때 유용합니다. *.문법: const boundFn = originalFn.bind(thisArg, arg1, arg2, ...);*.특징:-.즉시 실행되지 않습니다.-.반환된 함수는 나중에 호출할 수 있습니다.-.부분 적용(partial application)을 구현할 수 있습니다. 예제:const person = { name: '한종인', greet: function(greeting) { console.log(`${greeting}, 저는 ${this.name}입니다.`); } }; const greetFn = person.greet.bind(person, '안녕하세요'); greetFn(); // "안녕하세요, 저는 한종인입니다. 2.apply 용도:this를 사용하여 메서드를 호출할 때, 메서드 내부에서 this가 올바르게 동작하도록 합니다.*.문법: const boundFn = originalFn.bind(thisArg, arg1, arg2, ...);*.특징:-.함수를 즉시 실행.-.두 번째 인자로 배열을 받습니다.예제:const person = { name: '한종인', greet: function(greeting, arg1) { console.log(`${greeting}, 저는 ${this.name}입니다${arg1}`); } }; person.greet.apply(person, ['안녕하세요', '!!']);// 바로 출력 => "안녕하세요, 저는 한종인입니다!!"*** 차이점*.실행 시점:-.bind: 새 함수를 반환하며, 즉시 실행되지 않습니다.-.apply: 함수를 즉시 실행합니다.*.인자 전달:-.bind: 인자를 개별적으로 전달합니다.-.apply: 인자를 배열로 전달합니다.*.반환 값:-.bind: 새로운 함수를 반환합니다.-.apply: 원본 함수의 실행 결과를 반환합니다.*.사용 상황:-.bind: 이벤트 리스너나 콜백 함수에서 this를 고정할 때 자주 사용됩니다.-.apply: 배열을 함수의 인자로 사용하거나, 함수를 즉시 실행하면서 this를 변경해야 할 때 사용됩니다. 바닐라 JS 사용 시 참조하시고, Happy coding...!!

웹 개발･bind･apply･javascript･js

fetchModule을 만들어 보았다

const fetchModule = { async get(url) { const response = await fetch(url) .catch(error => { alert('관리자에게 문의주세요') }) if (!response.ok){ alert(await response.text()) return } return await response.json() }, async getAndParam(url, request) { const queryParam = this.query(request); const response = await fetch(url + '?' + queryParam) .catch(error => { alert('관리자에게 문의주세요') }) if (!response.ok){ alert(await response.text()) return } return await response.json() }, async post(url, request) { const response = await fetch(url, { method: "POST", headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('input[name="_csrf"]').value }, body: JSON.stringify(request) }).catch(error => { alert('고객센터에 문의해주세요.') }) if (!response.ok){ alert(await response.text()) return } return await response.json() }, async put(url, request) { const response = await fetch(url, { method: "PUT", headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('input[name="_csrf"]').value }, body: JSON.stringify(request) }).catch(error => { alert('고객센터에 문의해주세요.') }) if (!response.ok){ alert(await response.text()) return } return await response.json() }, async delete(url, request) { const response = await fetch(url, { method: "DELETE", headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('input[name="_csrf"]').value }, body: JSON.stringify(request) }).catch(error => { alert('고객센터에 문의해주세요.') }) if (!response.ok){ alert(await response.text()) return } return await response.json() }, query(params) { return Object.keys(params) .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) .join('&'); } }매번 해더값이나 method 값 넣어주기 귀찮아서 만들어 봤다 ㅎㅎ 팀원들이 잘 사용해주면 기분이 좋을것 같당

javascript

채널톡 아이콘