minXD's blog

논리연산자 JS의 논리연산자에서는 피연산자가 꼭 Boolean 값이 아닌 경우라도 true 혹은 false로 취급될 수 있다. false로 취급되는 값들은 아래와 같다. null NaN 0 빈 문자열 ("", '', ``) undefined 논리 연산자 중 &&,|| 에는 피연산자로 Boolean 값을 포함하여 아무 값이나 줄 수 있다. Boolean이 아닌 값을 피연산자로 주면 연산 결과에 따라 피연산자를 반환한다. 1. 논리 AND ( && ) 예) expr1 && expr2 : expr1이 true 또는 [true로 취급될 수 있는 값]이면 expr2를 반환. 반대의 경우 expr1을 반환. 2. 논리 OR ( || ) 예) expr1 || expr2 : expr1이 true 또는 [true로 취급..

전체적인 Logic 데이터 입력 PhoneForm 에서 이름, 전화번호를 입력받아 App 으로 전달 App 에서 배열형태로 데이터를 추가하여 상태값으로 저장 화면에 출력 App 에서 PhoneInfoList 호출 (번호목록 state를 props로 전달) PhoneInfoList에서 전달받은 목록을 JSX(요소마다 PhoneInfo 호출)로 변환하여 출력 함수형 컴포넌트의 state 변경 시 replace되는 이슈 전개연산자 공식 문서 발최 클래스 컴포넌트의 setState 메서드와는 다르게, useState는 갱신 객체(update objects)를 자동으로 합치지는 않습니다. 함수 업데이터 폼을 객체 전개 연산자와 결합함으로써 이 동작을 복제할 수 있습니다. setState((prevState) =>..

React Hook useState const [color, setColor] = useState(""); useState은 길이가 2인 배열을 반환한다. 첫번째 요소는 state, 두번째 요소는 state을 변경시키는 함수(modifier)이다. useState의 인자는 state의 초기값이다. modifier의 이름은 관습적으로 {set+state의 이름} 이다. (camerCase) state의 값을 styled-component로 전달하기 JSX 태그에 state값을 props로 전달 const Pallete = styled.div` width: 700px; height: 700px; border: 1px solid black; background: ${(props) => props.color};..

2일차 리액트에서 다루는 데이터는 props와 state가 있다. props 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 자식 컴포넌트에서는 props 수정 불가. // MyName.js import React, { Component } from "react"; class MyName extends Component { render() { return 안녕하세요! 제 이름은 {this.props.name} 입니다.; // this.props을 통해 props 값 참조 } } export default MyName; // App.js import React, { Component } from "react"; import MyName from "./MyName"; class App extends Compon..

객체의 사용 // 배열 const memberArray = ["egoing", "graphittie", "leezhce"]; console.log("memberArray[2]", memberArray[2]); // 객체의 정의 const memberObject = { manager: "egoing", developer: "graphittie", designer: "leezhce", }; memberObject.designer = "leezche"; // 객체의 데이터에 접근 console.log("memberObject.designer", memberObject.designer); console.log("memberObject['designer']", memberObject["designer"]); //..

CRA을 통한 프로젝트 생성 npx create-react-app my-app cd my-app npm start (or yarn start) npm이 아닌 npx를 사용하는 이유 : npm을 이용해 전역 설치를 할 경우 최신버전으로 업그레이드를 수동으로 해줘야 한다. 특히 React는 업데이트가 매우 빈번하기 때문에 npm으로 설치할 경우 버전관리가 어렵다. 하지만 npx는 최신버전의 CRA를 일시적으로 설치 후 실행한 다음 바로 삭제시키기 때문에 CRA에 대한 버전 관리를 할 필요성이 없어진다. JSX 문법 열린 태그는 반드시 닫아줘야 함 ex) br, input 등을 포함한 모든 태그 두 개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸져야 함 Hello Bye { /* 또는 를 사용*/ } 자바..

Database2 - Mysql 2020-03-23 2nd day JOIN topic 테이블 ↓ id title description created author_id 1 MySQL MySQL is... 2018-01-01 12:10:11 1 2 Oracle Oracle is... 2018-01-03 13:01:10 1 3 SQL Server SQL Server is... 2018-01-20 11:01:10 2 4 PostgreSQL PostgreSQL is... 2018-01-23 01:03:03 3 5 MongoDB MongoDB is... 2018-01-30 12:31:03 1 author 테이블 ↓ id name profile 1 egoing developer 2 duru data administr..

유용한 PM2 커맨드 pm2로 실행한 모든 프로세스를 중지 & 삭제 합니다. pm2 kill "--no-deamon" 은 pm2를 실행하면서 로그가 출력되도록 합니다. pm2 start main.js --watch --no-deamon 또 특정 디렉토리에 대한 watch를 하지 않도록 하는 방법입니다. --ignore-watch="①module/②example.js ③ data/*" ( /* 은 폴더 내에 속한 모든 파일을 의미) ① 폴더 ②파일 ③여러 항목일 경우 ' '(SPACE)로 구분 pm2 start main.js --watch --ignore-watch="module/example.js data/*" --no-daemon 출처 : 생활코딩(https://opentutorials.org/cour..

1. 문법강조 스타일 바꾸기 마크다운 기능이나 코드블럭 기능을 사용하면 편집화면에서는 문법강조가 제대로 되고 스타일도 깔끔히 적용되는 것으로 보이는데 막상 발행을 하고 나면 없던 스크롤바가 생기고 제대로 강조표시가 되지 않습니다. 가장 문제점은 라인넘버도 들어가지 않아서 소스코드를 설명하기에도 불편합니다. 찾아본 바에 의하면 스킨마다 다르다고 하는데, 저 또한 이런 현상을 겪었고 같은현상으로 머리를 싸매고 있는 분들을 위해 해결방법을 작성합니다. 임시방편으로, 클릭한번으로 간단하게 적용할 수 있는 'Syntax Highlight' 라는 플러그인이 있기는 한데 스타일이 적고 라인넘버도 표시가 되지 않습니다. 저는 수많은 스타일과 라인넘버 기능을 적용할 수 있는 방법을 포스팅 할 것입니다. ① https:/..

값으로서의 함수 var f = function(){ console.log(1+1); console.log(1+2); } var a = [f]; // 1. a[0](); var o = { func:f // 2. } o.func(); Result : 2 3 2 3 함수는 배열의 요소가 될 수 있다. 함수는 객체의 메소드로 정의될 수 있다. var a = if(true){console.log('success')}; var b = while(true){console.log('success')}; Result : ...\exam.js:1 var a = if (true) { console.log('success') }; ^^ SyntaxError: Unexpected token 'if' at wrapSafe (in..