Yong Study

리액트 ( React )

• UI 라이브러리
• Virtual DOM 개념을 이용하여 전체가 아닌 선택적으로 유저 인터페이스를 렌더링
• 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교 한 후 바뀐 부분을 실제 DOM에 적용

Single Page Application

다시 전체 리로드가 필요없음.

기존에선 요청이 서버로 가면 전체가 새롭게 리프레쉬됨

↔

하지만 SPA는 한번만, 그 시점에서 백엔드에서 전체 웹페이지를 고치지 않고 html dom을 동적으로 업데이트 함

Facebook, gmail등이 이런 방식으로 작동하게 되는데 필요한 부분만 업데이트, 전체 페이지만 업데이트 하는것이 아님

• 장점

  • Virtual DOM이 실제 DOM보다 빨라 성능 향상
  • 필요한 데이터만 가져오기에 매우 빠름
  • 개발이 편함
    • 같은 백앤드로 여러 프론트 담당, 재사용 용이
    • 가독성 높고 유지보수 용이
  • 응용프로그램 전체가 자신의 컴퓨터에서 실행되기에 오프라인에서도 작업 가능
  • 프레임워크가 아닌 라이브러리기에 혼용 사용

• 단점

  • 보안에 취약
    • 크로스 사이트 스크립팅(XSS) 활성화로 삽입공격 막아야 함
  • 메모리 누수
  • 하위버전 웹브라우저 지원불가

JSX는JS 문법을 확장, 이를 통해 JS XML HTML등을 쉽게 혼합할 수 있다.

삽입된 모든 값을 렌더링하기 전에 위험한 HTML 구문에 대해 자동으로 이스케이프 하므로 위에서 언급한 단점인 보약의 취약한 점을 XSS 공격 방지할 수 있음

단, 웹 브라우저는 JSX를 이해하지 못하기에 JSX→HTML JS로 변환 할 누군가가 필요

1. 코드를 트랜스 파일 할 수 있는 컴파일러 babal을 포함하거나
   • 이 BABEL 라이브러리를 통해 런타임시 즉석에서 변환
2. Node를 사용하여 완전한 개발 환경을 설정해야 함
   • Create-React-App

참조하면 좋은 블로그 글

React 완벽정리 (react란? 장점, 단점 등)

JSX 소개 - React

패스트캠퍼스의 올인원패키지 : 프론트엔드의 진유림 강사님의 GIT특강을 보고 정리 한 내용입니다.

서로 카톡이나 메일로 소스 공유하고 수정할 부분 찾아서 수정하고 합치고 다시 저장해서 서로 공유하고...

→ 너무 복잡하고 힘들다... 어디 고쳐야 할지도 헷갈리고...

→ 서로의 수정버젼이 다를 수 있고...

→ 마치 대학교 조별과제_완성.ppt, 조별과제_진짜완성.ppt... 같이 파일만 무수히 많아져서 공유하기도 힘들거고...

이러한 버전들을 관리하고 ( 완성본까지의 수정본까지 ) 원하는 버전을 가져오고 수정할수도 있고 합쳐서 관리에 매우 용이해진다

CLI와 GUI 두가지로 GIT 사용 가능

• 각각 장단점...이 있다
• 둘 다 할 줄 알아야 상황에 따라 대처하기 좋다.

절차

1. 프로젝트 폴더 설정
   • git init
2. 코딩
3. 원하는 파일 선택
   • git add
4. 선택한 파일들 병합
   • git commit -m "~"
5. 프로젝트 저장소 만들고
6. 프로젝트 폴더에 저장소 주소 주고
   • git remote add
7. 내 컴퓨터에 프로젝트 폴더에 만든 덩어리 GitHub에 업로드
   • git push

git init

• git init하면 기본으로 숨김 처리 된 폴더가 생기고 이 폴더를 로컬저장소라고 하는데 여기에서 버전 관리를 하게 됨, 직접적으로 건들일은 없고 명령어로 제어!
• 단 하나의 폴더에는 하나의 로컬저장소만 유지!

cmd로 원하는 디렉토리 가서 git init 명령어 입력

오류 발생한다면... 환경변수 다시 잡아주거나 git 설치경로 다시 한번 확인하기

README.md 파일 하나 만들고

git add [README.md](http://readme.md/)

git commit -m "README.md 추가"

확인해보려면

git log

다 추가하려면

git add .
git commit -m "다 추가"

이러면 버전 생성됨.

• 의미있는 변동사항을 묶어서 커밋을 만들자
• 버튼 하나를 수정하는데 다수의 파일을 수정했다면 다수의 파일을 묶어서 커밋!
• 커밋 메시지는 꼭 작성하자.

여기까진 내 로컬 저장소에 버전관리 되고 있음

이걸 원격저장소 (Github)등에 올려서 온라인 및 타인과 버전 관리

git remot add origin https://github.com/아이디/이름.git

git puch origin master

기본 브랜치가 master이기에

나는 main!

git hub 로그인 해서 new repository하고

이렇게 만들어주기

만들고나서 cmd로 돌아가서

remote add와

push 해주자!

개발 커뮤니티에서 글을 보다가

---

업무방식은 Agile

이슈는 JIRA

프로젝트는 Task로 나누고 나눠진 Task들은 Sub Task로 다시 나눠서

각 Sub Task에 대한 Story Point(일정)은 투표로 결정

소스관리는 Github, Unit-Test Code 필수적으로 작성하고

커뮤니케이션은 화상미팅, Slack, JIRA 으로 한다

---

라는 글을 보게 되었는데, 프로젝트 관리하는데 있어,

어떤 회사는 그냥 보여주기식으로 하는곳도 있다 라는 글도 보았지만

이런식으로 분류하여 체계적으로 관리한다는게 놀랍기도 하고 호기심도 들던 와중에,

교육받고 있는 엔코아에서 프로그램을 진행한다는데 뭔지는 알아보고 싶어 찾아보았다.

프로젝트 기획과 관리를

서비스 기획, 웹 기획, 프로젝트관리법 로 크게 분류하고

그 중 몇개의 세부항목을 잡아 가볍게 정리하자면,

※ 기획

1. 서비스 기획 ( 아이데이션, Agile, Scrum, Lean StartUP)

• 아이데이션

  • Ideation ( idea + tion )

  • 아이디어, 생각을 공유하며 피드백하는것

    1. Brain Storming

       • 의견 비판없이 수용하는 것, 무조건적인 수용이 핵심

    2. Brain Writing

       • 다른사람의 의견을 바탕으로 자유롭게 생각하는것, 말하지 않고 쓰기, 침묵의 브레인스토밍

    3. 6 HAT

       • 각기 다른 색의 모자를 쓰고 모자의 색이 의미하는데로 사고하는 것, 백색은 긍정적, 정보의존 흑색은 부정적 이런식으로?!

    4. Scamper

       • Substitute 대체
       • Combine 결합
       • Adapt 응용
       • Modify/Magnify 변형/확대
       • Put to other uses 다른방법접근
       • Eliminate 제거
       • Reverse 뒤집기
       • 아이디어 창출의 체크리스트

    5. Crevate Ideation

    6. 마인드맵

       이 밖에도 다양한 분류가 있다.

• Agile

  • Agile의 사전적 의미는 날렵한, 민첩한, 기민한!
  • SW 개발 성공의 불확실성이 높아지고 전통적인 개발방식을 개선하고자 새로운 SW개발 방법이 등장했고, 경량 방법론이 대두되며, 2001년 에자일 SW개발 선언문을 만들고 이 때부터 애자일이라는 용어의 의미가 생겼다.
  • 소프트웨어 엔지니어링에 대한 개념적인 구조로 프로젝트 생명주기동안 반복적으로 개발을 촉진하는 것. 소프트웨어 개발 방법론이었지만 다양한 분야에 적용되고 있다.
  • 폭포수 모델을 보완하여 나온것, 문서를 통한 개발법이 아닌 실질적인 코딩을 통한 방법론!
  • 협력과 피드백이라는 핵심 단어로 정리 할 수 있다, 더 자주, 일찍 잘 협력과 피드백을 하자~!
  • 개발자와 고객 사이의 지속적 소통으로 변화하는 요구사항을 수용한다.
  • 익스트림 프로그래밍은 에자일 개발 프로세스의 대표적인 방법!

 - 에자일 자격증 이라는것도 있다.
 - 에자일 자격증 관련내용 ( <https://gmlwjd9405.github.io/2018/05/27/agile-certification.html> )

• Scrum
  • 럭비경기에 사용되는 용어, 럭비에서 반칙으로 경기가 중단되었을 때 쓰는 대형
  • 에자일의 개발 프로세스로 불리는 개발 방법론 중 하나.
  • 스프린트는 전력질주라는 의미!
  • 스프린트라는 주기로 구성되어 각각 4주를 넘지 않고, 보통 2주로 구성되며 하나가 끝나면 다음으로 넘어간다. 이 주기는 고정되어 있어 끝났던, 아니던 정해진 날자에 끝나게 된다.
  • 장점 : 사용자와 충분한 소통, 신속한 협조와 조율, 일일 자신의 일정을 발표함으로 업무에 집중할 수 있는 환경 조성, 단순 실천 지향적, 프로젝트 진행 현황을 볼 수 있어 목표에 맞게 변화 가능
  • 단점 : 추가적 작업 시간이 필요, 일일회의를 정해진 짧은 시간(고정 15분)에 마쳐야 해서 빠듯, 투입 측정이 없어 효율성의 평가 불가, 프로세스 품질 정도 측정 불가
• Lean StartUP
  • 이 역시 애자일 방법론.
  • 린의 사전적 의미는 기름기를 쫙 뺀.
  • 도요타 자통차의 토요타 생산 시스템에서 출발.
  • 낭비를 줄이고 생산성을 높인다는 린 사고방식을 창업 프로세스에 적용한 것.
  • 고객과 접촉하는 빈도를 높여서 낭비를 줄여 잘못된 가정을 최대한 빨리 검증하고 회피 하는것.
  • 다섯가지의 원칙
    • 새로운 제품과, 서비스를 만드는 조직은 모두 스타트업
    • 창업가 전신은 관리, 새로운 방식의 관리가 필요
    • 지속가능한 사업을 어떻게 만드는지 학습하는것이 스타트업의 존재 이유
    • 제품을 만들고 고객의 반응을 측정하여 피드백의 순환을 유도하는 것
    • 일의 우선순위를 어떻게 정할지에 대해 집중할 것

2. 웹기획 ( IA, Sprint Backlog, Story Board )
   • IA (Information Architecture)
     • 웹 기획은 설계가 절반이라고 한다!
     • IA문서는 정보 구조를 설계하고 정리하는 것.
     • 원하는 정보를 쉽게 찾을 수 있도록 정보 컨텐츠를 구조화 하는 것.
     • 사용자가 쉬운 검색을 하기 위해 구조화 및 분류체계를 수립하고, 이를 명확하게 레이블링 하는 것.
     • IA의 4가지 요소
       • 정보분류 및 조직화 - 어떻게 정보를 범주화 할 것인지
       • 네비게이션 - 정보를 어떻게 브라우징 할 것 인지
       • 레이블링 - 정보를 어떻게 보여 줄 것인지
       • 검색 - 정보를 어떻게 검색할 것인지
   • Sprint Backlog
     • 각각의 스프린트 목표에 도달하기 위해 필요한 작업 목록
     • 제품 책임자와 스크럼팀이 모여서 회의시 결정되는 것.
     • 요수사항을 task로 구체화 한 '문서'
     • 계획이 포함되어야 하며 , 원칙 상 수정 불가!
   • Story Board
     • 화면설계
     • 실제 웹페이지 만들듯이 구체적으로 표현하는 것
     • 디자인을 위한 레이아웃 시안이 아님.
     • 주요한 구성요서가 표현되어야 함
       • 목차
       • 업데이트 기록
       • 개요 및 정의
       • 사이트맵 : 메인메뉴와 하위메뉴 시각화
       • 프로세스 : 기본흐름도를 기재 (세부흐름도 보다는)
       • 전체화면구성 : 전체화면 레이아웃 정리 및 구성
       • 영역 별 상세설명 : 영역 별 디자인, 기술적 상세설명
       • 작업 스케줄 구성 : 기획부터 개발완료까지의 스케줄
     • 위의 8가지 항목정도로 구성됨.
     • 관련 내용 링크 참조 (https://www.vingle.net/posts/997962) (https://www.yamestyle.com/138)

※ 프로젝트 관리법

(Jira, Trello, WBS, Github)

• Jira

  • 소프트웨어 프로세스 관리 도구
  • 주된 프로젝트에서 예상되거나 이미 발생한 '이슈' 관리 (이슈 트래킹)
  • 관리 대상 이슈로는 업무, 문제점, 개선 사항
  • 이슈 관리법
    • 목록별
    • 우선순위별
    • 담당자별
    • 진행과정별
  • 위의 이슈 관리법을 통해 시스템적 관리
  • 관련내용 (https://www.eventservice.kr/atlassian/file/1207_Atlassian_busan_HandsOnLabs03.pdf)

• Trello

  • 애자일과 칸반 스타일의 작업관리를 할 수 있는 툴

  • 화이트보드의 소프트웨어화?

  • Card/List/Board의 3가지 구조로 구성

  • Board는 List 포함 List는 Card를 포함하는 계층 구조

  • Card

    • 가장 작은 단위
    • 이미지, 긴글, 마크다운 지원
    • 제로보드의 게시판과 비슷

  • List

    • Card를 세로줄로 묶은 단위
    • 단위별로 이동, 수정이 가능

  • Board

    • 화이트보드 판

  • 넓은 확장성

• WBS

  • Work Breakdown Structure
  • 작업분해도, 프로젝트의 범위와 산출물을 세부요소로 분할한 계층 구조
  • 전체를 큰 단위로 나누고
  • 이를 더 작은 단위로 분해한 계층!
  • 작업단위를 나누고
  • 담당인원을 배치하여 구성도를 완성
    • 수행할 업무를 식별
    • 업무 계획과 산정
    • 전체일정 파악
    • 프로젝트 정보 추적
    • 클라이언트, 개발간 의사소통

• Github

  • 소스코드 관리를 위한 분산 버전 관리 시스템
  • 작업기록을 남겨서 수정 보관등 이력을 추적하여 협업을 용이하게
  • Git이 프로그램이라면 Github은 정보교환이 이루어지는 서버
  • 협업을 하고 소스에 대한 이력관리와 소셜코딩
  • svn은 보통 서버에 git은 작업 컴퓨터에
  • 다른 개발자들과 협업, 다른 개발자들의 코드를 볼 수 있다.

HTML

<!-- 범위 주석 -->

CSS

/* 범위 주석 */

Javascript

/* 범위 주석 */

//주석

Java

/* 범위 주석 */

//주석

Oracle

--주석

Mysql

# 주석

/* 범위 주석 */

왜 주석은 통일하지 못하는걸까?

예를들면 HTML 에서 /* 따로 할당된 명령어가 있는걸까?

고급언어로 작성된 프로그램을 실행하는 데에는 두가지 방법이 있다.

1.컴파일러는

컴퓨터가 직접이해하는 언어로 바꾸어주는 일을하는 프로그램

고급 명령어를 직접 기계어로 번역

2.인터프리터는

한번에 변환하는 컴파일러와 달리 한 단계씩 기계어로 해석하며 실행.

고급명령어들을 중간 형태로 번역 한 뒤 그것을 실행

인터프리터를 이용하면 대화식으로 할 수 있기에 학습용으로 많이 사용 (파이썬에서 사용했던!)

두개의 세부적인 차이로는

번역 단위

컴파일러는 전체단위로    

인터프리터는 한줄씩 번역

실행속도

컴파일러는 빠름

인터프리터 느림

번역속도

컴파일러는 느림

인터프리터 빠름

메모리 할당과 목적프로그램 생성은 컴파일러만

https://docs.google.com/document/d/1hnsBid61Ak7YVMerGZuxbHLFgTZ_pRwUs2-xwbkvNpc/edit

나의 역량을 체크해보자!