슈퍼코딩 부트캠프 (내돈내산 찐후기)

슈퍼코딩 부트캠프 내돈내산 찐후기를 작성해보려고 한다. 요즘 대학생 사이에서도 많이 이야기가 나오는 것 같다. 취업도 무조건 시켜준다고 해서인걸까? 나도 전공자이지만 문과 친구들이랑 같이 시작하려고 등록해서 슈퍼코딩 부트캠프를 결정했다.

 

친구들은 비전공자이고 나 혼자만 전공자라서 시작하기도 전에 나한테 많이 기대하는게 있어서 부담스러움을 안고 발품을 많이 팔았다. 친구들은 이 사실은 모른다.

 

슈퍼코딩 부트캠프 커리큘럼은 카카오엔터 프라이즈에 재직하고 있는 조한별 강사님이시다. 요즘 사람 같지 않게 설명도 잘하시고 되게 친절하게 잘 가르쳐줌.. 동네 형 같은 느낌이다.

 

슈퍼코딩 부트캠프는 프로젝트 진행하기 전에 온라인 강의로 코딩에 대한 기초이론을 학습하는데, 내가 봤을 땐 초등학생이 배우는 블록코딩도 들어가 있어서 초반의 나는 정말 지루하게 들었던 것 같다. 그래도 중간 중간 설명하시는 부분이 오? 스러운 부분이 있어서 나름 재미있게 기초 부분을 수강했던듯..

 

요즘 현업에서는 이렇구나 하는 감각적인 꿀팁도 많이 알려 주신 것 같아서 너무 감사했다.

캡쳐가 안되서 사진으로나마 인증샷 남긴다.... 인강이라 그런지 캡쳐 방지 프로그램이 깔려있다. 

 

컴퓨터 개념이 워낙에 추상적이라 이미 알고 있는데 어떻게 설명해야 할지 모르겠는 개념이 정말 많았는데, 이러한 부분들이 나한테 채워지면서 이미 알고 있는 부분들도 더 풍성해 지는 느낌이 들었다. 처음부터 수강해보길 잘한듯 하다.

 

(HTML & CSS) 1주차는 굉장히 기초적인 내용을 다뤘다. 환경 셋팅을 끝낸 이후에 HTML을 활용해서 정적 홈페이지를 만들기를 진행했었다. 기능은 잘 작동하지 않는 상태의 레이아웃들만 짜는 실습을 진행했다. 아래는 내가 만든 결과물이다.

 

<CSS>

Cascading css를 중복으로 작성해도 마지막에 있는 코드가 적용 우선순위 이다. :inline- (internal/external) 웬만하면 다들 external 방식을 이용하는 것 권장. 나중에 코드를 분리한 이후에 유지보수해야 하는 상황에서 굉장히 편함. 반대로 inline은 최대한 피해야함. css 특성상으로 어디에서 뭐가 적용되어 있는지 파악하는 것이 굉장히 어렵다. 최우선순위에 있는 걸로 적용하면 그 위에 최우선- 더최우선 이렇게 써야 하는 일이 많이 생기게 되는데 코드 파악이 좀 힘들고 나중에는 스타일 변경도 어려워진다.

 

css는 에러를 내뿜지는 않는다 다만 디버깅을 할때 어려운 부분이 있다 (어디서 어떤 것이 잘못됐는지 파악이 어려움)

 

inline은 높이나 너비를 가지지 않는다. 박스를 만들 땐 주로 <div> 태그를 사용하고 <csㄴ 박스모델> 각 소요는 박스모델(padding, margin, border)을 갖는다. padding : border 영역이나 content 사이의 공간 margin : border 영역과 바깥공간 border : 테두리

 

<flexbox와 position> flexbox : 상위 요소에 옵션을 주면, 그 내부의 요소들이 특정 배치를 가지게 만드는 옵션 -> flexible 한 반응형 레이아웃 justify-content : 가로축(메인축)을 기준으로 정렬(start/center/end) align-items : 세로축을 기준으로 정렬 (start/center/end)</flexbox와 position>

 

포지션을 앱솔루트로 설정할때의 주의할 부분은 사우이 요소 중 relative 옵션을 가지는 요소를 기준으로 배치를 하는 것.

<선택자, 상태> 선택자를 이용해 특정한 요소를 상태에 맞춰서 변경 id: 특정한 요소에 스타일 적용 class : 비슷한 요소들만 묶어 똑같은 스타일을 적용하고 싶을 때 쓰는 선택지

<css프레임 워크> 개발을 도와주는 도구 세트로 개발 속도를 높이고 효율적으로 일하기 위해서 필요함

 

 

프레임워크의 단점

간단하게 앱을 만ㄷ르어줄 때 프레임워크를 굳이 더 배워야 할 수 있는 배보다 배꼽이 더 큰 상황이 종종 있을 수 있음. 그리고 커스텀이 쉽지 않다. 어떤 사이트를 보면 아 이거 부트스트랩으로 만들었구나 하고 파악이 가능하다.

 

<bem 명명법> 네이밍을 잘해놓아야 요소를 찾을 때 굉장히 편리하다.

 

<깃허브 배포> git : sae point github : save point 가 모인 도서고나 같은 곳

 

깃허브 레포지터리 생성 이후에 gh-pages 브랜치와 병합해주고 깃허브 내에서도 사이트를 바로 바로 실행할 수 있게 해서 다른 사람들도 내가 만든 사이트를 볼 수 있도록 Publish 해준다.

 

<나의 1주차 최종 적인 결과물>

클론 코딩으로 직접 당근마켓 사이트를 구현해볼 수 있는 실습까지 완료해보았다. 나 혼자 이거 만들려고 했으면 구글링 계속 하거나 chat GPT한테 때려 맡겼을 텐데, 현업 대기업 개발자랑 함께 하나하나 같이 수행?해 나가니까 아~ 현직에서는 이렇게 네이밍을 하는 구나, 아 이렇게 하면 완전 망하는구나 등등 다양한 부분에서 기지를 발휘할 수 있는 부분들이 많이 도움이 되었던 것 같다. 

 

*추가적인 꿀팁

본페이지 말고 이쪽으로 가입하면 상담 굳이 안받아도 할인 가능함

 

슈퍼코딩