익명의 개발노트

Error: ER_TRUNCATED_WRONG_VALUE_FOR_FIELD: Incorrect string value: '\xEC\x9D\xB4\xEA\xB1\xB4...' for column 'user_profile' at row 1 1. user_profile이라는 컬럼에서 문자열 값이 올바르지 않다는 내용. 2. 원인 : DB 테이블 생성시 속성에 UTF8에 대해서는 주지 않았고, 회원가입 간 프로필 내용을 한글로 적어서 발생함. 3. 해결 : 영어로 바꿔서 해결함, 또는 UTF8 속성을 줘도 됨.

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

로그인화면에서 아이디, 비번이 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,..

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

왼쪽과 같은 브라우져에서 email을 입력하고, 제출또는 ajaxsend 버튼을 누르면 서버와 ajax 방식으로 데이터 주고 받기. 노드에서 ajax 방식은 크게 3가지이다. email : ajaxsend 아래에서 설명 email안에 input값 (inputdata)를 ajax함수를 만들어서 전달하고자 한다. 사전에 노드 +Express로 4000포트를 이용하여 서버을 열었고, 라우터는 아래와 같다. document.querySelector('.ajaxsend').addEventListener('click', function(){ var inputdata = document.forms[0].elements[0].value; console.log(inputdata); sendAjax('http://loca..

1. 자바스크립트로 api 호출하는 방법(비동기 요청방식, AJAX) 1) 초기에는 XML Http Request(XHR) 요청방식으로 사용하다가 Ajax 방식이 나왔다. Ajax 방식이란?? => 서버와 자유롭게 통신할 수 있고, 페이지 깜빡임 없이 seamless하게 작동하는 방식. 2) fetch.then.catch() : Ajax의 최신기술 fetch API 이며, promise 방식의 기반임. 문제점은 디버깅이 어렵고, 들여쓰기, 예외처리에 어려움이 있어서 ES7 에서 async, await 이 나왔다. 3) Async, await : 비동기를 동기식처럼 보이게 코딩.. 익숙한 방식이다. 다만 사용함수 앞에 Async, await을 붙여줘야 한다. async function getData() {..

1. html 1) div 🖼 Tweet! 2) form 🖼 Tweet! form 태그 사용시, 메소드를 post 설정해주고, 버튼은 타입 submit으로 반드시 지정해주어야한다. form 태그가 자동으로 서버쪽으로 요청하는데, 해당 버튼 쪽에 버튼 이벤트에 e.preventDefault(); 를 해주어야 새로고침 현상을 막을 수 있다.