정ㅇr의 개발노트

• 

  [WIP] NextJS에 관한 기본 개념들 라이브러리와 프레임워크의 주요 차이점 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전) 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있습니다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출합니다. 라이브러리 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 프레임워크 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 관련 자료 : https://www.youtube.com/watch?v=t9ccIykXTCM 프레임워크인 NextJS의 특징 1. Pages 1) pages 폴더 안에 있는 파일명에 따라 route가 결정된다. 다만 예외적으로 index.js 파일의 경우는 앱이 시작하는 파일이므로, 기본 url 뒤에 /.. 2023.04.26

• 

  45장 프로미스 해당 단원은 예제 기반으로 실행하고 공부하는게 좋아서 따로 글을 작성하지 않았습니다. 대신 관련 내용을 첨부했습니다. 비동기 함수와 이벤트 핸들러 설명을 위한 그림 45-10, 11 프로미스 생성 45-12 fulfilled된 프로미스 45-13 rejected된 프로미스 const fulfilled = new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.5) resolve(1); else reject(2); }, 3000); }).then(res => console.log(res)) .catch(err => console.log(err)) const prom = (val) => new Promise((resolve, r.. 2022.12.04

• 

  43장 Ajax 브라우저에서 웹페이지 요청을 하거나 링크를 클릭하면 화면 갱신이 발생하는데, 이는 브라우저와 서버와의 통신에 의한 것이다. 이 과정에서 비동기적 데이터 교환 통신 방식인 Ajax를 사용할 수 있다. Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터 요청을 하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. - 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. - XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. - XMLHttpRequest는 1999년 마이크로소프트가 개발했고, 구글이 구글 맵스.. 2022.11.27

• 37장 Set과 Map * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * Set 정의 : Set 객체는 중복되지 않는 유일한 값들의 집합을 말한다. 특징 - 동일한 값을 중복하여 포함할 수 없다. - 요소 순서에는 의미가 없다. - 인덱스로 요소에 접근할 수 없다. - 수학적 집합을 구현하기 위한 자료구조다. (교집합, 합집합, 차집합, 여집합) 1. Set 객체 생성 const set = new Set(); 참고로 이터러블을 인수로 전달받아서 객체를 생성해야 한다. 이터러블 안에 있는 중복된 값은 요소로 저장되지 않는다. const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} 2. 요소 개수 확인 Set 객체의 요소.. 2022.11.20

• 35장 스프레드 문법 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 스프레드 문법? - ES6에서 도입된 전개 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. - 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for.. of 문으로 순회할 수 있는 이터러블에 한정된다. - 스프레드 문법의 결과값은 변수에 할당할 수 없다. 왜냐하면 스프레드 문법의 결과값이 값이 아니라 값들의 목록이기 때문이다. 스프레드 문법의 결과물을 사용하는 경우 1. 함수 호출문의 인수 목록에서 사용되는 경우 Math.max 메서드를 사용할 때 숫자만 인수로 넘겨줄 수 있다. 만약 배열 요소를 m.. 2022.11.14

• 

  31장 RegExp * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 정규 표현식이란? - 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 - 자바스크립트의 고유 문법은아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. - 자바스크립트는 펄의 정규 표현식 문법을 ES3부터 도입했음 - 문자열을 대상으로 패턴 매칭 기능을 제공하며, 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. - 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 입력받은 문자열을 체크할 수 있다. - 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용해서 가독성이 좋지 않음 정규 표현식을 사용하기 위해서는 1. .. 2022.11.06

• 

  25장 클래스 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function() { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function() { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 반환 return Person; }()); // 인스턴스 생성 v.. 2022.11.01

• 20장 strict mode * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 암묵적 전역(implicit global)이란? 먼저 예제코드를 살펴보자. function foo() { x = 10; } foo(); console.log(x); x라는 변수를 함수 내 그리고 전역에도 선언하지 않은 상태에서 코드를 실행한다. 먼저 자바스크립트 엔진은 함수 내부에서 선언된 x가 있는지 확인을 하고 없다면 전역에 걸쳐 변수 선언을 확인할 것이다. 위에 작성한 코드에서는 전역에도 변수를 선언하지 않았지만, 자바스크립트는 암묵적으로 x라는 변수를 동적으로 생성한다. 이러한 현상을 암묵적 전역이라고 한다. 이런 암묵적 전역은 개발자도 모르게 오류를 발생시킬 수 있으므로 반드시 변수 키워드(var, let, con.. 2022.10.26

• Virtual DOM이란 https://velopert.com/3236 [번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG 리액트를 지난 2년간 사용하면서도 막상 말끔하게 설명하라고 하면 어려웠던 주제, 원래 번역글은 잘 안쓰지만 글 자체가 구성이 잘 되어있어서 글을 번역해보았습니다. 원본: https://hashnode.com/p velopert.com 벨로퍼트님이 포스팅 해놓은 글에 아주 잘 설명 되어 있어서 공유합니다. Virtual DOM을 이해하기 위해서는 렌더링에 대한 이해가 필요합니다. 제가 써놓은 렌더링에 관한 글도 참고하시면 좋을 것 같습니다 :) https://wjddk718.tistory.com/75 렌더링이란? 렌더링이란 ? - HTM.. 2022.10.20

• 

  렌더링이란? 렌더링이란 ? - HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말함 - 웹사이트 코드를 사용자가 웹사이트를 방문했을 때 보는 인터랙티브한 페이지로 바꿔주는 웹 개발에서 사용되는 프로세스를 말한다. - 렌더링 엔진과 웹 브라우저에서 웹 페이지를 렌더하기 위해 사용되는 소프트웨어에 의해서 완성된다. - 이러한 웹 브라우저들과 밀접한 관계 때문에 렌더링 엔진은 흔히 브라우저 엔진이라고도 불린다. 웹 브라우저가 웹 페이지를 렌더링 하는 과정 1. 원시 코드에서 DOM과 CSSOM을 구성 - 웹 페이지가 로딩되는 동안, 웹 서버는 HTML, CSS, JavaScript가 들어있는 파일들의 폴더를 사용자의 웹 브라우저로 보냅니다. - 브라우저 엔진은 바이트로 구성된.. 2022.10.20

• 

  16장 프로퍼티 어트리뷰트 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 내부 슬롯과 내부 메서드 - 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 사용하는 것 - ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수는 없음 - 단, 일부 내부 슬롯과 내부 메서드는 접근 가능함 // 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가짐 const a = {}; o.__proto__ // Object.prototype 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태는 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 .. 2022.10.17

• 13장 스코프 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 스코프 - 유효범위, 자바스크립트에서 크게 예시로 드는 것은 var와 let, const 차이 - 모든 식별자(변수, 함수, 클래스 이름 등) 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다. - 식별자가 유효한 범위 var 와 let의 비교 코드 // var 예시 function foo() { var x = 1; // 여기서 자바스크립트 엔진이 아래 코드를 var가 없는 x 재할당으로 인식하고 동작한다. var x = 2; console.log(x); // 2 } foo(); // let 예시 function bar() { let x = 1; // let, const 로는 같은 스.. 2022.10.12

• 

  11장 원시 값과 객체의 비교 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 원시 타입 (primitive type) - 변경 불가능한 값 - 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됨 - 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨 (=값에 의한 전달) 객체 타입 (object/reference type) - 참조 타입이라고도 한다 - 변경 가능한 값 - 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨 - 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨 (=참조에 의한 전달) 원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 값을 변경하기 위해서는 재할당을 해야 하는데, 재할당 시에는 .. 2022.10.04

• 

  7장 연산자 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 연산자, 피연산자란? 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 피연산자 : 연산의 대상이 되는 값 연산자 종류 산술 연산자 - 산술 연산이 불가능한 경우 NaN 반환 단항 연산자와 증가/감소 연산자의 차이는 부수 효과 X, O 문자열 연결 연산자 + 연산자는 피연산자 중 하나라도 문자열이 있다면, 문자열 연결 연산자로 작동한다. // true는 1로 타입 변환 1 + true; // 2 // false는 0으로 타입 변환 1 + false; // 1 // null은 0으로 타입 변환 1 + null; // 1 // undefined는 숫자로 타.. 2022.09.29

• 

  WebSocket과 Socket.io 차이점 알아보게 된 배경 최근까지 회사에서 외부 프로젝트의 프론트엔드단을 Vue.js로 구현했는데, 기능 중에 실시간 CCTV 영상을 조회하고 영상을 제어하는 부분이 있었다. 그 기능의 프론트엔드 부분을 구현하다가 영상을 받아오고 제어할 때 웹소켓을 사용한다는 것을 알게 되었다. 웹소켓이라는 개념은 처음 알게 되어서 좀 더 알아보고자 노마드코더의 줌 클론코딩을 진행하다가 WebSocket과 Socket.io 차이점을 정리하고 싶어서 글을 쓰게 되었다. WebSocket 등장하게 된 이유 WebSocket 등장 이전의 렌더링 방식은 HTTP 요청에 대한 응답을 받아서 브라우저를 새로 표시하는 방식이었다.하지만 실시간으로 사용자와 상호작용하는 방식이 나타나고, 사용자도 이런 웹 서비스를 선호하게 되면서 RIA(Ri.. 2022.09.01

• 

  자바스크립트 기본 - Part 1 이 글은 유데미 강좌인 https://www.udemy.com/course/the-complete-javascript-course/ 수강하면서 정리할 내용이나 다시 알게된 내용을 작성했습니다. 개인적으로 아는 부분은 따로 적지 않아서 순서는 뒤죽박죽! // 콘솔창에는 object 라고 찍히지만, null은 object가 아님 // 이는 자바스크립트 내부에 있는 버그다. console.log(typeof null); let, const, var 간단한 차이 let : 변수명을 정의하고, 재할당 할 수 있음, 초기값을 주지 않아도 사용 가능 const : 변수명을 정의하고 초기값을 반드시 줘야 함, 재할당 할 수 없으므로 변하지 않을 값에 사용해야 함 기본적으로 const를 사용하는 것으로 생각하되, 변수값.. 2022.08.29

• 

  CSS 기본 정리 Selector (선택자) CSS = Cascading Style Sheet Author style = 우리가 만드는 css User Style = 브라우저에서 사용자가 글자 크기, 다크 모드 등을 설정하는 것 Browser = 브라우저에서 기본적으로 지정한 스타일 그래서 CSS 에서 Cascading은 Author -> User -> Browser 순서대로 스타일이 지정되는 것을 말한다. 만약 "! important"를 쓰게 되면 이 순서는 무시하고 제일 중요한 CSS로 지정 된다. 그러므로, 가능하면 ! important를 쓰지 않는 것이 좋다. selectors (선택자) HTML의 어떤 태그들을 고를건지 정의하는 것 * 모든 태그들을 고르는 것 태그의 이름 ex) div 해당 태그를 고르는 것 #.. 2022.08.25

• HTML 자동 태그 입력 방법 마찬가지로 list를 생성할 때, ol>li*3 그리고 tab 키를 누르면 자동으로 태그가 생성된다. HTML 태그에 관한 내용을 더 알고 싶을 때, 공식 사이트 https://developer.mozilla.org/en-US/docs/Web/HTML 2022.08.24

• 

  Vue.js 기초 개념 Vue.js는 웹프론트엔드 프레임워크 - 컴포넌트 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프레임워크 컴포넌트 (Component) - 웹을 구성하는 로고, 메뉴바, 버튼 모달창 등 웹 페이지 내의 다양한 UI 요소 - 재사용 가능하도록 구조화 한 것 SPA (Single Page Application) - 단일 페이지 어플리케이션 - 하나의 페이지 안에서 필요한 영역 부분만 로딩되는 형태 - 빠른 페이지 전환 - 적은 트래픽 양 npm install -g @vue/cli vue/cli 를 이용해서 자동으로 폴더구조, 필요한 라이브러리를 손쉽게 다운로드 받을 수 있어서 해당 명령어를 사용해서 프로젝트를 생성할 수 있다. vue create '폴더이름' 해당 폴더.. 2022.08.17

• 

  HTTP 메서드 활용 정리 (API, URI 설계) https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com * 본 포스팅은 인프런 김영한 강사님의 모든 개발자를 위한 HTTP 웹 기본 지식을 들으며 적은 강의노트입니다. * 클라이언트에서 서버로 데이터 전달 방식 1. 쿼리 파라미터를 통한 데이터 전송 - GET - 주로 정렬 필터 (검색어) 2. 메세지 바디를 통한 데이터 전송 - POST, PUT, PATCH - 회원 가입, 상품 주문, 리소스 등록,.. 2022.08.08

• 

  HTTP 기본, HTTP 메서드 정리 https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com * 본 포스팅은 인프런 김영한 강사님의 모든 개발자를 위한 HTTP 웹 기본 지식을 들으며 적은 강의노트입니다. * HTTP 기본 - 우리가 가장 많이 사용하는 것은 HTTP/1.1 버전, 이 버전이 우리에게 가장 중요한 버전이다. - HTTP/1.1, 2 버전은 TCP 기반 프로토콜, HTTP/3 버전은 UDP 기반 프로토콜이다. - 현재는 HT.. 2022.08.04

• 

  쉬운 이해를 위한 컴퓨터부품 노예비유법 2022.08.02

• 

  인터넷 네트워크, URI, 웹 브라우저 요청 흐름 개념 https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com * 본 포스팅은 인프런 김영한 강사님의 모든 개발자를 위한 HTTP 웹 기본 지식을 들으며 적은 강의노트입니다. * 인터넷 네트워크 IP(인터넷 프로토콜) - 지정한 IP 주소 (IP Address)에 데이터 전달 - 패킷(Packet)이라는 통신 단위로 데이터 전달 출발지 IP와 목적지의 IP, 그리고 전달할 내용을 담고 패킷을 전달하면, 프로토.. 2022.07.28

• 

  Node.js 버전 관리 방법 프로젝트마다 노드 버전에 따라 실행이 안되는 경우가 있어서 이를 관리하는 방법이 필요하다. 노드 버전을 관리할 수 있도록 환경 세팅하는 방법을 공유하고자 한다. 참고로 윈도우를 기준으로 합니다. (이 방법을 알려주신 ㅇㅎㅁ 대리님 감사합니다.) 1. 기존에 설치되어 있는 node를 삭제한다. 2. 아래 주소에서 해당 파일을 다운로드 및 설치한다. https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 3. .. 2022.07.13

• Spring JPA 엔티티 설계 시 주의점 현재 회사에서는 JPA를 사용하고 있지 않지만, 개인적으로 궁금하기도 하고 다른 회사에서도 사용하는 경우가 많아서 인프런에서 김영한님의 강의(실전 스프링부트와 JPA 활용 1)를 들으며 차근차근 배워 나가는 중이다. 엔티티 설계 주의점은 앞으로 JPA를 사용해서 개발하게 되면 아주 유용하게 쓰일 것 같아서 따로 블로그에 정리하려고 한다. Spring JPA 엔티티 설계 시 주의점 1. 엔티티에는 가급적 Setter를 사용하지 말자. 2. 모든 연관관계는 지연로딩으로 설정하기 - 즉시로딩 (EAGER)는 예측이 어렵고, 어떤 SQL이 실행될지 추적하기가 어려움 - 특히 JPQL을 싱행할 때, N+1 문제가 자주 발생한다. - 실무에서는 모든 연관관계는 지연로딩 (LAZY)로 설정해야 함. - 연관된 엔티티.. 2022.07.13

• 객체지향의 사실과 오해 (조영호) - chapter 1~2 책 읽으며 정리한 내용 1. 협력하는 객체들의 공동체 아직도 생각난다. 예전에 정보처리기사 필기 시험을 보던 중, 문제 중에서 객체지향 언어가 아닌 것을 고르라는 문제가 있었다. (그때 프로그래밍 배운지 얼마 안되서 아는게 없었음) 자신있게 자바스크립트를 골랐다. 그리고 오답이라는걸 나중에 알았다.당시 내 생각은 "아니.. 자바스크립트는 클래스도 없는데 왜 객체지향언어야?" 였고, 객체지향하면 클래스지향이라는 고정관념이 박혀있었다. 그게 한참 잘못됐다는 생각은 이 책의 1장을 읽으면서 박살낼 수 있었다. 클래스의 구조와 메서드가 아닌 객체의 "역할, 책임, 협력"에 집중해야 한다. 2. 이상한 나라의 객체 객체? - 객체란 식별 가능한 개체, 사물이다. - 객체는 구체적인 사물일 수도, 추상적인 개념일 .. 2022.07.11

• 

  Spring Boot + Vue.js + JPA CRUD 프로젝트 만들기 - 환경설정 이번에 포스팅 하게 된 SpringBoot + JPA + Vue.js 프로젝트는 해외 블로그 글을 참고해서 만들었습니다. 원본에서 소개하는 내용과 다른 부분도 있으니 참고하시길 바랍니다. 사용한 버전 SpringBoot : 2.7.0 Java : 1.8 core-js : 3.6.5 Vue.js : 2.6.11 MySQL : 5.5.5 Maven : 4.0.0 1편에서는 프로젝트의 환경설정을 하겠습니다. 데이터베이스 설정 (MySQL) local에 mysql이 깔려 있다고 가정하고 설명을 쓰겠다. 1) mysql 접속 mysql -uroot -p username을 입력하고 비밀번호를 입력해서 mysql에 접속한다. 2) 데이터베이스 만들기 create database vue1; vue1이라는 데이터베이스를.. 2022.06.14

• 

  스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 (2) * 이 글은 인프런 김영한 강사님의 스프링 입문 강의를 듣고 작성했습니다. * 스프링 웹 개발 기초 - MVC와 템플릿 엔진 MVC : Model, View, Controller View = 화면에 보여지는 것과 관련된 코드들이 모여 있다고 보면 됨 Controller, Model = 비즈니스 로직과 관련 타임리프의 장점 절대경로를 통해서 서버 없이 웹 페이지에서 화면을 볼 수 있고, 소스코드를 열어볼 수 있다. 스프링 웹 개발 기초 - API @ResponseBody : Http 프로토콜의 body 부분에 데이터를 직접 넣겠다는 의미 동작원리 HttpMessageConverter 값이 String이라면 StringConverter가 동작, 값이 객체면 JsonConverter 동작 좀 더 자세히 보면,.. 2022.06.10

• 

  하나의 컴퓨터에서 여러개 깃허브 계정 사용하기 회사 컴퓨터에서 가끔 사이드 프로젝트에 관한 커밋을 할 때, 개인 계정으로 접속해서 커밋을 해도 잔디가 안 심어지는 현상이 생겼다. 알아보니 git config 에서 username과 email이 계정 정보와 일치하지 않으면 잔디가 안 심어진다는 것 ㅠㅠ 그래서 업무 디렉토리와 개인 디렉토리를 분리해서 각각 다른 깃허브 계정을 적용시키고 싶었다. ssh-key 생성 1. 먼저 git bash를 켠다. 2. 각 깃허브 계정에 해당되는 key를 생성한다. ssh-keygen -t rsa -C "github email" -f "[filename]" 예시) ssh-keygen -t rsa -C "xxx123@gmail.com" -f "id_rsa_me" 파일 이름은 구분 지을 수 있도록 하면 된다. 이렇게 하면.. 2022.06.10

• 

  ssh key 설정 / ssh 패스워드 없이 자동 로그인 하기 ssh-key 설정을 왜 하고, ssh가 뭔지 이해가 안간다면 https://wjddk718.tistory.com/46 ftp, ftps, sftp, ssh 개념 정리 아래 사이트에 잘 정리되어 있어서 기록함! https://nhj12311.tistory.com/76 ftp, ftps, sftp(ssh) 개념 정리 IT를 전공하거나 아니면 실무를 접하다보면 이 놈의 ftp, ftps, sftp(ssh) 프로토콜에 대해서 이야길.. wjddk718.tistory.com 이 포스팅을 참고하길 바람 회사에서 사이드 프로젝트를 진행하면서 scp 명령어를 많이 써야 했다. sftp 방식을 사용하기 때문에, 클라이언트의 공개키 등록을 서버에 해줘야 했던 상황! 먼저 클라이언트 서버에 공개키가 없다면 생성해줘야 한다.. 2022.06.09

• 

  스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 (1) * 이 글은 인프런 김영한 강사님의 스프링 입문 강의를 듣고 작성했습니다. * 1) 프로젝트 환경 설정 다음과 같은 순서로 간단한 웹 앱을 만들면서 스프링 기본 원리에 대해서 배우는 강의다. Maven, Gradle은 라이브러리를 가져오고 이 라이브러리들의 라이프 사이클을 관리해주는 툴이다. 과거에는 Maven을 많이 썼지만, 요즘엔 Gradle을 많이 쓰는 추세다. SNAPSHOT은 아직 만들고 있는 버전이고, M으로 시작되는 버전은 정식으로 릴리즈 된 버전은 아닌 것이다. Group에는 보통 회사명이 들어가게 만든다. Artifact는 빌드 됐을 때 나오는 이름을 설정하는 것. 참고로, 현업에서는 system.out.println을 사용해서 로그를 찍지 않는다. 따로 로그를 찍어야 전체적인 로그 관리.. 2022.05.26

• 

  Swagger를 이용한 Springboot Restful API 문서 자동화 하기 회사에 있는 코드가 문서화 되어 있지 않은 관계로 인수인계가 불편하고, 코드를 파악하기에도 힘든 이유로 Swagger 적용을 하자는 이야기가 나왔다. 그래서 처음 사용해보게 된 Swagger! 블로그에 정리해두면 나한테도, 다른 사람에게도 도움이 될 것 같아서 간단하게 정리하려고 오랜만에 블로그에 방문했다. 그러면 서론이 길어지니, 본론으로 들어가겠음. Swagger란? 스웨거(Swagger)는 개발자가 REST 웹 서비스를 설계, 빌드, 문서화, 소비하는 일을 도와주는 대형 도구 생태계의 지원을 받는 오픈 소스 소프트웨어 프레임워크이다. 대부분의 사용자들은 스웨거 UI 도구를 통해 스웨거를 식별하며 스웨거 툴셋에는 자동화된 문서화, 코드 생성, 테스트 케이스 생성 지원이 포함된다. 출처 - 위키백과 먼.. 2022.04.21

• [오류] Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. 오랜만에 쓰는 블로그 글이고만 하하. 나름 바쁘게(?) 사느라 블로그에 글을 올릴 수가... 는 핑계겠지; 회사에서 작은 프로젝트를 하면서 만난 오류다. Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class 오류가 발생한 이유는 데이터베이스를 구성하려는데 설정한 값이 없어서 발생하는 것이다. 아마도 pom.xml 에서는 dependency를 추가해줬는데, 따로 DB 관련 설정을 안해줘서 발생한 오류 같다. 검색해보면 application.properties에서 D.. 2022.03.30

• slf4j, log4j, logback에 대해 알아보기 최근 log4j에 관한 보안점이 취약하다는 자료들을 접하고 나서, 회사에서 사용하는 로깅에 대해서 알아보다가 slf4j, log4j의 차이가 뭔지 궁금해져서 찾아봤다. 아래의 블로그에 설명과 그림이 유용해서 포스팅 한다! https://minkwon4.tistory.com/161 [Logging] slf4j, log4j, logback, log4j2 로그(log)는 소프트웨어의 이벤트를 기록하는 것으로써, 소프트웨어의 동작상태를 파악하고 문제가 발생했을 때 이 동작 파악을 통해서 소프트웨어의 문제를 찾아내고 해결하기 위해 디자인 되 minkwon4.tistory.com 2022.01.18

• ftp, ftps, sftp, ssh 개념 정리 아래 사이트에 잘 정리되어 있어서 기록함! https://nhj12311.tistory.com/76 ftp, ftps, sftp(ssh) 개념 정리 IT를 전공하거나 아니면 실무를 접하다보면 이 놈의 ftp, ftps, sftp(ssh) 프로토콜에 대해서 이야길 하게 되거나 듣거나 사용하게 됩니다만 개념이라도 좀 정확하게 갈무리하고 접해야한다는 생각이 nhj12311.tistory.com 2022.01.18

• 

  Collection(컬렉션)에 대해서 계기 ? 회사에서 백엔드 코드를 살펴보다가 List를 Stream으로 변환해서 안의 내용을 가공한 다음, collect 함수를 이용해서 다시 List로 만들어주는 내용을 접했다. 이 코드로 List, Map, Set 그리고 Collections에 대해서 정확히 알아보고 싶어졌다. 내용 구글에 다른 개발자들의 설명을 보기 전에, 가장 기본이 되는 Java Doc에 정의된 내용을 살펴봤다. https://docs.oracle.com/javase/8/docs/api/index.html Class Collections java.lang.Object java.util.Collections public class Collections extends Object This class consists exclusivel.. 2022.01.14

• 

  업무 중에 알게 된 inputStream, outputStream @RequestMapping(value = "/pricePolicy/impressionExcelFile", method = RequestMethod.GET) public ResponseEntity impressionExcelFile(HttpServletRequest httpRequest) { Long pricePolicyId = Long.parseLong(httpRequest.getParameter("pricePolicyId")); Long priceId = Long.parseLong(httpRequest.getParameter("priceId")); Price price = priceService.selectPriceFilePath(pricePolicyId, priceId); InputStream in.. 2021.12.01

• 

  리액트, 웹에 관한 간단한 개념 소개 및 자바스크립트 문법 정리 Section 1 React.js - 클라이언트 사이드의 JavaScript 라이브러리 과거에는 사용자가 링크나 버튼을 클릭하면, 서버와 통신 후 새로운 HTML 페이지를 보여줌 이제는 자바스크립트를 통해서 새 페이지를 요청하지 않고, JS가 HTML DOM 요소를 조작해서 사용자에게 화면을 보여줄 수 있게 됨 리액트가 필요한 이유 ? 자바스크립트만 이용한다면 한 개의 기능에 필요한 모든 단계의 코드들이 전부 서술되어야 함 = 명령적 접근법 (Imperative Approach) 낮은 단계의 코드들 (예를 들어 document.createElement)은 React 라이브러리에 의해 미리 정의되어서 사용됨 => 이러한 이유로 리액트는 개발자가 복잡한 사용자 인터페이스를 훨씬 쉽게 구현할 수 있도록 해줌 .. 2021.11.25

• 

  map, filter, reduce map // map (고차함수) // 함수에서는 처리한 결과값을 리턴하게 된다 const map = (f, iter) => { let res = []; for (const a of iter) { res.push(f(a)); } return res; }; // 예제 1 let names = []; for (const p of products) { names.push(p.name); } console.log(names); // map을 이용해서 다시 작성한 예제 1 console.log(map(p => p.name, products)); // 예제 2 let prices = []; for (const p of products) { prices.push(p.price); } console.log(prices).. 2021.11.24

• 

  제너레이터와 이터레이터 1) 제너레이터와 이터레이터 제너레이터 : 이터레이터이자 이터러블을 생성하는 함수, well-formed iterator를 리턴하는 함수 어떠한 값들을 제너레이터를 통해서 이터러블로 만들고, for.. of 문을 통해 순회를 할 수 있게 만들 수 있다는 것! function *gen() { yield 1; yield 2; yield 3; } let iter = gen(); console.log(iter[Symbol.iterator]() == iter); // true 반환 예제 10까지의 홀수만 뽑아내는 제너레이터 함수 function *odds(l) { for(let i = 0; i < l; i++) { if (i % 2) yield i; } } let iter2 = odds(10); console.l.. 2021.11.24

• 

  Vanila JavaScript로 Countdown Timer 만들기 결과물 먼저 공개하자면.. 내가 창작한 것은 아니고 자바스크립트 문법은 어느정도 익혔다고 생각해서 능숙하게 사용하고 싶어서 유튜브를 통해 튜토리얼을 찾아서 완성해봤다. 구체적으로 자바스크립트 뿐만 아니라 HTML, CSS 작성까지 따라서 해보니까 어느 상황에서 어떤게 쓰이는지 좀 파악이 되어서 좋았다. 타이머 말고도 다른 프로젝트들도 클론코딩하면서 감을 더 익혀야겠다. 출처는 https://youtu.be/dtKciwk_si4 내가 작성한 코드는 https://github.com/Jung-Ah-C/countdown-timer 2021.11.23

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (13편) async / await 1. Promise로 비동기 네트워크 호출 코드 만들기 function fetchUser() { // resolve나 reject를 호출하지 않으면 Promise가 pending 상태에 머무르게 된다. return new Promise((resolve, reject) => { // do network request in 10 secs.. resolve('ellie'); }); } // 동기적으로 처리하게 되면 네트워크와 통신하는 10초 동안 사용자는 빈 화면을 보게 된다. const user = fetchUser(); user.then(console.log); console.log(user); 2. async // async // 함수 앞에 async라는 키워드를 쓰면 자동으로 .. 2021.11.19

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (12편) Promise - 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 하는 Object - 정해진 기능을 성공적으로 처리하면 메세지와 함께 결과값을 반환, 처리하지 못하면 에러를 전달해줌 - 콜백함수 대신에 유용하게 쓰일 수 있음 파일을 읽어오거나, 네트워크 요청 하는 것들은 시간이 걸리는 작업이기 때문에 비동기로 처리하는 것이 좋음 만약, 동기적으로 처리하게 된다면 작업을 하는 동안 다음 코드가 실행되지 않는 번거로움이 발생하기 때문이다. Promise는 만드는 순간에 excuter 함수를 실행하기 때문에, 원하지 않을 때도 네트워크 통신이 일어날 수 있음을 유의해야 한다. 'use strict'; // Promise is a JavaScript object for asynchoronous op.. 2021.11.18

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (11편) 비동기 처리의 시작 콜백 이해하기 'use strict'; // JavaScript is synchronous : 자바스크립트는 동기적인 언어다. // Execute the cod block in order after hoisting. // hoisting: var, function declaration 은 맨 위로 선언됨 console.log('1'); setTimeout(() => console.log('2'), 1000); // 1000msc = 1초 console.log('3'); // Synchronous callback function printImmediately(print) { print(); } printImmediately(()=> console.log('hello')); // Asyn.. 2021.11.16

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (10편) JSON HTTP (Hypertext Transfer Protocol) - 웹사이트, 웹 어플리케이션과 같은 클라이언트가 어떻게 서버와 통신할 것인지 정해놓은 규약 - 클라이언트가 서버에게 데이터를 요청 (request), 서버는 클라이언트 요청에 맞게 응답(response) Hypertext - HyperLink, 문서, 이미지 파일 등을 포함한 것들을 말함 AJAX (Asynchronous JavaScript And XML) - 웹 페이지에서 동적으로 서버와 데이터를 주고 받을 수 있는 기능을 말함 - 대표적으로 XHR(XMLHttpRequest)라는 Object가 있음, 브라우저 오픈 API에서 제공하는 것들 중의 하나 - 최근에는 새로 추가된 fetch() API를 통해서 데이터를 쉽게 주고 받을.. 2021.11.16

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (9편) 강의 시작 전 Quiz 내 답안 // Q1. make a string out of an array const fruits = ['apple', 'banana', 'orange']; let toString = fruits.toString(); console.log(toString); // Q2. make an array out of a string const fruits2 = '🍎, 🥝, 🍌, 🍒'; let toArray = fruits2.split(', '); console.log(toArray); // Q3. make this array look like this: [5, 4, 3, 2, 1] const array = [1, 2, 3, 4, 5]; console.log(array.reverse()); .. 2021.11.15

• 

  드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (8편) 배열에 관한 내용 간단한 개념 정리 - 비슷한 종류의 데이터를 묶어 놓는 것 = 자료구조 - Object : 서로 연관된 것들끼리 묶어 놓는 것 - 비슷한 타입의 Object들을 묶어 놓는 것을 자료구조라고 이해하면 된다. 배열을 정의하는 방법과 인덱스를 활용하는 법 // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['apple', 'banana']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); // 배열의 인덱스에 해당하는 값을 출력한다. console.log(fruits[fruits.l.. 2021.11.15

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (7편) Object // Objects // one of the JavaScript's data types. // a collection of related data and/or functionality. // Nearly all objects in JavaScript are instances of Object // object = { key : value };, object는 key와 value의 집합체이다 // 1. Literals and properties // Object를 만드는 방법 const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person.. 2021.11.15

• 맥에서 사용중인 포트 죽이기 먼저 iTerm과 같은 터미널 창을 켠다. lsof i: 포트번호 를 입력한다. -MacBookPro ~ % lsof i: 포트번호 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME idea 3361 jungah 890u IPv4 0x5647aadede9b53ed 0t0 TCP java 3498 jungah 253u IPv6 0x5647aadeed506e45 0t0 TCP *:http-alt (LISTEN) 그러면 위와 같이 현재 실행중인 프로세스를 보여주는데, 여기서 PID (프로세스 아이디)를 통해서 포트를 죽일 수 있다. kill -9 PID를 입력한다. kill -9 PID 포트가 잘 죽여졌는데 처음 명령어를 통해서 알 수 있다. 2021.11.15

• 리액트 Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. // render() 부분 코드 일부 const inventoryListBySO = () => { let result = []; let numberForKey = 0; pricePolicyStore.selectedInventoryList.length > 0 && // ... 생략 }; // return() 부분 코드 일부 // 처음에 inventoryListBySO 라고만 선언함 {inventoryListBySO()} render() 부분에 함수를 선언하고, return 부분에서 이 함수를 실행을 안해줘서 생긴 버그다. 함수로 선언했으니까 당연히 실행을 해줘야 코드가 돌아가는데, 함수명만 선언해줘서 코드가 작동을 안했다. 참고한 사이트 https://kyounghwan01.github.io/blog/de.. 2021.11.15

• 

  드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (6편) 간단한 개념 정리 클래스 : 연관된 속성(fields), 메소드(methods)가 포함된 것을 말함 간혹 메소드가 없이 데이터만 들어 있는 클래스도 존재하는데 이를 데이터 클래스라고 말한다. 클래스의 내부적으로 보여주는 변수, 밖에서 보이는 변수를 구분 짓는 것을 '캡슐화(encapsulation)'라고 한다. 클래스를 이용해서 상속, 다형성이 일어날 수 있음. 이런 모든 것들을 말해서 객체지향이라고 한다. 클래스 (= 템플릿) - 한번만 선언할 수 있음 - 어떤 종류의 데이터만 들어올 수 있다라는 틀만 정의해 놓는다고 볼 수 있음 ex) 붕어빵 틀 오브젝트 - 클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 된다 - 오브젝트는 클래스를 이용해서 많이 만들 수 있다 - 클래스는 틀만 정의해놓은 것.. 2021.11.11

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (5편) 앞으로 강의를 들으면서 필기는 코드와 함께 작성할 예정. 필요하다면 블로그 글작성 란에도 추가할 것이다. :) 함수 (Function) // 자바스크립트는 procedural programming language (절차적 프로그래밍 언어) // function은 sub-program이라고도 함 // Function // - fundamental building block in the program (함수는 다음과 같이 불리기도 함) // - subprogram can be used multiple times (여러번 재사용이 가능함) // - performs a task or calculates a value (일을 처리하거나 계산할 때 사용됨) // 1. Function declaration // fu.. 2021.11.11

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (4편) 3편에 관한 보충 설명 (변수, 객체에 관해서) // Variable, rw(read/write) // Constant, r(read only) // primitive type : 메모리에 값이 그대로 저장됨 // object type : 객체를 가리키는 reference 값이 메모리에 저장됨 // Note! // Immutable data types : primitive types, frozen objects ( i.e. ojbect.freeze()) // Mutable data types : all object by default are mutable in JS // 기본적으로 JS의 모든 객체는 값이 변경될 수 있는 mutable data type으로 본다. Operators, Numeric Ope.. 2021.11.11

• 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (3편) 3. 데이터타입, data types, let vs var, hoisting 변수 : 변경될 수 있는 값 let name = "JungAh"; console.log(name); name = 'hello'; console.log(name); 여기서 name은 저장소를 가리키는 포인터의 역할, name이라는 이름의 저장소에 저장된 값은 변경될 수 있다. Block Scope vs Global Scope {} bracket 안에 정의된 변수는 이 안에서만 사용될 수 있다. 어느 곳에서나 접근이 가능한 변수의 영역을 global scope라고 한다. let vs var var를 사용하면 안되는 이유 1) var hoisting (변수를 선언한 내용을 맨 위로 끌어올려주는 역할을 하는 것) 2) block sco.. 2021.11.10

• 리액트 node_modules decorator 관련 오류 먼저 관련 버그 문구는 아래와 같다. SyntaxError: /App.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled 업무를 하다가 깃허브에서 프로젝트를 새로 다운로드 받고 npm i -> npm start 로 프로젝트를 실행하니까 위와 같은 버그가 생겼다. 다운로드 한 프로젝트는 mobX를 사용하고 있어서 decorator가 필요한데, node_modules/babel-preset-react-app 경로의 create.js 파일에서 // Turn on legacy decorators for TypeScript files isTypeScriptEnabled && [ require('@babel/plugi.. 2021.11.10

• 리액트 package-lock.json에 대해서 회사에서 리액트 프로젝트를 받아서 실행하다가 알게된 사실 package-lock.json에 관한 설명글 https://www.hamadevelop.me/packagelock/?fbclid=IwAR0Zs7xlZgGharxKhWRDG7AUDQIinWHRfYS_gnob2MVTROTphOPuFYDGIic 2021.11.10

• 

  드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (1~2편) 1. 배우기 전 영상 내용 ECMAScript 5, 6 -> 모던 자바스크립트 브라우저마다 자바스크립트가 잘 돌아갈 수 있도록 해주는 엔진들이 있음 -> 대표적으로 크롬에서는 V8, 이는 node나 electron에서도 이용되고 있음 BABEL : 개발자들이 개발할 때는 최신 버전의 자바스크립트로 하고, 배포 시에는 ECMAScript 5나 6로 변환해주는 자바스크립트 트랜스컴파일러 SPA(Single Page Application)를 자바스크립트로 구현하기 위해서 만들어진 프레임 워크들이 대표적으로 리액트, 뷰, 앵귤러 등이 있다. 자바스크립트를 활용해서 node로 백엔드, react-native로 모바일, electron으로 데스크탑 어플리케이션을 만들 수 있다. 웹 어셈블리로 자바스크립트 이외의 언.. 2021.11.10

• 

  데이터 통신에서 사용하는 JSON (JavaScript Object Notation) JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용된다. ajax와 rest api 통신 할 때 자주 받는 데이터 형식이며, 데이터를 전송할 때 최소한의 용량으로 전송한다. 회사에서 코드를 보다가 repository에서 데이터를 가져온 후에 코드에서 for .. in 문을 통해서 다시 배열을 구성하는 부분이 있었다. 궁금해져서 찾다보니까 respAPI로 가져온 데이터는 JSON 형태로 되어 있기 때문이었다. 코드와 예시로 잠시 살펴보자면 이런식으로 데이터 통신을 통해 가져온 값들은 JSON 형태로 key값과 value로 구성되어 있다. 코드에서 필요한 부분은 key값이 아니고 value 부분의 배열 값이기 때문에 for.... 2021.11.09

• 스프링부트 JDBC Connection SQLException 오류 해결 ### Error querying database. Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; nested exception is java.sql.SQLException: Cannot create PoolableConnectionFactory (The TCP/IP connection to the host 10.1.1.21, port 1433 has failed. Error: "Connection timed out: no further information. Verify the connection properties. Make sure that an instance of SQL.. 2021.11.08

• 

  모던 자바스크립트 튜토리얼 읽으면서 - 자바스크립트 기본 (1) 시간이 날 때마다 정독하면서 알고 싶은 개념들이나 중요하다고 생각하는 것들을 적어갈 예정 20211106 (토) 1. 소개 Http 트랜스파일 -> TypeScript (Microsoft 개발) 자바스크립트에서 가장 많이 사용하는 통합개발환경은 웹스톰이나 VSCode 웹 개발자 도구 단축키 - 윈도우 : F12 - 맥 : cmd+opt+J lalala is not defined : lalala가 정의되지 않았다. 밑에 있는 > 이 부분은 커맨드 라인(command line)이라고 부르며, 자바스크립트 명령어를 입력할 수 있다. 엔터를 누르면 실행되고, 여러줄을 입력하고 싶다면 shift+enter를 통해서 작성할 수 있다. 2. 자바스크립트 기본 1) Hello, World! - - 자바스크립트 코드 양.. 2021.11.06

• 

  ES6에서의 순회와 이터러블:이터레이터 프로토콜(2) 1) 사용자 정의 이터러블, 이터러블/이터레이터 프로토콜 정의 // 사용자 정의 이터러블 const iterable = { [Symbol.iterator]() { let i = 3; return { next() { return i == 0 ? { done: true } : { value: i--, done: false }; }, [Symbol.iterator]() { return this; } } } }; let iterator = iterable[Symbol.iterator](); // console.log(iterator.next()); // console.log(iterator.next()); // console.log(iterator.next()); // console.log(iterator.ne.. 2021.11.04

• 

  ES6에서의 순회와 이터러블:이터레이터 프로토콜(1) 1) ES5 vs ES6 리스트 순회 비교 ES5에서의 리스트 순회 const list = [1, 2, 3]; for (var i = 0; i < list.length; i++) { console.log(list[i]); } const str = 'abc'; for (var i = 0; i < str.length; i++) { console.log(str[i]); } ES6에서의 리스트 순회 for (const a of list) { console.log(a); } for (const a of str) { console.log(a); } ES6에서 확실히 간결해진게 눈에 보인다. 2) 이터러블/이터레이터 프로토콜 (Array, Set, Map) // Array const arr = [1, 2, 3]; f.. 2021.11.03

• Git 커밋취소 회사에서 업무를 하다가, 다른 브랜치로 checkout해서 커밋을 해버렸다. 해당하는 브랜치에 commit & push를 하기 위해서 Undo Commit으로 커밋한 내용은 그대로 살려서 복원했다. 여기서 목록에 reset과 revert도 있었는데 간단하게 말하자면 reset : push를 이미 한 상태에서는 사용할 수 없음, 과거의 이력이 커밋에 안 남는 장점이 있지만, 사용한 사람만 알 수 있음 (협업에 적절하지 않은듯) revert : 과거 이력을 없애주지만, 깃허브에 revert를 했다는 이력이 남게 됨 참고 사이트 https://youngest-programming.tistory.com/220 2021.11.03

• 

  함수형 자바스크립트 기본기 회사 업무에서 리액트를 다루는데, 자바스크립트 기본이 되어 있지 않은 상태에서 업무 처리를 하기가 매우 힘들었다. 더군다나, 핵심 기능들은 자바스크립트 함수형으로 많이 구현되어 있었다. 회사 교육비를 지원받아서 듣게 된 강의이다. 공부한 내용을 기록하기 위해서 작성하는 게시글. 다 수강할 때까지 블로그에 배운 내용을 정리할 생각이다. 평가 : 코드가 계산(Evaluation)되어 있는 값을 만드는 것 일급 - 값으로 다룰 수 있다. - 변수에 담을 수 있다. - 함수의 인자로 사용될 수 있다. - 함수의 결과로 사용될 수 있다. const a = 10; const add10 = a => a + 10; const r = add10(a); add10(a); 일급 함수 - 함수를 값으로 다룰 수 있다. - 조.. 2021.10.31

• 

  자바스크립트) 변수와 자료형 참고하기 좋은 사이트 : https://ko.javascript.info/ 참고한 강의 : https://www.youtube.com/watch?v=KF6t61yuPCY&ab_channel=코딩앙마 변수 자바스크립트에서 변수를 선언할 때는, 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언한다. 변수는 문자와 숫자, $, _ 만 사용 첫 글자는 숫자가 될 수 없음 예약어는 사용할 수 없음 가급적 상수는 대문자로 작성 변수명은 읽기 쉽고 이해할 수 있게 선언 자료형 1) 문자 const name1 = "Mike"; const name2 = 'Mike'; const name3 = `Mike`; // (`` 백틱 사용) 문자열에 변수를 사용하고 싶다면, const message3 = `I'm .. 2021.10.11

• IntelliJ에서 메이븐(maven) 프로젝트를 git clone 했는데 pom.xml 이 있음에도 maven project로 인식하지 못할 경우 pom.xml 우클릭 후 Add as a maven project 눌러주면 해결! 2021.09.03

• 인텔리제이 sysout 기능 IntelliJ에선 System.out.println() 단축키는 "sout" + tab public static void main(String[] args) 의 단축키는 "psvm" +tab 출처 : https://whitezoos.tistory.com/54 2021.08.26

• 인텔리제이 cannot access org.springframework.context.configurableapplicationcontext 에러 해결 cannot access org.springframework.context.configurableapplicationcontext 1. 해당 프로젝트의 .iml 파일 삭제 2. IDE 상단바 File -> Invalidate Cache and REstart 참고 main.iml : 인텔리제이에서 pom.xml을 인식하지 못하여 자체적으로 의존성 관리 등을 위해 생성하는 파일 참고 사이트 : https://nohbj.tistory.com/47 2021.08.26

• Visual Studio Code에 리액트 개발 환경 세팅하다가 난 오류 (환경변수) 리액트에서 상태 관리로 npm을 쓰기 때문에 node.js 설치 후 create-react-app 라이브러리를 사용하려다 난 오류다. 터미널 창에서 npx create-react-app 입력하니 아래와 같은 오류가 떴다. npx : 'npx' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함 된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 이유는? 구글링을 해보니 환경변수를 설정해주지 않아서라고 한다. 환경변수? 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 실행할 파일이 들어있는 폴더를 Path 환경변수에 미리 설정해놓으면 명령프롬프트 상에서 실행하고자 하는 파일이 있는 폴더가 아.. 2021.08.24

• jQuery datepicker UI 사용중 겪은 오류 - $(...).datepicker is not a function datepicker를 사용하다가 $(...).datepicker is not a function 라는 오류를 만났다. 원인은 jQuery 소스를 불러오는 api 링크가 2개나 들어가 있어서 충돌이 났음 둘 중에 하나만 사용해야 하므로 위에 있는 링크를 삭제했더니 깔끔하게 해결되었다. 이렇게 간단한 문제였던 것을 1시간 반이나 잡아먹게 했다. 더 열심히 해야지. 2021.07.15

• 210323 mysql (쇼핑몰 페이지 만들기 위한 간단한 개념) 다른 테이블과 열을 합칠 때 사용하는 것을 '조인'이라고 함. 같은 데이터베이스 안에 있는 것들을 합칠 때 '이너조인' From A 테이블 Inner Join B 테이블 On A.열이름 = B.열이름 (on에는 조건문을 넣음) 행을 합칠 때, SELECT empno FROM emp UNION SELECT empno FROM empno --> 하나의 테이블로 됨 SELECT * from (SELECT emp_no no FROM emp UNION SELECT emp_no no FROM empno) t --> 합친 테이블에서 모든 데이터를 가져오고, t라는 이름으로 알리어스 함 쿼리 안에 있는 쿼리 : 서브 쿼리 SELECT emp_name FROM emp WHERE dept_no = (SELECT dept_.. 2021.03.23

• 210322 배운 내용 메소드마다 교집합에 해당하는 명령이 나온다면, 하나로 만들어야 함 -> 그 이유는 나중에 수정을 할 때 번거로움을 없앨 수 있고, 하나만 호출하더라도 사용할 수 있으므로 -> 중복된 부분의 유지보수 / 사후관리를 편하게 하기 위해서 코드 작성할 때, 띄어쓰기 / 들여쓰기, 디버깅 코드 추가, 주석 적기 습관화 하기! 1. getConnection 메소드 만들기 2. SQL 기초 실습 (~order by) 3. managerList (관리자 목록)에서 manager 수정 및 삭제 구현 2021.03.22

• 210319 쇼핑몰 만들기 (로그인 창 구현) adminIndex.jsp (로그인 창) adminIndex ID PW 로그인 매니저 등록 님 반갑습니다. 로그아웃 Manager.java package gdu.mall.vo; public class Manager { public int managerNo; public String managerId; public String managerPw; public String managerName; public String managerDate; } ManagerDao.java package gdu.mall.dao; import gdu.mall.vo.Manager; import java.sql.*; public class ManagerDao { // 로그인 메소드 public static Manager logi.. 2021.03.19

• 210318 static 메소드 참고) 클래스는 새로운 사용자 정의 참조 타입 클래스는 메소드의 컨테이너 같은 것이다. 클래스는 타입이며, 메소드 컨테이너이다. 마리아 DB에서 가져온 데이터를 처리할 때, 원래는 jsp 파일에서 모두 작성했지만, 클래스에서 메소드화 시켜서 한 줄로 불러올 수 있음. 이는 DB 정보를 보편화시켜서, 다른 jsp 파일에서도 편하게 사용할 수 있는 장점이 있음. Member.java package goodee.vo; public class Member { public String memberId; public String memberPw; public String memberName; public String memberDate; public String memberEmail; } MemberDao.java.. 2021.03.18

• 210318 session을 사용해서 로그인 인증하기 - session 개념을 위한 예제 (참고 : jsp 책 270쪽 - 세션 개념) a.jsp a.jsp b b.jsp b.jsp - session을 이용해서 로그인 창, 로그인 성공, 로그아웃 기능 구현하기 loginForm.jsp loginForm id : pw : 로그인 loginAction.jsp auth.jsp (로그인 성공했을 때 나오는 창) 님 반갑습니다. 로그아웃 logoutAction.jsp 로그인 한 흔적이 지워지게 됨 %> 2021.03.18

• 210318 카드게임 만들기 Card.java (goodee.vo 패키지 안에 존재) package goodee.vo; public class Card { public int num; // 1 ~ 13 (K, Q, J 는 13, 12, 11로 처리, A는 1로 처리함) public String kind; // 4가지 : spade, diamond, heart, clover } cardPlayForm.jsp 블랙잭 2명 3명 4명 play cardPlayAction.jsp (누가 이겼는지 알고리즘 추가 완료하고, 다시 수정해놓기!) 2021.03.18

• 

  210317 java 문법 (카드게임 만들기) JDK = Java Development Kit, 자바 개발 도구의 줄임말 : 그 안에서 JRE (Java Runtime Environment) .클래스를 실행할 수 있게 환경설정을 해줌 : 자바로 프로그램을 개발할 수 있는 실행 환경 (JVM)과 개발 도구(컴파일러)를 제공함 책 참고해서 밑에 있는 개념들 다시 정리하기! 참조변수 : 클래스 : 참조타입 : 예) Connection conn, PreparedStatement stmt, ResultSet rs ... 패키지 : 배열 : 참조타입의 배열 카드게임 만들기 (CardMainTest.java) - 미완성 동적배열 (ArrayList) 2021.03.17

• 210316 글목록(boardList) boardList 홈으로(전체보기) 글입력 DB 값이 바뀌지 않음, insert/update/delete 실행시 executeUpdate() -> DB 값이 바뀜 %> board_no board_category board_title board_user 1) { // 현재페이지가 1페이지면 이전페이지가 없기 때문에 if(boardCategory == null) { // boardCategory값이 있을 때와 없을 때 boardList.jsp?뒤의 입력값(매개변수)의 개수 또는 형태가 다르다. %> 이전 이전 다음 다음 2021.03.16

• 

  엠제이 드마코의 부의 추월차선 제목과 같이 부에 관한 이야기다. 사진과 같이 책을 읽으면서 나는 많은 포스트잇을 붙였고, 형광펜으로 중요한 부분은 밑줄도 많이 그으면서 읽었다. 결론적으로 말하자면, 나는 이 책을 두고두고 계속 꺼내보며 읽을 거다. 저자가 말하는 내용은 우리가 살아가면서 한 번쯤 해봤을 법한 내용도 많지만, 한번 더 독자에게 짚어주고 구체적인 저자의 생각도 담겨 있어서 좋았다. 특히 한국사회에서 쉽게 접하고 강조하는 말들과 반대되는 말들이 많이 나와있어서 신선한 충격도 많이 받았다. 이 책은 부를 어떻게 얻을 것인지에 관한 책이긴 하지만, 전반적으로 인생을 살아가면서 우리가 지녀야 할 마음가짐과 가치관에 대해서도 말하고 있다고 생각했다. 나 자신을 많이 반성하게 만들었다. 나는 처음부터 끝까지 순서대로 읽었지만, 목차.. 2020.05.11