개발자의 낙원

노마드 코더에서 Teaching Assistant로 활동했던 웹기초 6기가 끝났다. 이는 그에 대한 회고이다. 이는 복습을 위한 글도 아니고, 취업시장의 판관에게 제출하기위한 서류도 아니다. 그저 지난 10주 스터디의 기억이 다 스러지기 전에, 그 편린을 모아 간직하고 싶은 소망의 실현이다. # 1. 제안, 승낙 “영진님께 웹기초 TA를 맡아주실 의향이 있으신지 여쭤보려고요.” 보라님의 말씀이었다. 놀라웠다. 나는 커뮤니티 내부에서, 부끄러운 모습을 많이 보였었고 내가 만든 상황을수습하는 주체는 보라님을 비롯한 Crew분들이었다. 그런 내 치부를 모두 관찰한 보라님이 Teaching Assistant 합류에 대한 제안을 하고 계셨다. 더욱이 당황스러운것은, 발화의 태도였다. 그녀는 특별히 선심을 써서 내..

들어가기 앞서: 최근 블로그 포스팅이 뜸해진 이유 그 이유는 노션에 중독되었기 때문입니다.! 노션에 독후감도 쓰고, TIL도 쓰고, 강의 내용도 정리하고 있습니다. 가장 최근에 작성한 독후감: 프로그래머의 뇌 독후감 (notion.so) 하지만 블로그에 다시 돌아왔습니다. 노션은 나 혼자 보거나, 협업을 위한 위키를 만드는 장소이고 블로그의 뿌듯한 요소들을 충족시켜 줄 수 없으니까요. 벌써 10주 스터디의 전반부가 지나가고있습니다. 모여서 책도읽고, 함께 코드를 읽기도하고 보람찬 시간을 보내고 있습니다. TIL Form에 발생하는 submit 이벤트의 기본동작은 웹페이지 이동이다. 그리고 event.preventDefault()로 방지할 수 있다. form 태그는 클라이언트와 서버가 소통하기위한 도구입니..

그동안 활동 한동안 포스팅이 뜸했습니다. 책으로 공부하고, 계속 css 반복연습만 하고 있었기 때문에 별로 포스팅할 내용이 없었습니다. TIL position을 활용하여 컴포넌트 겹치기 위의 사진에서 왼쪽 2조 2천억 버튼의 구성은 다음과 같습니다. 폰트어썸 아이콘 버튼에 표시되는 텍스트는 "value"속성의 문자열 값으로 표현해야합니다. 그러므로 태그를 직접 집어넣을 수 없습니다. 저 주스병 모양 아이콘은 input 버튼위의값이 아닙니다. position:absolute;를 활용하여 태그와 태그를 겹치게 만들어준것입니다. .left__btns__like { position:relative; } .left__btns__like > i { position:absolute; top:30px; // 아래로 이..

오늘 활동내용 font awesome이라는 웹사이트의 아이콘을 불러오는 방법과 css 클래스 네이밍규칙: BEM에 관한 강의를 들었습니다. 한 달 전에 작성한 BEM 게시글 https://batcave.tistory.com/59 사실 처음 듣는 내용은 아닙니다. 하지만 강의에서 목표하는 카카오톡 UI 클론을 한 번도 완성해 본 적이 없어서 집중하며 들었습니다. TIL 지식: font awesome(폰트 어썸)에서 이미지 아이콘 가져오기. Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. ..

10주의 첫 주가 지나는 날입니다. 오늘은 스터디 관련한 행사는 없고, 그냥 css를 공부했습니다. TIL 지식: transition transition은 한국어로 이행, 전이, 변화 등의 뜻을 가지고 있습니다. css의 transition은 html 요소 스타일이 변할 때, 지정한 시간 동안 부드럽게 변화하는 애니메이션 효과를 부여하기 위해 쓰입니다. 코드의 형태 1. 적용 할 수 있는 상황 :focus와 같이 상태(state)에 따라 스타일을 지정하는 css 선택자가 있을때, 상태가없는 선택자에 적용 할 수 있습니다. a {} a:hover{} a:hover와 같은 상태선택자가 따로 정의되어있을때 사용하며, a 일반 선택자 내부에 들어가야합니다. 2. 코드의 형태 transition: 부위 시간 전환..

오늘의 강의내용 자주 쓰이는 css 선택자에 대해 배웠습니다. css 선택자는 저도 이전에 블로그에 다뤄본 적이 있는데요. CSS Selector(CSS 선택자): 기본선택자, 선택자 우선순위 및 선택자 조합하기: https://batcave.tistory.com/50#combination-of-css-selector 제가 알지 못하는 많은 실전용 선택자들을 알 수 있었습니다. diplay 속성과 선택자를 활용해 간단한 색상 띠지모양의 기둥을 디자인해 제출했습니다. 또 앱 인터페이스 디자인 과제를 수행했습니다. TIL 지식: DOM트리 선택자 HTML 태그가 형성하는 DOM트리의 구조를 이용한 선택자입니다. 1. 후손 고르기 선택자 위의 hrml 코드에서 모든 코드 들은 id가 father인 div태그의..

스터디 활동 소식 오늘은 스터디 조가 배정되었습니다. 10명이 한 조라고 들은 거 같은데, 20명이 한 조였네요. 조이름을 정하고 조장을 뽑는 게 목표입니다. 기대가 됩니다. 네모박스 안에 나누기% 심벌이 들어있는 그림을 클론 하는 코드챌린지를 풀었습니다. TIL HTML의 class 속성(attribute), box-theory, flexbox를 공부했습니다. 이전에 블로그에서 다룬 내용들이 틀리지 않은 것 같아 안심입니다. flexbox: https://batcave.tistory.com/73 box-theory: https://batcave.tistory.com/32 지식: *는 만능 셀렉터이다. *는 HTML 문서 내부의 모든 태그를 선택하는 실렉터입니다. * { border: 2px solid ..

앞으로의 계획에 대해 여러 질답을 들을 수 있는 주간 회의에 참여했습니다. 지난 3일의 스터디 회고를 담은 노션링크:주간 회고록 (notion.so) 주간 회고록 1주차 www.notion.so 제 질문이 회의 사진에 올라와서 기분이 좋았습니다. 선택과 집중을 해야 하는데, 어떤 걸 기준으로 선택을 해야 할지 잘 모르겠습니다. 플러터 챌린지 1기 완료도 하고 싶고, 멜론클론코딩 콘테스트도 하고 싶고, cs지식공부, 코딩테스트 준비도 하고 싶어요. 하지만 제 뇌가 처리할 수 있는 단위시간당 정보량은 한정되어 있습니다. 10주 챌린지만 충실히 따라가고 포트폴리오를 만들면서 cs 책을 공부하거나, 코딩테스트를 준비하거나 해야 하는데.. 무엇이 먼저인지 모르겠습니다. TIL css기본, display 옵션 bl..

스터디 3일 차입니다. 주간회고록을 노션에 작성해보았습니다. 오늘은 새로운 강의는 없고, 첫 코드챌린지가 있었습니다. HTML 문서에서 여러 가지 input 태그를 집어넣어서 간단히 회원가입 양식을 만들어 보았습니다. 이미 한번 만들어본 코드이지만, 열심히 타이핑했습니다. 기존의 것과 겉모습은 똑같지만 이번엔 semantic 태그를 활용해서 header와 main으로 전체 html-body의 구조를 보여줄 수 있게 코드를 만들어서 마음에 듭니다. 문제 및 코드를 유출하면 (아마) 안되어서 여기 남길 수 없는 게 아쉽습니다. TIL 팁: 태그속성은 공식문서로 꼭 확인하자. input 태그로 만든 submit 버튼입니다. HTML 삽입 미리보기할 수 없는 소스 위의 버튼은 다음과 같은 코드로 만들어졌습니다...

스터디 2일 차입니다. 오늘은 HTML문서의 구조와 여러 가지 태그에 대한 강의를 듣고 퀴즈를 풀었습니다. 4월 6일 목요일 저녁 8시에 줌 OT를 진행한다니 잘 살펴봐야겠습니다. 느낀 점 사실 HTML을 개인적으로 적당히 열심히 공부했었기 때문에 어느 정도 이미 다 아는 내용이었습니다. 하지만 좀 더 명확한 용어의 정의와 디테일한 느낌을 교정할 수 있었습니다. 예를 들자면 id 속성(attribute)은 태그의 고유식별자입니다. 하나의 HTML 문서에는 같은 id 값을 갖는 여러 개의 태그가 존재할 수 없습니다. 하지만 그렇게 정의한다고 해서 무슨 오류가 발생하는 것은 아닙니다. 단지 id를 제대로 활용할 수 없게 되겠지요. 동일한 값의 id는 존재할 수 없다기보단 존재하면 안 된다. 정도로 느낌이 바..