✅ 제목

🔥 금주의 목표

• 정보처리기사 정리집 3회 정독
• 정보처리기사 문제 풀어보기
• 캡스톤 프로젝트 준비하기

📘 공부내용

[ 이산수학 - 유한 상태 기계 ]

기계란 무엇인가?

• 입력에 따른 출력을 제공하는 것이다.
• 이때 출력은 상태에따라서 달라질 수 있다.
• 상태에 의존적이다.

유한 상태 기계

1. 밀리기계
2. 무어기계

밀리기계

• 수학적 표현은 ℳ= (𝑆,𝐼,𝑂,𝛿,𝛾,𝑠0) 
• 𝑆는 상태 집합 (또는 상태 공간)
• 𝐼는 입력 기호 집합 (또는 입력 알파벳)
• 𝑂는 출력 기호 집합 (또는 출력 알파벳)
• 𝛿∶𝑆×𝐼→𝑆는 상태 전이 함수 (또는 다음 상태 함수)
• 𝛾∶𝑆×𝐼→𝑂는 출력 함수
• 𝑠0∈𝑆는 시작 상태
• 특징
  • 상태에서 상태로 전이할 때 출력

무어기계

• 수학적 표현은 ℳ=𝑆,𝐼,𝑂,𝑓,𝑔,𝑠0 
• 𝑆는 상태 집합 또는 상태 공간
• 𝐼는 입력 기호 집합 또는 입력 알파벳
• 𝑂는 출력 기호 집합 또는 출력 알파벳
• 𝑓:𝑆×𝐼→𝑆는 상태 전이 함수 또는 다음 상태 함수
• 𝑔:𝑆→𝑂는 출력 함수
• 𝑠0∈𝑆는 시작 상태
• 특징
  • 상태에서 출력
• 밀리 기계 vs 무어 기계
  • 출력이 전이에서 일어나느냐 , 상태에서 일어나느냐의 차이

튜링기계

유한 상태 오토마타로 가능한 일

• 정규 언어 인식
• 두 수의 덧셈 유한 상태

오토마타로 불가능한 일

• 문맥 자유 언어 인식
• 두 수의 곱셈

튜링 기계는 유한 상태 오토마타보다 더 강력한 장치

• 기억 능력이 있음
• 컴퓨터가 할 수 있는 일은 튜링 기계로 모두 할 수 있음

FSM vs. TM 차이점

🐵 오늘의 정리

날씨가 흐리고 저녁부터 부슬부슬 비가오기 시작하네요. 몇일전부터 덥기 시작하더니 본격적으로 여름이 시작하려나 봅니다 ㅎㅎ

오늘은 날씨도 안좋아서 집에서 공부를 했습니다. 자격증 뿐만 아니라 아직 대학교를 다니고 있기때문에 학생의 본분은 다하기 위해서 과제 공부를 진행했습니다. 매주 수요일이면 교수님께서 과제를 올려주시기도 하고, 이번주 토요일에 있을 시험과 기타 할일들이 많아서 미리 과제를 해두는 편이 좋겠다 판단이들어 조금 일찍(?) 과제를 진행했습니다.

현재 학년에 맞지는 않지만 2학년에 듣지 못했던 이산수학 과목을 듣고있는데요. 그래서 오늘 공부한 내용은 "유한상태 기계"에 대한 개념과 앨런튜링이 1936년에 만든 "튜링머신"에 대하여 공부및 과제를 진행했습니다.

오늘의 특별한 점이라면, 열심히 과제를 진행하던 와중에 이번에 지원한 국가근로인턴 대상 업체에서 면접을 보러오라는 메일을 수신했다는것입니다. 일반적으로 저희 대학교에서는 1차 서류전형은 학교에서 그 불합여부를 가리고 있습니다. 그리고 추가적으로 필요한 기업에 한하여 2차적으로 서류평가를 거치고 그에대한 결과를 메일 혹은 전화나 메시지로 통지해주고 있습니다. 제가 지원했던 기업에서도 2차 서류평가를 진행하였고, 다행히도 저의 서류를 좋게 봐주셔서 면접을 볼 수 있는 기회가 생겼습니다. 일단, 이번주 토요일까지는 기사필기시험에 집중하기로 하고! 토요일부터 열심히 면접준비를 해봐야 겠습니다!

✅ D-3, 정보시스템 구축 관리

🔥 금주의 목표

• 정보처리기사 정리집 3회 정독
• 정보처리기사 문제 풀어보기
• 캡스톤 프로젝트 준비하기

📘 공부내용

1️⃣ 소프트웨어 비용산정방식

하향식 산정방법

• 경험에 의존하는 비과학적인 방식

• 종류

  • 전문가 감정

    • 2~n 명에 의해 주관적인 의견이 반영이된 방식

  • 델파이 방식

    • 한명의 조정자와 다수의 전문가로 구성

    • 전문가 감정을 보완한 방식, 객관적인 의견을 반영 

상향식 산정방법

• 프로젝트의 세부적인 작업단위별로 비용을 산정한 후 집계하여 나타내는 방법

• 종류

  • LOC(Line Of Code)

    • 원시코드로 부터 비관치, 낙관치, 기대치를 구해서 산정하는 방식

    • 가장쉬워 많이 사용하는 방식

    • 노력 = 개발기간 X 투입인원 = LOC / 1인당 월평균 생산코드 라인 수

    • 개발기간 = 노력 / 투입인원

    • 생산성 = LOC / 노력

  • 개발단계별 인월수 기법

    • LOC를 보완한 기법

    • LOC보다 정확하다.

  • 수학적 산정기법

    • 경험정 추론 기법

    • 종류

      • COCOMO모형유형

        • 조직형 (~5만)

          • 노력 = 2.4 X KDSI

          • 개발기간 = 2.5 X MM

        • 반분리형 (~30만)

          • 노력 = 3.0 X KDSI

          • 개발기간 = 2.5 X MM

        • 내장형 (30만~)

          • 노력 = 3.6 X KDSI

          • 개발기간 = 2.5 X MM

      • COCOMO모형 종류

        • Basic(기본), Intetmidiate(중간), Detailed(발전)

  • PUTNUM

    • 생명주기 예측모형

  • FP(Function Point)

    • 총 기능점수와 영향도를 이용하는 기법

2️⃣ 네트워크 관련 신기술

IOT (Internet Of Things)

• 유비쿼터스 관련 기술 

M2M (Machine To Machine)

• 기계간의 무선연결 

모바일 컴퓨팅

클라우드 컴퓨팅

모바일 클라우드 컴퓨팅

• ICT(Information and Communication Technologies)

• 클라우드를 통해 서비스 제공자와 소비자가 정보자원을 주고받는 형태 

인터 클라우드 컴퓨팅

• 여러 클라우드 서비스들이 연결된 상태 

메쉬 네트워크

• 각 라우터를 기지국으로 사용하여 무선 네트워크 망을 형성

• 수많은 기기들이 연결되어야 함 

와이선

• 스마트그리드와 같이 장거리 무선통신을 필요로하는 IOT서비스를 위한 저전력 장거리 통신기술 

NDN (Named Data Network)

• 콘텐츠 자체의 정보와 라우터만을 이용해 Data를 전송하는 기술

• Peer to Peer와같은 형태

• IP망을 대체할 새로운 인터넷 계층 프로토콜 

NGN (Next Generation Neteork)

• 차세대 통신망

• 완전한 이동성 제공을 목표

• 인터넷 프로토콜 기반 

SDN (Software Defined Network)

• 네트워킹을 컴퓨터처럼 모델링

• 여러 사용자가 각 소프트웨어를 통해 네트워킹을 가상화하고 제어하고 관리하는 네트워크 

NFC (Near Field Communication)

• 양방향 통신이 가능한 RFID 기술의 한 형태 

UWB (Ultra WideBand)

3️⃣ 소프트웨어 개발 표준

ISO12207

CMMI(능력 성숙도 모델 통합)

• 초관정정최

• 초기 --> 관리 --> 정의 --> 정량적관리 --> 최적화 

SPICE(ISO 15504)

• 소프트웨어 처리 개선 및 능력 평가를 위한 기준

• 프로세스 개선을 위해 개발기관이 스스로 평가하는것에 목적을 둠

4️⃣-1 경로제어 프로토콜 종류 

IGP

• RIP(Routing Information Protocol)

  • 소규모 동종 네트워크에서 사용

  • 가장 널리사용

  • 최대 hop수를 최대 15로 제한

• OSPF(Open Shortest Path First protocol)

  • 대규모 네트워크에서 사용

EGP

• 게이트웨이간의 네트워킹에 사용되는 프로토콜

• 게이트웨이-->응용계층

BGP

• EGP의 단점을 보완하기 위해 만들어진 프로토콜

4️⃣-2 트래픽 제어 

흐름제어

• 송.수신간의 데이터(패킷) 전송량이나 속도를 제어
• 정지대기, 슬라이딩 윈도우

혼잡제어(폭주제어)

• 송.수신 사이에 데이터(패킷)의 수를 제어
• 느린시작, 혼잡회피

교착상태(Dead Lock) 방지 

🐵 오늘의 정리

 오늘은 집근처 투썸플레이스에 가서 정보처리기사 공부를 하였습니다. 오늘 학습한 내용의 주제는 정보시스템을 구축하는 방법 이었는데 간략히 설명하자면 어떻게 하면 저 저렴하고 효율적으로 개발을 할것이며 어떻게 보안이슈에 대한 방안을 강구할것이가에 대한 내용이라 보시면 되겠습니다. 

 전반적으로 암기를 요하는 부분이 많았으며, 특히 비용을 산정하는 공식부분은 숙지가 되어야 풀 수 있는 예제문제가 여럿 있었습니다. 

 (신)정보처리기사를 공부하면서 느끼는거지만 이전 (구)정보처리기능사를 공부할때보다 더 실무에 치중된 내용을 다루고 있다는 느낌을 많이 받았고, 아는만큼 보인다고 기존에 대충 짚고 넘어갔던 이론적인 부분들에서 다시 공부하고 이해해야했던 시간을 가지게 된것같습니다.

 그리고 오늘 프론트엔드 개발자 겸 유튜버이신 닥코님의 HTML, CSS 강의 이벤트에 당첨이 되어서 한달 무료수강권을 받게되었습니다. 아직 수강권을 전달받지는 못했지만 추후에 해당 강좌를 공부하면서 내용정리 포스팅도 해보도록 하겠습니다 : )

남은 3일동안더 더 분발해서 정보처리기사 필기 합격까지 아자아자!

✅ 자격증 시험까지 D-4, 인턴준비

🔥 금주의 목표

• 정보처리기사 정리집 3회 정독
• 정보처리기사 문제 풀어보기
• 캡스톤 프로젝트 준비하기

📘 공부내용

오늘도 정보처리기사 필기시험 참고서 2회차 정독중에 있습니다. 1회차 정독할때만 해도 의욕이 뿜뿜해서 하루에 100페이지도 넘게 봤던것 같은데 점점 하루에 할 수 있는 페이지량이 줄어드는것 같네요...

이번에는 4번째 과목인 "프로그래밍 언어활용" 부분을 공부했습니다. 사실 컴퓨터관련 학과나 관련 분야에서 종사하신 분들이시라면 이부분을 공부하는데는 큰어려움이 없으리라 생각이 듭니다. 

대부분 프로그래밍 언어의 문법적인 내용이 많았고, 조금 어렵게 느껴질 수 있으리라 생각이 드는 부분은 "응용 SW기초 기술 활용" 부분이었습니다. 이유즉슨 운영체제와 네트워크에 기반한 내용이었기 때문에 이부분을 공부해보신적이 없으시거나 생소하신 분들에게는 이해하는데 시간이 걸릴꺼같다 생각이 들었기 때문입니다.

오늘의 공부내용을 정리를 하자니, 대부분이 프로그래밍 문법이라 자세하게 기록은 하지는 않고 다시금 암기를 해야하는 부분위주로 정리를 하도록 하겠습니다.

첫번째는 연산자 우선순위입니다.

연산자 우선순위같은 경우에는 어느정도(?)는 코딩하며 느껴온 감으로 풀 수 는 있으나, 시프트연산자와 같이 평소에 잘 사용안하게 되었던 연산자가 문제에 나오다보니 외워야겠다는 생각이 들었습니다. 아래의 사진은 시나공 참고서에서 발췌한 사진입니다.

🐵 오늘의 정리

 매주 화요일은 캡스톤프로젝트 수업이 있는날입니다. 코로나여파로인해 실시간 온라인 수업을 진행하고 있는데요, 그렇기 때문에 오늘도 집에서 14:00~17:00까지 수업을 들었습니다.

 사실 수업이라기 보다는 교수님 지도아래 각 팀별로 자유롭게 회의를 진행하고 매주차시 진척도나 이슈와 관련해 교수님의 피드백을 받고있습니다. 오늘은 산학협력단에서 지원되어지는 지원금사용과 그 내역을 처리한 문서제출건에 대하여 교수님께 전달드리고, 현재 저희 프로젝트와 관련하여 중요 이슈인 GPS Tracking 정확도와 관련하여 팀내에서 고민하며 도출해낸 해결방안에 대하여 말씀드리고 그에대한 피드백을 받았습니다. 

 수업 이후 시간에는 정보처리기사 시험공부를 하고있었고, 어제늦게 전달받은 국가근로인턴 1차 서류평가에 합격했다는 메시지를 받고 설레는 맘으로 지원했던 회사와 해당 부서에 관련하여 다시한번 찾아보는 시간을 가졌습니다. ㅎㅎ

 뭔가 첫 인턴이기도 하고, 마음만으로는 그곳에 들어가서 많은 스킬들도 배우고 실무에대한 사이트도 넓혀오고 싶다는 크나큰 열정을 가지고 있지만... 정말 인턴으로 붙을 수 있을까? 하는 맘에 설렘반 걱정반이네요...

인턴에 대한 자세한 후기 및 결과는 최종발표 이후에 다뤄보도록 하겠습니다 ; )

👨‍💻 브라우저가 한 번에 1개의 도메인에서 다운로드 받는 리소스는 몇 개 인가요?

🐵: 안녕하세요 김고릴라입니다 : )

오늘 포스팅할 내용은 브라우저가 한번에 1개의 도메인에서 다운로드 받는 리소스의 갯수에 대해서 알아보는 내용입니다.

사실 이 내용은 프론트엔드 개발자를 위한 문제은행에서 답을 모르는 것들을 포스팅해서 기억해 두려고 발췌해 온 주제랍니다. 사이트는 아래를 참고해 주세요 ; )

🐵: 다시 본론으로 돌아와 이야기를 이어나가보도록 하죠!

우리가 사용하는 브라우저는 통신을할때 HTTP라는 프로토콜을 사용합니다.

❗❗ : 여기서 뜬금없이 HTTP를 설명하는 것이 아니라 우리가 1개의 도메인에서 리소스를 다운받게 해주는 친구가 HTTP라는 것이기 때문에 우리는 문제를 해결하기 위해서 이 HTTP를 자세하게 살펴봐야 합니다.

🐵: 

이 HTTP 라는 친구도 여러버전으로 개발이 되어 있는데, 우리가 현재 사용하고 있는 버전은 HTTP/1.1 버전입니다. 이 버전은 1997년 1월에 출시되어 자그마치 23년이라는 나이를 가지고 있죠. 

그 이후 몇번의 개선이 있었지만, 23년이라는 시간을 생각하면 그만큼의 안정성을 보장한다 볼  수 있을것 같습니다.

현재의 웹은 다량의 멀티미디어 리소스를 처리해야합니다. 

예시로 우리가 웹사이트에 접속하면 기본적으로 html, css, js 파일들이 필요할 것이고, 사진정보까지 필요하다면 추가로 jpg나 png 같은 파일까지 요청하게 됩니다.

이렇듯 현재 웹은 다량의 멀티미디어 리소스가 필요하고 이를 특정 서버로 HTTP라는 것을 이용해 요청해야합니다.

🤔: 그럼 HTTP를 이용해 이 많은 멀티미디어를 어떻게 서버로 요청하나요?

🐵: 

여기서 중요한것이 "요청한다"라는 키워드인데요. 사실 HTTP는 단방향 연결이기 때문에 Request, Response 방식으로 데이터를 주고 받습니다. 

즉, HTTP/1.1은 기본적으로 Connection(Client와 Server와의 연결)당 하나의 요청을 처리하도록 설계되어있다는 이야기지요.

이러한 이유로 우리는 다량의 멀티미디어들을 순차적으로 서버로 요청을 하고 그 결과를 하나씩 받아오게 됩니다.

아래의 그림을 보시면 더 이해가 빠를듯 싶네요 : )

그렇다 보니 우리는 요청하는 멀티미디어가 많을수록 Latency(대기시간)이 길어지게 됩니다.

이 시간동안 화면이 잠시 멈춘듯 표현이 되는것이죠.

여기서 우리가 알고자했던 질문의 정답을 알 수 있겠네요.

브라우저가 한 번에 1개의 도메인에서 받을 수 있는 리소스는 1개임을 알 수 있습니다.

추가 정보

이러한 데이터를 주고받는 방식때문에 조금이라도 대기시간을 줄이고자하는 노력들이 생겨났습니다.

오늘은 어떤것들이 있는지만 살펴보고, 자세한 내용은 추후에 다루도록 하겠습니다 : )

첫번째는 http를 통해서 전송되는 데이터의 용량을 줄이기 위한 시도들이 있었습니다.

그 결과로 Minify CSS, Minify Javascript 와 같은 기술이 생겨났죠.

이 기술들은 공백이나 여백과 같은 것들을 없앰으로서 코드를 축소하여 데이터 용량을 줄이는 방식입니다.

두번째는 웹페이지를 구성할때 필요한 다양한 아이콘 이미지 파일의 요청 횟수를 줄이기 위한 방법입니다.

바로 Imgae Spriting인데요, 위에서 언급햇듯이 한 요청당 하나의 리소스만 받을 수 있는 HTTP/1.1의 구조 때문에 필요한 아이콘들이 한되 모아 하나의 Image파일로 만들어 보내주는 방식입니다.

그리고 이렇게 받아진 이미지들은 좌표값을 이용해 필요한 영역만 화면에 보여주는 방식으로 이용되어집니다.

👨‍💻 프로젝트 제목SEO (search engine optimization) 란?

🐵:
오늘은 SEO(search engine optimization) 한국말로 '검색엔진 최적화' 라는것이 무엇인지에 대하여 알아보도록 하겠습니다.

'검색엔진 최적화' 이하 'SEO'의 사전적 의미는 웹 페이지 검색엔진이 자료를 수집하고 매기는 방식에 맞게 웹 페이지를 구성해서 검색결과의 상위에 나올 수 있도록 하는 작업을 말합니다. 

- 위키백과 참고

🐵:  

우리가 궁금한것이 생겼을때 그 궁금증을 해결하기 위하여 주로 NAVER 나 GOOGLE 과 같은 검색포털사이트를 이용합니다. 이러한 회사들은 독자적으로 웹페이지 내에 있는 정보들 가령 Html 상에서 표시되는 내용들을 읽어들이고 어떤정보인지 분석하는 검색 엔진을 구축해 가지고 있습니다.

이러한 검색엔진들은 검색된 결과에 대하여 우선순위를 매기는 방식을 회사마다 다르게 가지고 있습니다.

예를들어 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹사이트에 얼마나 인용되었나를 사용하고있고, 이때 이 신뢰도에 따라서 결과물을 보여주는 우선순위가 달라지게 되어지는 것이죠.

(이러한 신뢰도 측정 방식 때문에 웹사이트들은 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화를 합니다.) 

😧:  그렇다면 왜 SEO를 고려해야하는걸까요?

🐵:

그 이유는 간단합니다. 웹 사이트를 만든 회사나 소유주들이 자신의 사이트와 관련된 검색어로 검색했을때, 가장 먼저 결과로 나오기를 바라기 때문인데요.

예를 들어 우리가 쇼핑이라는 단어를 검색했을때, 쿠팡 위메프 등 정말 많은 포털로 연결되는 링크들이 나오지만 정작 그 결과물을 보는 우리는 상단에 있는 10개정도만 살펴보는 상황을 예로들 수 있겠습니다.

🤔: 오.. 그러면 어떻게해야 '검색엔진 최적화'를 적용할 수 있는건가요?

🐵: 

기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고, 앞서서 웹페이지의 신뢰성을 향상시키기 위해 다른 웹 페이지에서 우리 페이지로 링크가 많이 연결되도록 하는 것이 있겠습니다.

😀: 아! 이렇게 하면 모든 검색엔진에서 SEO가 지켜지는 거군요!

🐵:

꼭 그런것만은 아닙니다. 이렇게 한다고해서 모든 검색엔진에 대해 최적화 작업이 이루어지는것은 아닙니다.

앞서서 말씀드린 최적화 작업방식은 어디까지나 기본적으로 대부분의 검색엔진들이 신뢰도를 측정하는 방식으로 타 사이트에 인용되는 횟수를 이용하기 때문에 가능한 이야깁니다. 

대부분의 검색엔진들은 검색결과에 대한 우선순위를 매기는 방식을 서로 다르게 가지고 있기 때문에 우리가 검색되고자 하는 주 타겟 검색엔진들을 잡아야 합니다. 

예시로 한국인들이 자주 사용하는 검색엔진을 보유한 NAVER는 검색엔진의 우선순위 배치에 해외와 가른 기준을 적용하고 있는것을 알 수 있습니다. 이런 경우에는 보편적인 SEO를 적용시 오히려 스팸으로 분류될 수 있습니다.

😧: 그러면 한국에선 SEO를 하기위해 어떻게 해야하죠?

🐵:

보편적인 방식을 사용했을때 스팸으로 분류되는 이유는 NAVER가 자사 블로그에 노출 우선순위를 두었기 때문입니다. 즉, 한국의 검색 엔진에 노출되기 위해서는 사이트 콘텐츠가 웹문서가 아닌 블로그 포스트로 등록되는 방향으로 최적화 해야합니다.

이러한 이유로 많은 기업들이 흔히말하는 파워블로거에게 의뢰하여 후기들을 작성하는것을 의뢰하는 이유도 있지 않을까? 생각이 드네요 ^^

👨‍💻 Python String 문법

목표: 파이썬을 이용해서 문자열을 화면에 출력하는 여러가지 방법을 배웁니다.

📌 문자 와 문자열?

우리는 살면서 정말 많은 문자들을 봅니다. 대한민국에서 태어났다면 대개 처음으로 보게 되는 문자가 '가' '나' '다' '라' 와 이겠지요.

⚡ 문자란

이렇게 '가나다라'와 같이 언어의 전달 수단의 하나로 사용되는 부호, 점·선 등으로 조합한것을 의미합니다.

⚡ 문자열이란

그렇다면 문자열이란 무엇일까요?

하나 이상의 문자들의 집합을 의미하는데요, 예를들어 "안녕하세요."는 각각의 '안', '녕', '하', '세', '요' 가 모여서 만들어진 문자열을 의미합니다.

📌 문자열 만들기

파이썬에는 C언어나 JAVA처럼 변수의 타입이 존재하지 않습니다.

그래서 어떤 값을 집어넣느냐에 따라 그 변수가 문자형 변수 혹은 숫자형 변수 등등이 되어집니다.

이번에 저희는 문자열을 담은 문자형 변수를 만들어 볼텐데요 아래의 사진처럼 소스코드를 입력해주세요.

example이라는 변수를 만들고 그안에 쌍따옴표 혹은 따옴표["" or '']를 이용하여 "안녕하세요 반갑습니다." 라는 문자열을 담아주었습니다.

이렇게 문자열을 만들때는 쌍따옴표 혹은 따옴표를 이용해 해당 문자를 감싸주면 문자열이 되어집니다. 그리고 이 문자열을 변수에 담으면 문자형 변수가 되어지는 겁니다.

한번 방금 입력한 결과물을 함께 확인해보시죠.

type이라는 메서드를 이용해서 우리가 만든 example 변수가 어떤 형태인지를 확인이 가능하고 결과로 str 즉 string(=문자열)의 줄임말을 확인이 가능합니다.

이 문자열은 구지 변수안에 담지 않아도 그 자체를 print안에 기입해서 출력이 가능하며, 변수에 담은 상태로도 출력이 가능합니다.

📌 Escape 문자 사용하기

Escape라는 단어는 우리말로 탈출이라는 의미를 가지고 있습니다.

즉 escapre string은 탈출한 언어라는 의미를 가지게 됩니다.

탈출한 언어, 과연 무엇을 탈출했다는 이야기일까요?

지금부터 그 이야기를 다뤄보고자 합니다.

C언어든 Python이든 언어를 만들때 해당 언어를 만든 개발자가 문법으로 지정해둔 특수 코드들이 있습니다.

예를들어 [ \ ] 문자는 백슬래쉬 라고 읽으며 문법에서는 특수한 용도로 사용되어집니다. 가장 큰 예로 개행을 할때 사용되어지죠.

( [ \n ] 을 문자열 맨 앞에 추가하면 출력시 문자열 위에 비어있는 한줄의 공백이 생깁니다. )

위에 하이라이트부분이 개행을 명령하는 부분입니다.

\(백슬래쉬) 말고도 문자열을 만들기위한 "(쌍 따옴표), '(따옴표) 도 마음대로 사용이 불가능합니다.

이러한 코드들은 개발을 위해 문법으로 지정된 코드들이기 때문에 문자열로 사용하는것이 그냥 허용되어지지 않습니다.

그렇다면 어떻게해야 이러한 문자들을 문자열로 사용이 가능할까요?

정답은 바로 escape string으로 만들어주면 되는겁니다.

즉, 문법을 탈출한 언어인거죠!

이렇게 문법을 탈출시켜주기 위해서는 python에서는 해당 문자에 \(백슬래쉬)를 붙여주기만 하면 됩니다.

만약 화면에 백슬래쉬를 띄우고 싶다면 [ \\ ]

만약 화면에 쌍따옴표를 띄우고 싶다면 [ \" ] 를 입력해 주면 되는 것이죠.

📌 Python 인코딩

인코딩이란 무엇일까요?

인코딩은 정보의 형태나 형식을 변환하는 처리나 처리 방식을 의미합니다. 

C언어로 예를들어 설명하자면, C언어에 Char형 자료형은 1byte 크기를 가지게 되는데 1바이트는 8비트 즉 2*2*2*2*2*2*2*2 가지의 숫자표현이 가능해집니다.

각 숫자마다 특정 문자를 매칭시킨다고 가정했을때 1byte로  256가지의 문자를 표현할 수 있는것이죠.

이렇게 문자를 표현하는 방식은 여러가지가 있고 이 방법에따라 이진코드를 읽어 문자로 표현하도록 명시해둔 방식이 인코딩이라 이야기드릴 수 있겠습니다.

여기서 저희가 사용하는 Python은 기본적으로 Unicode기반이라고 합니다. 

그렇다면 여기서 Unicode(유니코드)가 무엇일까요?

유니코드란, 숫자와 글자, 즉 키와 값이 1:1로 매핑된 형태의 코드 유니코드라고 합니다.

위에서 설명드렸던 인코딩 방식이 유니코드 방식인 셈이죠.

다시말해 아스키코드로 0x41 = A 로 매핑된 것 처럼, 아스키코드로 표현할 수 없는 문자들을 유니코드라는 이름 아래 전 세계의 모든 문자를 특정 숫자(키)와 1:1로 매핑한 것입니다.

그렇다면 다음의 인코딩 방식중 어떤것들이 유니코드 방식일까요?

(ASCII, EUC-KR, CP949, UTF8, UTF16)

정답부터 말씀드리자면 이 중에 유니코드 그 자체인 것은 없습니다.

그나마 UTF-8, UTF-16는 유니코드를 '사용'하는 인코딩 방식이기 때문에 유니코드에 제일 가깝다고 볼 수는 있겠네요.

자 이제 인코딩 이야기를 꺼낸 이유를 설명할 수 있겠네요.

우리 vscode에 print문을 이용해 ┌┬┐을 출력해볼거에요.  아마 그냥 긁어서 출력하면 출력이 안되실꺼라 생각이 듭니다.

(윈도우 유저라는 가정하에)

앞서 말한거처럼 파이썬은 유니코드 기반이기 때문에 ┌┬┐와 같은 특수문자를 화면에 출력하기 위해서는 우리의 소스코드 최 상단에 어떤 인코딩 방식을 사용할것인지 명시를 해주어야 해당 특수문자를 읽어들일 수 있습니다.

현제 아직 어떠한 인코딩 방식도 사용하지 않고있기 때문에 우리의 소스코드 최 상단에 어떤 인코딩 방식을 사용할 것인지를 명시해 주어서 특수문자를 해독해 주어야합니다.

아래 그림처럼 입력 후 화면에 출력해 볼게요.

위에 그림처럼 최 상단에 utf-8 인코딩을 사용하겠다는 명시를 주석을 통해 가능하고 위와같이 해주었다면, 유니코드를 utf-8 인코딩 방식으로 해독하게 됩니다.

그렇다면 3줄에 특수문자 앞에 u는 무엇일까요?

일반적으로 유니코드 문자라는것을 지칭할때는 해당 문자열 앞에 u를 붙여주어 표현해줍니다.

특수문자 말고 유니코드를 나열한 테이블에 있는 방법으로도 똑같은 결과를 출력도 가능합니다.

👨‍💻 DB Model - Memo (1)

지난 포스팅에서는 저희가 작업하고있는 프로젝트의 네트워크 전송량을 줄여 속도를 높여주는 작업을 Compress라는 모듈을 이용해 해주었습니다.

테스트를 진행했을때는 거의 1/10가량 속도가 빨라진것을 볼 수 있었습니다.

오늘은 다시 본래의 기능구현으로 돌아와서 우리가 만들고자하는 서비스에 필요한 Table을 만들어 주도록 하겠습니다.

📌 Model Schema 구상

프로젝트를 Memo라고 지었지만, 일반적인 메모장을 만들자니 무언가 실생활에서 사용하지 않을것 같아서 이번에 실제 배포까지 다룬후 사용할 예정이라 메모+TodoList 기능으로 만들고자 합니다.

스토리는 대충 이렇습니다. 

유저는 자신의 할일에대한 제목과 내용을 작성하고 언제 이 일을 해야하는지 날짜도 지정해줍니다. 해당 당일 그 임무를 수행후 active를 true로 설정해주면 그날 할일을 얼마나 진행했는지 화면에 표시해줍니다.

뿐만 아니라 유저들은 그룹을 만들고 해당 그룹들이 공통으로 수행해야할 TodoList를 생성하고 공유할 수 있습니다.

GROUP MODEL

• name - 그룹이름 (필수 값)

• leader - 그룹장 (default = 그룹 생성자)

• users - 그룹에 소속된 유저들 (default = [그룹 생성자])

• memos - 그룹에 속한 메모들

TODO MODEL

• title - 메모장의 제목 (필수 값)

• memoColor - 메모장의 색상 (default = primary)

  • 메모의 구분을 위해사용

• doDate - 해당 내용을 이행해야 하는 날짜 (필수 값)

  • type: 날짜형식

• content - 메모내용 (필수 값)

• activate - 수행완료여부

  • type: Boolean

  • true: 수행완료

  • false: 미수행

• user - 생성한 유저

  • 누가 생성했는지를 확인하기 위함

  • 내가 생성한 todo list만 식별하기 위함

• createdAt - 생성시간 (필수 값)

이렇게 유저그룹과 메모장을 생성하기위한 테이블 두개를 생성해 주었습니다.

오늘 포스팅은 여기까지고, 다음 포스팅에서 이 두 모델들을 사용해줄 URI와 그에 필요한 컨트롤러를 만들 대략적인 설계를 진행해 보겠습니다.

👨‍💻 Compression 미들웨어 설치

📌 Compression이란

내가 운영중인 웹서비스의  응답속도를 빠르게 하는 방법이 무엇이 있을까요?

웹서버와 WAS를 함께사용해서 웹서버의 설정으로 향상시키는 방법도 있겠지만, 오늘은 Javascript의 compression 미들웨어를 통해 향상시키는 방법에 대하여 같이 학습하고 이번 토이프로젝트에 적용시켜 보겠습니다.

compression은 gzip압축을 이용해 응답속도를 향상시켜주는 미들웨어입니다. 

(앞으로 설명드릴 내용은 아래의 블로그를 참고및 발췌하여 작성한 내용임을 알려드립니다.)

https://taetaetae.github.io/2018/04/01/apache-gzip/

⚡ gzip이란 무엇인가..?

• gzip이란 파일 압축에 쓰이는 응용 소프트웨어로 GNU zip의 줄임말이라고 합니다.
  ( 참고: https://ko.wikipedia.org/wiki/Gzip )

이를 사용하기 위해서는 브라우저에서 gzip을 지원해주어야 하는데 https://caniuse.com/#search=gzip 를들어가 확인해보면 현재 거의 대부분의 브라우저들이 gzip을 지원해 주고있습니다.

⚡ gzip의 데이터 흐름

gzip 사용전

1. 브라우저가 서버측에 /index.html을 요청한다.
2. 서버는 Request를 해석한다.
3. Response에 요청한 내용을 담아 보낸다.
4. Response를 기다렸다가 브라우저에 보여준다. (100kb)

gzip 사용후

1. 브라우저가 서버측에 /index.html을 요청한다.
2. 서버는 Request를 해석한다.
3. Response에 요청한 내용을 담아 보낸다. 여기서 해당 내용을 압축하는 과정이 추가가 된다.
4. Response header에 압축이 되어있다는 정보를 확인후 브라우저는 해당 내용을 받고(10kb), 압축을 해제한 후 사용자에게 보여준다.

결론적으로 말씀드리자면, gzip을 이용하면 서버가 사용자에게 응답하는 메시지를 압축해서 보내주기 때문에 네트워크 비용(전송되는 데이터양)을 줄일 수 있어 응답이 빨라진다는 이야기입니다.

⚡ gzip은 만능인가?(무조건 사용?)

SW개발에 있어서 무조건적인 해답은 없습니다. 가장 상황에 적합한 Best Choice만 있을뿐이지 Best solution은 없다고 생각합니다. 

물론 gzip을 이용하면 네트워크 비용이 절약이되어 응답속도가 빨라진다는 장점이 있겠지만, 반대로 클라이언트 입장에서는 받은 데이터를 다시 해독하는 과정이 필요해짐에 따라 CPU를 사용하게되어 오히려 랜더링이 늦어지는 상황이 발생할수 있습니다.

결론적으로 상황에따라 사용전과 사용후의 성능을 비교해서 사용하는것이 BEST WAY다 라고 말씀드릴수 있을것 같아요!

📌 Compression 설치 및 적용

( 이제부터 작성되는 내용은 아래의 사이트를 참고하여 진행됨을 말씀드립니다. )

https://www.tutorialspoint.com/koajs/koajs_compression.htm

위의 링크를 타고 들어가면 가장 상단설명에 이런 글귀가 보입니다.

번역 :

하지만, 위에서 설명했듯이 대부분의 브라우저가 gzip을 지원해주고 있음으로 크게 걱정하실필요는 없을것 같습니다.

( 아마.. 그렇겠죠? )

그럼 우리의 프로젝트에 설치를 진행해볼게요. 아래의 사진처럼 yarn add koa-compression을 이용해 설치해 주세요.

예시코드를 살펴보겠습니다. 예제코드는 아래의 링크를 참고하겠습니다.

https://github.com/koajs/compress

(하이라이트 부분을 볼게요.)

위의 소스에서 compress 안에 옵션들에 대해서 좀 알아보도록 할게요.

위의 사진을 보면 compress를 가져와서 사용하는것을 볼 수 있습니다. 이상하게도 아래에 zlib은 설치를 한적이 없는데 불러오고있는 모습을 볼 수 있는데 역시나 소스코드를 실행하면 없는 라이브러리라는 오류가 나옵니다.

고로 zlib가 무엇인지 알아보고 설치를 해주도록 할게요.

⚡ zlib란?

zlib 은 gzip 등으로 압축된 파일을 읽고 쓰기 위해 꼭 필요한 라이브러리입니다. MRTG 를 이용한 트래픽모니터링 홈페이지를 구축할 때에 반드시 필요하다고 하네요.

yarn add zlib 를 이용해 설치를 해줍니다.

아까전의 예제 소스를 우리 프로젝트에 추가해줄게요.

(src폴더 안에 index.js를 열어주세요.)

위와같이 소스코드를 추가해주었습니다.

이제 테스트를 진행해 볼껀데요, 지금 우리가 기존에 작성한 코드는 문자만 전송해주는 간단한 응답이다보니 이루가 threshold로 지정한 크기보다 작은 데이터가 클라이언트에게 보내집니다.

그래서 우리가 이번 프로젝트 포스팅 초반에 만들어주었던 react 폴더(front)의 index.html을 전송해주는 소스코드를 작성해 주도록 하겠습니다.

일단 외부 특정파일(html과 같은)을 연결해주기 위해서는 몇가지 모듈을 설치해 주셔야 합니다.

아래의 3가지를 설치해 주셔야 하는데요.

koa-static은 정적파일 즉 사진이나 html파일과 같은 고정된 파일들을 사용하기 위한 모듈입니다.

먼저 설치를 진행할게요.

yarn add koa-static

설치후 src/index.js 의 상단에 koa-static 과 path 모듈을 불러오겠습니다.

(path 모듈은 node에서 기본적으로 지원하는 모듈이라 별다른 설치가 필요 없답니다 ^^)

path 와 static을 이용해서 우리는 정적파일들이 모여있는 폴더에 클라이언트가 접근을 허용해주는 소스코드를 작성해 주겠습니다.

(front 작업에서 build 파일을 만들어줄겁니다.)

이렇게 설정해 줌으로서 우리는 클라이언트에게 build폴더안의 파일에 접근을 가능하게 해주었습니다.

이제 이 폴더안에 index.js 파일을 클라이언트에게 보내주는 부분을 작성할껀데요. 이렇게 파일을 전송하기 위해서는 koa-send라는 모듈을 설치해 주셔야합니다. 

yarn add koa-send

그리고 src/index.js 상단에 send를 불러와 줄게요.

그다음 이 send를 이용해 클라이언트에게 index.html을 보내주겠습니다.

이렇게 작성한 후 front 폴더에서 build 폴더를 만들어 주도록 하겠습니다.

VScode로 이전에 우리가 만든 front 폴더를 열고 콘솔창에 yarn build 를 해주겠습니다.

(자동으로 build 폴더가 만들어지는데 이 이유는 front에서 설명해 주겠습니다.)

이제 테스트를 진행해 보겠습니다.

처음으로는 compress를 사용하지 않았을때 시간입니다.

(koa에서는 미들웨어 설정 위치가 중요합니다. 제가 처음에 compress위치를 잘못 넣어줬어요 ㅜㅜ 아래 사진위치로 옴겨주시기 바랍니다.)

이번에는 compress를 사용했을때 시간입니다.

자 속도가 확연하게 줄여진게 보이시나요?

오늘은 이렇게 compress를 통해서 네트워크 전송량을 절약하는 방법을 배우고 적용해 보았습니다.

수고하셨어요!

다음에는 메모장데이터를 DB에 저장하기위한 작업을 진행해 주겠습니다.

👨‍💻 REST API-Login

지난 포스팅에서 저희는 RegisterLocal 기능을 완성시켜주었습니다. 오늘은 회원가입된 정보를 이용해서 로그인을 처리해주는 Controller method를 만들어보도록 하겠습니다.

📌 Login Controller method

Login 관련 데이터처리는 authentication과 관련되어 있으므로 auth.ctrl.js에서 작업을 해줄겁니다. 일단 해당 파일을 열어주시기 바랍니다.

아래의 사진에 하이라이트 부분을 지금부터 작업해주겠습니다.

일단, 로그인에서도 유저(=클라이언트)로부터 보내진 데이터가 있을겁니다. 로그인이니깐 email, password정도가 되겠네요.

이 보내진 email과 password는 우리가 원하는 형식인지 검증해주는 절차를 회원가입때와 마찬가지로 진행해주어야 합니다.

(다시한번 Joi를 사용해야겠네요.)

검증이 실패했을경우 클라이언트에게 오류메시지가 나타나도록 설정을 해주는 소스도 추가해 주겠습니다.

그 다음엔 검증된 정보를 가지고 이정보(email, password)가 데이터베이스에 실제로 존재하는지 검사하는 소스코드도 만들어주도록 할게요.

일단 데이터베이스에 관련한 작업임으로 try catch 블록안에서 작업을 진행할게요.

이전에 우리가 User.js에서 만들었던 email을 가지고 DB에서 특정 데이터를 추출하는 findByEmail함수를 사용하겠습니다.

위의 그림에서 86번째줄처럼 찾아서 가져온 유저의 정보가 존재하는지 아닌지에 따라 로그인을 처리해주는 일종의 조건문을 만들어주겠습니다.

(여기서 최종적으로 해당 email의 정보를 가진 유저데이터가 있는지 검증합니다.)

이부분을 잘 통과했다면, 우리가 email정보말고 받은 또다른 정보인 password가 해당 유저DB data의 정보와 일치하는지를 검증해주어야 합니다.

(여기서 Password일치여부를 검증합니다.)

이를 검증하기 위해서는 User Database에 접근해야하는데요, 그래서 User.js에 User의 password 정보와 일치하는지 검증시켜주는 함수를 새롭게 만들어주도록 하겠습니다.

그리고 이 함수를 auth.ctrl.js에서 사용해서 password검증절차까지 완성해 주도록 하겠습니다.

다시 auth.ctrl.js 파일을 열어주세요.

(email을 가지고 유저정보 검증했던 조건문처럼 password 검증도 비슷하게 소스코드를 구성해줍니다.)

여기까지 해주셨다면 유저가 보낸준정보가 DB에 존재하는지에 대한 검증하는 절차는 완료가 되었습니다.

하지만 여기까지만 한다면 로그인이 지속적으로 유지가 되어지지 않을겁니다.

회원가입에서와 마찬가지로 Web Token을 이용해서 로그인을 유지시켜주어야 하는데요, 그 절차를 지금 만들어주도록 하겠습니다.

이렇게 작성해주면 로그인정보를 담은 데이터(Token)이 담긴 세션이 만들어집니다.

(클라이언트에서는 이를 이용해 로그인을 유지시켜주면 됩니다.)

위 사진에서 아래에 catch 블록 위의 내용은 추후 리액트에서 사용하기위해 보내주는 정보임으로 아직 작성을 안해도 무관하나 응답메시지를 따로 지정을 해줘야 함으로 따라서 작성해주셔도 무관합니다.

(아래 사진을 참고해주세요.)

여기서 끝나는것이 아니라 우리가 만든 loginLocal method를 우리의 특정 URI에 연결을 해줘야합니다.

이를 위해서 auth/inde.js 파일로 이동을 하겠습니다.

위에 하이라이트한 부분이 우리가 미리 만들어두었던 Login을 위한 URI입니다.

뒤에 있는 Arrow function이 방금 우리가 만들었던 loginLocal 함수가 들어갈 자리입니다.

바로 위에 있는 회원가입 URI코드처럼 수정을 해주도록 하겠습니다.

이렇게 해주면 해당경로로 로그인을 시도하는것이 가능해집니다.

한번 서버를 켜고 PostMan을 이용해 테스트를 진행해 보도록 하겠습니다.

(테스트시 사용하는 데이터는 아래와같이 회원가입때 사용한 정보를 활용하도록 하겠습니다.)

아래의 사진처럼 PostMan 하단에서 그결과로 Cookie 안에 accsee_token이 생성된것을 확인이 가능합니다.

이 정보가 올바르게 만들어졌는지 https://jwt.io/ 사이트로 이동해서 검사를 해보도록 하겠습니다.

오늘 포스팅은 여기까지입니다. 저희는 REST API기반 회원가입과 로그인 기능을 구현해주었습니다.

조금 기나긴 내용이었는데요, 다음 포스팅에서는 한템포 쉬어가는 시간으로 저희가 만드는 서비스의 속도나 효율적인 측면을 상승시켜줄 미들웨어 몇개를 설정해 주도록 하겠습니다.

다음 포스팅에서 뵐게요~!😉

👨‍💻 Session&Token (2)

지난 포스팅에서 저희는 Json Web Token 이라는 모듈을 이용해서 토큰을 만들고 해석하는 함수를 만들었습니다. 오늘은 이 함수들을 회원가입 절차에서 사용을 해보도록 하겠습니다.

📌 Register fuction & Web Token

우리가 여기서 원하는것은 회원가입이 이루어졌을때 해당유저에게 token을 만들어주는 것인데요. 우리가 사전에 만들었던 token을 만들어주는 generateToken 함수를 사용해 auth.ctrl.js에서 구현을 해줄수도 있지만, 유저에대한 token은 다른 함수에서도 자주 사용이될 여지가 있기 때문에 따로 User.js 모델파일에서 methods함수를 이용해 만들어주도록 하겠습니다.

그럼 db폴더안에 User.js 파일을 열어주세요.

그리고 상단에 제일먼저 우리가 사용할 lib폴더안에 token파일과 토큰을 생성할때(토큰을 해쉬화할때) 사용할 문자열을 .env에서 가져오겠습니다.

그리고 맨 하단에 특정 유저정보(payload)를 담은 토큰을 만들어주는 함수를 만들어줄겁니다.

우리가 예전 포스팅에서 DB안에 정보를 처리할때(특정 이메일의 유저 찾기등..) statics를 사용했었는데요.

이때 statics는 DB자체에대한 처리를 할때 사용한다면 method는 특정 유저데이터에대한 처리를 할때 사용합니다.

그래서 이번에는 method를 이용해서 아래와같이 소스코드를 추가해줄게요.

(우리가 이전에 만들었던 token.js의 generateToken함수를 이용해서 'user'라는 subject를 가진 토큰을 만들어줍니다.)

이제 우리는 auth.ctrl.js에서 특정 User객체의 generateToken함수를 이용해서 쉽게 토큰을 만들수 있습니다.

자 그럼 auth.ctrl.js을 수정해보겠습니다. 파일을 열어줍니다.

그리고 우리가 이전에 만들었던 localRegister 함수를 다시 확인할게요.

우리는 아래의 사진처럼 클라이언트로부터 데이터를 받아 우리가 원하는 형식대로 잘 왔는지 Joi라는 모듈로 확인했습니다. 만약 잘못들어왔다면 Error를 발생시켰습니다.

만약 잘 들어왔다면, 클라이언트가 보내준 데이터를 DB에 저장하기위해서 Try Catch구문을 사용해 그 안에서 작업을 해주었습니다.

여기까지하면 우리가 원하던대로 새로운 유저의정보가 DB에 저장되는 소스코드가 완성되었습니다.

약간 아쉬웠던점이 회원가입과 동시에 로그인이 안되어지는 것이었는데요, 오늘 그부분을 방금 User.js에서 만든 generateToken을 이용해 처리를 해주겠습니다.

위의 사진에서 47번째줄 아래에 토큰을 생성해주는 함수를 넣어주겠습니다. 아래의

사진을 따라 작업해주세요.

(하이라이트한 소스코드를 참고해주세요.)

이전에 DB에 저장을 하면서 만들어졌던 user객체에 우리가 새로만든 generateToken을 이용합니다. 이때 우리가 따로 어떠한 파라미터값을 넘겨주지 않아도 user객체안에있는 display, email 등의 정보를 이용해서 그 정보를 payload로 이용해 token을 알아서 생성이 됩니다.

그리고 이정보를 쿠키에 담아서 다시 요청했던 클라이언트에게 보내줍니다.

이때 쿠키의 활성시간은 7일로 설정해주는데 여기에 입력하는 단위는 ms단위 계산임으로 아래 사진과같이 입력해줍니다.

이렇게까지 해주셨다면 회원가입과 동시에 세션이 생성되고 그 안에 토큰이 만들어집니다.

서버를 실행시켜 확인해 보겠습니다.

postman을 이용해 아래의 데이터로 테스트를 진행해 보겠습니다.

테스트가 정상적으로 이루어졌다면, postman 하단에 cookie안에 우리가 생성한 token이 존재하는것을 볼 수 있습니다.

그리고 이 token안의 정보를 복사하여서 https://jwt.io/ 사이트로 들어가 제대로 작성이 되었는지 확인해 보겠습니다.

이렇게 좌측에 복사한것을 붙여넣기 해주면 우측에 HEADER, PAYLOAD, SIGNATURE 영역별 정보가 나오게 됩니다.

즉 PAYLOAD보면 우리가 token을 만들때 넣었던 정보들을 확인이 가능해집니다.

오늘은 회원가입이 이루어졌을때 로그인이 유지되기위해 token을 유저에게 발급해주는 기능까지 구현해 주었습니다.

다음은 auth.ctrl.js 안에 loginLocal 기능을 구현해 주도록 하겠습니다.