❗❗ ) 본 포스팅 내용은 면접에서 받은 질문을 통해 스스로에게 부족한 점들을 찾고, 그를 보완해 나아가기 위하여 작성하였습니다. 이 글을 통해서 저와같이 면접을 준비하시는 뉴비 개발자들께도 도움이 되었으면 합니다. 

✅ 하계 채용 연계 국가근로 인턴쉽

반갑습니다. 개발자를 꿈꾸는 김고릴라입니다. 오늘은 제가 정보처리기사 시험과 함께 준비했었던 기업의 면접을 다녀왔습니다. 너무 긴장을 했었는지 끝나자마자 힘이 쫙 빠져서 아무것도 할 수 없겠더라구요...😂. 그래서 오늘은 제가 어떻게 인턴을 하게되었고, 어떤 프로세스로 진행이 되는지에 대하여 이야기를 해보려고 합니다.

🌈 목차

• 인턴을 준비하다.
• 채용절차와 특이점.
• 실무진 면접.

📘 인턴을 준비하다.

저는 최대한 학교와 연계되어있는 인턴쉽을 활용을 하려고 노력하는 편이랍니다. 제가 소속되어있는 학교에서는 이러한 학교연계인턴을 "현장실습"이라고 부르고, 이러한 일들을 처리하는 부서가 따로 존재하고 있습니다. (가이드가 담긴 책도 있어요) 저는 ICT 학점연계 인턴쉽만 알고있었는데, 우연히 "하계 채용 연계 국가근로 인턴쉽"과 관련한 포스터를 보게 되면서 지원하게 되었답니다.(개이득!)

대학교 4년다니면서 처음봤을리가 없을것이다... 생각하고 작년에도 시행했었나 찾아보니깐 매해 꾸준히 시행하던 인턴쉽이더군요 ㅋㅋㅋㅋ 만약 이글을 보신 분들께서는 한번 학교 공지사항등을 잘 찾아보시기 바랍니다!! (저처럼 되지 마세요..!)

📘 채용절차와 특이점.

이 인턴쉽의 프로세스는 아래 사진과 같습니다.

어떻게 보면 일반 인턴쉽과 비슷하다고 생각할 수도 있는데 조금 특이한 사항들이 있어서 그 이야기를 지금부터 해볼까 합니다.

일단, 새롭게 알게된 이 인턴쉽 프로그램에서는 이 행사에 참여하는 기업들의 리스트가 담긴 엑셀 파일을 하나 제공해줍니다. 그리고 지원을 하기 위해서는 일반 인턴쉽과 마찬가지로 자소서를 제출해야 했죠. 여기서 특이하다고 생각했던것이 2가지가 있었는데요. 아래 정리를 통해 설명드리겠습니다.

(지금부터 작성될 내용은 저의 모교대학에만 국한된 이야기일수도 있으니 글을 잘 확인하신 후에 학교에 연락을 취하셔서 잘 확인해 보시길 바랍니다. )

1. 기업목록중 단 한회사의 한부서에만 지원이 가능하다.
2. 서류평가는 학교에서 진행한다..(?)

일단 첫번째부터 설명드릴게요. 일단 기업목록이 담긴 엑셀표를 받으면 IT 회사 그리고 IT관련 부서만 있는것이 아니라 정말 다양한 직종의 회사 및 부서들이 있습니다. 각 회사마다 원하는 인재조건들이 제시되어있고 복지 및 채용후 혜택에 대한 정보또한 명시되어있습니다. 그래서 이 인턴쉽에 지원하는 학생분들께서는 잘 살펴보시고 자신과 잘 맞는 기업의 부서를 선택해 지원하면 되는데요. 그런데 여기서 원하는 기업이 여러개가 있더라도 무조건 단 한 기업의 한 부서만 신청이 가능하다는 제약 조건이 있었습니다.

기회가 단 한번뿐이기 때문에 높은 회사를 지원하는것도 좋겠지만 적절히 합격여부와 잘 타협하여 기업을 선택하시길 추천드립니다.

(사실 저같은 경우에는 이런거 안따지고 가고싶은 회사를 지원했습니다 ;D )

두번째는 서류평가 관련인데요. 기업 복수지원과 관련하여 문의하고자 학교측에 연락을 취했었는데 이때 상담사(?) 담당자(?) 분께서 재미있는 이야기를 해주셨습니다. 그건 바로 서류를 학교측에서 평가를 한다는 이야기였습니다. 학교측에서는 지원된 자소서를 평가한 뒤에 합격여부를 정하고 합격된 자소서는 해당하는 기업에 발송하는 형식으로 진행이 된다고 이야기를 주셨습니다. 일반적인 인턴쉽이랑은 조금 다르구나 생각했었는데, 이후에 이런 말씀도 같이 주셨습니다. "물론 서류평가를 학교에서 하나 원하는 기업에 한에서는 자체적으로 2차 서류평가를 할수도 있고 코딩테스트와 같은 테스트도 볼 수 있습니다." 이말을 듣고 결국 기업에서 서류평가를 하기 때문에 대충 썻다가는 칼같이 떨어질수도 있겠구나 생각하고 정말 열심히 자소서를 썼던 기억이 납니다... 물론 여담이지만, 다른 기업에 지원서를 넣었던 선배는 2차 서류평가가 없었다고 해요! (심지어 면접도 안봤다는..? 응..?)  하지만 저의 경우에는 2차 서류평가도 꼼꼼히 이루어졌었구요, 면접또한 실무진 두분과 함께 했습니다.

일단 자소서를 제출과 마감기한이 끝나고 나서 한 1주일(?) 정도 기다리니깐 학교측으로부터 서류평가(저한테는 1차서류)가 합격 되었다는 문자를 받을 수 있었습니다. 그렇게 저의 자소서는 제가 원하던 기업 인사담당자분께 전달이 되었고 그렇게 1주일 조금 안되게 기다리니깐 2차서류평가에 합격했다는 메일을 받을 수 있었습니다. 그 후에는 기업측에서 피면접자를 배려하여 면접 날짜와 시간을 조율해 주셨고 정해진 날짜인 오늘..! 2020. 06. 12에 면접이 이루어졌습니다.

📘 고릴라.. 첫 면접을 보다.

이번 인턴준비와 면접은 저에게 아주 뜻깊은 시간인데요. 뭐 딱히 거창한 이유는 없지만, 흐흐흐 제가 처음 해보는 일들이기 때문입니다😉. 일단 저의 면접은 실무진 면접이 진행된다고 메일로 말씀을 주셨습니다. 처음 이 메일을 받았을때 정말 멘.붕. 이었어요.

"실무진 면접이면 전문가들이 면접을 진행하겠지? 그러면 엄청 기초적인 질문부터 어려운 질문까지 할꺼같고... 면접까지는 대략 1주일정도 남았으니깐... 허허허... 뭐부터 해야하나...😂😂😂"

ㅁㄴㅇㄻㄴㅇㄹ 안그래도 캡스톤, 정보처리기사, 졸업준비 등 바빠죽겠는데 이 와중에 면접준비를 해야만 했습니다. 그래도 뭔가 저의 목표 그리고 이상향과 잘 부합되는 기업이었어서 놓치고 싶지 않은 마음이 더 컸던거 같습니다. 그래서 시간을 더 투자해서 밤낮으로 기초나 면접공부를 했던것 같습니다. 그래도 다행이었던건 해당 기업에 관심이 많았던 탓에 자주 검색하면서 찾아봤던 것들이 기업분석하는 시간을 대폭 줄여주었습니다.

암튼! 결전의 면접날(=오늘)이 왔고, 오후 2시에 면접이 진행되었습니다. 사실 한시간이나 일찍가서 회사 구경도 좀.. 하고 싶고 그랬는데, 제가 도착한 시간이 점심시간이라 그랬는지 직원분들이 로비에 너무 많았습니다. 원래 이런 성격이 아닌데ㅋㅋㅋ 다들 쳐다보는 눈빛에 기가 죽었는지 ㅋㅋ 조용히 앉아서 공부를 했네요 ㅋㅋㅋㅋ.

그렇게 2시가 되니깐 인사팀원(?) 분께서 저를 면접이 진행될 소회의실로 안내를 해주셨고, 본격적인 면접이 시작되었습니다. 저는 실무진 면접이 진행이 된다 사전에 이야기를 해주었기 때문에 O개발팀에 팀장님과 ㅁ팀의 개발자 분께서 면접을 진행해 주었습니다. 

처음 보는 면접이라 면접관님들 들어오자마자 자리에서 벌떡 일어나서 90도 인사를 했네요 허허.

이제 제 궁상맞은 이야기는 잠시 멈추고, 가장 궁금해 하실 면접질문에 대해서 말씀을 드릴게요!

제가 우려했던것과는 다르게 실무진 면접동안 어려운 기술질문은 2개? 정도 들어왔던것 같아요. 대부분 자소서 기반에 있는 내용을 질문을 해주셨구요. 기술질문은 자소서 안에 작성했던 프로젝트나 개발관련 이야기를 보시고 그와 관련된 기술질문을 주셨어요. 다행히 자소서를 부풀려서 적었다거나 거짓된? 스토리를 담지 않아서 제가 경험했던 이야기를 있는 그대로 말씀을 드렸답니다. 대신에... 테스트.. 프로그램 Validation&Verification 절차를 진행해본 경험.... 등에 대해서 질문을 주셨고 그와 관련된 2가지 질문을 더 주셨습니다. 뭐랄까 이론으론 잘 알고있는데, 실제로는 등한시했던 부분인데, 약점을 정확히 공략당한 기분이었습니다 ㅋㅋㅋㅋ 부끄럽네요... 네.. 공부하겠습니다.

면접진행은 최대 1시간 30분동안 진행된다고 했던것에 비해 정확히 56분만에 끝이 났습니다. 뭐랄까 1시간을 못채워서 아쉬운 느낌이었던것 같아요. 뿐만 아니라 원래 긴장하고 떠는 성격이 아닌데 면접때는 엄청나게 긴장이 되었던것 같습니다. 그래도 멘탈 휘어잡고 차분하게 답변을 이어나갔던것 같아요.  추가로 이 기억이 진실이 아니었음 하지만 ㅋㅋㅋ 제가 몇몇 답변을 너무길게 했던것 같은 기억이 있어요. 이글을 보시는 분들께서는 저와같은 실수를 하지 않기를 바라겠습니다.

아직 결과는 나오지 않았구요, 그거는.. 저도 궁금하네요🤔

여기까지 이번 인턴을 준비하면서 느낀점과 그 절차에 대한 후기였구요. 다음 포스팅에서는 합격했어요! 라는 주제로 다시 만나길 기대합니다.ㅋㅋㅋ

궁금한신점은 댓글로 남겨주시구요. 여기까지 개발자를 꿈꾸는 김고릴라였습니다. 긴글 읽어주셔서 감사합니다~!🐵 

✅ 정보처리기사 후기 및 웹 기초공부 시작

🔥 금주의 목표

• 캡스톤 프로젝트 준비하기
• 면접준비하기
• HTML, CSS 기초다지기

오늘은 TIL이 아닌 후기 글로 찾아왔습니다.

📘 정보처리기사 후기

이틀전에 드디어! 정보처리기사 필기시험을 무사히 치루고 왔습니다!🐵🐵 시험이 밀리고 밀린지라 빠르게 시험신청을 했음에도 불구하고 제가 거주하고 있는 지역에서 시험을 보지 못했어요.. 그래도 커피 두잔을 부랴부랴 챙겨들고 아버지의 도움을 받아 시험을 보러 다녀왔습니다 :D  

일단 시험을 처음 받아서 검토를 할때 스윽~(느낌아시죠?)보니깐 개정후 1회차 시험이라 그런건지 어려운 문제를 쉽게 발견하지는 못했습니다. 그리고 시험이 시작하고 문제를 막 후다닥 풀기 시작하는데 시험시간이 2시간30분인거에 비해 저는 1시간만에 모두 풀 수 있었습니다. 제가 체감한 난이도는 상중하에서 중하~하 정도 였고, 이건 전공자분이신지 비전공자분이신지에 따라서 다를순 있을것 같았습니다. 과거 정보처리 기능사를 땄을때와 비교를 해보자면 일단 과목들 자체가 일반 컴퓨터공학 전공의 모든 커리큘럼이 담겨져 있다 봐도 될정도로 범위가 넓어졌고, 실무적인 관점에서도 이전보단(?) 도움이 되는 내용들로 채워져 있었습니다. 만약 비전공자분이시라면 2020년도 이전에 시험을 준비할때 필요했던 시간보단 더 많은 시간을 투자해야 할꺼같습니다. 

저는 2020시나공 정보처리기사 필기책을 가지고 공부를 진행했는데요, 공부할때는 꽤나 내용을 탄탄하게 담아놓은 책인지라 외워야할 내용이 많았습니다. 공부방식은 매일 100Page씩 학습하고 책을 3회차까지 반복해서 보고 시험을 치뤘습니다. 총... 21일? 정도 준비했던것 같습니다. 일단, 이게 제가 가능했던 이유는요... 저는 컴퓨터를 전공했기 때문에 조금 복잡하거나 어려운 내용이 나와도 이미 한번 학습한걸 복습하는 느낌으로 이해하고 넘어갈 수 있었기에 가능했습니다. 만약 [소프트웨어공학, 네트워크, 운영체제, 절차언어, 객체언어, 데이터베이스] 이들을 배워본적이 없거나 처음 보신 분들은 저보다는? 더 시간을 투자하셔야 할듯 싶습니다.

이제 이번 시험문제에 대해서 이야기를 진행해 보겠습니다. 제가 비교적 쉬운 난이도라고 말씀을 드렸었습니다. 그런데,, 쉬웠지만 문제는 과목1(소프트웨어설계)에서 발생했습니다. 다른 과목들은 거의 책에 있는 내용을 기반으로 나왔기 때문에 별다른 문제없이 술술 풀렸지만, "소프트웨어 설계"과목에서 책에서 보지 못했던 내용들이 조금 있었습니다. 물론 다른 과목에서도 "뱅커스알고리즘"과 같이 책에서 다루지 않은 내용이 있었습니다.(과거의 전공공부 지식을 꺼내느라 힘들었습니다...) 그래도 큰 걱정을 하지 않으셔두 될꺼같은게 공부를 성실히 하셨다면 앞서서 말씀드린 문제들은 소수에 불과하기 때문에 합격에는 큰 영향을 미치진 않을꺼 같습니다. 또, 전공자분이시라면 저처럼 뇌를 짜내어서 과거의 기억을 더듬다 보면 적절히 대처해서 풀 수 있으리라 생각이 드네요.

이제 정보처리기사 취득에 반을 왔는데요, 앞으로도 실기를 열심히 준비해서 다음에는 자격증 취득 후기로 돌아오겠습니다 ; )

📘 HTML 강의수강시작!

오늘부터 "닥코"님의 HTML 수업이 시작되었습니다. 클래스톡이라는 서비스에서 진행이 되었는데 지금부터 기타 온라인 강의에 비해 좋았던 점들을 말씀드리도록 하겠습니다.

첫번째로, 수강이 시작이 되어지면 학습을 함께하는 그룹을 만들어 줍니다. 그룹안에서 내가 공부를 얼만큼 했는지도 확인이 가능하고, 더 나아가 그룹원들과 소통할 수 있는 공간이 마련이 되어있어서 다른 강의 사이트에 비해 의욕이 더 솟는것 같아요.

두번째로, 강의마다 미션이 존재합니다. 이건 타 강의사이트에도 종종 볼 수 있는 시스템인데요. 당근과 채찍에서 당근이랄까요? 열심히 강의를 듣고 미션을 클리어하고 추가로 그룹원들과 소통을 많이 할수록 포인트를 많이 쌓을 수 있습니다. 여기서 이 포인트에 따라서 추후 환급해주는 시스템이 갖추어져 있어요.

세번째로, 기초에만 다루는 강의 내용이 아니라 조금 더 실무관점에서 내용까지 같이 다뤄주는 "닥코"님!이 계십니다. 아직은 강의를 많이 듣지 않아서 더 정확한 리뷰는 나중에 따로 진행하도록 할게요!

✅ 제목

🔥 금주의 목표

• 정보처리기사 정리집 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일동안더 더 분발해서 정보처리기사 필기 합격까지 아자아자!

👨‍💻 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 기능을 구현해 주도록 하겠습니다.

👨‍💻 Session&Token (1)

지난 포스팅에 저희는 실제로 DB에 데이터들이 저장되는것까지 구현을 완료했습니다.

이제 회원가입시 회원정보가 유지되도록 하는 기능을 구현해 보도록 할껀데요, 이를 위한 토큰을 생성하는 작업을 먼저 이번 포스팅에서 다뤄보도록 하겠습니다. 

📌 Web token

보안 및 인증을 위해 사용하는 일종의 열쇠같은 문자열덩어리 입니다.

주로 의미가 없는 문자열(랜덤한 문자열) 기반으로 구성되어있고 특정한 정보를 암호화해서 문자열화시켜 사용자에게 발급하는 방식입니다.

그리고 사용자는 인증을 위해서 서버에 해당 토큰을 들고와 반납하고 이것을 우리가 읽어서 인증된 유저인지 식별하는것입니다.

우리는 웹토큰중에서도 클래임(Claim)기반 토큰을 사용하겠습니다.

Claim한 토큰이란 일반적인 토큰에는 단순한 문자열덩어리기 때문에 특정한 정보를 담기가 어렵다는 단점이 있습니다.

하지만, 우리가 사용할 Claim기반 토큰은 정보를 담을 수 있는데 이때 Claim은 사용자  정보나 데이터 속성등을 의미합니다. 

직접 구현해서 사용하기에는 저의 내공이 부족함으로 이미 잘 만들어져있는 모듈을 가져다가 사용하도록 할텐데요, 우리가 사용할 모듈은 바로 Json Web Token 입니다.

그럼 우리의 프로젝트에 install 해보도록할게요.

( yarn add jsonwebtoken )

/* Json Web Token에 대한 구체적인 설명은 존경하는 velopert님의 글을 발췌해왔습니다. */

(https://velopert.com/2389)

Json Web Token은 총 3가지의 정보를 가지고 있습니다.

1. Header (헤더)

2. Payload (내용)

3. Signature (서명)

Header는 두가지의 정보를 가지고 있습니다.

• type : 토큰의 타입을 지정합니다.

• alg : 해싱 알고리즘을 지정합니다.

Payload는 토큰에 담을 내용들이 포함되어 있습니다. 여기에 담는 정보의 한 조각을 클레임(Claim)이라고 부르고, 이는 name/value 한쌍을 가지고 있습니다. 그리고 복수개의 클레임을 토큰에 담는것도 가능합니다.

그리고 이 클레임의 종류는 총 3가지가 있으며 각각 아래와같이 구분되어 집니다.

• (등록된) registered claim
• (공개)    public claim
• (비공개) private claim

이중에 registered claim은 서비스에 필요한 정보들이 아닌, 토큰에 대한 정보들을 담기위하여 이름이 이미 정해진 클레임들입니다.

이 클레임에 포함된 클레임들의 이름들은 아래와 같이 있습니다.

Public claim은 충돌이 방지된 이름을 가지고 있어야 합니다. 충돌을 방지하기 위해서는, 클레임 이름을 URI형식으로 짓습니다.

{
    "https://localhost.com/4000/jwt_claims/is_admin": true
}

Private claim은 등록된 클래임도 공개 클래임도 아니고 양측(서버와 클라이언트)간에 협의하에 사용하는 클레임 이름입니다.

Example ( velopert 블로그 예시내용 발췌 )

{
    "iss": "gorillaKim.com",
    "exp": "1485270000000",
    "https://gorillaKim.com/jwt_claims/is_admin": true,
    "userId": "11028373727107",
    "username": "gorillaKim"
}

Signature는 헤더의 인코딩값과, 정보의 인코딩값을 합친후 주어진 비밀키로 해쉬하여 생성합니다.

위의 내용을 토대로 우리가 사용할 토큰 생성함수와 그 토큰을 해독시켜주는 함수를 만들어 보도록 하겠습니다.

token.js 파일을 만들껀데 이렇게 보조로 도와주는 파일들을 src 폴더안에 lib라는 폴더를 만들어서 따로 관리하도록 하겠습니다.

다음의 그림처럼 폴더와 파일을 구성해주세요.

그리고 token.js에 두개의 함수를 마저 작성해보도록 할게요.

처음으로 토큰 생성함수입니다.

• payload는 외부에서 생성하여 받아 jsonwebtoken으로 넘겨줍니다. 
• 그리고 secret은 우리가 만들 토큰을 해쉬화 하기위해 사용하는 salt라 불리는 일종의 문자열입니다.

여기서 secret값은 보안상의 이유로 소스코드상에서 감춰주는것이 좋음으로 .env 파일에 만들어서 불러와 사용해줍니다.

그리고 토큰을 생성했으니 이 토큰을 해독해주는 decode함수도 만들어주겠습니다.

그리고 마지막으로 두 함수를 외부로 보내주는 export작업도 해주겠습니다.

여기까지 오늘은 토큰을 읽고해석하는 함수를 만들어 보았습니다. 다음 포스팅에서는 이 토큰함수들을 활용해서 회원가입 절차 성공시 토큰을 발급하는 부분을 완성시켜주도록 하겠습니다.

👨‍💻 REST API (3)

📌 LocalRegister Controller(3)

지난 포스팅에서는 클라이언트로부터 받은 데이터가 알맞은 형식인지 Validate(확인)하고 그 뒤에 특정 데이터 처리가 가능하도록 셋팅해주었습니다.

오늘은 우리가 받은 데이터를 가지고 DB(MongoDB)에 저장을 해주도록 해볼게요!

(드디어.. 모델을 사용해보는군요)

데이터베이스와 관련된 작업을 할때는 그에대한 오류처리를 해주는것이 중요합니다. 그렇기 때문에 저희는 try catch 블록 안에서 작업을 해주도록 할꺼에요.

우리가 try 블록에서 제일먼저 해주고 싶은것은 유저가 보낸 displayName과 email이 이미 존재하는 정보인지 확인하는것입니다.

이러한 DB에 직접 접근해서 하는 작업들은 auth.ctrl.js에서도 작업이 가능하지만, 가능한 model 파일 즉 User.js에서 처리해주는것이 좋습니다.

그런이유로 User.js를 열어 3가지의 함수를 만들어 내보내줄꺼에요.

나중에 ID/PW를 찾기위한 두개의 메서드와 DisplayName 과 Email을 동시에 검증을 해주는 메서드 하나를 만들겠습니다.

(Model에서는 statics라는 메서드를 통해 사용자 지정함수를 만들 수 있습니다.)

만들었으니 사용해봐야겠죠? findExistancy 함수를 우리가 만든 auth.ctrl.js의 try 블록에서 사용해 볼게요.

이렇게 해주면 중복검사가 잘 작동하게 됩니다.

중복검사까지 했으니 실질적으로 DB에 저장을 해주어야겠죠?

이번에는 DB에 저장을 해주는 메서드를 User.js에 작성해 주겠습니다.

만들었으니 이 함수도 auth.ctrl.js에서 사용해 보도록 하겠습니다.

이렇게 해주면 DB에 회원등록과 동시에 이에 대한 정보를 응답으로 보내주게 되어집니다. 한번 잘 작동하는지 포스트맨으로 확인을 해볼게요.

아래 사진 데이터로 전송을하니 사진 하단의 결과물이 반환된것을 확인이 가능합니다.

이번에는 DB에도 잘 작성되었는지 확인해 볼껀데요, 이를 확인하기위해 MongoDB 설치시 같이 받은 Compass라는 도구를 사용해 보겠습니다.

Compass를 열면 다음과 같은 화면이 나오는데요, 저는 여러 플젝을통해 여러DB가 생성되었지만 처음 사용하시는 분은 memo만 있을꺼에요.

이 memo를 클릭해주면, 다음처럼 users 테이블이 보일겁니다.

users테이블을 클릭하면 우리가 방금 생성한 User 정보가 있습니다.

아주 잘 생성된걸 보실 수 있습니다. 조금 아쉬운점은 비밀번호가 암호화 되어서 저장이 이루어지지 않았다는 것인데요, 이는 나중에 시간적 여유가 될때 처리해 주도록 하겠습니다.

일단 이번포스팅은 여기까지 입니다. 다음 포스팅에서는 회원가입이 이루어졌으니 자동으로 세션을 만들어 로그인이 이루어지고 그 로그인이 유지될 수 있도록 처리해 주도록 하겠습니다.

그럼 다음 포스팅에서 뵈요 ^^