[로드 투 정글] 3. 온라인 인터뷰
·
크래프톤 정글/로드 투 정글(입학시험)
정글로 향하는 마지막 한 관문, 온라인 인터뷰입학 시험 합격 메일을 받고 나면, 인터뷰 일자를 선착순으로 신청하게 되는데요. 본인이 가능한 날짜와 시간을 정해서 신청을 완료하면 됩니다. 복장은 따로 정해져 있지는 않지만 단정한 복장을 입으면 되고, 저 같은 경우에는 니트와 슬랙스를 입었습니다. 하체 같은 경우 화면에 나오지는 않지만, 개인적으로 옷을 전부 갖춰 입는 게 면접에 임하는 마음가짐에 있어서 도움이 될 거라 생각해서 다 갖춰 입었습니다. 그리고 면접 환경 세팅도 면접을 들어가기 전 필수적으로 맞춰줘야 하는데요. 저는 노트북과 무선이어폰을 사용했고 노트북 화상카메라 렌즈와 눈높이를 맞추기 위해 노트북 아래에 두꺼운 책을 몇 권 올렸습니다. 눈높이를 맞춰놔야 렌즈를 바라볼 때 면접관 분들 입장에서 ..
[로드 투 정글] 2. 입학 시험(6) - 배포(AWS EC2)
·
크래프톤 정글/로드 투 정글(입학시험)
내 웹 서비스를 누구나 이용할 수 있게, AWS EC2드디어 대망의 입학 시험 마지막 본 포스트를 쓰게 되었는데요. 여기까지 오셨다면 분명 훌륭한 웹 서비스를 만들어낼 수 있는 사람이 된 상태이실 거라 믿어 의심치 않습니다. 다만 이제까지 만든 웹 서비스는 localhost, 즉 로컬 서버인 내 컴퓨터에서만 접속할 수 있습니다. 다른 사람들은 우리가 만든 웹 서비스를 이용할 수 없죠. 그렇기 때문에 배포를 통해 다른 사람들이 우리가 만든 웹 서비스를 이용할 수 있게 만들어야 합니다. 물론 내 컴퓨터에서 배포를 해서 다른 사람들이 이용할 수 있게 할 수도 있습니다. 이를 집 호스팅이라고 하는데요. 다만 서버가 켜져 있는 상태에서만 웹 서비스가 작동하기 때문에 컴퓨터를 계속 켜 놔야 합니다. 어머니에게 등짝..
[로드 투 정글] 2. 입학 시험(5) - DB(MongoDB)
·
크래프톤 정글/로드 투 정글(입학시험)
사용자 정보를 저장하는 MongoDBMongoDB같은 DataBase(이하 DB)의 경우 웹 서비스가 작동하는 전체적인 큰 그림을 식당으로 비유할 때 포스기 역할을 한다고 설명해 드린 적이 있는데요. 사용자의 요청을 처리하면서 사용자의 정보를 저장해 놓아야 할 경우 사용되는 데이터 저장소가 바로 DB입니다. 블로그 글 작성 요청을 처리하려면 사용자의 글을 어딘가에 저장해 놓아야겠죠? 그러한 데이터들을 DB에 저장해 놓게 됩니다. 이때 DB를 사용하기 위해서는 먼저 데이터를 관리하는 DB 프로그램을 설치해야 합니다. 이 DB 프로그램 중 하나가 MongoDB인데요. MongoDB를 설치한 뒤 환경설정을 완료하고 나면 DB를 사용할 준비가 완료됩니다. 그리고 Python에서 MongoDB와 연결할 수 있게 ..
[로드 투 정글] 2. 입학 시험(4) - 서버(Flask)
·
크래프톤 정글/로드 투 정글(입학시험)
사용자의 요청을 처리해주는 Flask처음 전체적인 큰 그림에서 서버를 소개할 때 식당 직원이라고 말씀드린 적이 있는데요. 사용자의 요청에 따라 전담 직원이 이를 응대해줍니다. 만약 손님이 '이 메뉴 주세요!' 하면 A직원이 포스기에 주문 등록을 하고 요리를 만들어서 손님에게 갖다 줍니다. 또 손님이 '계산해주세요!' 하면 B직원이 포스기에 등록된 주문에 따라 손님에게 돈을 받습니다. 서버를 구축하는 것은 위의 전담 직원을 배치하는 것과 똑같습니다. 각 직원이 어떤 요청을 받았을 때 어떻게 처리를 할 지를 미리 정해 놓는 것이죠. 그리고 Flask는 바로 이러한 서버를 쉽게 구축할 수 있게 도와주는 웹 프레임워크입니다. 프레임워크는 '어떤 목적을 달성하기 위한 복잡한 문제를 해결하기 위한 구조적인 틀'인데..
[참고자료] 자주 쓰이는 JQuery 함수(+동적 이벤트 할당)
·
크래프톤 정글/로드 투 정글(입학시험)
자주 쓰이는 JQuery 함수Value 값 조회 / 변경 (val)Value 값 조회 : 해당 요소의 value를 가져온다$("요소").val();Value 값 변경 : 해당 요소의 value를 변경한다$("요소").val(변경할 값); 텍스트 값 조회 / 변경 (text. 해당 태그 내부의 순수 문자열)해당 태그 내부의 순수 문자열만을 가져온다는 것은 무슨 의미일까요? 안녕하세요라는 태그를 text로 조회하면 안녕하세요만을 가져오게 되는데요. 태그 내부의 HTML 태그는 무시하고 순수하게 텍스트만을 처리합니다. 마찬가지로 텍스트 값을 변경할 때에도 동일하게 처리되는데요. 텍스트 값을 안녕하세요으로 변경하게 되면, 굵은 글자를 가진 안녕하세요로 변경되는 게 아니라 안녕하세요이라는 문자열 자체로 변경됩니..
[로드 투 정글] 2. 입학 시험(3) - 프론트엔드(JQuery, AJAX)
·
크래프톤 정글/로드 투 정글(입학시험)
자바스크립트를 훨씬 더 편하게, JQueryJQuery는 자바스크립트를 훨씬 더 편하게 쓸 수 있게 만들어주는 라이브러리인데요. JQuery는 뭔가 새로운 기능을 제공해 준다기보다는 기존의 기능을 개선해 준다는 관점에서 보면 편할 것 같습니다. 하나 예를 들어 볼까요? 어떤 아이디를 가진 요소를 선택해야 할 때 기존 자바스크립트에서는 document.getElementById('아이디')를 이용해 가져올 수 있는데요. JQuery에서는 $('#아이디')를 통해 간단하게 가져올 수 있습니다. 그리고 해당 요소의 텍스트나 값, 스타일을 편리하게 변경할 수도 있고, 이벤트 처리도 보다 쉽게 할 수 있습니다. 그리고 아래에서 설명할 AJAX 사용에 있어서도 매우 간단하게 요청할 수 있게 도와줍니다. 정리하자면 ..
[참고자료] 외부 CSS, JS 파일을 HTML 문서에 연결하는 방법
·
크래프톤 정글/로드 투 정글(입학시험)
HTML 파일에서 CSS와 Javascript를 분리해서 관리하자기존에는 HTML 문서에서 CSS(Head의 Style 영역)와 Javascript(Body의 Script 영역)를 함께 작성했었는데요. 규모가 작은 경우 이렇게 작성해도 크게 문제되지는 않지만, 규모가 큰 프로젝트에서는 코드의 전체 길이가 점점 늘어나게 되고 유지보수가 어려워집니다. 코드를 수정하기 위해 같은 문서를 이리저리 왔다갔다 해야 하는 것이죠. 그래서 이 경우에는 HTML 문서가 있는 프로젝트 폴더에 css와 js 폴더를 따로 만든 뒤 여기에 HTML 문서에 대한 css 파일과 js 파일을 생성합니다. 그리고 이 파일들을 HTML문서에 연결해주면 CSS와 Javascript가 한 번에 있는 기존의 HTML 문서와 똑같이 동작하게 ..
[로드 투 정글] 2. 입학 시험(2) - 프론트엔드(HTML, CSS, Javascript)
·
크래프톤 정글/로드 투 정글(입학시험)
웹 구성 필수 3요소 - HTML, CSS, Javascript저번 글에서 웹 서비스에 대한 전체적인 큰 그림을 그려보았다면, 이번 글에서는 웹페이지에 대한 큰 그림을 그려볼 차례입니다. 웹페이지를 만들기 위해서는 필수적으로 알아야 할 3가지 핵심 요소들이 있는데요, 바로 HTML, CSS, Javascript입니다. 이 3가지 핵심 요소들이 모여서 사용자와 상호작용이 가능한 예쁜 웹사이트가 만들어집니다. 인체의 골격, HTMLHTML(Hyper Text Markup Language)은 웹페이지를 만들기 위해 특별히 만들어진 컴퓨터 언어입니다. 다양한 태그를 통해 데이터를 나열해 정보를 전달하는 것을 목적으로 하고 있는데요. 사람으로 따지면 뼈대와 구조를 담당하고 있다고 할 수 있습니다. 여기서 태그(..