728x90 > 코딩애플 (부분공개)155 this 키워드를 알아보자 2. event listener와 constructor 저번 시간 this 의미 정리를 하자면1. 그냥 일반 함수에서 쓰면 window2. 오브젝트 내의 함수(메소드)에서 쓰면 함수를 동작시키는 오브젝트가 출력된다고 배워봤습니다. 3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻합니다. 기계란?자바스크립트 함수는 이런 용도로 쓸 수 있다.오브젝트 반복 생성 기계를 만들 수 있다.- function 을 이용해서 만들 수 있음.비슷한 오브젝트를 마구 무한히 생성하고 싶은 경우가 있는데,저 어쩌구를 복사하는게 아니라 ,저걸 복사해주는 기계를 만들어서 씀. 자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우오브젝트를 복사하는게 아니라 constructor라는걸 만들어서 사용합니다. 쉽게 말하면 constructor는.. 2024. 7. 29. this 키워드를 알아보자 1. 함수와 Object에서 사용하면? 개발하면서 은근 자주 찾아볼 수 있는 this 키워드는 뜻이 매우 다양합니다. 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있는데 이번 기회에 총정리해드리겠습니다. 1-1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻합니다. 그냥 HTML 파일 아무거나 하나 만들고 중간에 이렇게 변수를 큰 공간에 만드시면 x라는 변수는 window라는 큰 오브젝트안에 자동적으로 생성됩니다. 함수도 마찬가지고요.아무튼 그냥 보관소입니다. 끝! *전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수입니다. 그냥 script 태그 내에 쌩으로 var 변수 하나 만들면 그건 자연스레 전역변수가 됩니다. 비유를 들어 설명전역변수를 비유로 설명하면, 전역변수는 모든 사람.. 2024. 7. 27. 강의 듣기 전 자바스크립트 기본 문법 총정리 js 사용 이유p 태그 변경안녕 -> 바보버튼을 클릭했을 때 변경하고 싶은 경우,addEventListner 사용잠깐 자료 저장하기var / let / const변수 만들 수 있는 키워드긴 코드 쓰기 싫으면 축약 가능.function 사용중괄호 안에다가 내가 축약하고 싶은 긴 코드 넣어주면 된다.작명() 이렇게 쓰면 됨.함수를 쓰면서 축약을 할 수 있는데파라미터로 업그레이드도 할 수 있음.작명한 거를 안쪽 어딘가에 집어넣으면 됨.이렇게 써주면 작명이라는 함수를 실행해주는데 파라미터 자리에 "바보" 를 넣어서 실행해 달라는 뜻.함수 업그레이드 하는 파라미터 문법컴마로 여러개 집어넣을 수 잇음. 화살표 함수로 function 대체배열조건 부 코드조건식을 여러개 쓰고 싶은 경우&& 또는 || if 문에 있는.. 2024. 7. 27. 강의 OT (수강대상, 강의 특징정리) OT입니다. 자바스크립트 기초문법 배워서 웹UI 만드는건 쉽게 하실 수 있을텐데,이제 그 다음이 문제입니다. Angular, React 이런걸 하기 위해선, 서버를 만들기 위해선 어려운 문법 개념들이 필요합니다. 그래서 다시는 문법책 펴지 않아도 될 정도로 만들어드리는 중급과정을 준비했습니다. 일단 필요한 사전지식은var function if for forEach eventListener[Array] {Object} 자료만들고 수정하는 법이렇게 배우신 후 수강하시면 수월합니다. 기초강의 듣고오시면 됩니다. 다른 언어 하다오신 분들은 그냥 들으셔도 무방합니다. 여러분의 JavaScript 공부 고민 1. 어려운 용어 사용 책이나 구글 검색결과보면 너무나도 어려운 표현들이 기다리고 있습니다. 인스턴스, 1.. 2024. 7. 27. HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법 오늘의 5분 숙제 : 일단 이렇게 생긴 데이터를 하단에 하나 저장하십시오. products : ['역삼동원룸', '천호동원룸', '마포구원룸'] ▲ 그 데이터와 {{데이터바인딩}} 문법으로 대충 이렇게 생긴 HTML 레이아웃을 만들어오십시오. 가격은 대충 임시로 아무거나 기입하시길 바랍니다. HTML에 자바스크립트 데이터를 꽂아넣고 싶을 때가 있습니다. 데이터바인딩이라고 하는데Vue에서 데이터바인딩 하는 문법을 2개 알아보도록 합시다. 근데 애초에 데이터바인딩을 왜 하는지 의문점 부터 들지 않습니까.그런거 궁금해해야 나중에 여러분 데이터 바인딩 할지 말지 스스로 판단하는 훌륭한 사람이 됩니다. 그것 부터 알아봅시다. Vue 개발은 어려운게 아닙니다 dkssudsfadf우선 HelloWorld 글.. 2024. 7. 12. 페이지 레이아웃 만들기 (React 기초문법) 오늘의 숙제 :심심하면 html css 작성해서다음 시간까지 여러분 웹사이트의 대문을 마음대로 꾸며옵시다. 웹개발하려면 우선 유저들이 방문할 웹페이지같은게 있어야할거아닙니까그래서 가장 먼저 웹페이지 레이아웃 만드는 법을 알아봅시다. page.jsx 파일이 메인페이지라서 거기에 코드짜면 되는데 레이아웃 만들 땐 React 문법을 이용해야합니다. Next.js는 React 위에 얹혀있는 프레임워크같은거라서요. 우선 저번시간 프로젝트 열어서 page.jsx 안의 html 내용과 global.css 안의 내용은 지우고 시작해봅시다. 실은 리액트라고 다른거 없고 html css 문법 그대로 쓰면 레이아웃 만들 수 있는데 리액트에선 html css가 아니라 JSX 라는 문법을 사용하게 되어있습니다.생긴건 htm.. 2024. 7. 12. Next.js 설치와 개발환경 셋팅 개발환경 셋팅(맥이나 윈도우나 똑같습니다) 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - nodejs 18버전 이상에서만 잘돌아감- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.- 설치 중 chocolatey 어쩌구는 설치하지 맙시다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다.평소에 쓰던 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 설치합시다.Next.js 프로젝트 생성은 1. 작업용 폴더를 하나 만들어줍니다오픈 폴더 해서 열어줌.이 명령어 입력하고 엔터키 치면 된다. npx create-next-app@latest프로젝트 이름 작명하라고 하면 작명하면 됨. fresh 라고 프로젝트 이름 설정또 그 다.. 2024. 7. 11. Next.js 많이 쓰는 이유를 알아보자 1. 프론트엔드만 찔끔 안다고 취업시켜주는 시대가 점점 끝나고 있습니다. 외주개발 맡기면 훨씬 저렴하고GPT가 단순한 자바스크립트 훨씬 잘 짜주는데앞으로도 프론트엔드 개발자가 많이 필요해질까요 실은 그것들은 호들갑이고GPT는 검색 + 코드생성을 도와주는 정도라서 별로 상관할 바는 아닙니다.근데 그거보다 더 큰 문제가 있는데client-side rendering 말고 server-side rendering이 다시 유행하기 시작한다는게 문제입니다.2. client-side rendering은 브라우저에서 html을 실시간으로 만드는 방법이고server-side rendering은 서버에서 html을 미리 만들어 보내줍니다. client-side rendering 사용시 이쁘고 부드러운 사이트는 만.. 2024. 7. 11. 개발환경 셋팅과 Vue 3 설치 (자주겪는 에러 포함) (참고) 설치나 실행시 ESLint is not a constructor 에러가 뜨는 경우 터미널에서 npm i -D eslint@7.32.0 입력해봅시다. (참고) VSCode extension중에 Vetur는 지원종료되어서 Volar 설치합시다. Vue 설치부터 하도록 합시다.문법 체험을 위해 HTML 파일에 라이브러리 식으로 간략하게 설치하는 방법은 쓰지 않고 실제 Web-app 개발에 필요한 Vue 프로젝트를 처음부터 만드는 식으로 진행합니다.그러려면 Vue-cli 라는 라이브러리가 필요한데 그것 부터 설치하도록 합시다. 그리고 요즘은 설치과정 맥이나 윈도우나 똑같음 요약부터 하자면 1. nodejs 최신버전 설치우측 최신버전이 뭔가 에러가 덜 납니다. 그래도 에러나면 LTS 왼쪽 버전.. 2024. 7. 11. 이전 1 2 3 4 ··· 18 다음 728x90
