일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- ubuntu
- Git
- centOS7
- php
- props
- linux
- SQL
- dockerfile
- staging area
- working directory
- Wordpress
- docker-compose
- ec2
- imagemagick
- controller
- Python
- docker
- MySQL
- Selenium
- NGINX
- react
- cron
- codeigniter4
- vue
- laravel
- Ruby On Rails
- AWS
- ruby
- pagination
- javascript
- Today
- Total
목록IT 공부/Javascript (17)
내가 한 노력들
저번 포스팅에서는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props를 사용했습니다. 여기서 주목할 점은 props는 오직 읽기만 가능한 값이라는 것입니다. React 공식 document에서는 두개의 코드를 예로들어 설명하고 있습니다. 값의 변경없이 읽기로만 사용되는 경우 function sum(a, b) { return a + b; } 함수가 실행되더라도 a와 b의 값에는 영향이 없습니다. 값의 변경이 있는 경우 function withdraw(account, amount) { account.total -= amount; } 함수가 실행되면 account.total의 값이 변경이 됩니다. props는 위의 두가지의 경우에서 전자에 해당하는 경우에만 사용할 수 있다는 것입니다. 하지만, 개발하..
저번 포스팅에서는 새로운 component를 생성했었는데, App과 Header 컴포넌트 사이에는 아무런 연관도 없이 각자가 독자적인 코드였는데, 동적인 페이지를 만들기 위해서는 서로간 데이터를 주고 받을 수 있어야 합니다. 그것을 할 수 있게 도와주는 것이 props입니다. props는 상위 컴포넌트에서 하위 컴포넌트로 값을 보내고 싶은 경우 사용이됩니다. 즉, 저번 component 생성하기에서 만들었던 App컴포넌트로부터 Header 컴포넌트로 값을 보내고 싶은 경우 App.js import React from 'react'; import Header from './components/Header'; import logo from './logo.svg'; import './App.css'; func..
일단 React의 전체적인 흐름을 파악하기 위해서, index.html, index.js, app.js 파일을 살펴보겠습니다. index.html index.html이 실제로 브라우저에 보여지는 화면인데, 파일안에는 아무 컨텐츠도 존재하지 않습니다. 그런데도, react의 로고나 링크같은 것이 보였던 이유는 태그 때문입니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root'..
React 프로젝트를 생성하는 것에는 여러가지 방법이 있는데, 이번에 해볼 것은 create-react-app을 이용해서 생성하는 방법입니다. node.js 설치 create-react-app 설치 react 새 프로젝트 생성 여기서 create-react-app이란 React프로젝트를 설치하고 실행하는데 필요한 패키지라고 생각하면 된다. npm은 nodeJs package manager로써 nodeJs로 만들어진 여러 프로그램들을 쉽게 검색, 설치, 업데이트, 삭제등을 CLI명령어로 쉽게 가능하도록 도와준다. node.js를 설치하는 이유는 node.js에 npm이 포함되어 있기 때문에 npm을 설치하기 위한 과정입니다. create-react-app 설치 npm install -g create-rea..
Vue CLI 설치 npm install -g @vue/cli vue cli란, vue 프로젝트를 쉽게 만들어줌으로써, 빌드나 배포하기 쉽도록 도와준다. Vue 프로젝트 생성 vue create 프로젝트명 프로젝트가 생성이 되면, 위와같은 파일들이 생긴다 여기서 중요한 파일/폴더 Node_modules 프로젝트에 필요한 라이브러리등이 모여있는 곳 public html파일이나 기타 파일을 보관하는 곳 src 모든 소스코드들이 담기는 곳 package.json 라이브러리 버전, 프로젝트 설정을 기록하는 곳 프로젝트 서버 실행 npm run serve 위의 명령어를 실행하면 주소가 나온다. 그 주소를 URL에 넣으면 위의 사진처럼 정상적으로 화면이 나오면, 성공한 것이다. 프로젝트에 사용될 라우터와 boots..
1. Class 정의 class Person { //constructor constructor(name, age) { //fields this.name = name; this.age = age; } //method speak() { console.log(`${this.name}: hello!`); } } const jongin = new Person('jongin', 20); console.log(jongin.name); console.log(jongin.age); jongin.speak(); Class의 구성요소로는 필드, 함수, 생성자가 존재한다. 필드는 객체의 상태등을 나타내는 값, 함수는 객체의 동작 생성자는 처음 객체를 생성할 때, 필드의 값을 초기화하는 등의 작업을 한다. 2.getter An..
기본적인 함수 선언과 호출 function printHello() { console.log('Hello'); } printHello(); function log(message) { console.log(message); } log('Hello@'); log(1234); JS에서는 타입선언을 하지 않기 때문에, 함수를 보고 이게 정확하게 무슨 용도의 함수인지 파악하기 난해한 점이 있다. 그래서 프로젝트를 할경우에는 typeScript같이 변수선언을 하는 것을 사용 2. Parameters function changeName(obj) { obj.name = 'coder'; } const ellie = { name : 'ellie' }; changeName(ellie); console.log(ellie); 3..
변수선언 "let 변수명"으로 변수를 선언가능하다. let name = 'ellie'; console.log(name); 한번 선언한 변수는 다시 값을 바꾸는 것도 가능하다 let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); 지역변수와 전역변수 { let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); } console.log(name); { } 안에 선언한 변수는 { } 안에서만 접근이 가능하다. 위와 값이 { } 안에 선언된 name 변수를 { } 밖에서 접근을 하게되면 ReferenceError: name is not defined name i..