그냥

* HTTP 통신

보통 웹 브라우저에서 일어나는 통신을 말한다.

초기에 HTML 파일을 전송하는 목적으로 만들어졌으나,

현재는 JSON, IMG 등 다양한 파일 또한 전송 가능하다.

HTTP 통신은 클라이언트에서 서버로 요청을 보내고,

서버가 응답하는 단방향 방식으로 통신이 이루어진다.

응답에는 클라이언트의 요청에 따른 결과를 반환한다.

응답을 받은 후 연결이 끊어지는 것이 기본 동작이지만,

필요하다면 Keep Alive 옵션을 주어 일정 시간동안 연결을 유지하는 것이 가능하다.

* Socket(소켓) 통신

소켓 - 두 프로그램간 데이터를 주고 받기 위해 생성되는 통신 단자

소켓 통신이란 서버와 클라이언트 양방향 연결이 이루어지는 통신이다.

보통 스트리밍이나 실시간 채팅 등 실시간으로 데이터를 주고 받아야 하는 경우,

연결을 자주 맺고 끊는 HTTP 통신보다 소켓 통신이 적합하다.

소켓 통신은 계속해서 연결 상태이기 때문에 HTTP 통신에 비해 많은 리소스가 소모된다.

자주 데이터를 주고 받는 환경이 아닌 경우 HTTP 통신을 이용하는 것이 유리하다.

자주 데이터를 주고 받아야 하는 환경에서는 소켓 통신이 유리하다.

HTTP 통신은 사용자가 서버에 요청을 보내는 단방향 통신, 소켓 통신은 양방향 통신이다.

# 본 글은 '노마드 코더 (Nomad Coders)' 유튜브를 보며 간단히 개인적으로 정리한 내용입니다

CSS 를 적게 작성하는데 도움주는 태그

* <progress></progress>

- 1줄로 진행률 표시줄을 출력해준다..

- 속성 : value, min, max

- css로 추가 커스터마이징 가능함.

- metter 태그와 밀접하게 관련되어 있다.

- 예시 : <progress value="50" min="0" max="100"></progress>

* <meter></meter>

- 유저에게 값의 수준을 보여준다.

- 값의 수준에 따라 색상 변경된다.

- 속성 : min, max, low, high, optimum, value

- 예시 : <meter value="20" min="0" max="100" low="20" high="65" optimum="15"></meter>

* <details></details>

- detail 태스에는 'open' 이라는 CSS selector가 있다.

- 클릭 여부에 다라 스타일 변경 가능함.

- summary, span 태그와 함게 사용된다.

- 예시 :

* <picture></picture>

- 각기 다른 버전의 이미지를 표시할 수 있다.

- (유저 장치나 환경에 따라)

- 모바일 환경에서는 저화질의 이미지를 출력하는데에 사용할 수 있다.

- (아무래도 더 빨리 로딩 가능하겠지?)

- img, source 태그와 함께 사용된다.

- source : 조건, img : 디폴트

- 브라우저가 picture 또는 srouce 같은 태그를 지원하지 않는 경우 디폴트 img 사용된다.

- 예시 : 

창 width 사이즈에 따라 (500,900,1200) 유튜브/구글/네이버 이미지가 보여지게 됨

* <datalist></datalist>

- Javascript 작성 없이, Auto complete (자동완성) 기능을 가능하게 한다.

- 사용방법 : 1. input (입력값)을 가져야한다.

-     2. datalist를 만들고 id를 부여해야 한다.

-     3. 해당 id에 input의 list 속성값은 준다.

-     4. datalist 안에서 option 태그를 사용한다.

- 결과 : input 클릭 시 입력 가능한 옵션이 자동으로 출력된다.

-     그 후, 유저가 타이핑 시 결과값도 자동으로 필터 될 것이다.

-     첫글자가 아닌 포함된 결과를 필터링한다.

- 예시 :

What is your favorite movie?

# 유튜브 '드림코딩 by 엘리' 2022년 1월 19일에 올라온 영상 보며 아래 사이트 참고하여 정리하였다

# 참고 : https://2021.stateofcss.com/

* CSS Post-processors(전처리기)

개발 시 좀 더 편한 문법을 이용하다가 사용자에게 배포하기 전에는 순수 css로 변환해준다

사용도 : Sass, Less, PostCSS, Styleus, Assembler CSS 순

만족도 : PostCSS, Sass, Stylus, Less, Assembler CSS 순

관심도 : PostCSS, Sass, Assembler CSS, Less, Stylus 순

* CSS Frameworks(프레임워크)

사용도 : Bootstrap, Tailwind CSS, Materialize CSS, Foundation, Bulma ... 등 순

만족도 : Tailwind CSS, PureCSS, Ant Design, Bulma, Semantic UI ... 등 순

관심도 : Tailwind CSS, PureCSS, Halfmoon, Semantic UI, AntDesign... 등 순

  - Bootstrap : 2021년 중반 v5 릴리즈

  그리드 향상, jquery에 대한 의존성 X, 앞으로 더 많은 사람들이 찾지 않을까 생각한다

  - 굳이 Tailwind로 업데이트 할 필요는 없을 것 같지만, 눈여겨 보면서 공부해볼 필요는 있을 것 같다.

* CSS-in-JS

아직 전체적으로 사용도가 높지 않다.

사용도 : Styled Components, CSS Modules, Styled JSX, Emotion, JSS, Styled System ... 등 순

만족도 : vanilla-extract, CSS Modules, Windi CSS, Styled Components, Stitches, Emotion ... 등 순

관심도 : CSS Modules, vanilla-extract, Stitches, Theme UI, Styled Components, Linaria ... 등 순

  (CSS Modules : 자바스크립트 파일에서 CSS 스타일링을 정의하는 방식은 아니기 때문에,

    해당 카테고리에 맞지 않을 것 같기도 함)

* flexbox & grid

flexbox가 grid보다 9배 가까운 사용율을 보인다.

flexbox를 조금 더 중점적으로 공부한 이후에 완벽하게 마스터 되면

grid를 공부 해보는 것도 좋을 것 같다.

빠르게 스타일링을 하기 위해서 전처리기가 나왔다.

그 중에서 Saas가 사용율은 단연 1등이다.

많이 사용되는 함수들/조건문/반복문/중첩기능(부모&자식 중첩가능) 등을 확인 할 수 있다.

많은 기능들이 순수 CSS에 편입되어 사용할 수 있을 것으로 예상된다.

올해는 정말로 공부하는 해라고 생각하고 보내야겠다.

# IDE - 이클립스 사용

1. New > Spring Legacy Project 선택하여 프로젝트 생성한다.

2. pom.xml에 필요한 라이브러리를 추가/변경 한다.

3. 프로젝트 우클릭 > Maven > Project Update (Alt+F5)

4. mybatisConfig.xml, mapper파일 생성한다.

5. tomcat server 등록 후 프로젝트 설정한다.

6. tomcat 시작 시 에러 확인한다.

7. MVC 패턴으로 패키지 구성한다. (controller, dto, dao, service)

8. 사용하는 쿼리에 따라 mapper 파일 수정한다. (insert, delete, update, selectOne, selectList)

9. dao, service 소스 작성한다.

10. junit 사용하여 테스트 진행한다.

1/25(화) 강의 중 몇 가지 적고 넘어간다.

1. 윈도우 관련

 대부분 기존에 알고 있던 내용들이다

 파일/디렉토리 조회 : dir (리눅의 ls와 비슷한 명령)

 ip, s/m, dns 등 조회 : ipconfig

 포트 조회 : netstat -ano | find "8080" (검색할 포트 입력)

 특정 pid의 프로세스 종료 : taskkil /f /pid [pid]

 디스크 검사 : chkdsk

2. 리눅스(우분투) 관련

 ip, s/m, dns 등 조회 : ifconfig

 현재 실행중인 프로세스 pid 조회 : ps -ef 또는 top 사용

 특정 pid의 프로세스 강제 종료 : kill -9 [pid]

 파일 권한 변경 : chmod

 /proc 디렉토리 : 현재 실행 중인 프로세스

 /root : root 유저의 홈

 /usr/bin : 기본 프로그램 실행 파일들

3. 네트워크

 TCP, UDP,

cisco packet tracer (간단하게 네트워크 세팅 및 시뮬레이션 가능)

오늘로써 라즈베리파이 실습 완료

브레드보드에 간단한 회로 짜고

파이썬으로 다이오드 켜는 실습이었다

라즈베리파이에서 전원, ground, 10/21번 gpio단자를 이용하였다.

스위치 1개, 저항2개, 파란색 다이오드 1개 사용하였다.

QA/QC/TEST 직무를 몇년간 경험한 후,

결국 개발 공부를 하게 되었다.

2022년에는 개발자로서 다시 시작한다.

정리하는 습관을 들이는 것이 배우는 목적으로나

다른 사람들에게 공유하는 목적으로나 좋다는 것은 알지만

10년이상 도저히 습관이 되지 못했다.

그래도 나만이 알아볼 수 있는 형식으로 작성은 해두자.