노마드코더 10

웹기초 6기 TA 회고

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

230424/ 스터디 22일차 회고: form의 submit 이벤트

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

230414/ 스터디12일차 회고: CSS 연습 게임 모음

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

230411/ 스터디9일차 회고: font awesome(폰트어썸)

오늘 활동내용 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. ..

230409/ 스터디 7 일차 회고: CSS Animation

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

230408/ 스터디 6일차 회고: CSS Selector

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

230406/ 스터디 4일차 회고: 주간회의 참여, HTML box theory 복습.

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

230405/ 스터디 3일차 회고: HTML form 회원가입 양식 코딩

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

230403/ 스터디 1일차 회고: 인강을 듣는방법 및 HTML 기초

10주간 강의를 들으며 코딩을 하게 되었습니다. 첫날인 오늘은 강의를 어떻게 들을지 전략을 세우는데 집중했습니다. 인강 듣기 전략 노마드코더의 니콜라스 선생님, 잘 가르치십니다. 하지만 인강을 가만히 듣다 보면 무슨 내용을 말하고 있는지 모를 때가 많습니다. 그래서 선생님의 패턴을 파악해서 강의의 목차를 생각하며 듣기로 했습니다. 제가 파악한 강의 패턴은 다음과 같습니다. 1. 엄격한 정의 소개 후 해당 정의 디스 - 사전적 정의를 보여준 후 비웃는다. 이 과정은 생략되기도 한다. 2. 비유를 활용한 심상모델 제시 - 이해하기 쉬운 개념모델을 제시한다. 3. 실제 예제 코드 제시 - 실제 코드로 형태 및 동작을 보여준다. 4. 이전에 소개한 개념과의 비교 - 좀 전에 배운 개념과 현재 공부 중인 개념의 ..

Express: 웹페이지 표현을위한 NodeJS 웹 프레임워크 + get,use,set

최근 노마드 코더의 줌 클론코딩 강의를 들으며 express 와 socket.io 등 다양한 서버 관련 툴을 사용해 보았다. nodejs의 대표적인 모듈인 만큼 정리하고 넘어갈 필요가 있어 본 게시글을 작성하게 되었다. Express란? Node.js에서 기본적으로 제공하는 웹 애플리케이션 *프레임워크 (web application framework)이다. 각종 웹 프로그램과 API를 만드는데 유용한 도구를 제공한다. 빠르고, 심플한 특징 덕분에 학습 및 사용이 용이해 많은 개발자들에게 사랑받고 있는 모듈이다. 요즘 급속도로 성장하고 있는 당근마켓의 푸시 알림도 Express를 사용하고 있다. 당근마켓의 푸시알림을 지탱하고 있는 Node.js 서비스 푸시알림은 당근마켓 서비스에서 채팅, ‘키워드 알림’,..