웹앱 프로그래밍의 시작_Hello IT 프론트엔드 개발을 시작하려고 해 입문편

Hello IT 프론트엔드 개발을 시작하려고 해 : 입문편 - HTML, CSS, JS 기본기부터 Git을 활용한 버전 관리와 클론 코딩까지, 2022년 세종도서 학술부문 선정도서 ㅣ HIT 시리즈 1
박영웅 지음 / 패스트캠퍼스 / 2022년 2월

한 때 프로그래머가 꿈이었습니다. 야근 아니 철야를 밥먹듯 해야 하는 직업 특성 상 여자가 할 수 있는 일이 아니라며 교수님께서 적극 말리셨어요. 그래서 결국 웹디자이너가 되었습니다. 물론 덕분에 순탄하게 직장생활을 할 수 있었어요. 사내에 보통은 디자이너를 1명 이상은 잘 두지 않거든요. 일만 잘하면 얼마든지 TF팀에서도 야근없이 독고다이(?)할 수 있고, 딴지거는 사람도 없어 편했습니다. 그래도 이런 책을 보면 지나치지 못하는거 보니 미련은 남았나 봅니다. (ㅎㅎ)

<프론트엔드 개발을 시작하려고 해 입문편>은 패스트캠퍼스 프론트엔드 분야 1위 강좌 <초격차 패키지 Online: 한 번에 끝내는 프론트엔드 개발>의 내용이 담겨 있습니다. HTML· CSS·JS 기본기부터 Git을 활용한 버전 관리와 클론 코딩까지 담겨 있지만 입문편답게 쉽게 배울 수 있어요.

HTML· CSS·JS가 뭘까요?

우리가 매일 접하는 인터넷 사이트는 외모에 비유할 수 있어요. 시각적으로 보이고, 우리가 터치할 수 있죠. HTML· CSS·JS는 이 인터넷을 구성하고 있는 장기, 조직이라고 보시면 되고요. 세부적인 내용이 담긴 code는 세포라고 생각하시면 이해가 쉬우실 듯 합니다.

"난 코딩이 처음이다, 웹개발이 뭔지 전혀 모른다!"면 입문편부터 시작하셔야 해요. 화려한 스킬을 빨리 배우고 싶어도 꾹 참으셔야해요. 왜냐면, 프로그래밍은 특히 더 기초가 탄탄해야 오류가 적어요. 오류가 한번 나기 시작하면 엄청 골치 아파지거든요. 애초에 암호같은 텍스트들이 빼곡히 적혀있어서 나중에 오류를 찾아내는 게 상당히 귀찮고 어려워요. 차라리 다시 만드는게 빠르고 편하고 오류가 적을 때도 있어요. 그래서 오류가 없도록 완벽하게 코딩하는게 중요해요. (전공자의 뼈아픈 조언입니다.ㅎㅎ)

배워보겠다 마음먹었다면,

목차부터 내용 빼먹지 말고 꼼꼼히 읽어보시길 강력히 추천드려요!! 내용이 정말 알차요. 아시죠? 학교 교과서는 기본만 다루고, 문제집이 더 설명이 꼼꼼하고 문제가 다양한거! 그 차이 ;)

가장 먼저 할 일은 프로그램 설치!

https://code.visualstudio.com 에 접속하여 설치용 압축 파일을 다운로드합니다.

기본 메뉴와 팁 설명 후엔 HTML, CSS, JS를 어떻게 연결해야 웹앱(pc, 스마트폰처럼 다른 단말기에서도 같은 컨텐츠를 볼 수 있는 시스템)이 완성되는지도 설명해줍니다.

자주 사용하는 단축키

프로그램을 한글 버전으로 바꾸는 방법 

"쉽게 배우고 싶다!" 하는 이들을 위한 오픈소스 라이선스

(하이라이트) 사이트 만들어보기 등...

'알겠거니...'하고 넘어갈 만한 것들도 한번씩 더 확인해줍니다.

code를 짰다면 어떻게 보이는지 테스트 해봐야겠죠~? 코드 점검은 인터넷에서도 확인해볼 수 있어요.

사이트를 만들 때 한번에 처음부터 끝까지 다 코드짜서 그 때 그 때 확인하지 않아요. 부분 부분 따서 테스트도 해볼 수 있어요. 요렇게 점검해서 오류가 없으면 내 프로젝트에 넣고, 넣고, 이렇게 하면 어디서 오류가 났는지 찾기 훨씬 쉽답니다.

https://codepen.io

전 자동으로 번역되는데, "땜질로 새로운 것을 배우"라고 ㅎㅎㅎ 소개하네요.

요기까지만 해도 내용이며 팁이 적지 않은데 1/5정도 밖에 되지 않아요. 그 뒤로 HTML 소스 설명, CSS 속성 설명, JS 코드, 표기법, 변수... 페이지 코딩도 하나 하나 다~ 나와요.

책보며 따라하다보니 추억이 새록새록. JAVA, HTML, C++로 게시판 만들다 정신줄 놓을 뻔했던 기억이 떠오르더라고요. 과제였는데 몇 시간을 눈 빠지게 봐도 오류가 안보이는거있죠. 결국 다시했어요..... 지금은 그 때보다 시력이 나빠져서 그런지 더 안보이네요. (디자인하길 잘했다아 싶네요. ㅎㅎㅎ) 그래도 과제하는게 아니라 그런지 훨씬 재밌었어요. 코드가 다 캡쳐되서 책에 실려 있어 쭉 훑어보고 비교할 수 있어 쉽기도 했거요. 매일 보는 인터넷 사이트가 어떻게 운용되는지 궁금해 배워보고 싶으시다면 입문용으로 추천드립니다. :)