안녕하세요! 저는 소프트콘 입니다. 저는 대략 1년 전쯤 "THIS WEEK"라는 매거진을 연재했었는데요, 개인적인 사정으로 인해 잠시 중단하게 되었습니다. " 디스위크 보러가기 ( OP.GG ) "
그리고, 지금 저는 새로운 서비스로 여러분께 찾아뵈려고 합니다. 그 이름도 멋있는, 새로운 전적검색 사이트 "OP.QR" 입니다!
( 이 프로젝트는 MIT 라이센스로 제작되었습니다. )
0. 소개합니다, OP.QR 입니다!
다시한번 여러분께 정식으로 소개합니다. "누구나 쉽게 따라하는" 전적검색 사이트, OP.QR 입니다!
넵, 잘못들으신게 아닙니다. 누구나 쉽게 따라하는 전적검색 사이트이죠.
OP.QR은 Riot API를 받아 실제로 여러분이 직접 만들어 볼수 있는 전적검색 사이트입니다. 그렇기에 MIT License ( 어떤 조건에서도 오픈 소스 ) 로 이루어져 있고 또한 저의 Github 역시 공개로 제작되어 있죠. " 제작된 소스코드용 Github 들어가기 "
1. 이것은 프론트엔드 강의입니다.
그렇습니다. 최근 소프트웨어 분야는 눈이 부시게 성장하고 있습니다. 하지만, 그에 비해 개발 인력은 턱없이 부족한게 현실이기도 하죠.
물론 분야마다 조금씩 차이가 있습니다만, 대한민국에서 우리에게 맞는 개발자를 구하기는 쉽지 않은것이 현실입니다.
그렇기에 가장 컴퓨터에 오래 있으면서, 흥미도가 높고 관심이 많은 대상을 추려 생각해 낸 곳이 여기였습니다. OP.GG 이죠. 또한 인벤사태 이후 OP.GG는 굉장히 커졌습니다. 하루에 100개를 채 넘기지 못하는 게시물이 이제 한시간에 100개, 1분에 100개가 되는 어마어마한 스케일로 성장했죠.
20대 남성, 컴퓨터에 관심이 있고 흥미도가 있음, 꿈을 찾고 있음 이런 여러 키워드를 분석해 봤을때 이곳이 가장 알맞는 곳이라고 생각했습니다.
2. 완전히 무료이며, 광고는 단 하나도 없습니다.
사실 웹을 배우려면 어느 누구나 쉽게 배울수 있습니다. 유튜브, 블로그 등 많은 강의들이 쌓여 있죠.
하지만 여러분의 흥미 요소와 개발을 엮어 놓지 못한다면, 결국 이것이 연결될 수 없을 것이라 생각합니다. 그래서 저는 "게임을 좋아하는 사람들"을 대상으로 전적검색 사이트인 OP.QR을 제작하는 것을 목표로 진행합니다.
어려워 보이지만 굉장히 아주 쉽습니다! ( 아마도 )
3. OP.QR에 대한 자세한 소개
OP.QR은 쉽게 따라하는 전적검색 사이트입니다.
OP.GG와는 다르게 느리고, 불러오는 정보도 별로 없으며 통계나 서버 저장 기능도 갖추지 않았죠.
아주 간단한 웹 사이트입니다.
그렇기 때문에 여러분들도 쉽게 만들수 있습니다.
OP.QR은 OP.GG와 아무런 연관이 없습니다. 사이트 주소도 아니고, 사실 말장난으로 지어낸 이름이기도 하죠 (OPQR 이잖아요?)
혹시, 개발에 대한 조금의 이해가 있는 분들을 위해서 알려드립니다.
이 사이트는 최신의 react.js를 이용하여 functional programing 방법과, hook을 사용했으며 class 구조는 단 하나도 이용하지 않았습니다.
디자인적인 부분에 이해도를 높여드리기 위해 부트스트랩을 사용하지 않았습니다. 사실 제가 jquery를 그렇게 좋아하지 않기 때문이기도 하고, 마진값이나 패딩값, 그 1px의 오차가 저는 제 마음에 들지 않으면 좀 그렇더라구요..
api는 axios를 통해 통신합니다. 또한 이 구조를 이어 react native를 통해 어플리케이션 개발을 염두해 두고 제작되었습니다.
상태 관리는 context api를 이용합니다. 이는 redux ( 또는 mobx ) 에 비해 간편하고 쉬우며 "닭잡는데 소잡는 칼"이 필요 없듯 이 프로젝트는 redux가 들어갈 만큼 복잡하지 않습니다.
사실 저는 context는 이용만 잘하면 소까지는 아니여도 돼지정도는 잡을수 있다고 생각합니다..
지금 이 위에 써져있는 말이 무슨 말인지 잘 모르실수 있습니다.
하지만, 전혀 어려운 말이 아닙니다.
이 강의가 끝나갈때쯤 여러분은 저 위의 문단은 100% 이해할수 있으실 것입니다.
그러니 걱정하지 마세요! 웹은 아주아주 쉽습니다.
( 아마도.. )
4. 진행 순서 ( 커리큘럼 )
0. 기본 프로그래밍 ( 조건문, 변수 )
- 인-터넷
- 삐리릭 통신
- HTML
- CSS
- 자바스크립트
- 웹 프론트엔드 개발자/웹 퍼블리셔
- 리액트 js
- API
- Riot API 붙이기
- 완성!
강의는 이렇게 진행될 예정입니다.
모든 강의는 OP.GG에서만 연재되며 주 1~2회 정도 올려볼 생각입니다. 100% 무료로 진행되며 어떠한 홍보나 광고도 하지 않습니다.
화장실이든, 아니면 컴퓨터 실이든 어디든 좋습니다. 구경만 하셔도 좋고, 아니면 실제로 컴퓨터로 직접 만들어 보셔도 좋습니다.
5. 마치면서
이 강의의 궁극적인 목표는 " 내가 웹개발이 꿈이야! " 인 사람이 아닌 " 혹시 내 진로는 웹개발인가? " 라고 질문하는 사람에게 더 유용할 것입니다.
그렇기 때문에 프로그래밍적 기초 ( 조건문 ) 부터 시작합니다. 디자인적 요소, 개발적 요소, 그리고 사람들이 어떻게 반응할지에 대한 고민까지 한번에 풀어줄 이 강의를 통해 여러분의 꿈을 확인해 보셨으면 좋겠습니다.
글 한번 썼습니다.. 강의가 잘 안되도 좋습니다. 하지만 여러분의 꿈 하나만 기억해주세요 진심을 다해 전합니다. 강의가 별로 일수 있습니다 밤낮으로 고민하고 만들었습니다... 최선을 다했고 열심히 했습니다 저의 진심이 느껴지길 바랍니다 고맙습니다...
저는 다음주에 조금더 세세한 강의 목표와 0. 프로그래밍적 기초와 함께 다시 돌아오겠습니다! 감사합니다!
**[ 다음화 : 0. 설치와 기본설정 & 기본 프로그래밍 ] **