익명의 개발노트

1. 서로 다른 컴포넌트끼리 값 직접 참조할 수 없다. 2. 컴포넌트 안에서 Vue인스턴스가 상위 컴포넌트가 된다. 3. 상위컴포넌트에서 하위컴포넌트로 데이터 전달시 props로 전달 가능하며, 하위에서 상위로 데이터 전달시 이벤트 버스를 사용한다. 4. 이벤트를 발생시키는 쪽에서는 $emit('이벤트명') , 받는쪽은 v-on:으로 수신한다. 5. 같은 레벨의 컴포넌트간의 통신은 아래 그림과 같다.(부모보냈다가 부모에서 값 받아야함) 관계없는 컴포넌트 간 통신은 통상 이벤트버스를 이용해서 통신한다. 6. template 특성 1) template 대신 render 함수로 구현해도 됨. 2) 싱글 파일 컴포넌트 체계 => .vue 파일 1개는 1개의 컴포넌트와 동일 7. 데이터 바인딩 방식 1) v-on..

리액트, 앵귤러와 같이 3대장 중 하나이다. 특징은 쉽고 빠르게 그릴수 있다. 기본적으로 html, script, css 구조로 이루어져있다. 통상 MVC 패턴에서 일반적인 함수들은 Controller에 해당한다. Vue의 script부분은 기본적으로 인스턴스로 구성되고, 그안에 property로 data를 다루는 model부분과, Controller를 다루는 객체부분이 존재한다. 그밖에도 여러개의 Vue 인스턴스 속성을 가지고 있다. Vue 3부터 설치명령어가 살짝 다르다. npm install -g @vue/cli 프로젝트 시작하기 vue create my-app

덤프는 다른 디비에 잇는 내용을 다른 곳으로 옮기는 작업이다. 파일로 옮길 수 도 있고, sql 로도 옮길 수있다. 프로젝트하다가 한명이 서버인데, 없을때도 돌리고 싶을때.. 근데 디비는 통상 로컬에 있으니깐. 백엔드 소스만 가지고 실행할 수 없다. 이럴 때 유용하다. 1. 디비내용을 처음에 sql 파일로 만든다. mysql -u root -p "database you want to backup" < "temporary sql" ex) mysql -u root -p 백업하고자하는 디비이름 < 저장할 파일이름.sql 2. AWS mysql로 이동해서 데이터 베이스 생성한다. mysql -h "your aws mysql url" -u root -p //저장하고자하는 디비 위치(aws면 엔드포인트)를 적는다...

1. mysql 실행후 status를 입력한다. 그러면 위 그림처럼 정보가 나오는데, 여기서 characterset 부분이 latin1으로 되어있을 것이다. 2. vim 명령어로 설정을 해주어야 한다. sudo vim /etc/mysql/my.cnf my.cnf 파일이 읽기 전용이어서 반드시 sudo(관리자 권한)으로 편집해야한다. 3. vim으로 2번의 파일을 실행시키면 아래와 같이 나타날것이다. 버전이 5.5이상이면 아래 내용을 22번 이후에 다가 입력해준다(입력 후 :wq!) [mysqld] collation-server = utf8_unicode_ci character-set-server = utf8 skip-character-set-client-handshake 4. 그 후 mysql을 재시작한..

Node JS에는 인증 관련 모듈인 Passport가 있다. 통상 passport, passport-local, express-session, flash 를 한 셋트로 사용한다. npm install passport passport-local express-session connect-flash --save 1. passport는 인증관련된 모듈을 처리 2. passport-local 은 페이스북이나 트위터 같은 소셜 로그인 말고 일반 로그인을 처리한다. 3. session은 session 관련된 부분 처리해준다. 4. flash는 에러 메세지를 Redirect하는 과정에서 쉽게 전달해주는 모듈이다. 동작원리는 passport를 이용해서 인증처리를 실행하는 LocalStrategy를 작성하고, 여기서 작..

1. 암호화 방법에는 크게 단방향과 양방향 암호화로 구분한다. 1) 단방향은 한번 암호화 하면 복호화 할 수 없다. 2) 양방향은 비대칭형과 대칭형으로 나뉜다. 2. 고려사항 1) 암호화 모듈 종류는 여러개가 있다. md5 , sha256, sha1, crypto, bcrypto 등등/ 2) 이중에서 해커에게 뚤린적이 있는 md5, sha1 모듈은 사용하지 않는다. 3. crypto는 노드 6버전부터 내장모듈로 변경 되었다. 1) crypto에는 pdkdf2Sync라는 메소드를 사용했다.(사용법이 매우 간결하다) pdkdf2Sync는 pdkdf2의 향상된 버전. 둘의 차이점은 pdkdf2은 인자값으로 콜백함수를 받을 수 있고, pdkdf2Sync는 5가지 밖에 받을 수 없음. 비밀번호 저장시 반드시 to..

CORS : 프론트엔드 주소와 백엔드주소가 다른 상태에서 프론트가 백엔드의 api를 호출하면 브라우져에서 보안때문에 차단하는 현상 1. 해결방법. 1) cors를 설치 후 미들웨어 설정을 해준다. npm install cors 2) app.js const cors = require('cors'); app.use(cors());

https://minwoo2815.tistory.com/64

Select Tag 사용시 이벤트 핸들링 Grapefruit Lime Coconut Mango 1. state 초기값 설정 2. select 태그에 대한 이벤트 핸들러 설정 3. 이벤트 핸들러에서 setState값 변경 class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: 'coconut'}; //1.초기값 설정 this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { //3.setState값 변경 this.setStat..

웹 프레임워크(Web framework) 또는 웹 애플리케이션 프레임워크(Web application framework)는 웹 서비스 개발을 위한 프레임워크이다. Java의 Spring, Python의 Django, PHP의 Laravel, Ruby의 Ruby on Rails 등이 특히 유명하다. 웹 프레임워크를 사용하면 쉽고 빠르게 웹사이트를 만들 수 있다. 웹 프론트엔드용 SPA 프레임워크에는 AngularJS나 Angular(Angular 2), Vue.js 등이 있다. AngularJS와 Vue.js는 JavaScript, Angular는 TypeScript 기반이다. Spring이나 Django, Ruby on Rails의 경우 풀 스택(Full-stack) 웹 프레임워크이다. 풀 스택은 "모든..