개발 연습 블로그

🐤 zerocho 리액트(웹 게임) 강좌를 듣고 정리했습니다. 코드 출처도 zerocho 입니다. 리액트 특징 [1] 리액트를 쓰면 개발 방식의 큰 변화중 하나가 직접 DOM을 조작해서 화면을 바꿔주는 방식이 아니라, 우리는 state, props등의 데이터만 바꿔주고, 리액트가 state의 변경 사항을 감지하고 다시 렌더링해서 알아서 데이터 - 화면의 싱크를 맞춰준다는 것이다. + [2] 일종의 사용자 정의 엘리먼트인 컴포넌트 단위로 화면을 구성해나가기 때문에 재사용성이 좋아지고, [3] 결과물이 single page application라는 점 때문에 (서버에게 요청하는 페이지는 첫 엔트리 지점 하나고 나머지는 js 코드로 생성한 컴포넌트들이 조건에 따라 보여지고 숨겨지고 하는 방식으로 페이지 이동을..

함수가 정의될 때 결정되는 것 : scope (클로저, 콜백의 행동을 이해하는 것과 큰 관련 있다) 함수가 호출될 때 결정되는 것 : this > 다음을 실행 컨텍스트를 통해 이해해 보자. ( ※ 이글은 모던 자바스크립트 Deep Dive 책을 토대로 작성했습니다. 인용 박스 안의 설명들은 책에서 인용! ) 실행 컨텍스트 실행 가능한 코드가 실행되기 위한 환경 (실행 가능한 코드를 형상화하고 구분하는 추상적인 개념) 실행가능한 코드 (executable code)의 단위는 전역코드, 함수코드, eval 코드로 분류 [1] 실행 순서 = 실행 컨텍스트가 push, pop되는 스택으로 관리됨. ( 실행 제어권은 스택 탑이 갖고 있음 ) [2] 실행에 필요한 정보 = 실행 컨텍스트가 식별자, this, Sco..

javascript에서 반복문 종류에 따라 비동기 처리의 실행 순서가 달라질 수 있다는 얘기를 듣고 구글링 하는데 아주 친절히 잘 정리 된 이 글을 발견했다. 😗👍 javascript의 비동기 처리는 Event Loop 이라는 것과 연관지어 이해하면 조금 더 처리 결과가 예측가능해 지는 것 같다. 그래서 조금 더 살을 붙여서 내방식 대로 답변을 작성해 보고자 한다. Q. 1초 후 한번에 10개의 "result"가 출력되는 다음의 코드를 1초 마다 10번 출력되도록 바꾸기 function test() { const promiseFunction = () => new Promise((resolve) => setTimeout(() => resolve("result"), 1000)); Array(10) .fill..

CASE 문 - 만약 아무조건에서 부합하지 않고 ELSE문도 없으면 NULL을 반환함 - AS 문으로 결과값에 이름 붙여줘서 쓸 수도 있음. - 결과값을 SELECT 대상이나 ORDER BY 정렬 기준 같은 것으로 사용하면 됨 사용자 지정 변수 SET @변수명 = 값 SELECT @변수명 := 값

🐳 자바스크립트 모듈 종류 + 같이 보면 좋을 모듈로더, 모듈번들러에 관한 글 [요약] * CJS : node.js에서 채택한 동기적으로 동작하는 서버사이드에서 쓰기 용이한 모듈 포맷 require, module.exports - AMD : 브라우저에 중점을 둔 (로컬에서 바로 불러오는게 아니라 네트워크를 통해 모듈을 전송받는 환경) 비동기적으로 동작하는 모듈 포맷 - UMD : CJS와 AMD가 서로 호환되도록 하는 모듈 작성 방식 * ESM : 자바스크립트 언어 자체 모듈 포맷 import, export (참고) export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있다. 그러면 가져올 때 중괄호 { } 없이 모듈을 가져올 수 있다.

🐫 문제 풀다가 새롭게 알게 된 문법 정리 입력 read_int ( ) //입력 끝까지 한줄씩 읽어들여서 List로 만들어 반환 let rec read_lines () = try let line = read_line () in int_of_string (line) :: read_lines() with End_of_file -> [] 출력 print_newline ( ) : \n 출력 print_endline line : 자바 println 같은 것. line의 타입은 반드시 string print_타입명 x : 예를들면 print_int 5 Printf.printf "Hello : %d " 5 반복문 여태까지 모르고 무조건 재귀로만 구현했었는데 반복문이 있긴 있었나보다 파일 로드 (1) 인터프리터에 로드..

몽구스 Node.js - 몽고DB ODM mongoose란, mongoDB라는 NoSQL 데이터베이스를 지원하는 노드의 확장모듈입니다. mongoose는 mongoDB의 ODM입니다. ODM은 Object Document Mapping의 약자로, 문서를 DB에서 조회할 때 자바스크립트 객체로 바꿔주는 역할을 합니다. - edu.groom.io SQL (Oracle, mysql 등) 에서는 ORM (Object relational mapping), NoSQL (특히 document database인 몽고DB)에서는 ODM (Object document mapping)이라는 용어를 쓰는 듯하다. 클론하고 있는 웹 프로젝트에서 다음과 같이 db구성을 했다. 몽고 db랑 mongoose를 처음 써봐서 공식 홈페..

npm vs npx npm (리눅스의 apt-get, ocaml의 opam과 비슷한 역할 인듯?) npm에 등록된 패키지(모듈) 다운로드, 버전 관리, 의존성 관리 등을 할 수 있게 해준다. 참고로 yarn은 페이스북에서 내놓은 패키지 매니저로, npm 대체제이다. 주요 명령어 npm init : package.json 파일 생성됨 npm install [package명] : node_modules 폴더 (설치한 패키지와, 그 패키지가 의존하고 있는 패키지들의 소스) package-lock.json 파일 (node_modules에 들어있는 패키지들 버전과 의존 관계) 이 생성된다. 그리고 package.json 파일의 dependencies 속성에 해당 패키지 추가. (※global 옵션으로 설치시 de..