들어가며 js로 파싱되는 html의 객체들은 일종의 속성과 계층적 관계가 생긴다. 이러한 속성과 관계 전체를 js는 노드라고 한다. document는 head와 body를 자식으로 하며, body는 div와 form 을 자식으로 하고, form 내부에는 input 과 h3 이 형제의 관계를 가진다. 이러한 element 의 계층적 관계와 각 각의 태그는 모두 노드이다. img는 src, width 를 속성으로 가지며 input은 value, title, type 등을 속성으로 가진다. 이러한 속성 attribute 역시 노드이다. 그 외 주석, 텍스트 등 html 을 이루는 모든 것이 노드이며, js 를 통해 출력하고 조작할 수 있는 대상이 된다. 결국 dom을 조작한다는 것은 document의 node 를 이해하고 그것을 통제한다는 의미이다.
나는 소소하고 오래된 서비스에 대한 운영 및 유지보수 업무를 한다. 나는 작은 회사의 개발자로 근무 중이다. 회사는 10년이 좀 넘었다. 회사에는 회사의 핵심 서비스가 있고, 그것을 둘러싼 일종의 중계서버로서의 소, 중 규모의 서비스들이 위성처럼 핵심 서비스 주변을 맴돌고 있다. 중계 서비스는 회사의 경력만큼 오래된 것들이 있다. 몇 개는 php로 되어 있고, 한 두 개는 자바7과 스프링 레거시로 되어 있다. 현재 개발하는 새로운 서비스는 스프링부트로 개발 중에 있다. 특히 php로 된 오래된 서비스들은 큰 수정 없이 오래 동안 방치되어 있다. 가끔 문제가 생기거나 데이타를 추출할 때 나는 그것들을 살펴본다. 회사는 오래된 서비스에 대하여 고도화를 하거나 재개발할 생각이 없다. 회사가 이것을 방치하는...
js의 최상위 객체는? 자바 객체의 최상위 객체는 Object이다. js는 무엇일까? 브라우저의 최상위 객체는 window 이다.
JSON 이란? json 은 JavaScript Object Notation 의 줄임말로, 자바스크립트의 데이터 정의 방식을 의미한다. JSON은 xml 보다 덜 복잡하고 csv 보다 좀 더 복잡한 내용을 구현하는 절충안으로 활용된다. js memory의 객체와 JSON 간 변환 json - js 의 변환은 eval이나 JSON 으로 수행한다. eval 은 json(혹은 js) 문법으로 구현된 문자열을 js 메모리에 로딩하는 매서드이다. 보통 eval 보다는 JSON.parse 나 JSON.sringify를 주로 사용한다. 다만, 파싱과정에서 JSON의 값을 엄밀하게 검증한다. js의 객체를 생성할 때 키 값을 작성할 때 큰 따옴표가 없어도 되나, JSON 을 파싱할 때는 문자열의 경우 숫자를 제외한 키, 벨류에 대해서는 엄격하게 큰 따옴표로 감싸야 한다. 여담으로, 키에 띄어쓰기가 있을...
global 과 local 변수의 경합 같은 변수 명이 중복되고, 그것을 호출 할 경우, js 는 그 경합에서 어떤 변수에 손을 들어줄까?
함수의 대입 js 에서 함수는 객체이다. 그러므로 어떤 변수에 어떤 함수를 대입할 수 있다. 이러한 특징을 살린 것이 클로저 함수이다. 그럼 fn(); 과 fn; 의 차이는 무엇일까? 이를 구체적으로 살펴보고자 한다.
dom의 활용 html을 객체화 한 document를 우리는 어떻게 출력하고 조작할까? document의 태그 객체는 event를 가진다. event란 누르거나(onclick), 변경되는(onchange) 등 다양한 클라이언트의 조작을 의미한다. 아래의 코드는 어떤 태그를 클라이언트가 클릭(onclick)할 때, prompt 로 값을 입력하고, alert으로 그 값을 출력하는 코드이다. 여담으로, alert과 prompt는 그것의 동작이 종료되기 전까지 그 아래의 스크립트를 읽지 않는 특징을 가진다. html 의 특정 태그에 js 코드 넣기
클로저 클로저Closure는 자바의 함수 구현 방식 중 하나로 프로퍼티의 은닉화를 보장하는 코딩 방식이다. 클로저란 명칭은 메모리와 관련이 있다고 한다. 외부함수의 메모리가 내부 메모리를 참조한 변수가 사라지기 전까지 없어지지 않는다는 의미에서 유래되었다고 한다. 그러니까 내부 함수의 생명주기가 외부 함수의 종료(close)를 좌우한다는 의미이다. 결론적으로 자바스크립트는 클로저를 통해 외부함수의 데이타를 은닉화하며, 원하는 기능을 구현할 수 있다.
들어가며 ObjectMapper를 사용하면서 직렬화 - 역직렬화 과정에서의 필요로 한 설정을 정리하였다. 직렬화란 java -> json 으로의 변환을 의미하며, 역직렬화는 json -> java 를 의미한다. LocalDateTime - json 간 변환 camelCase - under_case_score 간 변환
심볼 Symbol 심볼은 유일한 식별자임을 보장한다. 심볼을 선언하고 그 값을 특정 객체의 변수나 메서드로 주입 가능하다. 심볼은 keys 나 values 등을 추출하는 메서드를 통해 검출되지 않는다. 그러므로 기존에 존재하는 객체를 유지하며 원하는 값이나 기능을 넣을 수 있다. 특히, 객체는 생성 이후 프로퍼티를 넣을 수 있지만, 메서드는 넣을 수 없다. 심볼에 메서드를 대입하고, 그 값을 객체에 주입할 수 있다. 그러므로 기존의 코드를 수정하기 어렵거나 혹은 외부 라이브러리로 사용하며, 메서드의 추가가 필요한 경우, 효과적으로 사용할 수 있다.
객체 선언과 조작 JS의 객체 선언은 매우 간단하다.
들어가며 js 에는 다양한 매서드나 라이브러리를 지원하며 그 기능은 자바스프링과 달리 매우 간편하고 쉽게 구현 가능하다. 특히 화살표, 스트림 등 함수형 기능이 매우 다양해서 자바 8을 사용하는 것만 같았다. 무척 편하고 빨랐다. 왜 생산성이 좋다는지를 이번 내용을 공부하며 알 수 있었다. 뭔가 특별해 보이는 매서드를 위주로 정리했다(ㅎㅎ..)
들어가며 binding 이나 parsing 은 개발자들이 매우 흔하게 쓰는 단어이다. 단어는 보통 듣고 읽으면서 자연스럽게 그 뜻을 이해하는데 parse 와 bind는 아무리 들어도 그 차이를 이해하기 어려웠다. 두 단어 모두 대략적으로 데이터를 변환하는 것으로 이해가 되는데 두 개의 차이를 정확하게 이해하기 위하여 인터넷 서핑을 해봤다.
모든 변수는 참조변수 자바의 경우 primitive type 이 존재하지만 자바스크립트는 언제나 객체만 존재한다. 그러니까 변수는 언제나 참조변수이고 값은 객체이다. 숫자 123 나 문자열 "hello world" 는 사실상 new Number(123) 이나 new String("hello world")와 같다.
함수 js는 primitive type이 wrapper인 것처럼 함수 또한 객체이다. 함수는 closure 와 같이 함수를 리턴할 수 있다.
폰트 적용하기 폰트를 적용하기 위해서 구글에 들어가서 원하는 폰트를 찾는다. google fonts 나는 나눔 고딕 코딩 을 선택했다. 굵기를 선택하면 아주 친절하게 js 와 css 파일 설정값을 준다. 이를 적용하면 된다.
들어가며 스프링 부트는 보통 SLF4j을 인터페이스로 하여, 기본 로그 라이브러이인 Logback을 사용한다. 특별한 설정 없이 SLF4j 을 로거로 사용한다면 Logback 을 실제로 사용한다. Mybatis의 쿼리를 로그백으로 로깅할 수 있지만 다소 복잡한 세팅을 필요로 한다.
스프링 JDBC 와 in memory db 스프링은 인메모리데이타베이스를 제공한다. 외부 DB와 않고 사용 가능하다. 보통 H2를 사용한다. 웹 콘솔을 사용할 수 있다.
스프링부트와 설정 properties 스프링에는 프로퍼티스를 설정하는 방법이 두 가지 이다. @Value(${abc.test} @ConfigurationProperties(“tester”)
실행가능한 하나의 파일을 위하여 스프링부트의 중요한 목표 중 하나는 실행 가능한 하나의 파일을 만드는 것이며, jar 를 통해 이것이 실행가능해졌다. 스프링 부트에는 톰캣이 내장되어 있으며, jar 파일 하나로 스프링 코드가 동작한다.
WebApplicationType 스프링어플리케이션의 시작 단계 전후에서 여러가지 조작이 가능하다. setWebApplicationType(WebApplicationType.NONE); 은 무척 쓸모가 많다. NONE 으로 할 경우 web을 의존성으로 받았더라도 웹 어플리케이션이 유지되지 않고 컨텍스트를 생성 후 종료한다. 컨텍스트 생성 여부나 DB 커넥션 등을 간편하게 테스트 가능하다. 기본 값은 SERVLET 이며 REACTIVE 등 설정 가능하다.
@SpringBootApplication @SpringBootApplication은 스프링부트는 빈을 생성하고 컨텍스트를 만드는 과정을 내포한다. 이 어너테이션은 3개의 어너테이션을 포함한다. @SpringBootConfiguration @EnableAutoConfiguration @ComponentScan @ComponentScan은 해당 클래스 이하의 component에 대하여 빈을 생성한다. @EnableAutoConfiguration은 다양한 Configuration 파일을 읽고 자동으로 빈을 생성한다. /META-INF/spring.factories 의 설정 파일을 기반으로 생성한다. @ComponentScan 수행 후 @EnableAutoConfiguration 을 수행한다. 이 말은 @EnableAutoConfiguration 에서 등록한 빈의 우선순위가 높다는 의미와 같다.
주요 단축키 Ctrl + Shift + e : 탐색기(사이드메뉴) Ctrl + Shift + f : 내용 검색 Ctrl + Shift + h : 내용 검색 + 수정 Ctrl + b : 에디터 전체화면(사이드메뉴 없애기)
Optional? Optional는 null을 효과적으로 관리하기 위한 인터페이스이다. if(obj==null) 이란 형태를 뛰어넘어 유연한 코드를 작성하도록 도와준다. 그러므로 아래와 같이 단순한 null 체크 용도로 사용한다면 Optional의 경우 큰 의미를 가지지 못한다. 오히려 코드만 늘어난다. 기존의 두 줄을 사용한 코드가 Optional을 사용하는 순간 3줄로 늘어난다.
java.util.Date의 문제 가변성과 비일관성 Date가 time을 출력한다. time의 출력 결과가 기계를 위한 시간인 EPOCK(long)로 출력된다.
깃허브 페이지와 지킬 깃허브는 깃허브 페이지라는 무료 호스팅을 제공한다. SSL도 무료로 적용해준다. 도메인도 제공한다. 깃허브 페이지는 프레임워크 jekyll에 대한 CI/CD를 제공한다. 깃허브는 ruby로 만들어졌고, 지킬은 루비의 프레임워크 중 하나이다. 깃허브 페이지가 바라보는 리포지토리에 지킬의 소스코드를 push하면, 깃허브가 자동으로 소스코드를 html 파일로 렌더링 해준다. 웹 어플리케이션을 서버에 자동으로 띄워준다. 지킬은 static rendering pages이다. 스프링은 런타임 시점에서 동적으로 html을 렌더링한다. 지킬은 런타임 전에 html을 생성한 후 로딩한다. 깃허브 페이지는 무료 도메인도 제공한다. 기본적으로 제공하는 도메인은 다음과 같은 형태이다 : https://{userid}.github.io 현재 블로그의 주소는 다음과 같다 : https://infoqoch.github.io/ 자신의 도메인이 있으면 그것으로 설정할 수 있다. 지킬은 마크다운을 지원한다. 마크다운은 간단하지만 효과적인 문서 작성...
나도 깃허브에 블로그를 만들고 싶었다.
1. 프로그램의 실행 (memory load) I/O의 File System으로부터 작업하고자 하는 프로그램의 실행파일을 메모리에 로딩.
1. 프로세스란? Process is a program in execution. 프로세스는 실행 중인 프로그램을 의미한다.
1. 운영체제(Operating System, OS)란 무엇인가? 컴퓨터 하드웨어 바로 위에 설치되어, 소프트웨어와 사용자가 하드웨어 사이를 연결하는 소프트웨어 계층. 좁은 의미의 운영체제 (커널) : 메모리에 상주하여 하드웨어의 자원을 배분하는 역할 넓은 의미의 운영체제 (MS windows, Unix) : 커널과 그 외 다양한 소프트웨어. 2. 운영체제(커널)의 목표 컴퓨터 시스템의 자원을 효율적으로 관리 CPU와 메모리, 입출력 장치의 자원을 각 사용자(각 가상머신)와 각 프로그램에 적절하게 배분하는 역할