익명의 개발노트

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());

1. 금일 어제 만든 유튜브 클론에 대한 리뷰를 받았으며, 새로이 알게된 내용.(리액트) 1) 현업에서 디자인, 기획이 다 나온 경우 나온 내용을 토대로 작은 단위 컴포넌트를 만들고 조합하는 방식으로 진행 2) 일단 전부 만들고, 재사용 필요하면 컴포넌트로 빼서 만든다. 3) 컴포넌트로 페이지 조립할때, 확장성 고려해서 화면별 템플릿.js 로 조립 후 page 폴더 안에 있는 페이지 컴포넌트로 뿌려도 됨. * 페이지 늘어날때, 좋은 코드 보면서 정해야 한다. 4) 클래스 네임정하는 규칙은 사람마다 다르다. 회사의 스타일 참고. 5) 공통적으로 사용하는 css 관리는 통상 style 폴더 만들고, config.scss 만들고, 그 안에다가 모아 놓는다. 나중에 aws 이미지 올릴때 공통된 주소 같은거 해놓..

1. 유튜브 클론간 더보기 클릭시 늘어나고, 다시 누르면 원상복귀 css 기능에 overflow:hidden 을 사용하여 해결. css는 경험이 중요한 듯 하다. 자세한 내용은 내일 멘토님께 리뷰 받고 작성해야겠다. 2. 제이쿼리는 리액트의 등장으로 레거시가 되어버린 시점에서 단순 이벤트 효과나 ui다룰때 매우 효과적이다.

1. 리액트 CRUD를 연습하면서, List 형태 뿌리는 방법 1) 원페이지에 state와 ul, li를 가지고 뿌린다. 2) state를 관리하는 페이지와 ul부분을 컴포넌트로 가져와서 뿌린다(list 부분 따로 컴포넌트 제작) 3) 원페이지에 state와 ul까지 존재하고 map쓰고 return 하는 부분만 컴포넌트로 만들어서 가져온다(현업에서 많이 사용) import React from 'react'; import Button from '../button' const ItemList =(props)=> { console.log(props) return( {props.inputValue} props.handleUpdateClick(props.index)}/> props.handleDeleteClick..

1. git issue commit git commit -m "fixes #이슈번호" 2. HTML 테이블 Tag 사용시 주의사항(양식준수) 1) tr은 무조건 있어야함. 2) tr은 thead 또는 tbody에 있어야함. //코드가 깨지네 -_- 3. 중복되는 path 설정 줄이기 import Title from '../../Components/Title/Title'; 위와 같이 import값 복잡하게 나올 경우, page와 component에 index.js를 만들어서 Title>index.js export {default} from './Title'; 위와 같이 작성해주면 import Title from '../../Components/Title'; 위와 같이 실제로 줄일 수 있다. 4. impor..

https://minwoo2815.tistory.com/64

로그인화면에서 아이디, 비번이 6글자 이상일 때, 로그인 버튼이 파란색으로 활성화되게끔 바꾸기. 삽질한 내용 1. handleonChange 메서드에 아이디, 비번을 넣었더니, 비번이 7자 이상될때 활성화 됨...한박자 느림.. state ={ isIdPw : false, inputID : "", inputPW : "", } (...중략) handleChange = (e) =>{ this.setState({ [e.target.name] : e.target.value, }) if(this.state.inputID.length >= 6 && this.state.inputPW.length >=6){ setState({ isIdPw : true, }) }else{ setState({ isIdPw : false,..

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..

리액트 이벤트 핸들러 1. 트윗메인화면에 트윗을 입력하고 버튼 누르면 아래에 트윗 리스트 나오게 한다. 2. 트윗메인화면에서 textarea는 TweetRightBox라는 컴포넌트로 불러와서 메인화면에 조립했다. 트윗메인화면 ...(생략) TweetRightBox에서 이벤트값을 props로 넘겨서 트윗메인 화면에서 받은 다음, 이벤트 구현하였다. onChange는 textarea 내에서 값이 변화하면 브라우져가 인식한다. 최종적으로 넘길데이터는 유저이름, 메시지내용, 프로필사진, 트윗생성날짜이다(유저가 정한다.) handleChange =(e) => { this.setState({ username : this.props.username, //다른 컴포넌트에서 값을 불러왔음. inputMessage : e..