2023년부터 로그 기록 2023년부터 로그 기록

목차 1. 디스코드 사용법 2. 노션 페이지 3. 공통질문 답변 원티드 FE 프리오보딩 챌린지를 참여하기로 했다. (9/4 시작) OT 참여를 시작으로 열심히 한번 해보자 1. 디스코드 사용법 1-1. 디스코드에 Notion 링크를 공지할 예정 1-2. 전체 온보딩 챌린지 OT 이다. 1-3. 프리온보딩 챌린지 - 공고는 내려갔지만 노션에 링크로 들어가면 다시 내용 확인이 가능하다. - 각 챌린지마다 주제 - 강의주간 : 기술역량향상 (2주), 4차까지 각 3시간 수업을 진행 - 언제 강의가 진행되는지 노션페이지 참고 - 취업 챌린지 (4주) : 구직활동을 서포팅하는 주간, 이력서 특강, 채용 큐레이션 페이지 제공 - 채용 큐레이션 페이지란? 최소 연봉을 3천 이상 구인중인 기업 필터링하여 각 직군별로 ..

목차 1. 복습 2. 이력서 피드백 3. S/W 회사와 서비스 List Up 4. 3회차 사전 과제 1. 복습 1-1. 이력의 나열 순서 - 읽는 사람이 가장 궁금해 하는 것 : 지원자가 '한 것'이 아니라 '잘 하는 것' - '연대기 순'이 아니라 '역량순'으로 이력서를 작성하는게 중요하다. 보통의 이력서 역량순 이력서 ● 자기소개 저는 ~하는 프론트엔드 개발자입니다. ● skills ○ html, css, js, react ● A 프로젝트 ○ a 기술 사용하여 b 기능 구현, 저장소 링크나 간단한 요약 내용 ○ 웹소켓 기능을 이용해서 채팅 기능 구현 ● B 프로젝트 ○ a 기술 사용하여 d 기능 구현 ● C 회사 인턴, 아르바이트 ○ e 기능 개선 ● D 교육 참여 ○ 멋사 프론트엔드 교육 과정 ○ ..

목차 1. DOM target 2. class 1. DOM target 1-1. target - 브라우저 화면에서 이벤트가 발생하면, 브라우저는 이벤트 대상을 찾아가는 과정에서 이벤트가 차례로 실행되는 이벤트 전파(event propagation) 이 발생한다. - 부모부터 자식까지 일련의 요소를 모두 타고가며 진행되는 이러한 이벤트의 특징 덕분에 이벤트 객체에는 target, currentTarget 이라는 속성이 존재한다. - target 속성에는 이벤트가 발생한 진원지의 정보가 담겨 있다. - target 속성을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있다. - currentTarget 속성에는 이벤트 리스너가 연결된 요소가 참조되어 있다. 버튼1 버튼2 ..

목차 1. JS DOM 2. 잡담 1. JS DOM (Document Object Model) 1-1. DOM 노드 요소 제어 - DOM API를 이용하면 요소를 새롭게 생성하고, 위치하고, 제거할 수 있다. (1) document.createElement(target) : target 요소를 생성한다. (2) document.createTextNode(target) : target 텍스트를 생성한다. (3) document.appendChild(target) : target 요소를 element의 자식으로 위치한다. (4) document.removeChild(target) : element 의 target 자식 요소를 제거 - 1~4 이후에 만들어진 새로운 메서드 (훨씬 편리하다) (5) docume..

목차 1. 네이버 로또 번호 바꾸기 2. 조건문 3. 반복문 여기에서 나온 모든 예제는 크롬 브라우저의 개발자 모드에서 수행함. 1. 네이버 로또 번호 바꾸기 1-1. 첫번째 로또 공 숫자 바꾸기 - 네이버 로또 번호 검색 - 자바스크립트로 첫번째 로또 공의 숫자를 바꾸기 // 첫번째 로또 공 dom 요소 가져오기 const ball1 = document.querySelector('#main_pack > div.sc_new.cs_lotto._lotto > div > div.content_area > div > div > div:nth-child(2) > div.win_number_box > div > div.winning_number > span:nth-child(1)'); console.dir(ball..

목차 1. JavaScript 개요 2. JavaScript 견고한 기본기 자바스트크립트를 처음 시작하는 사람들에게 해주신 호준강사님께서 말씀하셨던 말이 기억에 남아서 기록한다. '꺾이지 않는 마음'은 없습니다, 회사가면 다 꺾입니다. 중요한것은 '꺾여도 계속 가는 마음' 입니다. 1. JavaScipt 개요 1-1. CSS 라이브러리 정리 - Tailwindm Bootstrap, Sass, Pure css 어디서 써야하는지 - 자동화 순 Tailwindm > Bootstrap > Sass > Pure css - 디자인이 나온 상태에서 Project : Tailwind > Sass > Pure css - 시간이 매우 촉박하고 ROI(input 대비 output) 가 제대로 나오는 프로젝트 : Bootst..

목차 1. 기념일 계산기 2. GitHub 올리기 3. Netlify 소스 코드 배포하기 오늘 휴강이다. 멋쟁이사자처럼 프론트엔드 스쿨에서 제공해준 LMS (학습관리시스템) 강의를 자습한 내용을 기록한다. 비디팅 코딩(Video + Editing = Viditing Coding) 을 통해서 수업하는 신기한 방식으로 수업을 하는데, 약간의 오류들이 보이지만 생각보다 새로운 언어를 익히는데 정말 도움이 되는 것 같다. 마치 개인 과외를 받는 느낌이다. 1. 기념일 계산기 1-1. 객체(Object) - 배열처럼 여러개의 자료형을 담는 자료형 - 키(key) or 속성명 - 값(value) or 속성값 : 배열, 객체, 함수(메서드(method))가 들어갈 수 있음. - 객체.키; - 객체.키(); 값이 메서..

목차 1.요약 2. 개발자 문화와 코드 리뷰 3. 코드 리뷰는 효율적인가? 4. 코드리뷰 절차와 양식 5. 방법론 6. 사용되는 도구 7월 27일 오늘 코드리뷰 스터디를 가입하고 Gihub Repository 초대를 받았다. 어렴풋이 코드리뷰란 것은 화이트보드나 빔프로젝트를 켜고 자신이 개발한 코드를 동료들에게 발표하고 피드백을 주고 받는 시간이라고 이해하고 살고 있었다. 이제 IT 회사에 들어가기 전 그리고 멋쟁이사자처럼 프론트엔드 스쿨7기 동기들에게 형식을 맞춘 양식과 적절한 코멘트를 위해서 코드 리뷰에 대해 좀 더 알아보고 참여하고자 한다. 1. 요약 1-1. 내 맘대로 한 줄 요약 내가 코드리뷰에 대해 찾아 읽어보고 한 문장으로 요약하면, 코드의 생성산과 안정성을 지키면서 빠르게 개발하는 개발 문..

목차 1. JavaScript 기본 2. 로또 번호 추첨기 3. 자소서 글자수 계산기 4. 미니 스타크래프트 오늘은 멋쟁이사자처럼 프론트엔드 스쿨에서 LMS 대체 수업이다. LMS (학습 관리 시스템)는 실시간 강의가 아닌 녹화된 교육 영상을 시청하는 것이다. 녹화 안되는 실시간 온라인 강의만 듣는 것이 아니라 녹화된 교육영상도 제공해주니 너무 만족스럽다. 프론트엔드 스쿨은 큰 단위의 기술 주제를 시작하기 전 기초 클래스를 듣고난 후 실시간 강의에 들어간다. 제공해주는 기초 클래스 강의는 총 4가지로 HTML/CSS, JavaScript, React 관련 기초강의다. 다음주부터 JavaScript 강의가 시작되기 전에 기초 강의를 완강하고 수업에 참여하고자 한다. LMS 강의 수강날인 오늘은 '일단 만드..

목차 1. 수업 외 특별 활동 2. Tailwind 개요 3. Tailwind 로 이력서 만들기 1. 수업 외 특별 활동 - 책 집필 (8월 중순, 팀구성 자유, 주제 구상해오기) - 오픈소스 프로젝트 - 신입 개발자 자기소개 작성 문의 (희망 연봉 명시된 이력서를 보낼 것) - Sass TailwindCSS Bootstrap (Bootstrap 이 가장 빠름, 돈으로 해결함) 2. Tailwind 개요 - Tailwind : 만족도가 높고 꼭 배워야 한다고 생각함 - 부트스트랩 : 찍어내야하고 빨리 만들어 낸다면 사용 - 프론트엔드 스쿨에서 유료강의도 제공해줄 것이지만 지원회사에서 Tailwind 를 사용할 때 시간내서 더 볼 것 2-1. Tailwind CSS HTML 을 벗어나지 않고 모던 웹사이트..

1. CSS 실무 테크닉 1-1. 아이스브레이킹 - 유니티 개임 개발자 6개월 과정 듣고 취업 - 퇴사 후 웹개발 부트캠프 5개 듣기 (2년반) - 배울게 많아요, 길게 보세요. 급하게 생각하지 마세요. - 혜진 강사님의 뼈떄리는 말씀 더보기 비교를 통해서 얻을 수 있는 것은 두 가지 비 - 비참해지거나, 교 - 교만해지거나 밖에 없다고 했다. - 길게 봐야한다. - 다른 사람이랑 비교하지 말라. - 취업 이야기: 카카오 자회사 검색 개발팀 - 네트워크가 정말 중요하다. (중요한 정보가 나온다. 88명을 소중히 여겨라) - 모두가 취직을 할 것이고 중요한 정보를 공유하고 질문할 수 있다. - 관심 회사의 자리가 있는지? - 그 회사의 팀 분위기는 어떤가요? - 개발자는 실력 그리고 소프트스킬이 매우 중요..

목차 1. 메인 페이지 만들기 2. 반응형 이미지 3. 3D 관련 속성들 4. 카드 뒤집기 만들기 1. 메인 페이지 만들기 1-1. 자신만의 포트폴리오를 만들어라 - 디자인 요소를 다르게 해서 응용해보아라 - 피그마 디자인 파일에 있는 디테일 (인터렉션 변화)를 넣어서 완성시키세요. 1-2. 두근두근 다이어리 메인 페이지 만들기 - textarea 는 inline-block 라서 baseline 에 정렬됨 - h2 에서 padding: 0.5em 0 0.5em 2em; 은 line-height 내부 font-size 를 기준으로한다. - textarea 는 font 속성을 상속받지 않기 때문에 따로 font: inherit; 해줘야한다. - 에서 datetime 은 일시의 정확한 포맷이 있다. - 세로로..

목차 1. CSS 애니메이션 2. 햄버거 버튼 만들기 3. Video & Audio 4. SVG & Canvas 5. Form 6. Select 1. CSS 애니메이션 1-1. 기본 개념 - JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용한다. - 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 keyframes로 이루어진다. - transition VS animation : transition 의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실핼할 수 있다. - @keyframes : 두개 이상의 애니메이션 중간 상태를 지정합니다. (0% > 100% 또는 from > to) 1..

목차 1. Grid Garden 2. 게임 클리어 및 답안 오늘의 프론트엔드 스쿨(FES) HTML/CSS 주제 Grid 를 배웠다. 강사님께서 주신 복습용 게임을 통해서 Grid 를 복습하고 익숙해지고자 한다. 1. Grid Garden CSS Grid 사용법을 익힐 수 있는 재미있는 사이트다. 나도 4개월의 멋쟁이사자처럼 부트가 끝나고 이런 무료 사이트를 만들 수 있는 실력을 갖추고 싶다. 본격적으로 Gird 속성들을 복습해본다. Gird Garden 은 28 단계까지 있다. 2. 게임 클리어 및 답안 Grid 가 익숙하지 않아서 헤매기도 했고, 강의에서 핵심적으로 배웠던 속성은 사용되지 않아서 어려웠다. 다시 한번 풀어보면서 답안을 공유한다. (마우스로 드래그 하면 보임) 순번 (1 ~ 14) 답안..

목차 1. 회고 스프린트 목적 2. 회고 스프린트 3. 회고조 공유 4. 요약 오늘은 정규수업을 오후 4시까지 끝내고 자습 대신 스프린트 회고를 하는 시간이다. 나는 잘 몰랐지만 유명한 사람이 강사로 등장한 것 같았다. 이전 기수부터 스프린트 회고와 이력서 작성 특강을 맡고 있다고 한다. 이런 특강을 들을 수 있는 기회는 내 인생에서 흔치 않기에, 수업 내용에서 나온 내용들을 최대한 빠뜨리지 않고 받아 적었다. 1. 회고 스프린트 목적 1-1. 우아한테크코스 메이커준 (임동준) - 배달의민족 우아한테크코스 임동준님 - 주니어 개발자들에게 도움을 주고 있다. - 개발자와 교육의 삶을 살고 있다. 1-2. 개발자로서 성장을 잘하기 위해 무엇이 필요할까요? - 탄탄한 기초, 도전, 꾸준함, 구글링, 창의력, ..