id와 class 차이는 질문자님이 생각하시는대로가 맞습니다.
id, class 머두 div 뿐만 아니라 span, p 등등의 Element 태그에서 사용되며, Selector를 위한 값들입니다.
id는 Element의 유니크한 값이며, 중복될 경우 Selector 검색 시 찾을 수 없거나 오류를 발생시킵니다. id의 표현은 #이며 javascript, css에서 특정 Element를 찾을 수 있습니다.
class는 css의 class 정의로 보시면됩니다. 표현은 . 으로 표현하며 id와는 다르게 중복되어도 됩니다. 일괄적인 style을 반영할 때 유용하며 때로는 id와 같이 특정 Element를 찾을 때도 사용됩니다.
블로그가 망한다는 것 보다는 주기적인 업데이트가 없거나 검색 엔진이 크롤링이 할 수 없는 상태에 있으면 포스팅이 노출되기 어렵습니다.
일반 네이버 블로그라면 글을 최신으로 업데이트 시켜 줌으로 써 재 크롤링 되게 도와줄 수 있고요.
네이버 웹 마스터를 통해서 내 블로가 잘 인식 할 수 있도록 도와줄 수 있으니 웹 마스터 가이드를 살펴 보시기 바랍니다.
저도 군대에서 시작했는데 비슷하네요. 그때는 할 수 있는게 책을 보는 방법밖에 없어서 힘들었던 기억이 있네요.
언어 선택에 있어서 어떤걸 해도 지금은 모두 좋을 것이라 판단되네요. 실제 프로젝트의 투입도 아니고 점차적으로 공부해 나간다면 C, Python 모두 좋을 것 같아요. 굳이 선택하라면 저 같으면 Python을 선택하겠네요. 전역하면 복할 할테고 그때부터 제대로 배운다고 생각하시고 지금은 책만 보세요. 백날 책을 봐도 가장 습득이 빠르고 피부로 느낄 수 있는건 실제 프로젝트하면서 코딩하는게 가장 빠릅니다. 책은 그저 레퍼런스로 생각하시면 될 것 같아요. 코딩을 할 기회가 있다면 군에서는 제약이 많기 때문에 알고리즘을 풀어보시는게 좋은 방법입니다. 백준져지나 코딜리티에 다양한 문제가 있으니 연습하시면 되요. 알고리즘은 점차적으로 배워나가야하고 이 후 졸업 후 취업시 유용하게 작용됩니다. 알고리즘은 종이로도 풀 수 있으니 시간이 가능할 때 문제를 푸시고 다 못 푼 문제는 이후 생활관에서는 종이로 풀어보시고 풀이 내용을 보고 다시 풀어보시면 되요. 알고리즘을 풀면서 코딩 연습을 하시고 이 후 전역 후에 교내에서 실제 프로젝트를 진행하면서 스킬을 올려가면 될 것 같네요. 다시 말씀드리지만 책만 뚫어지게 본다고 스킬과 실력이 느는 건 아니예요. 책 백번 보는 것보다 코딩 한번이 효율적입니다.
6개월 정도 이렇게만 진행해도 복학 후 언어 수업에 다른 언어를 쓴다하더라고 일맥상통하기 때문에 학점관리도 될 것 같네요.
전역 잘 하시고 사회부적응자로 업그레이드 하시기 바랍니다~
우선 순위를 정하고 시작하시면 될 듯해요.
단순하게 홈페이지를 만드는 것이지만 익혀두면 웹 애플리케이션 및 모바일 애플리케이션도 만들 수 있습니다.
1. html
마크업 언어로 익히기는 매우 쉽습니다. 먼저 접하셨다니 다행이고 웹의 기본 언어라고 할 수 있어요. 태그를 이용해서 기본적인 화면을 구성할 수 있죠.
2. css
html을 이용해서 화면을 구성하였다면 스타일을 주는 언어입니다. 간격, 너비, 높이, 색상 등 스타일링을 할 수 있죠. html과 연계하여 class, id, selector를 통하여 특정 html 태그에 스타일을 줄 수 있습니다.
3. javascript
html과 css를 이용하여 화면을 구성하였다면 javascript는 구성된 화면에 기능을 넣을 수 있습니다. html을 통하여 버튼을 만들었다면 버튼에는 css로 스타일을 주었고 이를 click 했을 때 알림창을 출력하게 하는 등 기능을 부여할 수 있습니다. 웹의 가장 기본적인 스크립트이며 파생된 많은 언어들과 framework가 많습니다. 나아가서는 VR도 구현이 가능합니다.
위 세가지를 익히셨으면 가장 기본적인 지식들을 습득하신겁니다. 시간은 걸리겠지만 간단한 웹 페이지 정도는 만들 수 있죠. 다만 너무 오리지날 방식이기 때문에 이를 더 편하게 사용하고 더 나은 기능을 위해서 익혀야 할 기술입니다. 아래 기술은 위의 javascript를 기반으로 하기 때문에 javascript를 먼저 익히시는 걸 추천드려요.
4. framework
화면을 구성하는데 원시적으로 html과 css, javascript를 사용하여 구현하는 방법보다는 좀 더 쉽게 구현할 수 있습니다. framework에는 vue, react, angular 등 종류가 많습니다. 이중 하나를 채택하여 사용하시기 바랍니다.
5. git, github
git , github는 저장소와 같은 역할을 합니다. 내가 구현한 소스를 저장하고 형상을 관리할 수있어요. 구현을 잘 못했거나 과거로 되돌리기 위해서는 특정 저장소에 유지가 되어야합니다.
front-end 기술은 너무나 다양하고 변화 역시 빠릅니다. 모든 걸 다 말할 수는 없지만 위 항목들만 익히신다면 기본적인 웹 페이지는 만드 실 수 있을꺼예요. 물론 Back-end의 기술은 또 다릅니다. 참고하시길 바랄께요
게임은 잘 몰라 앱쪽만 답변드리자면.
앱의 형태도 다양합니다. 형태에 따라서 언어도 달라지구요. native 앱 같은 경우엔 플랫폼에 따라 언어도 갈리고 플랫폼에 종속적이라 추천드리는건 하이브리드 앱 또는 웹앱을 추천 드려요. 웹앱의 경우 한번의 앱 개발로 웹 애플리케이션으로 브라우저와 모바일 모두 호환이 가능하기 때문에 일타이피로 보시면 될 것 같구요. 이를 위해서는 기본 웹 지식이 필요합니다. 사용되는 언어는 기본적으로 javascript, html, css 정도 되고 이에 따라 vue, react, angular와 같은 framework를 사용할 수 있어요.
2000년 초반에 Javascript를 하셨으면 ES3 정도 하셨을텐데 이후 Javascript는 많은 변화와 버전이 나왔기 때문에 먼저 ES6(ES2015)부터 Javascript를 다시 보길 추천드려요. 기본적으로 javascript, html, css를 보시는게 좋을 것 같구요.
ES6가 가장 많은 변화를 이루었고 이후에도 ESMAscript는 점차 발전되었으니 ES6부터 진행하시면 될 것 같네요.
ES6를 얼추 익히셨다면 이후 Framework를 하나 선정하여 스킬을 습득하는게 좋습니다. Framework에는 많이 사용되는 React, Vue, Angular가 있으며 이 이외에도 많은 Framework가 있으니 훑어 보시고 선택하는 것이 좋을 듯합니다. 러닝커브가 가장 낮은 건 Vue이고 이전부터 지금까지 많이 사용되는 추세이니 많은 도움이 될 것입니다. Document도 한글로..(업데이트가 좀 느린 부분은 있습니다만..)되어 있으니 접하기 쉬우실 꺼예요.
React를 선택하셨다면 scaffolding Framework인 Next를, 그리고 Vue를 선택하셨다면 Nuxt를 보심이 좋구요.
이후 Framework를 선정하고 익히셨다면 여러 기술들을 습득하는게 좋습니다. nodejs 또는 NPM 또는 Yarn을 통해서 node module을 설치하는 방법을 익히 시고 build를 위한 도구인 webpack, parcel 등 여러도구를 익히시면 됩니다.
개발 툴은 무료툴이며 많이 사용하는 vscode나 atom 을 사용하시면 되고 개인 프로젝트를 하신다 하셨으니 github에 repository를 생성하여 사용하시면됩니다.(git 확인)
애플리케이션의 종류가 너무나 다양하기 때문에 구체적인 내용이 필요합니다. 앱의 종류에 따라 사용되는 프로그램 언어가 모두 다르니
애플리케이션 종류와 구분을 한 번 보시고 어떤 형태의 애플리케이션이 필요한지 먼저 파악을 해두시는게 좋을 듯합니다.
네이티브 앱은 IOS, 안드로이드와 같은 플랫폼에 따라 앱이 달라지며 보통 java, Object C를 사용합니다. 웹앱, 모바일 웹 같은 경우 html, css, javascript가 사용되고 이에 따라 react, angular, vue와 같은 프레임워크를 사용하여 만들 수 있습니다. 하이브리드 앱의 경우 웹앱과 비슷하지만 ionic, react native과 같은 프레임워크를 사용하여 개발할 수 있습니다.
위 내용은 UI 개발과 관련된 사항이고 서버는 별개로 생각하셔야합니다.
리엑트, 앵귤러, 뷰 모두 3대장으로 불리는 프레임워크 입니다.
무엇을 선택해도 좋은 선택이고 사용 방법 역시 도낀개낀이지만 굳이 나눠야한다면 개발이 처음이시고 하면 진입 장벽이 가장 낮은 Vue를 추천드려요. 국내 추세로 이미 많은 프로젝트가 React로 진행되었지만 최근들어 점차 Vue로 시작되는 프로젝트들이 수두룩합니다.
Vue 관련된 정보는 많은 곳에서 찾아 볼 수 있어요. https://kdydesign.github.io/2017/11/15/vuejs-tutorial/ 이곳에서 vue에 대해 간략하게나마 접근 하실 수 있으시고, React, Angular, Vue의 프레임워크를 비교한 내용은 https://kr.vuejs.org/v2/guide/comparison.html 여기를 참고하시면 됩니다.
프레임워크는 필수가 아닌 선택이지만 개발을 처음하시는 거라면 먼저 javascript 및 html 등 웹 기반 기술을 먼저 습득하는 걸 추천드려요. 기반 기술은 필수니까요.
질문자님처럼 state를 인자로 받아서 변이를 일으키는 방법과 컴포넌트에서 직접 v-model에 state를 받아서 직접 변경하는 방법 모두 사용 할 수는 있지만 vue 개발팀에서 추구하는 방식은 아닙니다.
vuex와 같은 중앙집중식 상태 관리 패턴에서는 한 곳에서 모든 상태에 대해서 관리하고 유지하며 저장 및 변경 내용을 추적할 수 있는 매커니즘입니다.
v-model에 직접 state를 바인딩하여 변경하거나 state를 mutation의 인자로 전달하여 직접 인자값을 바꾸는 것은 가능하나 이러한 행동들이 많아지면 많아 질 수록 변이에 대해 추적이 어렵고 관리가 어려워집니다. 이런 문제로 추후 사이드 이펙트가 발생될 확률이 증가하며 이외의 문제를 야기할 수 있기 때문에 vue 팀에서 가이드하는 적합한 방법으로 사용하는 것을 추천드립니다.
vuex의 store는 컴포넌트 간의 데이터 모델을 공유하기도 쉽고 사용하기도 쉽지만 한 곳에서 관리가 되고 컴포넌트 간 제약성이 적기 때문에 사용에 있어서 엄격한 제약이 필요합니다. 결과는 같더라도 관리 포인트 측면과 이 후 유지보수의 어려움을 따진다면 좋은 방법은 아니라 생각됩니다.