본문 바로가기

자바스크립트

 (15)
Javascript 함수 - return이란? return return은 함수에서 결과 값을 반환할 때 사용합니다. 즉, 함수에서 return을 사용하면 함수를 호출했을때 return값이 반환됩니다. const calculator = { plus: function (a, b){ return a + b; }, minus: function (a, b){ return a - b; }, division: function (a, b){ return a / b; }, squared: function (a, b){ return a ** b; } } const plusResult = calculator.plus(6, 2); const minusResult = calculator.minus(6, 2); const divisionResult = calculator.d..
Vue.js 3 이벤트 웹 개발을 할 때 이벤트라는것은 어떤 행동을 했을 때 어떤 일이 일어나는것을 의미합니다. 클릭이벤트가 일어나는 예제입니다. 먼저 css는 부트스트랩을 이용하였습니다. index.html에 부트스트랩 CDN을 링크해주었습니다. 태그를 만들고 class를 넣어주어 부트스트랩의 css를 이용한 버튼을 만들었습니다. 태그 속성에 v-on:click 속성을 넣어주고 속성값으로 consoleLog함수를 넣어주었습니다. consoleLog함수는 버튼을 클릭하였을때 console.log에 'hello world'라는 스트링값이 뜨도록 만들었고 이 함수가 에 접근할 수 있도록 return에 넣어주었습니다. 이번에는 버튼을 클릭하면 버튼위의 'inyoung'이 'inyoung world'로 바뀌게 코드를 작성해보겠습니다...
Vue.js 3 함수를 사용하는 방법 함수를 이용하여 name값을 변경할것이다. greeting이라는 변수에 함수를 넣어주었다. 함수는 화살표 함수로 만들었다. 'Hello'라는 값을 리턴하도록 하였다. 그리고 greeting이라는 함수를 setup함수에서 리턴을 해주었다. 이렇게 하면 greeting이라는 함수가 template에 접근이 가능하다. name 데이터 대신 greeting()을 넣어 'Hello'가 출력되도록 만들었다. 이번에는 greeting에서 name이라는 매개변수를 받도록 하였다. 그리고 'Hello, '+name 이라는 값을 리턴하는 함수로 만들었다. 그다음 name을 greeting인자로 넣어 Hello, inyoung이 출력되도록 하였다. 위의 예제를 아래처럼 작성해도 같은 결과를 도출할 수 있다. 함수를 여러개 ..
Vue.js 3 컴포넌트 1. Vue 컴포넌트란? 이름에서도 알 수 있듯이 부품이라는 뜻이다. 즉 개발을 할 때 컴포넌트를 필요할 때 언제든 가져다 사용할 수 있다. 컴포넌트 파일을 만들때 확장자는 .vue가 들어간다. 2. 컴포넌트 구조 컴포넌트의 구조는 , , 3가지 태그로 구성된다. 3. 컴포넌트 작성 컴포지션 API를 사용하였다. 컴포지션 API는 Vue.js 3 에 새롭게 추가된 API이다. => setup() **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!
Vue.js 3 폴더구조 Vue 프로젝트를 생성하여 열면 아래의 사진처럼 폴더가 구조되어있다. 예외로 jsconfig.json 파일은 https://vuejs.github.io/vetur/guide/setup.html#project-setup 사이트를 참고하여 추가한 파일이다. 1. package.json 중요한 부분은 'dependencies' 와 'devDependencies' 부분인데 이 부분은 필요한 패키지의 리스트들을 저장해 놓은 공간이다. 'dependencies'는 개발을 할 때와 프로덕션에 올릴 때에 필요한 패키지이고, 'devDependencies'는 개발을 할 때에만 필요한 패키지여서 개발이 끝나면 없어도된다. 여기 있는 패키지들은 설치와 동시에 'node-modules'폴더 안에 자동으로 설치된다. 2. in..
npm이란? 1. npm(Node Packaged Manager)이란 무엇인가? npm이란 Node.js로 만들어진 pakage(module)을 관리해주는 매니저(툴)을 의미한다. 세상에는 많은 자바스크립트 프로그래머들이 있고, 그들이 유용한 자바스크립트 패키지들을 이미 만들어 두었고, 그런 코드들이 공개되어 있는 것이 바로 npm이다. npm은 세계 최대 규모의 패키지들을 보유하고 있다. 이러한 패키지들은 노드의 생태계를 더욱 견고하게 만들었다. npm에 업로드된 노드 모듈을 패키지라고 부른다. 모듈이 다른 모듈을 사용할 수 있는 것처럼, 패키지도 다른 패키지를 사용할 수 있다. 이러한 관계를 의존 관계라고 한다. npm은 자바스크립트 런타임 환경인 Node.js 의 기본 패키지 관리자 역할을 한다. 그래서 npm..
Node.js란? 1. Node.js란 무엇인가? Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. **런타임이란? 프로그램이 구동되는 환경을 말한다. 자바스크립트 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)프로그램과 Node.js 라는 프로그램이 있다. 이러한 프로그램들에서 자바스크립트가 구동되기 때문에 자바스크립트 런타임이라고 한다. 즉, Node.js를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 스크립트 언어가 아닌 프로그랜(환경)이며, 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. 자바스크립트 언어를 활용한다. 2. Node.js를 왜 쓰는가?..

티스토리툴바