javascript12 0061. TypeScript 공부하기10 - JavaScript 클래스, 생성자, 인스턴스, 메서드, 프로퍼티, 상속 섹션 6. 클래스 1강. 자바스크립트의 클래스 소개 1) allow.Js : ts 환경에서 js 파일 사용하도록 설정하기 src폴더에 .js파일을 만들면 tscongfig에 오류가 난다. "include" 옵션을 "src"로 설정했기 때문에 src 디렉토리 내의 모든 타입스크립트 파일을 타입스크립트 컴파일러가 관제하고 있다. 모니터링 중 ts 파일이 아닌 js 파일이 생겼기 때문에 오류가 나는 것이다. 그래서 여기에 "allowJs": true를 추가한다. 그러면 오류가 사라진 것을 확인할 수 있다. 2) class let studentA = { name: "초보", grade: "A+", level: 5, study() { console.log("열심히 코딩함"); }, introduce() { con.. 2024. 2. 11. 0041. TypeScript 공부하기1 - 타입스크립트 개론, 동작 원리, 컴파일러 옵션 설정하기(Feat. 한입 크기로 잘라먹는 타입스크립트) 필자가 자꾸 강의를 왔다 갔다 해서 독자분들이 헷갈리실지 모르겠다. 하지만, 듣다 보면 필요한 것이 생겨서 어쩔 수가 없다. 누가 처음부터 짜주는 코스를 따라가는 것이 아니라, 필요한 것을 찾아가다 보니 발생하는 시행착오 같은 상황이다. 필자가 다 듣고 정리하려고 한다. 저도 이러고싶지 않았습니다.. 이번에 들을 인프런 강의이다. 강의제목 : 안 입 크기로 잘라먹는 타입스크립트(OneBite TypeScript) 1/4 정도 들은 의견으로는 강사분이 설명을 잘하신다. 강의가 전체적으로 깔끔해서 매우 좋았다. 섹션 1. 타입스크립트 개론 1강. 타입스크립트를 소개합니다. 1) TypeScript 2012년 오픈소스로 공개 타입스크립트 = 자바스크립트의 확장판 자바스크립트를 더 안전하게 사용할 수 있도록 ".. 2024. 1. 19. 0037. Front-end 공부하기 : 중간점검(강의 수강 순서, 아쉬운 점 등) 지금까지 수강한 강의들과 수강할 강의들을 살펴보고 얼마나 배웠는지, 얼마나 배울 것이 남았는지를 확인해보려고 한다. 그리고 배우는 순서가 생각보다 중요하기 때문에 중간에 계속 체크하는 것이 좋을 듯싶다. 아래의 강의들은 모두 인프런의 강의들이다. 1. 현재까지 수강한 강의 1) 처음 만난 리액트(62강, 5시간 15분) 처음 만났기 때문에 수강하는데 매우 오래 걸렸다. 기본적인 자바스크립트에 대한 이해가 없으면 미리 JS 강의를 듣고 오는 것을 추천한다. 그래도 모르는 상태에서라도 코드를 쳐보고 실습해 보는 것이 좋았던 강의이다. 2) 생활코딩 - 자바스크립트(JavaScript) 기본(102강, 14시간 2분) 강의가 길고 상세한 것은 좋았다. 하지만 버전이 너무 옛날 버전(10년 전 강의)이라서 과거.. 2024. 1. 11. 0036. JavaScript 공부하기 11 - 원시 데이터 타입, 레퍼 객체, 복제, 참조 섹션 25. 객체지향 - 데이터 타입 1강. 원시 데이터 타입과 객체 원시(기본) 데이터 타입 vs 객체(참조) 데이터 타입 원시 데이터 타입(primitive type) 숫자 → Number 문자열 → String 불리언(true/false) → Boolean null → X undefined → X 이게 아니면 모두 객체 데이터 타입, 참조 데이터 타입이다. 2강. 레퍼 객체 객체 접근 연산자(Object access operator) - str.length 에서 "."으로 점찍은 것을 말한다. 자바스크립트에서 문자열을 객체처럼 사용하려고 하면 자바스크립트가 그것을 객체처럼 만들어 버린다. 래퍼 객체(wrapper object) 원시데이터 타입이 있을 때, 원시 데이터 타입을 감싸주는 객체 원시데이터.. 2024. 1. 9. 0033. JavaScript 공부하기8 - 클로저, 내부함수, 외부함수, private variables, 함수지향, argument, parameter, apply 섹션 15. 함수지향 - 클로저 1강. 내부함수, 외부함수 1) 클로저(closure) 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 말한다. JavaScript를 이용한 고난도의 테크닉을 구사하는데 필수적인 개념이다. 외부 함수 outter의 내부에는 내부 함수 inner가 정의되어 있다. 내부함수는 외부함수의 지역변수에 접근할 수 있다. function outter() { var title = 'coding everyday'; function inner() { alert(title); } inner(); } outter(); inner에 title에 대한 정의가 없기 때문에 outter에서 title = 'coding everyday'를 가져온다. 2강. 클로저란? 외부함수가 더 .. 2024. 1. 5. 0032. JavaScript 공부하기7 - (시즌2) 유효범위, 전역변수, 지역변수, 함수지향, 콜백, 비동기적 처리, Ajax 섹션 13. 함수지향 - 유효범위 (시즌2 시작) 1강. 전역변수와 지역변수 JavaScript : 함수형 언어, 함수가 매우 중요하다. 유효범위(Scope) : 변수의 수명 1) 지역(local) 변수와 전역(global) 변수 지역변수는 함수의 안( { 와 } 사이)에서 먼저 변수를 찾고, 없으면 밖에서 변수를 찾는다. 전역에서 접근할 수 있다는 의미로 전역변수라고 칭한다. 함수 안에서만 접근 가능한 변수가 지역변수이다. 로컬 변수를 만들 때 var이라는 키워드를 쓰게 되면 var 뒤에 따라오는 변수는 local 변수가 된다. var를 사용하지 않으면 전역 변수로 인식하기 때문에 전역 변수로서의 결괏값이 출력된다. var vscope = 'global'; function fscope() { var v.. 2024. 1. 5. 0030. JavaScript 공부하기5 - 모듈(Module), 라이브러리(Library), jQuery 섹션 10. 모듈 1강. 모듈이란? 1) 모듈 부품을 의미 재사용할 수 있는 단위로 구획화하여 모듈화 하고, 다른 프로그램에 사용한다. 자주 사용하는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 2) 호스트 환경 자바스크립트가 구동되는 환경을 의미한다. 2강. 모듈화 src : 속성 main.html 파일 greeting.js 파일이 모듈이다. function welcome(){ return 'Hello World^_^'; } 이 모듈은 여러 군데에서 쓰일 수 있다. sub.html 파일 위의 예시에서는 greeting.js가 main, sub에서만 쓰였지만 실제로는 더 복잡한 함수를 더 많은 페이지에 넣기 때문에 일을 훨씬 간편하게 할 수 있.. 2024. 1. 3. 0027. JavaScript 공부하기2 - 연산자, 부정, 부등호, 조건문, Boolean (Feat. 잘못된 코딩 공부순서) 섹션 4. 비교 1강. 연산자 연산자 : 어떤 작업을 컴퓨터에 지시하기 위한 기호 예 : a=1 a : 변수 = : 대입연산자 (좌항에 있는 값에 우항을 대입한다) 1 : 값 (상수, 변수에 대항되는 개념) 비교 연산자 : >, = : 좌항이 우항보다 크거나 같다. DOCTYPE html> var id = prompt('아이디를 입력해주세요.'); if(id == 'egoing'){ var password = prompt('비밀번호를 입력해 주세요.'); if(password == '111111'){ alert('로그인 되었습니다. '+id+'님 반갑습니다!') } else { alert('비밀번호가 다릅니다.') } } else { alert('아이디가 일치하지 않습니다.'); } 4강. 논리 연산자 .. 2024. 1. 2. 0026. JavaScript 공부하기 1 - 크롬 개발자 도구, 콘솔, 숫자와 문자, 변수 (Feat. 생활코딩) 지난 시간까지 React를 배웠다. 그런데 다 배우고 나서 에러를 잡다가 느끼는 것은 역설적이게도 '자바스크립트를 배워야겠다'는 것이었다. 그래서 일단 오류를 잡는 것을 뒤로하고 JS 강의를 듣기로 했다. 이번에도 인프런에서 강의를 듣는데, 생활코딩 - 자바스크립트(JavaScript) 기본 강의이다. https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard [지금 무료] 생활코딩 - 자바스크립트(JavaScript) 기본 강의 - 인프런 생활코딩의 자바스크립트 언어 기본 수업입니다. 기본 문법을 통한 자바스크립트 기본에 .. 2024. 1. 2. 0019. Front-end 공부하기10 - Forms, Controlled Component, Textarea, Select, File input, Multiple inputs, Input null value 섹션 11. Forms 1강. Form과 Controlled Component 1) Form 사용자로부터 입력을 받기 위해 사용 리액트와 HTML이 차이가 있음 리액트 폼 : 컴포넌트 내부에서 state를 통해 데이터를 관리 HTML 폼 : 엘리먼트 내부에 각각의 state가 존재(접근하기 쉽지 않음) 2) Controlled Component 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트 값이 리액트의 통제를 받는 Input Form Element를 의미함 우측은 클래스 컴포넌트를 기준으로 그린 것인데, 함수 컴포넌트에서는 useState 훅을 사용하여 state를 관리 컨트롤드 컴포넌트는 리액트에서 모든 값을 통제할 수 있는 구조를 가지고 있음 컨트롤드 컴포넌트를 사용하면 사용자의 .. 2023. 12. 23. 이전 1 2 다음
