콘텐츠로 이동

2021 07 14

2021-07-14

UI 개발 특강

  • UI 개발자에 대해 - UI 개발자/퍼블리셔/마크업 개발자의 차이? - 각자 속해있는 집단에 따라 명칭 다르고, 하는일 거의 비슷 - UI 개발자는 뭔가요? - 기획 -> 디자인 -> 개발 - 개발 포지션 중 앞에 보이는 화면 담당 ("UI 개발" -> FE 개발 -> BE 개발) - UI 개발자가 하는일? - HTML/CSS/JS - JS의 경우 FE와 협업 - Gulp, Grunt등의 UI 작업 편의를 위한 task 구현 - 모든 사람들에게 동일한 웹을 보여줄 수 있도록 노력함
  • 웹 표준이란? - 웹에서 통용되는 표준 기술 규격 - 웹 표준을 지켜야 하는 이유? - 전 세계에서 웹을 구현... 표준화된 규격을 정해 안정적인 성능/개발 효율성 증대 - 어느 브라우저에서나 동일한 콘텐츠 제공 - 웹 표준 잘 지키는 법 - 모든 태그들은 자신만의 의미 있음 - "의미에 맞는 태그 사용"을 지향 - 개발자의 편의를 위해 의미없는 태그로 마크업 X
  • 접근성 - 접근성을 지켜야 하는 이유 - 우리 사회에 만연한 장애인에 대한 인식 부족 - HTML 버튼 누르면 그냥 "버튼","버튼"이라고 읽힘 -> 안에 내용이 없어! 
    <span class="number1"></span>

    <img src="이미지 URL" alt="상세 설명"> //상세 설명에 똑바로 정보 제공해줘야 음성으로 읽어주면 알아들을 수 있음

      - 색맹인 분들을 위해 버튼에 아웃라인을 넣는 것이 좋지 않을까?
  - 장애인 분들을 배려한 마크업이 필요하다
      - 시각: 전맹, 저시력, 색맹
      - 청각: 중증, 경증
      - 손 운동: 손 떨림 및 한 손 사용자
      - 중증 운동: 몸을 움직이기 어려운 사용자

    - 기획/디자인/개발 모두 올바른 접근성을 제공해야 한다! - FE/BE: UI 개발자가 제공한 의미있는 마크없을 될 수 있으면 그대로 적용하여 모든 사용자가 웹을 원활히 사용하도록 하자!

  • UI 개발자간의 협업 방식 - 서로간의 규칙 정하기 - 마크업 방식 (구조 간결 vs 여러 케이스 대응위해 방어적) - 클래스 네이밍 (간결한 클래스 네이밍 만으로 쉽게 파악) - CSS 작성 시 lint를 통해 통일된 규칙으로 효율성 높이자 - 유지보수 고민 - 만드는 것 만큼 유지보수도 중요! - 코드리뷰 - UI는 주관적이야 - 상처뿐인 리뷰는 하지말자!
  • 반응형 웹 구현 - CSS: px, em, vw, vh, % 등 여러단위 - 일반적으로는 px을 가장 많이 씀 - em은 부모 단위를 기준으로 조정 - rem은 최상단 루트 요소의 값을 상속 - 어떤 순서로 개발하지? - 정답은 없다!
  • 확장 가능하고 재사용성이 높은 마크업 - 필요할떄 마다 해당 컴포넌트 붙이는 식으로 공통화

젠킨스

  • docker안에 설치한 젠킨스... - 알아서 workspace/우리repo/~~ 여기서 build 작업 진행
  • PR을 쏘면 젠킨스에서 빌드하고 -> 터지면 Merge 멈춰! - 참고: https://taetaetae.github.io/2020/09/07/github-pullrequest-build/ - 플러그인 설치 git pull request builder 검색 - Github 프로필 > Setting > Developer setting > Personal Access Token > repo랑 repo_hook 체크 - Jenkins Credentials Provider > Secret > 저장해두기 - 다하고 나서,,, - Github 세팅 > Branches > Protect matching branches > 필요옵션 선택

마찌의 S3 특강

  • CloudFront - User -> Amazon CloudFront -> Amazon S3 - AWS에서 제공하는 CDN 서비스 - Amazon CloudFront에서 바로 받아올 수 있었어!!! - S3에 직접 접근 X, CloudFront로써 받아와! - ec2-s3-deploy..? IAM - 권한 부여해줌 - 클라이언트의 CUD 요청에 대해서는 - EC2에서 Multipart 데이터 받고, S3 버킷으로 업로드 - EC2 서버에는 ec2-s3-deploy 역할 부여 - 클라이언트 R 요청에 대해서 - cloudfront 에서 처리! - CDN을 우리가 만들어줘야해!
  • S3 설정 - 객체 URL은 막혀있다
  • S3와 CloudFront를 통한 요청의 흐름 - Origin Server = S3 or EC2 - Edge Server = CloudFront
  • CloudFront 설정중,,, - OAI가 뭐지 (Origin Access ID) ==> 클라이언트는 CloudFront를 통해서만 S3 접근 가능 - Don't use OAI - Yes use OAI - CDN 만듦!
  • 이후 S3 돌아와 CDN 접근 제한 풀어주자 - JSON으로 설정파일 작성해주면! - "CDN도메인/" 이후 S3에 저장한 방식으로 접근 가능!

도커 설치 후 컨테이너 실행

  • 도커 버전 - docker version 조회 
    Client: Docker Engine - Community
 Version:           20.10.7
 API version:       1.41
 Go version:        go1.13.15
 Git commit:        f0df350
 Built:             Wed Jun  2 11:56:40 2021
 OS/Arch:           linux/amd64
 Context:           default
 Experimental:      true

Server: Docker Engine - Community
 Engine:
  Version:          20.10.7
  API version:      1.41 (minimum version 1.12)
  Go version:       go1.13.15
  Git commit:       b0f5bc3
  Built:            Wed Jun  2 11:54:48 2021
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.4.6
  GitCommit:        d71fcd7d8303cbf684402823e425e9dd2e99285d
 runc:
  Version:          1.0.0-rc95
  GitCommit:        b9ee9c6314599f1b4a7f497e1f1f856fe433d3b7
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0

    - 도커는 클라이언트와 서버로 나뉨 - 도커는 하나의 실행파일이지만 클라이언트와 서버의 역할 둘다 할 수 있음 1. 사용자가 명령 input 2. docker client가 명령 input 보냄 3. docker server가 명령에 따른 처리 진행 후 응답값 보냄 4. docker client가 응답값 출력

  • 도커 이미지 받아서 컨테이너 설치 - docker run ubuntu:16.04 - docker run -d -p 1234:6379 redis 
    mysql -h127.0.0.1 -uroot
create database wp CHARACTER SET utf8;
grant all privileges on wp.* to wp@'%' identified by 'wp';
flush privileges;
quit
  • 컨테이너 - 실행: docker run [OPTIONS] IMAGE[:TAG|@DIGEST] [COMMAND] [ARG...] - [OPTIONS] - -d: 백그라운드 모드 - -p: 호스트와 컨테이너 포트 연결 (포워딩) - -v: 호스트와 컨테이너의 디렉토리 연결 (마운트) - -e: 컨테이너 내에서 사용할 환경변수 설정 - -name: 컨테이너 이름 설정 - -rm: 프로세스 종료시 컨테이너 자동 제거 - -it: -i와 -t를 동시에 사용한 것으로 터미널 입력 위한 옵션 (bash 들어가기) - -i: 표준 입력 활성화하며, 컨테이너와 연결되지 않더라도 표준 입력 유지, bash - -t: TTY 모드 사용, Bash 사용하려면 이 옵션 필수 - -link: 컨테이너 연결 - 중지: docker stop [OPTIONS] CONTAINER [CONTAINER...] - 삭졔: docker rm [OPTIONS] CONTAINER [CONTAINER...] - 컨테이너의 로그 보기: docker logs [OPTIONS] CONTAINER - 컨테이너 명령어 실행하기: docker exec [OPTIONS] CONTAINER COMMAND [ARG...] - 실행중인 컨테이너에 들어가보기! - ex. docker exec -it mysql /bin/bash
  • 도커 이미지 - 도커 이미지 확인 
    ubuntu@ip-192-168-1-55:~$ docker images
REPOSITORY                  TAG       IMAGE ID       CREATED       SIZE
wordpress                   latest    b77ea6f8ecf7   12 days ago   551MB
redis                       latest    08502081bff6   2 weeks ago   105MB
mysql                       5.7       09361feeb475   3 weeks ago   447MB
ubuntu                      16.04     065cf14a189c   3 weeks ago   135MB
teamlab/pydata-tensorflow   0.1       7bdf5d7e0191   5 years ago   3.08GB

    - 도커 이미지 다운로드 - docker pull [OPTIONS] NAME[:TAG|@DIGEST] - 도커 이미지 삭제하기 - docker rmi [OPTIONS] IMAGE [IMAGE...] - 중지된 도커 이미지 한번에 삭제하기 - docker rm -v $(docker ps -a -q -f status=exited)

  • 컨테이너 업데이트 - 컨테이너 업데이트 과정
    - 새 버전의 이미지 pull - 기존 컨테이너 삭제 stop, rm - 새 이미지 기반 컨테이너 실행 run - 기존 컨테이너 삭제 == 기존 컨테이너에 있는 파일 사라짐 - 따라서 컨테이너 삭제시 유지할 데이터는 반드시 외부 스토리지에 저장할 것! - "데이터 볼륨"을 컨테이너에 추가하면, 해당 디렉토리는 컨테이너와 별도로 저장됨, 컨테이너 삭제되도 안지워짐
  • Docker Compose - 복잡한 설정을 YAML 설정 파일로 뚝딱