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

목차 1. JSON 2. DOM 3. 직무분석 1. JSON 1-1. JSON(JavaScript Object Notation) - 자바스크립트 객체 형식으로 데이터를 표현하는 문자 기반의 표준 포맷 - 문자형 또는 숫자형으로 입력해야하면 쌍따옴표를 생략할 수 없다. - 다른 방식에 비해 가볍고 자바스크립트와 호환성이 높아 널리 사용된다. - 쉽게 말해 텍스트로 표현된 정보의 덩어리이다. https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON JSON으로 작업하기 - Web 개발 학습하기 | MDN JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 ..

목차 1. JavaScript 전개구문 2. JavaScript 디스트럭쳐링 3. JavaScript this 키워드 4. 함수 심화 5. 스코프 6. 잡답 1. JavaScript 전개구문 1-1. 전개구문 - spread syntax - Spread 문법은 배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법 1-2. 배열의 전개구문 - 배열의 전개 구문은 대괄호([]) 안에서 세 개의 점(...)을 사용하여 배열을 확장한다. - 전개구문을 활용하여 배열의 값만을 복사해 새로운 배열을 만들 수도 있다. - 이렇게 생성된 배열은 기존의 객체 자료형처럼 참조를 공유하지 않고 완전히 별개인 새로운 값이 할당된다. 1-3. 객체의 전개구문 - 객체의 전개 구문은 중괄호({}) 안에서 세 개의 점(....

의도대로 결과가 나오지 않는 JavaScript (JS) 메서드를 어떻게 사용하면 좋을까?그때그때 퍼포먼스를 발휘해 예외 케이스를 찾고 해치우면서 코드를 하는게 맞는 걸까?나는 훌륭한 코드를 자신의 코드로 학습하고 DB화 하거나 GitHub Repository 에 정리하여 효율적으로 일하는게 맞다고 생각한다. 그래서 이 글은 내가 JS를 기초부터 다시 공부하면서 유용한 실무자 노하우 코드만을 따로 뽑아 정리한 일종의 DB 이다.실무자 노하우 코드는 VSCode 의 경우 스니펫(snippet)으로 등록해서 쓰면 훨씬 편할 것이다.실무를 하면서 오류를 최대한 출력하지 않으면서, 작동을 멈추지 않는 JS 의 메소드로부터 우리 모두 자유로워지는데 도움이 되길 바란다. 1. type 체크 : typ..

목차 1. 캐치테이블 FE 채용 공고문 2. JD 분석 3. 결론 캐치테이블(와드, WAD) Front-end 직무 분석 1. 캐치테이블 FE 채용 공고문 국내 레스토랑 예약시장 1위 캐치테이블은 '행복한 미식생활, 건강한 예약문화'를 만들겠다는 목표로, 레스토랑 업주 분들께는 예약관리 솔루션인 '캐치테이블 매장용' 앱 서비스를, 소비자 고객 분들께는 실시간 레스토랑 예약 플랫폼인 '캐치테이블' 앱 서비스를 제공하고 있습니다. 많은 분들이 궁금해하십니다. 어떻게 O2O서비스* 중 레스토랑 예약영역에서 자리를 잡을 수 있었는지에 대해서요. 캐치테이블의 성공요인은 2018년 1월에 B2B 서비스(캐치테이블 매장용(구 테이블노트) - 예약관리 솔루션)에 있습니다. 현재 약 5,000개가 넘는 레스토랑에서 캐치..

목차1. 결론2. 장점 알려드림3. 단점 알려드림4. 차이점 알려드림5. KPT 회고개발자 한번 해볼까?실력이 부족한데 부트캠프를 한번 들어가볼까? (광고 아님!) 부트캠프를 고민하는 당신에게 멋쟁이사자처럼 부트캠프 Front-End School (이하 멋사 FES) 7기에서 한 달 보내보고 후기 알려줌  멋사 Front-end School 7기(FES7)에 합격하여 수업을 들은지 1개월이 지났다.오늘은 내가 궁금했었고, 멋사 부트캠프를 고민하는 (예비) 개발자들에게 도움이 될 만한 경험담을 작성해 본다.(보통 후기 또는 회고라고 있어 보이게 이야기 하더라) 일단 FES7 장단점 부터 시작해서 본인에게 이 교육이 맞는 것인지 확인해보면 좋을 것 같다.그리고 나서 고민하고 있는 다른 선택지랑 비교를 해보시..

목차 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..

나에게 의미있던 지점 목표에 가까워지고 있는지 첫번째 스프린트 이후로 2주간 일어난 일에 대한 회고 지난 시간에 작성한 목표와 지금까지 일어난 일 중에 나에게 의미 있었던 지점 2~3가지 이렇게 진행해주세요 (~9:35) MC와 함께 관찰자 역할을 한 명이 자원해주세요. 간단한 아이스브레이킹을 진행해주세요 (5분이내) 테이블 표를 노션 페이지에 추가해서, 적어보며 회고를 작성해봅니다. (5~10분) 우리 조 안에서 각자 개선하고 싶은 부분들 중에 공통점이나 비슷한 점이 있다면 이를 MC가 정리를 주도해주세요. 정리한 내용을 디스코드 스레드에 공유합니다. 나 - 새로운 코드 리뷰 스터디에 가입했다. - 생각보다 HTML/CSS 실력이 올랐음을 체감했다. - 블로그 포스팅 회수를 줄이고 퀄리티가 올랐다. -..

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

목차 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. 실습 내용 2. 주요 태그 및 속성 3. 코드 1. 실습 내용 CSS 특강 내용을 바탕으로 아래 사항들을 고려하여 의도한 디자인으로 프론트엔드를 개발한다. (1) 개발순서의 첫번째 : 큰 덩어리 레이아웃(Layout) 부터 짜는 것이다. (배경으로 구역을 파악하라) (2) CSS 기본 속성 초기화 (3) 컨테이닝 블록 : 직계 부모 요소가 제공하는 컨텐츠 영역 (4) 속성의 초기값(Initail Value) 피그마 링크를 참조하여 HTML/CSS 코드를 작성하라 2. 주요 태그 및 속성 2-1. , margin: 50px auto; 2-2. , background-image: url(); background-size: cover; background-repeat: no-repeat; 2-3. ..

목차 1. 멋사에 들어오기 전 선배의 이야기 2. 멋사에서 얻어 갈 수 있는것 3. 이것만큼은 꼭 챙기기! 4. 이것만큼은 절대 하지 말기! 5. 해주고 싶은 말 6. 꿀팁 7. QnA 1. 멋사 들어오기 전 선배의 이야기 (5기) - 현제 나이? 27살 -> 25살 - 의공학 출신의 졸업 후 멋사 지원 (C언어, 파이썬 조금 해봄) - 스팸 메일도 확인하고 기대했던 합격 2. 멋사에서 얻어 갈 수 있는것 - 소프트웨어 스킬 - 협업 경험 3. 이것만큼은 꼭 챙기기! 3-1. 꼭, 회고조 활동 열심히 하기! 3-2. Live Share (Extenstion) : 페어 프로그래밍 (길게 20분 정도, 네비게이터 프로그래머) 3-3. AI와 친해지기 (ChatGPT3/4) : 복잡하지 않게 직접적이고 간단하..

목차 1. 주제 2. 핵심 태그 및 속성 3. 코드 1. 주제: 버튼 만들기 - 제한시간 15분 - 추가시간을 받고 총 30분 안에도 못함... (수강생 88명 중 50명은 했음) - 따라서, 나의 수준에서는 복습 및 백지 코딩 수행이 필수임 (1) 일단 button 에 가상 상태 클래스 (:hover, :active, :disabled) 를 적용해서 버튼 4개 만들기 (2) CSS 변수 적용해서 유지보수 용이한 형태로 CSS 수정하기 2. 핵심 태그 및 속성 (1) :enabled, :disabled, :hover, :active (2) :root (CSS 전역 변수 선택자) (3) @font-face (4) border (5) box-shadow: inset 3. 코드 Button Button Yes..