DODONOT Dev
article thumbnail

https://zero-base.co.kr/category_dev_camp/school_FE

 

코딩 부트캠프 | 프론트엔드 스쿨 | zero-base

코딩 부트캠프 취업 결과가 있는 프론트엔드 스쿨 선택하세요!

zero-base.co.kr

 
제로베이스에서 프론트엔드 학습을 시작한지 2주차가 되었다.
제로베이스 프론트엔드 학습 후기 겸 짤막한 학습 회고를 해보고자 한다.
 
처음 부트캠프를 알아볼 때 굉장히 막막하고 어려웠기 때문에 나처럼 여기저기 부캠을 알아보는 사람에게 도움이 되길 바라며,
최대한 자세하게 적어서 담았다.
 

TODO 커리큘럼 관리 (구글 스프레드시트)

2주차까지 제로베이스에서 진행한 커리큘럼

배운것도 한 것도 너무 많기 때문에 하나하나 쓰는 건 힘들 것 같다.
전체적으로 어떤 것을 공부했는지 가볍게 써보고자 한다.
 
먼저 나는 국비를 듣다가 여러모로의 한계를 느껴 부캠을 찾아 듣게 된 케이스이다.
제로베이스에서 커리를 구글 스프레드시트로 제공 관리하고 슬랙을 이용해서 관리하고 있다.
 

1~2주차 학습한 것들

개발기초용어들, HTML, CSS, CS - 컴퓨터구조와 운영체제에 대하여 공부했다.
커리큘럼이 스파르타라 모두 캡쳐하지는 못했지만 빡세게 시킨다..  (심지어 모두 정리하지도 못함)
내용만 후루룹 들으면 머리에 남는건 없고... 본인이 해보면서 또는 정리하면서 해야 뇌 한 구석이나 손가락에 박히는 느낌이다.

 

블로그에 따로 정리한 것들

컴퓨터 구조 추가 핵심 이론 : https://coralcollie.tistory.com/70

 

[CS/컴퓨터 구조] 추가 핵심 이론 정리 1

CS > 컴퓨터 구조 > 추가 핵심 이론 정리 1 시스템, 메모리, 워드, 니블, 진수, 2의 보수, 부동소수점, 부울대수식, 플립플롭, CPU구성요소, 레지스터, 마이크로연산, 컴퓨터소프트웨어, 프로그래밍

coralcollie.tistory.com

선택자 우선 순위 정리 : https://coralcollie.tistory.com/73

 

[CSS] 선택자 우선 순위

CSS 선택자 (CSS Selector) 선택자 점수 (Selector score) 1. 전체선택자 (범용선택자) : 0점 2. type 선택자 : 1점 3. class 선택자 : 10점 4. id 선택자 : 100점 /* 0점 */ *{ background-color: silver; } /* type 선택자 1점 */ P{ b

coralcollie.tistory.com

 
더 정리하고 싶은게 잔뜩 있지만 아직 이 두개 밖에 정리 못했다... 🥲
 

실습 내용 인증

배운 HTML로 박스 모델과 반응형 간단한 구조를 실습하고 인증하는 시간도 가졌다.
아주 간단한 부분인데도 가슴이 두근두근 거리고 너무 재밌었다.
천천히 연습하고 공부하다보면 언젠가는 내 애들 같은 정말 원하는 기능과 인터렉션을 구현한 웹페이지를 만들 수 있겠지?
상상만 해도 너무 좋다..🥰

 

CS 공부 + 퀴즈 + 추가 학습

CS 컴퓨터 구조 강의를 들으면서 나는 아이패드로 함께 보면서 필요한게 있으면 필기도하고
궁금한게 있으면 따로 체크를 해두고 찾아보기도 하면서 강의를 들었다.
너무 어려울 줄 알았는데 생각보다 재밌었고 무엇보다 신기했다.
전기회로 부터 시작해서 회로를 이용해 논리게이트를 만들고 그것을 컴퓨터의 메모리로 만들면서
점차 컴퓨터 구조가 완성되어가는게 정말 신기했다.................
세상엔 새로운 것을 개발하는......천재가 필요하구나.... 그리고 그걸 잘 발전 시키는 성실한 범인들도 중요하구나...
나도 그런 성실한 사람이 되고싶다.

 
CS를 공부하는데서 그치지 않고 제로베이스에서 출제하는 CS퀴즈가 매주 준비되어 있다. 😇
와 근데 이거 정말 쉽지 않다. 오픈북이라고 쉽게보면 안된다.. 
배운 거 + 너가 알아서 찾아봐 => 이런식의 문제들이 출제되기 때문이다. 
그래서 풀다보니 5-6시간이나 걸렸다...... (아닌가..7시간인가..?)
 

풀면서 공부한 내용은 따로 정리해두었다.
https://coralcollie.tistory.com/70

 

[CS/컴퓨터 구조] 추가 핵심 이론 정리 1

CS > 컴퓨터 구조 > 추가 핵심 이론 정리 1 시스템, 메모리, 워드, 니블, 진수, 2의 보수, 부동소수점, 부울대수식, 플립플롭, CPU구성요소, 레지스터, 마이크로연산, 컴퓨터소프트웨어, 프로그래밍

coralcollie.tistory.com

다 풀고 나면 넓고~~~ 얕게~~~ 뭔가 지식 슬라이드 한 겹을 깐 듯한 느낌이 든다.
 
부족한 부분은 혼공 컴퓨터구조 운영체제 CS책으로 채우고 있다.

유튜브에 강의도 있고 책 자체도 설명이 쉽게 되어있어서 책이랑 구글링이랑 함께하다보면 이해가 좀 더 잘 되는 것 같다.
 

슬랙 slack & 데일리 스크럼

슬랙에는 다양한 채널이 있다. 
공지사항, 질의 응답, 정보 공유, 블로그 공유, 프리토크 등등
아직까지는 각 채널을 엄청 활발하게 사용하고 있다는 느낌은 안든다.
 
제로베이스에서는 데일리 스크럼이라고 각 팀원들을 시간대로 나누어서, 공부 진행 상황들을 각자 공유하는 시간을 가진다. 

 
나는 밤 2조 조장으로 매일 데일리 스크럼을 진행하고있다
우리 조는 총 6명! 다들 일이 있고 바쁜데도 굉장히 열심히하고 있다.
무엇보다 의욕이 넘치셔서 나도 자극받고 더 열심히 배우는데 매진하게 되는 것 같다.
또 좋은 정보나 질문이 있을 때 팀원들과 함께 나눌 수 있는 점은 굉장히 좋다.

but, 아쉬운점
데일리 스크럼 자체를 관리해주는 매니저가 없고 데일리 스크럼 채널에 인증을 하더라도
참석과 불참에 따른 이점이나 패널티 제도가 없다.
결국 하는 사람만 하기 때문에 선순환 <-> 악순환이 되는 스위치도 쉬워보인다.
 

나는 스터디를 따로 모집해서 학습을 좀 더 효율적으로 이어갈 방법을 고민중인데 그런 부분들도 조언들과 나누면서 얘기할 수 있는 부분들이 굉장히 좋았다.
 
이번달에는 중요하게 잡힌 일정들과 대학도 기말고사와 과제들이 있기 때문에 정신없고 부지런히 공부해야한다.
(빡세지 않은 날이 없던 거 같지만...)
2030에는 그냥 담담하게 열심히 살고싶다. 많이 배우고 많이 경험하고 실패와 성공도 반복해보고 그렇게.
 
3주차도 열심히 하자!! 
 
추가적으로 해야하는 일들을 일정 궤도까지 공부를 끝내면
바로 스터디 계획을 노션 DB로 만들어 모집할 것이다. 
CS스터디와 모션 자바 스크립트 스터디! 👍
선택과 집중으로 하나씩 끝내보자!!!
 


+ 한 달째 다 되어가며..

궁금 리스트와 블로그 리스트 작성

궁금한게 정말 너무 많아서... 정리를 안하면 내가 뭘 궁금해 했는지 조차 까먹게 생겨 따로 리스트를 관리하고 있다..
상태 / 태그 / 메모 / 생성일로 구분해 두었고
메모 부분은 간단하게 결론만 요약하거나 정말 메모해둘것을 함께 적어두고 있다.
메모 부분이 특히 중요한게 저렇게 해두면 들어갈 때마다 복습이 된다.

질문에 대한 답은 문제의 종류를 먼저 파악한다.

  1. 찾으면 해결 가능함 -> 최대한 구글링 or 테스트 함, 시간 없으면 고민중으로 상태 변경하고 틈틈이 찾아봄
  2. 실무자에게 도움을 받아야만 함 -> 제로베이스 질문방 멘토님에게 바로 물어봄

 

1번의 경우

임베드 기능을 최대한 활용한다.

 
 

2번의 경우

질문, 답으로 내가 쓴 질문도 남겨두고 있다.

 
상태를 3가지로 나눈 이유는 보드로도 확인하기 위함이었는데
리스트가 아니라 보드로 보면 최근 내가 배운것과 고민중인게 무엇인지 파악이 쉬워진다.
memo를 표시할 수도 있지만 그건 리스트로 보는게 더 나아서 뺐다.

 
 

블로그 정리 리스트

블로그도 정리하고 싶은 것들이 정말 많다.. 사실 리스트에 못 적은 것들도 있다.
경험할때 그때 그때 적어야 하는게 특히 블로그인데 시간은 없고 휘발하게 둘 수도 없기 때문에 간단하게 적어두기 위해서 만들었다.
어떤게 있었는지 적는 것 만으로도 도움이 된다...

추후에 궁금리스트랑 DB연동 시켜서 쓰는중

하나를 살펴보자면.......제로베이스는 미션이 참 많은 편인데 그 미션의 구현사항을 따로 복사해서 
한줄 한줄 구현 여부를 체크해가며 구현하였다. 
 

+ 사실 구현하라고 없던 부분까지 다른 사이트들과 비교해가며 구현했다..
+ 운영 이슈에 대한 이유도 가지고 구현했다.
 
1.
통이미지를 소스로 줬지만 사용하지 않음.. -> 나중에 관리자 단에서 매번 디자이너가 내용 변경등의 이슈가 발생하고 유지관리가 어려워지고 리소스가 많이 들기 때문, SEO에도 좋지 않다고 생각했기 때문..
 
2.
로고는 png, 상품 이미지는 jpeg로 export해서 사용함
로고는 사이즈가 작고 투명도를 생각해서 png로 export했지만 
상품 이미지는 사이즈가 큰데 png로 할 경우 로딩 시간을 잡아먹고 사용자의 데이터도 잡아 먹기 때문에 jpeg로 export했다.
사실 웹을 만들고 있으니 모바일 해상도는 따로 이미지 바꾸는 것을 생각하고 jpeg qulity를 80%할까 하다가 말았다.ㅎㅎ..
 
나중에 구현 사항 부분때 마다 생각했던 것을 체크해가며 다시 회고를 쓰려고 한다.
노션의 댓글 기능을 이용하면 마크해 두는 것도 쉽다.ㅎㅎ

노션의 댓글 기능으로 마크함

 

미션 1 구현 화면

 

질의응답방

나는 질의 응답방에 정말 너어어어~~~무 만족하고 있다.
정말 자랑하고 싶은 멘토님께서 너무너무 설명을 잘해주시기 때문 🥹👍💗
모자이크를 하고 싶지 않았을 정도 흑흑...

멘토님 짱...🥹

  1. 정말 구체적으로 설명을 잘해주심
  2. 필요한 경우 코드펜과 자료를 이용해서 설명해주심
  3. 내가 고민하고자 하는 부분의 명칭등을 몰라서 물어봤을때(정답을 원한게 아님) 답변을 안주시고 공부할 수 있는 부분을 던져주셔서 너무 좋았다!!!!!

 

실습 : 인스타그램 피드 클론 코딩

강의를 따라가면서 하는 실습 강의들이 있다. 
그 중 하나는 인스타그램 파드 클론(?) 코딩이었다.
아직 자바스크립트를 배우지 않아서 기본적인 버튼 클릭과 해제만 적용해보는 부분을 배웠지만
내가 배운 CSS만큼은 실습 내용보다 더 인스타그램의 디테일을 반영하기 위해 애쓴 부분들이 많다!!
실습하면서도 추가적으로 욕심 부린 것들이 많은데 그런 부분들이 내게 더 큰 공부가 되는 것 같다.
솔직히 판다코딩의 피드 강의는 아쉬웠다..... 아마 최대한 가볍게 만들기 위해 노력한 부분 같다. 
가르치는 입장에서는 덜어내는게 중요하지 않을까 싶다.
 
그러나 난 배우는 입장이니까!! 내가 더 열심히 찾아봤다! 
그리고 적용함.
 
 

 

1. 미션 1에서 html, css(common, pages), asset 등으로 폴더를 나누는 것을 보고 인스타도 나눠봤다.
main.css에 import 하는 부분들도 따라해봤다. 솔직히 내가 한게 맞는지는 모르겠음(..)
그러나 연습은 되는 거 같다. 
 
2. 실습에서 인라인으로 스타일을 주는 방식이 있었는데 차용하지 않음.. -> 클래스로 구현
클래스 명칭을 고민하면서 클래스로 나누고 CSS를 최대한 파악하기 쉽게 작성하기 위해 노력했다. 
또 최대한 짧고 간단하게 CSS를 구현하기 위해 노력했다. 
 
3. 인스타그램 캡쳐본을 가져와서 실제 디자인이랑 최대한 맞췄다.(실습에서 마진 패딩 컨텐츠간의 정렬이나 간격을 너무 대충줬음..ㅠㅠ)
크기, 정렬, 마진, 패딩, line-height 등
 
4. 판다코딩처럼 내 캐릭터를 가져와서 이미지에 넣었.....
 
 

특강 (굉장히 자주 있음)

제로베이스에서는 특강이 있다.
수강생들에게만 주어지는 특강인지는 잘 모르겠지만 매니져 분들이 공지를 해주시고 열심히 메모해가며 듣고 있다.
항상 질의응답 시간이 있어 너무너무 좋다.

 
이런식으로 슬랙채널에 안내해주신다.
그럼 이제 딱 캘린더에 넣어두고 딱 들어가는 것...
 

졸업생 취업특강 (제일 좋았음)

 
특강들으면서 개인적으로 메모해 두는 것은 절대 잊지 않는다..
필요하다면 화면을 캡쳐하거나 강사님께 자료를 요청해서 자료를 따로 체크하고 복습도 하고 있다.
 
 

송효창 개발자님(야놀자) / 오혜진 개발자님(카카오 엔터)

 
특강은 나의 상황에 따라 어떤 특강은 더 도움이 되고, 어떤 특강은 조금 덜 도움이 될 수는 있다.
그러나 도움이 되지 않는 특강은 없다.
이게 나한테 도움이 될까? 보다는 도움 되는 부분을 발견하려고 노력해야 한다고 생각한다.
평소에 본인이 뭘 모르는지 알고 있다면 분명 도움이 되는 부분들이 많을 것이다. 
 
어떤 부분이 도움이 되는지 모르겠다면 들리는 건 그냥 다 적는 것도 방법일 것이다.
일이 손에 안 잡히고 정말 혼란스러울때 본다면 방향성을 잡아주는 힌트가 될 것이라고 믿고 실제로도 느끼고 있다.
 

코딩테스트

프로그래머스 캠퍼스에서 볼 수 있다.
내용은 캡쳐나 유출을 절대 안된다고 경고하길래 절대 안할 생각이다...🙄💦

 
3시간이 부족했을 정도로 꽉 채워봤다...
기간은 하루를 주고 있고, 시험시간은 3시간.
자바스크립트를 아직 강의를 못본채로 봐서 정말 쉬운 문제가 맞는 거 같은데도 엄청 오래 걸리고 엄청 고민하며 풀었다.
 
중요한 건 재미가 있었다. 수학적으로 겁나 머리를 굴려서 변수를 잡고 있는데 
갑자기 내장 함수가 있는 것을 알았을때의 충격,,(일부러 검색안했었음..) 과 기쁨!!!
세상엔 참 편리하게 해주는 것들이 많구나..^^... 최고다.... ㅎㅎㅎ
 
하지만 내가 고민하던 흐름들도 주석으로 모두 남겨두었다.
나중에 정답 코드가 오면 비교해보고 또 다시 해보고 안되는 부분이 있으면 질문해볼 생각이다.
 
 


쉽지않다... 거의 매일매일이 피곤하..
뭐 어쨌든 최대한 열심히 즐기고 있다. 🥹🥰😁💻🎧👍
즐기면서 (또는 도전해보는 것에 집착하면서..)해서 그런지 나는 제로베이스에서 추천하는 진도보다는 살짝 느리다.. 🥲
하지만 최대한 손과 머리에 익히고 있으니 걱정은 없다.
했는데 안한 것과 같은 상태는 피하고 싶다.
 
빈수레가 요란하다 뭐 이런 상황은.. 생각만해도 아찔하다...
열심히해서 꽉 찬 수레가 되자고 다짐한다.
 
다들 파이팅.
 

개인적으로 화공 스터디 만듦

개인적으로는 온라인으로만 진행하니 혼자하는 거 같고 나태해 질 수도 있는 거 같아
화공 스터디 디코를 만들었다. 소수로만 진행하고 싶어서 따로 홍보를 하고 있진 않다..
 
모두모드~ 컨셉은 이것이고... 처음 생각했던건 이번년도 초 UIUX 디자인 하는 친구의 스터디를 봐주면서이다.

 
아래처럼 운영되고 있다. 일단은 자유롭게 화공하고 스터디하고 교류할 수 있는 방이었으면 싶다.
그러나 이슈들이 생기거나 불미스러운 일들이 생긴다면 바로 서버를 폭파 시키고자 한다..^.^)..
내 공부하기도 벅차기도하고 거기까지는 내가 정해둔 리소스 밖이다...ㅎㅎ...

 
그러나 운영은 열심히 하려고 노력하고 있다.
처음 스터디를 만들었던 목적에 맞게 난 그냥 거의 저기서 살고 있는 것 같다.....ㅎㅎ...
어쨌든 또 결론은 정말 열심히 하고 있다...
 
가보자고~~

profile

DODONOT Dev

@두두나 Dev

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!