멋쟁이사자처럼 프론트엔드 스쿨 1기

멋쟁이사자처럼 프론트엔드 스쿨 1기 수료

🦁 프론트엔드 스쿨 1기 수료 드디어 3개월간의 과정이 끝이 났다. 길다면 길고 짧다면 짧은 3개월이었다. 월화수목금 아침 9시부터 6시까지 수업을 듣는 일상을 3개월을 한다는게 학교를 한 학기 다니는 것 같은, 그 이상의 강도였다고 생각한다. 아침부터 저녁전까지 하루종일 수업에 매여있고, 수업이 끝나고도 스터디와 프로젝트를 하면 쉴 시간이 거의 없었다. 그나마 수업이 없는 주말에는 좀 쉴 수 있었는데, 그마저도 초반 수업 내용이 쉽고 따라갈만 했기에 무리하게 스터디를 여러 개 하는 바람에 주말에조차 쉴 수 없었다. 그러다보니 교육 중후반부터는 잠을 잘 못자서 비몽사몽한 상태로 수업을 들었던 것 같다.. 육체적으로 너무 힘들었어서 그런지 교육이 끝나는 것이 아쉬우면서도 한편으로는 엄청 후련했다. 앞으로도..

멋쟁이사자처럼 프론트엔드 스쿨 9주차 회고

🦁 멋쟁이사자처럼 프론트엔드 스쿨 9주차 회고 너무 바빠서 7주차, 8주차 회고를 건너뛰었다. 그 동안 수업에서는 알고리즘, 자료구조, 코테문제 풀이부터 Git, Nodejs, express, mongoDB 기초까지 많은 내용을 다루었다. 배우는 내용이 어려워지다보니 다른 분들도 수업을 따라가기 힘들어하시고, 각자 진행 중인 프로젝트도 있어서 스터디를 조금씩 미루고 프로젝트에 집중하였다. 오늘을 끝으로 팀 프로젝트 2개가 모두 끝났다. 사실 1개는 완성한 것은 아니다. 스터디에서 진행하는 프로젝트여서 기한이 정해져 있었다. 스터디 내의 다른 팀들과 지금까지 한 것을 발표를 하는 시간을 가졌는데, 그 발표를 위해서 보여줄 것은 나름대로 다 완성된 상태다. 프로젝트가 끝나서 후련하지만, 곧 2개의 프로젝트가..

멋쟁이사자처럼 프론트엔드 스쿨 6주차 회고

🦁 멋쟁이사자처럼 프론트엔드 스쿨 6주차 회고 이번 주에는 Promise, async, await 같은 비동기와 관련된 내용과 DOM과 event를 배웠고, TDD는 살짝 맛보기만 하였다. 저번 주에 스터디를 하나 쉬게 되면서 여유가 생겨서 수업을 더 열심히 들을 수 있을 줄 알았는데... 팀 프로젝트를 2개나 들어가게 되면서 멋사를 시작하고 가장 바쁜 한 주를 보냈다. 다음 주부터는 지금 쉬고 있는 스터디를 다시 참여하기로 했는데, 그 전에 프로젝트가 하나 끝날 예정이다. 근데 생각보다 이 프로젝트가 길어지고 있어서 겹치게 되면 감당할 수 있을 지 걱정이다. 😭 너무 힘들다ㅜㅜ 스터디 3개에 프로젝트 2개, 그리고 곧 시작될 프로젝트도 하나 있다. 물론 이게 시작하기 전에 프로젝트가 하나 끝나겠지만 계..

멋쟁이사자처럼 프론트엔드 스쿨 5주차 회고

🦁 멋쟁이사자처럼 프론트엔드 스쿨 5주차 회고 본격적으로 자바스크립트를 배운 한 주였다. 생각보다 너무 빠른 속도에 놀랐다. 미리 공부를 해서 여유가 있을 줄 알았는데, 자바스크립트 수업 5일차에 클로저를 배웠을 정도로 진도가 빨랐다. 과연 자바스크립트를 처음 배우는 사람이 이 진도를 따라가는 것이 가능할까..? 하지만 내가 딱히 걱정할 처지는 아니다. 지금 하고 있는 스터디 4개가 너무 큰 부담으로 다가왔다. 잠 못 자는 것은 둘째 치고, 각각의 스터디에 집중을 할 수가 없었다. 그때 그때 다음 스터디를 준비하기에 급급했다. 4개 중 무엇 하나 제대로 하고 있다는 느낌이 들지 않았다. 마침 오늘 스터디 하나에서 하던 클론 코딩 프로젝트가 마무리되고 새로운 프로젝트를 하기로 하였는데, 이 스터디를 잠시 ..

멋쟁이사자처럼 프론트엔드 스쿨 4주차 회고

🦁 멋쟁이사자처럼 프론트엔드 스쿨 4주차 회고 벌써 프론트엔드 스쿨 과정의 1/3이 지났다. 그 동안 HTML/CSS 위주의 수업을 들었고, 드디어 자바스크립트 수업이 4주차의 마지막 날에 시작되었다. 사실 HTML/CSS 커리큘럼이 너무 긴 것이 아닌가 생각했었는데, 이 과정이 아니었다면 HTML/CSS를 이렇게 깊게 파볼 수 있는 시간이 또 있었을까 싶다. 혼자 공부하면서도 자바스크립트는 책과 유튜브로 어느 정도 감을 잡을 수 있었는데, 오히려 HTML/CSS가 혼자 실습해보기 더 어려웠다. 독학을 할 때에는 어떤 상황에 어떤 태그를 써야하는지 정확히 몰랐고, CSS가 안 먹는 상황에서 너무 답답했었다. 지금은 한 달동안의 수업으로 웹 접근성을 고려한 마크업을 할 수 있게 되었고, CSS에 대해서도 ..

멋쟁이사자처럼 프론트엔드 스쿨 3주차 회고

🦁 멋쟁이사자처럼 프론트엔드 스쿨 3주차 회고 벌써 3주가 지났다. 결국 TIL은 쓰지 않기로 했다. 지금 11월 10일 TIL을 작성하다 만 상태인데, 이것까지만 어떻게든 쓰고 이제부터는 주제 단위로 꼭 정리가 필요하다고 생각되는 내용을 깊게 공부해서 게시글을 작성할 생각이다. TIL이 프론트엔드 스쿨을 하면서 이루려던 목표 중 하나였는데, 결국 이루지 못하게 되었다. 하지만 많이 아쉽지는 않다. TIL에서 벗어나서 더 많은 것들을 할 수 있게 되었기 때문이다. 📚 스터디 스터디를 2개 하면서도 힘들어했는데, 여기에 2개가 더 추가되었다. 이렇게 해서 클론코딩 스터디 3개와 코딩테스트 문제풀이 스터디 1개를 하면서 매주 7번(3회, 2회, 1회, 1회)의 온라인 모임을 갖게 되었다. 처음에는 스터디에 ..

[멋쟁이사자처럼 프론트엔드 스쿨] 211109 TIL

오늘은 SVG를 조작하는 방법을 배웠다. SVG를 이미지가 아닌 인라인 방식으로 사용하면 CSS로 제어할 수 있다. CSS로 SVG 제어하기 html에 직접 svg태그를 쓰고 CSS로 제어할 수 있다. svg 태그를 직접 제어하거나, svg 태그 내에 있는 circle, rect, line, path 등의 자식 태그들을 각각 제어할 수도 있다. .path1 { stroke: blue; } .path2 { fill: red; } stroke으로 선을, fill로 도형의 내부를 색칠할 수 있다. 참고자료 https://ossam5.tistory.com/112 [HTML기초문법] 13강 SVG태그 및 이미지 활용 - OSSAM강좌 1. SVG 태그란? - SVG태그는 Scalable Vector Graphic..

멋쟁이사자처럼 프론트엔드 스쿨 2주차 회고

🦁 멋쟁이사자처럼 프론트엔드 스쿨 2주차 회고 뭐 하나 제대로 해낸 게 없는 한 주였다. 저번 주부터 밀리기 시작한 TIL은 이번 주에는 단 2개밖에 쓰지 못했다. 클론 코딩 스터디는 2개를 동시에 하고 있는데, 처음엔 괜찮았으나 갈수록 실력의 한계가 느껴졌다. 일단 다 같이 모이는 시간이 항상 필요한데, 2개를 동시에 하니까 스터디를 준비하고, 스터디를 진행하고 하다보면 TIL 쓸 시간은 커녕 쉴 시간도 없었다. 번아웃까지는 아니고, 약간의 현타(?)가 왔다. 다음 주 주말에는 반나절 정도라도 쉬는 시간을 정하려고 한다. 📚 스터디 첫 번째 스터디에서는 그동안 잘 진행되다가 레이아웃을 구현하는데 grid를 제대로 사용할 줄 몰라서 막혔다. 어떤 스터디원분이 이 부분을 해결한 것을 보고 따라서 해보려고 ..

[멋쟁이사자처럼 프론트엔드 스쿨] 211108 TIL

오늘은 flex, grid를 포함한 CSS의 중요한 부분들을 많이 배웠다. 주말에 스터디를 진행하면서 알게 된 점도 여기에 포함시키겠다. CSS Flex Flex는 블록 요소 내에서 공간 분할과 정렬을 용이하게 한다. 용어 정리 Flex Container : display: flex인 요소 Flex Item : Flex Container의 자식 요소 Main Axis : Flex Item이 배치된 방향의 축 Cross Axis : Main Axis와 수직인 축 1 2 3 4 5 .flexbox { display: flex; width: 500px; padding: 5px; border: 3px solid black; } .flexbox div { border: 3px solid black; } .item..

[멋쟁이사자처럼 프론트엔드 스쿨] 211105 TIL

일요일(11/07)이 되어서야 금요일 TIL을 쓰기 시작한다. 그날그날 배운 내용이 많다기 보다는, 배운 내용에 대해서 구글링을 항상 곁들이는데 이러다 보면 구글링 하면서 배운 것들이 계속 추가되서 끝이 없다. 내가 너무 과하게 하는 건 아닌가 싶다. 이제 스터디도 2개나 하게 되었는데, 다음주에도 TIL이 계속 밀릴까봐 걱정된다. 더군다나 오늘 배운 내용들은 단순한 기초 개념이 아니라, 지금까지 배운 내용들을 되짚어보면서 심화적인 내용이 많이 나왔었다. 더 부지런해져야겠다. inline-block 공백 문제 inline-block 요소를 사용하면 margin이 아닌 알 수 없는 여백이 생기는 문제가 있다. .box { display: inline-block; width: 100px; height: 10..