수강을 시작한 계기
지난번 다녀온 스파르타 오피스 데이 이후 관심 있게 찾아보다가 5주 웹개발 종합반을 신청해서 수강완료했습니다. 8년 차 스타트업계의 디자이너로 일해오면서 항상 개발자가 부족한 환경에서 업무를 하다 보니 좀 더 디자이너가 해결할 수 있는 일은 없을까 하는 고민이 많았습니다.
Wix나 워드프레스와 같은 웹 빌더로 간단한 웹페이지는 직접 만들어 업무에 사용했었구요. 피그마로 작업하면서 그려놓은 컴포넌트들을 직접 코드베이스로 만들어서 바로 쓸 수 있게 개발자에게 전달하는 방법은 없을까 하는 생각이 들었습니다. 다른 회사들은 디자인 시스템을 제대로 갖추기 위해 여러 인력이 동원되어 개발되었다는 글은 많이 보았지만 제가 다니는 회사에서는 여건이 그렇지 못했거든요.
개발 일지 시작하기
스파르타에서 안내하는데로 동영상을 따라서 작업해 보고 주차 별로 개발일지를 간단히 작성했습니다.
1주 차
시작하자마자 이론이나 원리 설명 없이 필요한 부분만 바로 진행되는 부분이 좋았습니다. 부트스트랩과 같은 라이브러리를 바로 붙여 쓰는 게 이렇게 쉬운 줄 몰랐는데 1주 차에 알게 되어 자신감이 조금은 붙었네요.
다만 자바스크립트에서 변수, 함수, 반복문 등은 역시 설명을 듣고 곧바로 사용해 보았지만 이해가 되진 않았습니다. 😦
예전에 Margin, Padding 조차도 영 이해가 안 갔었는데 웹빌더(Wordpress, Elementor 플러그인 사용)로 삽질하다가 몸으로 깨우쳤던 기억이 있는데요. 어렵겠지만 이것도 몸으로 체화가 가능하지 않을까 싶네요.
2주 차
Jquery와 Ajax
들어는 봤지만 잘 모르는 개념들이 많았네요. 일단 자바스크립트에서 파생된 개념으로 이해했습니다.
메모
- Jquery와 Ajax 둘 다 앞에서 라이브러리 URL을 지정해줘야 한다. (부트스트랩과 마찬가지)
- Jquery는 $으로 시작한다.
- Ajax는 $.ajax로 시작한다.
- JavaScript 관련 용어 이해 (따로 검색 안 하고 머릿속에 있는 걸로 작성)
- let - 어떤 작은 기능을 만들 건데 주어와 목적어를 무얼로 할 건지 정한다.
- for - 그걸 위해서 먼저 정하는 것? (잘 이해 못 함)
- if - 어떤 조건이면 실행하는 것
- else - 어떤 조건이 아닌 경우 실행하는 것
- function - 어떤 기능의 묶음. 버튼(=onclick)등에 연결해서 씀
- Jquery 용어(?)
- .append - 가져다 붙일 때 사용
- .empty - 기능으로 출력된 것들을 모두 비울 때 사용
- .attr - ajax로 이미지 가져올 때 쓰는 것 같은데 이해 못 함
- .text - ajax로 텍스트 가져올 때 쓰는 것
- = ← 선언할 때 사용?
- == ← 동등하다고 할 때 사용
- ++ ← for 문 쓸 때 쓰던데 뭔지 모름
- i ← for 문 때 자주 나오던데 뭔지 모름
- 자바스크립트에서 숫자셀 때는 1이 아닌 0부터 셈
3주 차
파이썬과 MongoDB
웹크롤링이 무슨 의미인지 처음으로 피부에 와닿은 것 같습니다. 처음 세팅하는 것부터 python 깔고 패키지 설치하고 mongoDB 설치하는데 꽤 어려웠는데요. 나중에 써먹을 일이 있다면 처음부터 다시 이해해야 할 듯싶네요.
사실 알고 싶었던 부분은 JavaScript와 Jquery정도 까지여서 의욕적이지는 않았지만 한 번쯤은 배워 볼만했습니다.
스파르타에서 내주는 퀴즈가 있는데 3주 차부터는 한 번에 풀기는 거의 성공하지 못했습니다. 결국 해설을 봐가면서 풀어보았네요.
숙제로 한 지니를 크롤링한 내용을 MongoDB에 따로 넣어보기까지 진행했습니다.
4주 차
서버단과 클라이언트단을 같이 연결해 보는 작업을 해보니 대충 알 것 같으면서도 배웠다는 느낌은 들지 않았습니다. 원리를 이해하는 것까지는 바라지 않더라도 체화가 되었다는 느낌이 들었으면 하는데 그러기에는 아직 모자란 것 같네요.
5주 차
웹사이트 배포하기
5년도 더 전에 백엔드 개발자분이 파일질라를 가르쳐주신 적이 있는데 다시 써보니 감회가 새로웠습니다. 터미널 쓰는 것도 신선하고 명령어 방식에 직관성도 좋았는데 배포까지 가는데 너무 복잡했습니다. 익숙해지기에는 오래 걸릴 것 같네요.
하나 의문점은 수정할 때마다 서버를 여닫아줘야 하는 가였습니다.
아쉬운 점은 현재 웹사이트들은 http를 사용하지 않고 보안을 위해 https를 사용한다 들었는데 이 부분에 대해서는 언급이 없어서 조금 아쉬웠습니다.
후기
HTML부터 백엔드까지 한 번에 맛보는 강좌였는데요. 예전에 들었던 생활코딩의 웹개발 강의와는 조금 다르게 이론보다 실전에 가까운 느낌이었습니다.
새로운 것 같지만 어차피 동영상을 보고 따라 하는 인터넷 강의입니다. 하지만 빠른 답변을 해주는 서비스가 좋았네요. 질문 자체를 작성하는 게 번거롭긴 했지만 피드백이 확실하니 질문한 보람이 있었습니다.
게더타운으로 하는 코딩 스터디
팀스파르타에서는 스터디를 할 때 게더타운을 활용합니다.
스터디시간을 3시간으로 정할 수 있고 수요일 저녁 8시로 정했지만 실제로 효과적으로 쓰지는 못했습니다. 조금은 산만하다고 해야 할까요. 사람들이 오가고 여러 이야기도 들을 수 있었는데 저에게 도움이 되지는 않았네요.
성향 차이인 것 같고 아마 학생 때였다면 재밌게 사용했을지도 모르겠습니다.
아쉬운 점
디자이너이고 프런트엔드 지식 및 기술을 배우러 온 입장에서 후반부 DB를 다루는 부분 및 몇 가지는 굳이 이것까지는 필요 없겠다는 생각을 했습니다. 그래도 웹개발 전체를 한 바퀴 돌아본다는 생각으로 5주 강의를 완강했습니다.
이후에 CSS의 좀 더 심도 있는 부분이나 (SASS 라던지..) JavaScript, React 맛보기 등을 더 해보고 싶었는데 아직 별도 강의는 없었네요. 스파르타의 메인 비즈니스 모델은 비전공자를 위한 부트 캠프 같아 보였습니다.
마치면서
웹개발 심화반도 도전하려고 하였지만 회사를 다니면서 5주를 또 도전하기에는 힘들 것 같아 쉬고 있습니다. 그래도 웹개발에 대해서 다시 한 바퀴를 돌아보니 업무에 조금씩은 도움이 되고 있네요.
Figma의 Inspect화면을 보면서 UI 디자인의 디테일한 수정을 개발자분들에게 이야기할 수 있었고, Wordpress, Elementor를 쓰면서 Custom CSS도 좀 더 유연하게 검색해서 적용해 볼 수 있었습니다.
티스토리 블로그 또한 스킨 편집하는 데에 많이 활용했는데요. 간단한 커스터마이징만 했지만 프라치노 공간의 스킨을 사용하다가 기본 제공 스킨인 Odyssay로 옮겨가서 스킨 편집했던 것도 포스팅으로 정리해 보려고 합니다.