초보 개발자

어떤 컴포넌트가 실행이 될 때 랜더라는 함수보다 더 일찍 실행이 되면서 그 컴포넌트를 초기화 시켜주는 코드는 constructer를 짜고 그 안에다가 적어준다. (초기화를 담당!!) state의 개념이 나오는데 조금 헷갈린다. props와 같이 쓰이는데 대략 내가 느낀 점은(틀릴 가능성 농후) state는 class의 기본 설정값이다. 초기화를 통해서 값을 설정해주고 하위 컴포넌트들의( import를 통해 가져온 ) {this.props.title}과 같이 설정 해둔 곳에 이렇게 적어둠으로써 상호작용을 할 수 있다. 상위의 클래스의 state값을 props를 통해 가져오고 그 가져온 값을 가공하여 return 하는 느낌이다 class Nav extends Component { render() { cons..

앞서 클래스를 통해 사용자 지정태그를 만들어 보았다. 근데 항상 똑같은 결과만 도출 한다면 재사용성이 떨어지지는 않을까?? 그래서 props를 통해 내용을 바꿀 수 있다.!! class Subject extends Component { render() { return ( {this.props.title} ); } } 이렇게 Subject 클래스에서 h1의 내용안에 {this.props.title} 이라고 적어준다면 App 클래스 안에서 사용자 지정태그를 적어줄때 이렇게 적어준다면 h1 안에 title의 내용이 들어간다!! 근데 app.js에 여러 class를 선언해두면 보기 불편하고 또 다른 파일에서 필요할 땐 못쓰니까 불편하다.. 따라서 !! 따로 폴더를 만들어서 그 곳에 정리를 해두면 된다. src ..

npm i -g create-react-app 를 통해 어디서나 react를 실행 할 수 있도록 만들어 준뒤 react-app 이라는 폴더를 만들고 들어가서 create-react-app . 를해주면 여러 파일들이 설치가 자동적으로 된다. npm start를 해주면 react 웹브라우저가 실행이 되는데.. 이것만으로도 뭔가 개발을 한 것 같아 뿌듯해진다. react는 사용자 지정 태그 를 만들어서 root라는 아이디를 가진 div에 집어 넣음으로써 만들어지는 느낌인 것 같다. 그 사용자 지정 태그 header 이렇게 포함이 되어진다. 정리정돈의 도구이다 ! 실제 자바스크립트는 아니고 유사 자바스크립트라고 할 수 있다. 왜냐하면 와 같은 태그는 자바스크립트에서는 사용할 수 없기때문 "

nomardcoder의 wetube를 보고 따라서 만들어보았다. 많은 것을 배웠다. 머리에 다 들어 가지 않을 만큼 되도록 이해를 하고 넘어가도록 노력을 했고 검색해도 도저히 이해가 안되는 부분은 넘어갔다. 빨리 배우고 싶은 강좌들이 수두룩하지만 이대로 넘어간다면 일주일 이내에 대부분을 까먹을 것이다. 따라서 복습을 해보려고한다. 화이팅!!!!! https://wetube-taehyeki.herokuapp.com

javascript로 개발을 할 때 다들 BABEL이라는 것을 들어 본 적이 있다고 생각한다. BABEL을 쓰는 이유는 무엇때문일까? 최신버전 Javascript(좀 더 편리)로 개발을 하고 배포를 할 때 예전버전의 javascript(좀 더 불편)로 변환 해주는 역할을 한다! 굳이 왜 ? 구 브라우저들은 최신 버전의 Javascript를 이해 못하기 때문에 이를 대응하기 위한 것이다. 이를 실행하기 위해서는 먼저 node.js가 필요하다. 1. 프로젝트를 초기화 해주고 npm init -y(모두 yes처리) 2. @babel-cli와 @babel/core를 설치해준다. npm i -D @babel/core @babel/cli (개발의존성(devDependencies)으로 설치하는 이유는 Babel은 애..

const path = require('path') module.exports = { mode: "development", // 이 부분을 추가하면 개발 모드로 변환가능 'production' 완성 모드 entry: "./source/index.js", output: { path: path.resolve(__dirname, "public"), filename:'index_bundle.js' } } webpack은 JS가 아닌 다른 것 또한 번들링을 해준다. 그것을 도와 주는것이 LOADER이다 CSS 로더 STYLE 로더 npm install --save-dev(-D와 같음) style-loader css-loader 명령어를 활용하여 설치를 해준다. module: { rules: [ { test:/\...

여러가지 파일을 웹팩을 통과시키면 단순한 형태의 파일로 만들어 지는 것을 보여주는 그림이다. bundle 1에서 npx webpack --entry ~~ 와 같은 긴 형태의 명령어를 설정 하였지만 webpack.config.js 파일을 만들고 const path = require('path') module.exports = { entry: "./source/index.js", output: { path: path.resolve(__dirname, "public"), filename:'index_bundle.js' } } 이렇게 설정 해주면 npx webpack 만 해줘도 실행이 가능하다.

1. node.js 를 설치를 한다 2. node.js의 프로젝트 폴더를 설정( npm init -y) 3. package.json이 생기면 npm install -D(개발을 하기위한 옵션) webpack webpack-cli 으로 웹펙을 설치 4. index.js와 같은 엔트리 파일을 생성하여 번들러를 만들 준비를 한다. 5. 설치한 webpack을 실행할때는 npx 를 사용 npx webpack --entry ./source/index.js --output-path ./public/index_bundle.js 우리의 입구에 해당하는 파일은(entry file) source안에 있는 index.js이고 public안에 있는 index_bundle.js로 아웃풋을 만들꺼야 라는 의미 번들러를 사용하지 않..