익명의 개발노트

구분 자바스크립트 파이썬 기본 환경 {} 블록단위 블록단위가 없이, 들여쓰기로 판단 용어 배열 리스트 용어 객체 딕셔너리 변수타입 var, let, const ex) var a = "aaa" 없음 a = "aaa" 함수선언 function sexy(){} def sexy: join join은 배열문법 a=[1,2,3] a.join(",") // "1,2,3" join은 문자열 문법 a="123" ",".join(a) // '1,2,3' 배열의 덧셈(두개배열 합치기) a=[1,2,3], b=[4,5,6] a+b // [1,2,34,5,6] a=[1,2,3], b=[4,5,6] a+b // [1,2,3,4,5,6] 배열(문자열) 의 반복 a = [1,2,3] a*3 // NaN a = [1,2,3] a*3 ..

OSI (Open System Interconnection) 7 Layer는 서로 다른 시스템(하드웨어(PC, 모바일 등), 소프트웨어(윈도우, 리눅스 등))간의 상호 접속을 위한 개념을 규정하기 위해 설계되었음. 프로토콜은 정확, 신속, 안전하게 보내기 위한 약속이므로, OSI 7레이어의 순서대로 진행이 된다. 쉽게설명하면, 데이터 통신을 할때, 저런 계층을 통해서 데이터가 전송된다. 내가 모바일 카톡으로 "안녕"을 써서 상대방에게 보내면, "안녕" 이라는 데이터를 OSI 계층을 거치게된다. 1. 어플리케이션 계층에서 어떤 응용프로그램을 사용했는지 확인 후 프로그램의 정보를 데이터의 헤더(AH)에 담고 패키지 화 하여 표현계층으로 이동.( DATA unit = AH+DATA) 2. 표현계층에서 이게 이..

정규표현식이란(=정규식) ? 특정한 규칙을 가진 문자열의 집합을 표현(검색 또는 치환(replace)) 하는데 사용하는 형식 언어 자바스크립트에서는 패턴들은 RegExp의 exec 메소드, test 메소드, String의 match, replace, split메소드와 함께 사용됨. 1. 사용방법 : 2가지. 1) /ab+c/ 처럼 "/"슬래쉬로 감싸는 패턴 2) new RegExp("ab+c") 처럼 객체 생성자 함수 호출하는 패턴 2. 참고자료 정리 1) 기본적인 문법 볼 수 있는 곳 (1) MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D (2) 위키백과 : https://ko.wiki..

웹팩 자동빌드 설정하기. npm i react-hot-loader npm i webpack-dev-server 위 명령어로 설정한 다음에 webpack.config.js파일에 가서 1. module 안에있는 plugins에 'react-hot-loader/babel' 추가해준다. 2. output 안에 publicPath : '/dist/' 를 추가해준다. 웹팩 데브서버 설치시 설정해줘야함. package.json 에 들어가서 3. script > build 부분을 "webpack-dev-server --hot" 으로 변경해준다. 그 후 client.jsx 파일로 가서 const React =require('react'); const ReactDom = require('react-dom'); const ..

1. 등장배경 리액트에서 클래스나 함수형 컴포넌트가 하나의 컴포넌트를 의미한다. 페이스북같은경우는 2만개정도의 컴포넌트가 있다고 한다. 컴포넌트 이거 관리하려면 너무 많아서 유지보수또한 어렵다. 이런식이면 중복이 발생할 수 있다. 그래서 중복제거하기 위해 웹팩이라는 것이 나왔다. 자바스크립트 파일을 번들(합쳐줌)해준다. 웹펙을 하려면 노드를 알아야한다. 노드는 서버보다 자바스크립트 실행기로 알면 좋다. 리액트에서 노드알아야한다라는 뜻은 "서버를 알아야한다 가 아니고 웹팩을 하기위한 자바스크립트 실행기를 알아야한다. "로 이해하면 좋다. 2. 웹팩을 알아야하는 이유 CRA(이하 "create-react-app"의 줄임말)로 하면 웹팩부터 바벨, 빌드까지 다 리액트에서 되기때문에, 처음부터 웹팩설정하는 방법..

Hook 간다는 의미인가? 리액트 안에서 기본적으로 사용했던 클래스, state가 없을때 사용했던 함수형으로 했었는데. 리액트 훅은 함수형에 ref와 state를 사용할 수 있게 해준 거다. 실제로 써보면 클래스형 컴포넌트보다 훨씬 간결해짐을 볼 수 있다. 클래스형 함수형 훅 사용 왠만한건 변수로 선언해서 빼버림. 편리해보인다. 참고자료 : 제로초님 유튜브 강좌(웹게임) https://www.youtube.com/watch?v=EUQnxfZgFJU&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=11 1. useEffect : 라이프싸이클을 대신해준다. 2. useMemo : 메모이즈 기능으로 값을 저장해준다. 3. useCallback : 함수를 저장해준다. 클래스 사..

개인적으로 노드js, 리액트 보기전에 알고가면 좋다. 나는 반대로 해서 고생을 했다. -_- 1. Scope 1) let, const의 등장 2) immutable array var a =[1,3,4] var b = [].concat(a); 2. String 메서드 추가 1) startstartsWith 2) endsWith 3) includes 3. Array 관련 내용 추가 1) for in, for of 2) spread operator ( ... ) : ...배열명 하면 복사됨. 3) from : arguments나 HTML의 nodeList 타입같은 유사배열을 진짜 배열로 만들어줌. ex) Array.from(arguments) let arr = [100,200,300]; functioin su..

1. RDBMS RDBMS (relational database management system, RDBMS) 라고 하며, 관계형 데이터 베이스 관리시스템이라고 한다. 흔히들 많이 들어본 오라클, MySQL, IBM DB2, PostgreSQL 등등이 있다. 특징은 모든 데이터를 2차원 테이블로 표현 가능하고, 데이터를 넣을때 정해진 양식에 맞춰서 넣어야하며(기본 데이터 저장단위가 row, column으로 이루어져있음), 각 데이터간(테이블)의 관계가 설정되어있어, 테이블 여러개를 조인해서 데이터를 추출할 수 있다. 데이터 베이스의 설계도를 ER(Entity Relationship) 모델이라고 한다. 2. NoSQL Not only SQL의 약자이며, 기존의 RDBMS는 저장하고 처리해야할 데이터가 늘어..

node.JS로 개발한다면 아래 셋 중에 하나는 반드시 사용한다. 1. express 2. koa 3. hapi 1. Express 장점 : Node.js 프레임워크 중 커뮤니티가 가장 큼, 서버 쉽게 실행/ 운영가능, 내장된 라우터로 코드 재사용가능. 단점 : 수작업이 많음. 내장된 에러핸들링 없어서 미들웨어 잃어버릴 수 있음. 문제에 대한 접근법이 여러가지임. 메모리를 많이 먹음, async/ await을 정식지원하지 않아서 오류처리하는 부분은 편법으로 사용해야함. 2. Koa 장점 : 메모리를 덜 먹고 표현력이 좋다. 미들웨어 작성이 쉽다. 개발자가 필요한 미들웨어만 구성해 사용할 수 있음. ES6를 도입하고 있어 ES6문법사용가능, async/ await 정식제공 단점 : 불안정하고 많은 양의 개..

리덕스 : 상태관리(로직작성하는부분) 를 컴포넌트 밖에서 처리하도록 도와주는 라이브러리이다. 없는 상태로 뭔가를 만드려면 로직도 복잡해지고, 그냥.. 복잡하다는 느낌밖에 없었다. 이걸 이해해보려면, 리액트로 투두리스트 한번 만들어보길 바란다. 리덕스를 사용하면, 스토어에서 모든 상태관리가 일어난다. 1. 액션 : 상태변화를 일으킬때 참조하는 객체(타입이 반드시 있어야함) 2. 스토어 : 애플리케이션의 상태값을 저장, 관리 3. 디스패치 : 액션을 스토어에 전달하는 것을 말함 4. 리듀서 : 상태를 변화시키는 로직이 있는 함수. 파라미터를 2개받음.(현재상태, 액션객체), 함수내부에서 스위치 문을 만들어 액션 타입에 따라 새로운 상태 만들어서 리턴함. 5. 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 ..