고급vi

Vi

필터, 파이프, 와일드카드

6장 파일과 디렉터리의 생성, 이동, 이름 변경, 삭제

권한

파일목록

유닉스

젠킨스

배경

한달동안 느낀점

• 내일이면 입사한지 딱 1명이다. 회사를 입사했다. 입사하니 비전공자-신입은 나밖에 없는거 같았다. 회사에서 작년에 법인이 설립되고 경력직들만 들어왔는데, 다들 어떻게 들어온건지 신기해할 뿐이다. 그저 열심히해서 조금이나마 기여를 하고 싶다. 현재까지 내가 할 수 있는건 위키를 설정하면서 좀 더 쉽게 위키를 개선하는 정도다.

오늘의 느낀점

• HashMap이 어떻게 만들어지는지 코드를 보았다. 하지만 HashMap은 너무나도 방대하기 때문에 자세히 보아야될거 같다.
• Proxy에 대해서 봤다. Spring Doc에 나와있는 Spring AOP Proxy를 봤는데 음… 아직 완전히 이해를 못했다. 내일하고 모레까지는 차분히 봐야겨우 알거같다. 스프링은 너무나도 방대하기 때문에 이해하는게 어렵다..

• 문제링크

package-lock.json

데이터타입

클로저

Mockito

테스트 반복

Junit

컨텐츠 협상

문제링크

Allocation of Physical Memory

메모리관리

기본형

데드락의 처리방법

데드락

Devops

백기선님 스터디 1주차 과제

동기화의 문제

Semaphores(세마포어)

실제배포하기(복잡한)

배포준비

도커 컴포즈

CPU Scheduling

Dockerfile 작성

프로세스 Management

스레드

프로세스

컴퓨터 시스템 구조

운영체제

도커

Optional

배경

• 평소 golang에 대해서 듣긴했지만 자세히 들여다 보진 않았다. 디스커버리 go 책이 있어서 책을 보면서 간단하게 golang문법을 정리해본다.

스트림

인터페이스 기본메서드, static 메서드

더자바

프록시

리플렉션

배경

• JVM메모리나 자바의 리플렉션 동적프록시 등에 대해서 궁금했었다. 자바책에도 깊이 설명이 안되있었는데, 백기선님께서 인프런에 더자바 시리즈로 만드신 강의를 들으면서 정리한 내용이다.

프로젝트 생성

배경

• 자바, 스프링 개발할때, 항상 gradle, maven 둘중 하나의 빌드도구를 선택해야된다. 평소 강의를 많이 듣기 때문에 영상에서 늘 메이븐 기반으로 강의가 진행되고 pom.xml을 작성하게 된다. 근대 자바공부한지 2년이 됬는데도 모르겠다. 바이트코드 조작과 관련된 강의를 보다가도 메이븐 플러그, menifest를 이야기하는데 동작은 하는데 원리를 알고 싶어서 메이븐에 대해 간략히 공부해봤다.

문제

문제 : Longest-substring-without-repeating

배경

• NextJS는 react와 달리 SSR(Server-Side Rendering)을 지원한다. 그렇다면 서버사이드 렌더링이란 무엇일까? 일반적으로 리액트의 경우, 브라우저에서 화면에 필요한 데이터들을 axios를 활용하여 요청하고. 브라우저가? Js가 화면을 그리게된다. 하지만 NextJS의 경우 NextJS서버가 요청을 미리보내서 프론트에서 렌더링하기전에 미리 응답해준다. 이를통해 SEO에 좀 더 최적화를 할 수 있다.

배경

• 리액트를 이용해서 프론트 컴포넌트를 만들었을때, 페이지별로 그냥 컴포넌트를 만들었었다. 이렇게 하다보니 재사용 가능한 컴포넌트들이 없었다. 언젠가 리액트가 추구하는 철학이 재사용 가능한 컴포넌트… 관련 글을 읽은적이 있었다. 작게나마 코드를 참조해서 적용해봤다.

Mobx

배경

• Form태그를 사용할때, 어떨때는 onClick, 어떨때는 onSubmit을 쓰기떄문에 차이를 간단하게 찾아보았다.

배경

React

NextJS

CSS

세션과 쿠키의 사용이유

인터페이스와 추상클래스

Primitive vs Reference Type

HashTable HashMap ConcurrentHashMap

배경

• 서버부하 분산을 어떻게 할거냐고 물으면 로드밸런싱을 이용한다고 대답한다. L4, L7장비를 이용하거나 HAProxy와 같은 소프트웨어를 사용한다고 한다. 하지만 구체적으로 어떻게 분산이 이루어지고 어떤 알고리즘으로 동작하는지 모르기때문에 정리를 해봤다.

배경

Event Rest

Rest API

예외처리핸들러 @ExceptionHandler

ResponseEntity

SessionAttributes와 SessionAttribute

핸들러메서드

헤더와 매개변수

스프링 MVC 핵심기술

HTTP 메세지 컨버터

인터셉터

Springboot

스프링 MVC

스프링 핵심기술 응용

애스펙트 지향 프로그래밍

스프링의 프록시 팩토리빈

6장 AOP

서비스 추상화

4장 예외처리

토비의 스프링 3장 템플릿

SpringData

쿼리

스프링데이터 JPA

Fetch

Cascade

1대다 맵핑

JPA 시작

JPA

스프링AOP

ResourceLoader

AppicationEvenetPublisher

프로퍼티

ApplicationContext Environment profile

컴포넌트스캔

수동으로 빈등록하고 주입하기

역사

배경

• 최근 java, spring을 다시 학습하고 있다. 예전에 학습했을때는 그냥 주먹구구식으로 코드 동작만 시켰지 원리에 대해 어떻게 사용하는지에 대한 이해가 부족했었다. 그 이유중 하나가 바로 @Service, @Transactional 등 어노테이션에 대한 이해가 안됬기때문이다. 이 부분을 차근차근 해결하고자 한다.

• 블로그에 댓글을 달 수 있는 Disqus Test중

도커

Testing asynchronous code

Jest

JWT

Authentication

NestJS

TCP

TCP와 UDP의 등장배경

Network

Web Server, WAS

브라우저 동작방법

mysql 엔진별 select테스트하기

크롤러를 만들면서 피드백

• MS에서 만든 playwright라는 모듈을 이용해서 크롤러를 만들고있다. 만들면서 문제를 발견해서 정리해본다.

DB공부

샤딩

DB Storage Engine

배경

• Docker에 MySQL서버를 띄우고 CRUD를 했었다. 제한된 자원으로 하기도 했었지만, 이 과정에서 아쉬움은 my.cnf파일을 어떻게 설정을 해야되며. logging은 어떻게 해야되는지 등이 궁금했다. 뿐만 아니라 이전에 설정했던 1cpu 128mb로 돌리게 되면 조금만 과부하가 걸려도 컨테이너가 종료됬다.

MySQL table생성하고 bulk insert하기

DB 공부

• DB에서 왜 인덱스가 필요한지. 다양한 성능을 테스트 해보기 위해 docker 1cpu 64mb로 제한을 걸어서 삽입 및 입력 테스트를 해보려고 한다.
• 먼저 docker 1cpu 64mb 설정해야한다.

포트폴리오

오늘의 느낀점

오늘의 배운점

오늘의 배운점

오늘의 배운점

오늘의 배운점

오늘의 배운점

오늘의 배운점

오늘의 배운점

• s3버킷을 바꾸면서 versioning에 대한 부분이 이슈가 생기고, ecs에서 service를 이용해서 배포를 할때 그냥 배포를 하다가 blue-green배포를 하려다보니 이슈가 생겼다.
• blue-green 배포의 경우 codedeploy에서 배포그룹을 만들고, iam에서도 배포권한을 줘야된다. ci는 ci대로 문제고, 배포는 배포대로 문제고, versioning은 versioning대로 문제니. 오늘은 오늘종일 에러만 디버깅하고 원인을 찾아갔다….

오늘의 배운점

오늘의 배운점

• puppeteer를 이용해서 크롤러를 만들고 있다. selenium+phantomjs에만 익숙해서 크롤링을 하다가 puppeteer를 이용하니 낯설고 특히 기능에 대한 부분. page객체나 browser객체가 어느부분까지 역할을 하는지 아직은 어렵고, 접근법은 알겠는데, 코딩은 잘모르겠다. 차분히 레퍼런스 보면서 익혀봐야지.

오늘의 배운점

오늘의 배운점

• 일주일동안 안되던 ECS를 통한 도커 이미지가 드디어 성공했다. 계속해서 찾아보고 디버깅을 한 결과 VPC의 이슈와 ESC에서 테스크를 등록할때 도커 컨테이너 포트의 이슈였다. 잘 해결이 되서 다행이다 :)

• circleci로 도커 이미지를 빌드하고 push를 하다가 aws-cli를 통해 빌드 푸쉬를 해보았다. ```shell // ECR Login ubuntu@ip-172-31-35-39:~$ aws ecr get-login –no-include-email –region ap-notrheast-2 ubuntu@ip-172-31-35-39:~/test$ aws ecr get-login –no-include-email –region ap-northeast-2 docker login -u AWS -p eyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQeyJwYXlxNTcxNDA3NjA5fQ== https://xxxxxxxxxxxx.dkr.ecr.ap-northeast-2.amazonaws.com

오늘의 배운점

오늘의 느낀점

• circleCI를 통해 build하고 image를 ECR에 push를 했다.

• circleCI에는 orbs가 존재한다. orbs란 circleCI를 통해 타사 서비스를 사용할 수 있게해준다? 예를들어 aws-s3 orbs를 이용하면 특정 command를 통해 aws-s3 버킷에 접근하고 업로드를 할 수 있게된다.

circleCI

오늘의 배운점

오늘의 배운점

앞으로 해야될일

오늘의 배운점

오늘의 배운점

• 인메모리 자료구조다. 레디스 자체가 거대한 해시 테이블인데 그 안에 서브 해시테이블이 있는 구조다.
• string, set, sorted-set, hashes, list를 지원한다.
• hyperlog(확률적자료구조? 정확도가 떨어진다), bitmap, geospatial index

DocumentDB

• 넷플릭스는 5가지의 상태가 존재한다. 가입, 재가입, 재시작, 업그레이드, 해지. Netflix에서 보내주는 이메일의 Subject를 바탕으로 각각의 상태를 체크한다.
• 상태를 체크하고 그 상태에 맞는 Parser를 동작시킨다.

• 정규표현식을 사용하는데 한글 추출이 안됬었다.

느낀점

### 배운점

느낀점

• google play api를 사용하기 위해 관련 api들을 찾아보았다. 구독 정보를 확인하기 위해 google play api에서 purchases.subscription 요청을 해야되는데 생각보다 필요한 정보들이 많았다.
• accesstoken, refreshtoken, purchasesToken 등이 필요했고 이를 기반으로 구독 여부를 판별하는데 도움이 될거같아서 in-app billing api, google play console, oauth, passport 등을 찾아봤다. 결론은 purchasesToken이 필요한데 아직도 방법을 모르겠다… 부디 방법이 있기를…

문제

• 전에도 백엔드에서 Promise.All을 사용해서 비동기 처리를 해봤지만, 프론트에서 렌더링 작업을 하면서. 되다 말다 되다 말다 이런 상황이 발생을 했다.
• 리액트 컴포넌트에서 componentDidMount에서 2개의 api호출을 하게 된다. 각각의 api에 대해서는 List를 반환을 하게 되고, 이때 반환받은 list들을 인자로 받은 메서드가 호출되면서 연산을 한다.
• 비동기처리이기때문에 어떨때는 되고 어떨때는 하나의 list가 null이여서 이슈가 발생을 했다. 그러다가 전에 사용해본 Promise.All을 사용했다.

• 상태관리가 복잡해지면서 Redux를 보게되었다. 이미 프로젝트에 리덕스 코드들이 존재하지만, 이해하지 못한 부분이 있기때문에 따로 개념을 살펴본다.
• 리덕스에서 Store는 앱을 종료하면 저장되어 있던 모든 상태가 없어진다. 캐시기능 구현을 하는 장치가 필요하다.

문제

오늘의 배운점

오늘의 느낀점

• Redux를 시작하게 되었다. action, store 등을 사용한다.
• store에 있는 state는 action을 통해서만 변경이 된다. 하지만 state가 새로고침을 할때마다 reset이 된다. 이유를 모르겠다. 찾아보니 redux-persist라는 라이브러리를 쓰라고 한다. 쓰고 있는데, 또 리셋이 된다. 해도해도 끝이 없다. redux store에서 user의 토큰과 email을 저장하려고 했던게 이렇게 커질줄이야… 리덕스도 잘모르는데 저걸 하려하니 차분히 봐야겠다.

로깅

gitlab-runner

Mock

module.export vs default export

• node를 통해 production, test, dev 모드 등으로 개발을 한다. test코드에서 환경 분리를 하기 위해서 process.env.NODE_ENV=test로 만들어야됬다. 아무리 찾아봐도 저 부분은 나와있지만 정작 npm script에서는 어떻게 짜야되는지 나와있지 않았다.
• pm2라는 도구도 사용해봤는데, 그거보다는 더 간결하게 cross-env를 사용했다.

• client를 도커이미지화를 하고 실행을 했을때 외부접속이 안됬다. 며칠을 고민을 하다가 해결했다.

  "dev": "webpack-dev-server --hot --host 0.0.0.0"
  

• webpack을 통해 리액트를 빌드하는데 –host 0.0.0.0을 통해 외부에서도 접속을 할 수 있게 했다. 한줄 추가하면될걸. 며칠을 해맺다…

dockerize

배포(ec2 + nginx + express)

CircleCI

배포준비하기

리액트 라이프사이클 이슈

• async await에서 await하나는 promise의 then과 같은 의미를 지니고 있다.

• 서버들은 index.html을 가장 먼저 찾는다.

mocha test issue

이슈 상태관리?

• 지난번에 프로젝트를 하면서 비동기에서 비동기를 호출해서 undefined가 되는 이슈가 생겼었다. 옆에 친구가 Async Await과 Promise.all을 사용해서 도와줬었다. 똑같은 이슈가 발생을 해서 오늘은 내가 해결을 해보았다.

• Map을 이용해서 배열을 순회하다가 특정 조건에 걸리는 값을 리턴하고 싶었다.

기획심사가 끝나고 2달뒤인 8월 마지막주에 소마의 중간발표가 있다. 한글 보고서, gitlab 이슈 및 커밋, readme.md파일 발표자료까지 제출할께 너무나도 많다. 일주일은 이것만 하는거 같다. 기획때는 발표 15분 QnA 15분이였는데, 중간발표는 발표30분 질문 20분이다. 내일 모레 빨리 끝났으면 좋겠다…

배경

arrows

• animations, transitions, transformations, media query에 대해서 배운다.

• 비동기 : 멀티태스킹, 한가지 이상의 것을 한번에 처리하는게 아니라 단지 스위치를 빠르게 전환하는거. 하지만 컴퓨터는 2가지 일을 동시에 처리를 할 수 있다.(wifi도 연결, 배터리 충전, 영상재생 …)

```javascript const response = fs.readFileSync(‘./appleMusicReceipt.json’); const html = base64ToUtf8(stringToJsonObject(base64ToUtf8(response)).payload.parts[1].body.data);

도입배경

• EC2인스턴스를 설치를 한다.
• sudo chmod 400 key.pem => 400은 내게만 읽기 권한, 100은 내개만 실행권한, 755 : 내게 모든 권한 그리고 그룹/전체에 읽기 실행권한

• api서버를 통해 gmail api에 호출을 했다. getList의 경우 email의 id들을 가지고 오고, 가지고 온 id를 기반으로 getMessage나 getReceipt메소드를 통해 email의 내용을 가지고 온다.

  function infos(auth) {
  console.log('apiService infos called');
  getList(auth)
    .then((messages) => {
      return new Promise((resolve, reject) => {
        let infos = [];
        for (let i = 0; i < messages.length; i++) {
          getReceipt(auth, messages[i].id).then(msg => { infos.push(msg)}); }
        console.log('infos : ', infos);
        err ? reject(err) : resolve(infos);
      });
    });
  }
  

콜백지옥을 해결하기 위해 많은 시도끝에 Promise를 도입했다. 하지만 프로미스는 콜백지옥을 완화 시킬뿐이다. ES8에서는 async와 await을 도입했다.

• Flex는 수평이 될 요소들의 Container에 diplay: flex;를 적용한다.
• flex는 2가지로 나뉜다. item들을 담는 container와 정렬하고 싶은 item.
• item을 정렬하기 위해서는 container가 필수다.

CSS이론을 보고 실습을 했다가 헷갈려서 다시 이론을 복습했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position</title>
    <style>
        body, html {
            height: 100%;
            margin:0;
            padding:0;
        }
        body {
            height: 400%;
            background-color: red;
        }
        #boxOne {
            height: 300px;
            widht: 300px;
            background-color: yellow;
            position: static;
        }
        #boxTwo {
            height: 300px;
            widht: 300px;
            background-color: green;
            position: fixed;
        }
    </style>
</head>
<body>
<div id="boxOne">
    <div class="box-child"></div>
</div>
<div id="boxTwo">
    <div class="box-child"></div>
</div>
</body>
</html>

• html에 높이를 100%, margin, padding을 0으로 한 이유은 브라우저 default를 상쇄시키기 위함이다.
• 모든 박스는 position이 deafult로 static이다.
• position이 fixed이면 스크롤이 내려가도 그 위치에 그대로 있다.
• position이 abosolute가 설정되면 html상에 element와 관계있는(상대적 부모박스)elemnt를 살펴보고 이에 상응해서 포지션이 결정된다. 부모태그?에 position : relative를 설정하면 부모 엘리먼트 위에서 움직인다.

• es6에서 값들을 효과적으로 매핑하기 위해 Map구조를 도입하였다.
• Map객체에 저장되어있는 각 요소들을 [key, value]형태로 for…of를 사용해서 접근을 할 수 있다.
• java에서는 Map구조에서 key값을 hash저장하기때문에 동일한 hash에 대한 키값은 저장을 못한다. 반면 js에서는 엔진이 별도의 일렬번호를 부여하고 이를 통해 순서를 보장해준다.
• 중복된 key를 통해서 추가하는 경우 해당 key의 value값을 덮어쓴다.(기존 key의 순서를 유지) ``` var sayings = new Map(); sayings.set(“dog”, “woof”); sayings.set(“cat”, “meow”); sayings.set(“elephant”, “toot”); sayings.size; // 3 sayings.get(“fox”); // undefined sayings.has(“bird”); // false sayings.delete(“dog”);

• 리액트 hooks는 주로 setState를 할 필요가 없을때 함수형으로 사용했다.
• 함수형을 쓰면서 state, ref를 사용할 수 있게 해준게 react hooks이다.

• 디스트럭처링은 구조화된 배열 또는 객체를 비구조화하여 개별 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당하거나 반환할 때 유용하다.

파라미터 기본값(Default Parameter Value)

• 문서(Document)란 HTML,XML문서 같이 부분적 요소나 내용이 관련된 것들끼리 묶여서 존재하는 요소이다.
• 구조화 된 문서에 스크립트를 이용하여 접근할때도 구조적으로 접근하는 방식(Object Model)을 제공하는 것이 바로 DOM이다.

• JS에서 함수도 객체이기때문에, 함수를 다른 함수의 인자처럼 사용할 경우에는 오직 함수의 정의만 넘기면 된다.
• 즉 함수의 이름만 넘기면 된다. 함수라고 해서 () 같은 것을 붙여줄 필요가 없다

목록(List)와 표(Table) 표현 태그

HTML(Hyper Text Markup Language)은 웹페이지의 내용과 구조를 담당하는 언어로서 HTML태그를 통해 정보를 구조화 한다.

var의 특징

chaiHttp를 이용한 Restapi테스트

Mocha를 이용한 유닛테스트에서 이제는 E2E테스트를 하기 위해 JS의 테스트 프레임워크에 대해서 학습을 했다. E2E(End-to-End) 테스트로서 시스템이 사용자의 입장에서 실행되고 테스트하는 것을 말한다.

소마에서 두번째 워크샵을 갔다. 이번에는 집안일이 있어서 저녁에 도착을 했지만 이야기를 들어보니 큰 맥락에서는 계속해서 세미나와 강의를 듣고. 식사하고 또 세미나 듣고. 저녁에는 레크레이션으로 컬링을 했다. 지난번 워크샵에는 로잉머신. 이번에는 컬링. 아마 몇번을 더 가면 동계 하계 올림픽에 나가도 될거같다 ㅋㅋ 레크레이션을 하면서 좋았던 점은 잘 모르는 사람들과 팀을 꾸려서 함께 활동을 한다는 점이다. 운동하는건 많이 힘들지만 팀끼리 돌아다니면서 인사를 하고 경기를 할때는 평소 보지도 못했던 멘티들과 시간을 보낼 수 있어서 좋았다. 끝나고 간식먹고, 친한 연수생들끼리 모여서 새벽까지 이야기를 하고. 두번째 날에는 늦잠을 잘 수 있게해줘서 또 강의듣고 복귀를 했다. 매번 시설과 초청되는 연사님들에 대해서 감탄을 한다. 이번에는 AB180 류원경 이사님과 강대명 멘토님의 강의를 들을 수 있어서 좋았다. 하반기에 또 갔으면 좋겠다.

비동기테스트

Chai

``` const chai = require(‘chai’); const expect = chai.expect; const assert = chai.assert; const should = chai.should();

NodeJS에서 Test Code를 작성하기 위해서 JS 테스트 프레임워크들을 조사하고 적용을 해보았다.

gitignore에 대한 이슈

Lint

개발협업

프로젝트 기획심사

우린 그렇게 가족이 되고 있다

소마를 들어온지 한달정도가 지났다. 우리팀 성연이 영환이형 뒤에팀 채원이 동훈, 성찬이 그리고 저멀리 광주에서온 성호, 고등학생 진영이 정규 등 오늘도 소마 씨앗방에서 함께했다. 다양한 이야기 거리들을 주고 받으면서 우리는 친해주고 서로를 알아가고 있다. 오늘 Express디버깅을 하면서 씨름을 하고 있을때, 뒤에팀 채원이, 성찬이,성호, 영환이형까지 내가 해결하지 못하는 문제에 해서 우리의 문제로 함께 해결을 해주었다. 집단지성의 힘을 보았다. 다들 서로의 의견을 이야기를 하면서 문제를 해결하다가 간단한 문제였다는 것을 발견했다. 간단한 문제지만 내 옆에 있는 연수생들은 끊임없이 각자의 자리에서 함께 고민을 해줬다. 웃고 나누고 함께 고민하고 밤새고 우리는 그렇게 점점 가족이 되어 가고있다. 나는 그런 소마연수생활이 너무나도 즐겁고 감사하다. 특히 나를 믿고 지지해주는 우리팀원들이 있어서 너무 고맙다 :)

$express --view=ejs todo
$npm install

• 명령어를 통해 todo라는 이름의 express앱을 만들었다.

오늘 하루도 보람되었나요?

소마에서의 6월

state

시야

• 리액트는 많은 컴포넌트로 구성이 되어있다.
• 컴포넌트는 함수나 오브젝트의 형태로 HTML을 반환한다.
• 어플리케이션을 만들기위해 어떻게 컴포넌트를 나눌지 기준을 정해야한다. 하지만 정해진 기준은 없다.

오늘공부한것

• Udemy에 있는 React강의를 듣기 시작했다. 잘 정리를 했는데…. 파일이 다른 PC에 있다.. 본격적인 내용은 내일..
• 리액트를 배우면서 React와 React-DOM에 대해서 차이는 잘 몰랐다. React는 컴포넌트를 구성하는 부분이고. React-DOM은 만들어진 컴포넌트를 실제 DOM에 등록?을 한다.
• JSX에서도 단순히 JS의 확장이라고 생각을 했었다. 그리고 Babel, Webpack은 뭔가에 대한 생각이 있었다. 왜 이것을 사용할까? 이유는 모든 브라우저에서 아직까지 ES6에 대해서 지원을 하지 않기때문이다. Babel.js나 Webpack과 같은 Tool?라이브러리를 통해서 ES6에 있는 문법을 바닐라스크립트(순수한 JS)형태로 변환을 하고 브라우저는 순수한 자바스크립트 코드를 읽어서 실행을 시킨다. 아래코드에서 위에 있는 영역이 바닐라 스크립트로 변환이 되면 밑에 있는 영역으로 바뀌어서 실행이 된다.
• 브라우저에서 실행을 시킬때 왜 안되는지 DOM문제, 인스턴스화 문제 등 많은 에러들에 직면을 했었다. 하지만 Udemy강의를 통해 React에서는 root노드를 지정을 하고 각 컴포넌트들이 root노드에 자식노드로 구성이 된다?라는 과정을 직접 하나하나 경험을 해보았다. ``` const App = () => { return <h1>Hello world</h1> }

• 프론트엔드를 하기 위해서 React 공부를 시작을 했다. 리액트란 무엇인가? 또 Redux, Webpack 등 생소한 용어들에 들었다.
• Redux란 Facebook의 Flux Architecture 라이브러리의 구현체이다. 웹어플리케이션의 상태를 관리한다.

2019-5-25 TIL 백준 1026풀이

2019-5-24 소마생활

실행컨텍스트

JS동작원리

브루트포스

프로토타입

DB공부

Django TIL(2)

Django Viewer

파이썬 환경설정

NPM

node강의

JS 함수와 프로토타입체이닝

node강의

오르막수(11057)

브루트포스

Filed member => 필드란 클래스에 변수를 정의하는 공간을 의미한다. 이곳에 변수를 정의하면 메소드끼리 변수를 주고 받는데 편리하다. 하지만 객체가 여러쓰레드에서 접근하는 싱글톤객체이면 field에서 상태값을 가지고 있으면 안된다.!!!! 모든 변수를 parameter로 넘겨받고 return하는 방법으로 구현해야한다.

####쿠키와 세션은 http 프로토콜의 약점을 보완하기 위해서 존재를 한다. ####http프로토콜은 connectionless하고 stateless의 특징을 가지고 있다. #####Connectionless : 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에 응답하면 서로 접속을 끊는 특성이다. #####Stateless : 접속을 끊는 순간 클라이언트와 서버의 통신은 끝나고 상태정보는 유지하지 않는 특성이다.

스케줄러

Rest API

• AWS EC2의 우분투 서버를 이용해서 빌드를 하고 배포를 하다가 알 수 없는 이슈들에 봉착을 하게 되었다.
• 서버가 계속 뻑나고 접속 불량에 이슈가 발생을 하다가 결정적으로 TravisCI를 이용하기 위해서 awsCli를 설치를 하다가 이슈가 발생을 해서 결국에는 ec2인스턴스를 바꿨다.
• 아마존에서 제공하는 Amazon Linux AMI를 이용을 했는데, 이것은 아마도 CentOS기반인거 같다. 기본이미지에 AWS명령어도구, python, java 등이 기본적으로 설치가 되어있다.

• AWS에 배포작업을 하면서 GradleBuild를 하는데, 에러가 발생을 했다. ``` jaeyeonkim@jaeyeonui-iMac  ~/Desktop/stock-crawler   autoBuild  gradle -v

로깅

{
 "username":"jimmy",
 "channel":"test",
 "attachments":[
	{
	 "color":"#CC0000",
	 "title":"<http://www.naver.com|삼성전자> : 10.0",
			"fields":[
				{
					"title":"주가", "value":50000,"short":"true"
				},
				{
					"title":"변동률", "value":2.0,"short":"true"
				},
				{
					"title":"변동가격", "value":1000,"short":"true"
				}
				],
			"footer":"MADE BY JIMMY"
		}
	]
}

• 위의 형태를 처음에는 StockJsonDto로 만들었다. 하지만 메서드 내부적으로 복잡했기때문에 리팩토링을 하기로 했다.
• Field객체, Attachemnt객체, Converter객체로 나누었다.

자바객체를 이용해서 Json매핑하기

Spring web-mvc

스프링데이터 : 인메모리

웹jar

외부설정

Spring Test

그래프

DP문제풀이

알고리즘 Math

DB Index

스프링부트 자동설정

힙정렬

DB개론 제2정규화

빈 라이프사이클

DB튜닝

데이터베이스 정규화

복합인덱스

Inner Outer Join

db개론 join

포비강의 쓰레드

트랜잭션

오늘의 할 주제

• DI와 Spring DI
• Suvelet Container / Spring(DI or Bean) Container

spring

포비강의

Mysql Bulk insert

``` create table btest ( a int primary key, b varchar(16) );

Quick Sort

메소드 참조

``` @Service public class StockService { public static final Logger logger = LoggerFactory.getLogger(StockService.class);

합병정렬

Bandwidth와 Latency

Java IO

데이터모델링

데이터베이스 개론 : 데이터타입

기본적인 정렬 알고리즘

정의되어 있는 함수형 인터페이스

람다함수

현재 위치에서 출구까지 가는 경로가 있으려면

Mysql Create Table

RestTemplate

발표자료

MySQL CRUD 1

Recursion - 세번째

Recursion

Recursion2

빌드란?

• build : 배포가능한 상태로 결과물을 만들어내는 과정
• 빌드배포의 끝판왕은 무중단배포이다.
• 배포 : 빌드한 결과물을 사용자가 사용가능한 상태로 만드는거
• CI툴? 지속적 통합툴? CI툴에서 문제가 생기면 자동으로 메세지나 이메일이 온다. 피드백을 최대한 빨리해결하기 위한 환경을 구축하는 것이다.
• maven : XML기반으로 빌드, if-else를 사용할 수 없다
• gradle : groovy라는 스크립트로 만든 빌드, 기본적인 구조는 maven에서 가지고왔다.

데이터베이스 개론

Ajax

• 최근에 성능문제로 HTML에서 JS의 scirpt tag는 마지막에 위치를 하는 경우가 굉장히 많다.
• HTML을 우선 다운로드를 하고, 다운로드를 하고 난 다음에 script태그를 만나면 다시 해당경로에 해당하는 문서를 다운받기 위해서 서버에 요청을 보내게 된다.

• Servlet이 HTTP에 대한 구현이다. 이것에 대한 구현은 Tomcat안에 인터페이스에 대한 구현체들이 들어가있다.
• 톰캣을 와스?라고 한다.
• JPA에는 이 표준을 지키는 Hibernate라는 프레임워크가 있다.
• Servlet의 구현체는 무조건 와스내에 있다. 와스는 톰캣, 제티라고 한다.
• 와스는 웹어플리케이션서버의 줄인말이다.
• 인터페이스 어노테이션 기능을 조합을 해서 표준(기준점)을 만든다.
• Servlet이 HTTP데이터를 조작을 하는 역할을 한다.

익명클래스

기획서 마감전

Queue<E> 컬렉션프레임워크

웹서버

TreeSet<E> 클래스

• TreeSet은 트리 자료구조를 기반으로 인스턴스를 저장한다. 이는 정렬된 상태가 유지되면서 인스턴스가 저장된다.

Set Interface

컬렉션프레임워크

제네릭의 기본문법

java bean규약

로그인기능

결과를 전달하는 HTTP상태코드

``` @Controller @RequestMapping(“/users”) public class UserController { @Autowired private UserRepository userRepository;

새로운 HTML적용 및 URL리팩토링

• 중복을 제거하기위해서 RequestMapping이라는 어노테이션을 사용을 하게된다.

h2 url설정

HTTP 메세지

HTTP메소드 정리

생활코딩 데이터베이스(1)

도커

간단한 프로토콜 HTTP

TCP/IP 프로토콜

반복주기 url정보를 이용해서 delete기능 구현하기

스프링부트 - (2)

포비강의

MVC패턴

세번째 반복주기

스프링부트 - (1)

Sorting

네스티드(Nested)클래스와 이너(Inner)클래스

팩터리 메서드패턴

열거형이란

협력하는 객체들의 공동체

템플릿메소드패턴

볼링 4번째 이야기 LastFrame구현하기

인터페이스를 통해서 적용하기

자바 디자인패턴

볼링구현하기 2번째

볼링프로젝트 진행중…

와일드카드의 상한과 하한의 제한 : Bounded Wildcards

Bowling 구현하기(1)

Map<K, V>

와일드카드

자바의 예외처리

Java Design Pattern - Singleton Pattern

느낀점

로또4단계

타겟타입

• 자바의컴파일러는 생략된 자료형 정보에 대해서 유추를 할 수 있다. 컴파일러가 생각보다 자료형을 유추를 하는 것이 다양하다.

Arrays클래스

Enum의 특징

TDD를 이용한 로또3단계 구현

TDD기반으로 로또 2단계 구현하기

TDD기반으로 Lotto 구현하기

Spark를 이용을 해서 Web UI에서 로또를 구현하기

제너릭

Java Arrays

데이터 베이스

Lotto프로젝트

``` public Lotto() { Collections.shuffle(numbers); lotto = new ArrayList<>(); for (int i = 0; i < 6; i++) { lotto.add(numbers.get(i)); } }

java의 인스턴스 생성과 scanner.next()에 관한 생각들

Arrays클래스

BigInteger

MVC란?

github을 통한 협업 방식

로또 rank를 구현하기

enum을 이용해서 lotto프로그램 리팩토링

enum을 이용해서 lotto프로그램 리팩토링

알고리즘 복잡도 분석

알고리즘 복잡도 분석

Enum

Enum

정렬

정렬

래퍼 클래스(Wrapper)

래퍼 클래스(Wrapper)

자바의 메모리모델과 Object클래스

자바의 메모리모델과 Object클래스

JUnit Test Code

정규표현식

퀵정렬

예외처리

인터페이스

배열

상속

콘솔 입출력

String 클래스의 메소드

OS란

메소드 오버라이딩

클래스변수와 클래스메소드

접근 수준 지시자(Access-level Modifier)

패키지(Package)

클래스와 인스턴스

``` package yoon;

Method

자바가 실행되는 순서

1. 자바코드 작성 ex) hello.java
2. 컴파일(내가 만든 프로그램 코드를 컴퓨터가 이해할 수 있도록 바꿔주는 작업)이다. ex) javac hello
3. 실행 ex) java hello
   • .java라는 확장자로 되어 있는 소스를 컴파일하면 .class라는 확장자를 가진 파일이 생성이 된다. .class라는 파일을 실행시키는것이다.
   • 컴파일은 javac라는 명령어로 하지만, 실행은 java라는 명령어로 한다.

배열

``` Int [] array_name = new int[100];

변수

상수와 형변환

• 클래스 정의 - 클래스란 객체를 정의해 놓은 것이다.
• 클래스 용도 - 클래스는 객체를 생성하는데 사용된다.

JVM의 메모리구조

JVM은 프로그램을 수행하는데, 필요한 메모리를 할당받고, 3가지 주요영역으로 나누어서 관리를 한다.

생성자(Constructor)

JVM

자바 언어 특징

리팩토링 전 ``` public String peoplePrint(int people){ String result = “”; for(int i = 0; i < (2 * people) - 1; i++){ result = checkOdd(i, result); } return result; }

JAVA 사다리타기 만들기

OS의 기초

생성자

퀵정렬

Date

java.lang 패키지/오토박싱

java.util 패키지

Object와 오버라이딩

throw

예외처리

생성자

클래스

Next you can update your site name, avatar and other options using the _config.yml file in the root of your repository (shown below).