잡다구리

🚀간단하고 빠르고 쉽게 만들자 이번 글에서는 그렇게들 다들 한 번씩은 만든다는 Todo App을 빠르게 만들어보자. 따로 CSS 등 디자인은 적용하지 않고, 기능적인 것만 구현해보자. 리액트 시작하기 1, 2에서 배운 것들만 이용하여 쉽고 간단하고 빠르게 만들예정이다. 리액트 기초는 알고 있어야 만들 수 있다. 혹시 아직 리액트 기초를 모른다면 아래 글에서 기초만 배우고 오도록 한다. 리액트 시작하기 1 - 설치 및 기본 예제 분석 이 글은 기본적으로 HTML/CSS/Javascript의 기본은 알고 있다는 전제하에 작성되어 있습니다. 잘은 몰라도 되지만 어느 정도 기본 개념은 알고는 있어야 이해하기 쉽습니다. 💾node js 설치 React를 사용 jaegeun.tistory.com 리액트 시작하기 2..

❗이 글은 "리액트 시작하기 1"을 이해했다는 가정하에 진행되므로, 리액트 기본 개념을 아직 모른다면 "리액트 시작하기 1"을 보고 오는 것을 추천드립니다. 🚀Component로 기본 끝내기 Component의 의미는 "리액트 시작하기 1" 글에서 기본 예제 코드를 분석하며 아래와 같이 설명했다. Component : 가독성 / 재사용성 / 유지 보수성을 높이기 위해 복잡한 HTML 코드를 모듈화 할 수 있는 최소 단위 이 Component의 기본 기능만 알게 되면 리액트 기본은 끝났다고 말할 수 있으며, 기본적인 웹앱을 만들 수 있다. 이번 글에서 Component의 기본 기능을 개념과 예제를 통해 리액트의 기본을 끝내보자. 🛫props, state, event Component에서 중요한 3가지 기본..

VSCode를 사용하다보면 지금 내 커서가 어디쪽에 있는지 헷갈릴 때가 있다. 커서 색깔을 바꿔서 헷갈리지 않게 하자. 💻Command Palette 열기 VSCode에는 설정이나 명령 같은 걸 검색할 수 있는 Command Palette라는 기능이 있다. 윈도우에서 / 맥에서 를 누르면 ">" 에 입력할 수 있는 Command Palette창이 뜬다 setting.json을 입력 해주자. 그러면 여러개가 나오는데, 전역에 설정할거면 첫 번째(Open Settings)를, 해당 workspace에만 적용할거면 세번째(Open Workspace Settings)를 선택하면 된다. setting.json 파일 아무대나 아래 코드를 넣어주자. (자신의 환경에 따라 기존에 써져있는것은 다를 수 있다.) edit..

Store Procedure 저장 프로시저 저장 프로시저는 SQL Server에서 제공하는 함수처럼 실행하게 끔 하는 프로그래밍 기능이다. MS SQL의 프로시저 코드는 툴(Download SQL Server Management Studio (SSMS))을 이용해서 쉽게 볼 수 있다. 하지만 툴의 버전 문제로 보이지 않는다면 이 글에 쓰여있는 2번째 방법을 사용해보자. 📑툴을 이용한 프로시저 코드 보기 우선 기본적인 툴을 사용하여 프로시저 코드를 보는 방법을 알아보자. 툴에서 아무 프로시저에 (1)마우스 오른쪽 클릭 후, (2)수정을 클릭하면 (3)코드를 볼 수 있다. 보여준다. 📑SQL을 이용한 프로시저 코드 보기 간혹 툴의 버전의 문제로 첫 번째 툴에서 간단하게 프로시저 코드가 확인이 안 될 때는, ..

🚀여기서 알아볼 내용 Join과 Union(Union All)에 대해서 쉽게! 이해하자. Join과 Union의 차이점을 그림을 통해 쉽게 이해할 수 있다. Union과 Union All의 차이점을 금방 이해할 수 있다. Inner Join, Left Outer Join, Right Outer Join, Cross Join를 정확히 구분할 수 있다. 🤼‍♂️Join과 Union의 공통점과 차이점 공통점 - 테이블의 데이터를 연결 차이점 - 연결하는 방법이 다름 🧷결합되는 방식 Join은 테이블의 Column이 추가되는 형식으로 데이터가 옆으로 연결됨 Union은 데이터가 추가되는 형식으로 아래에 연결됨 결합되는 방식의 차이점을 그림으로 어떻게 연결되는지 확인해보자. 🎨Join의 결합 방식을 그림으로 표현..

🚀K!!K!!K!!K!! - PK FK UK CK SQL에 있는 여러 K들에 대한 개념을 알아보자. 🔥PK (Primary Key) 기본키라고 하며 엔티티를 식별하는 대표 키,NULL일 수 없다. 🔥FK (Foreign Key) 다른 테이블의 PK를 참조하는 Key 동일한 Domain을 갖는다. 어떠한 테이블에 존재하는 다른 테이블의 정보 이기 때문에 외래 키이다. 참조하고자 하는 Column은 PK 또는 UK이여야 한다. 🔥UK (Unique Key) 테이블 내에서 해당 Column의 값은 항상 유일하다. PK와 다른 점은 NULL값이 중복 가능하다. 🔥CK (Check) 특정 Column에 값을 입력할 수 있는 범위나 조건을 지정한다. (제약 조건)

🤼‍♂️SQLBindParameter과 SQLBindCol의 차이 둘다 변수를 Bind 시키기위해서 사용되기 위해 사용되는 함수인데, MSDN 설명만으로는 잘 이해가 가질 않았다. 예제 코드들을 보며 이해한 결과 SQLBindParameter는 함수의 매개변수처럼 Bind 시킨다는 개념이고, SQLBindCol 은 Return 되는 데이터(Row) 셋에 변수들을 Column마다 Bind 시키는 개념이다. 📌SQLBindParameter SQLBindParameter는 함수의 매개변수와 동일한 개념으로 생각하면 되고, 함수의 매개변수와 마찬가지로 Input 뿐만 아니라 Output도 Bind 가능하다. (함수의 포인터 또는 참조 변수 타입을 생각하면 된다.) 📌SQLBindCol SQLBindCol은 여러..

❕이 글을 통해... CRUD : Create Read Update Delete CRUD 쿼리를 예제를 이해하고 사용할 수 있다. 쿼리의 다양한 조건(WHERE)과 정렬를 이해하고 사용할 수 있다. ❔주석 실행되지는 않으며, 설명을 작성하는 글 -- 앞에 '--'를 붙이면 뒤에 쓰는 글자는 인식하지 않습니다. ❔대소문자 구분 SQL은 대소문자를 구분하지 않습니다. 아무거나 사용해도 됩니다. 이 글에서는 가시성을 혼합했지만 구분 안 하고 사용해도 됩니다. 🚀기본 CRUD 쿼리 예제를 통해 기본 CRUD 쿼리인 Insert, Select, Update, Delete에 대해 알아보자. CREATE, INSERT ➡ 추가 (CRUD의 Create) DB 생성 -- 포맷: CREATE DATABASE [Datab..

이 글은 기본적으로 HTML/CSS/Javascript의 기본은 알고 있다는 전제하에 작성되어 있습니다. 잘은 몰라도 되지만 어느 정도 기본 개념은 알고는 있어야 이해하기 쉽습니다. 💾node js 설치 React를 사용하기 위해서는 npm이 필요하다. npm을 설치하기 위해 node.js 공식 홈페이지(nodejs.org)에 접속해서 설치 파일을 받아주자. LTS가 붙어 있는 버전과 Current 버전이 있는데 특별한 목적이 있지 않는 한 둘 중 아무거나 받아준다. (LTS는 안정적인 버전이고 Current는 가장 최신 버전이지만 LTS에 비해 안정적이진 않다.) IDE 설치 통합 개발 환경(Integrated Development Environment, IDE)의 뜻으로 개발 시 사용되는 툴을 말한다..

👓크롤링한 데이터 시각화 이번 글은 크롤링 기능 자체랑은 연관이 없지만 하면 좋은 데이터 시각화 만들기이다. 크롤링해서 얻은 데이터도 좋지만, 이를 시각화하는 게 사용자에게 내용을 전달하고자 할 때 효과가 좋다. 시각화를 위해서 d3-cloud 라이브러리를 사용할 것이다. 시각화 라이브러리 d3-cloud : https://github.com/jasondavies/d3-cloud 🛠데이터 가공(포맷 수정) d3-cloud 라이브러리에 데이터를 넣기 위해 csv 형식으로 데이터를 가공해줄 것이다. 이전 글에서는 최종 데이터를 Object형식의 문자열로 저장했다. 이 데이터들을 csv형식에 맞게 바꿔주자. const fs = require('fs'); const path = require('path'); c..