글쓰는쿼카의 PM 여정

0. 기본정보#스파르타코딩클럽 #부트캠프 #26일/94일- 학습주제 : [베이직] [자바스크립트 3강] localStorage, REST API- 학습내용 : localStorage, REST API- 학습일 : 2024. 5. 22.1. 배운 내용 요약1) localStorage로컬스토리 간단 설명 : 더보기서버에 저장할 정도로 중요하진 않은 정보를 저장하기 위해 사용합니다.중요하진 않은 정보란 정보가 날라가도 상관은 없지만 있으면 편리한 정보 입니다.ex) “오늘 그만 보기” 버튼 클릭 여부저희는 DB를 사용하지 않기 때문에 연습용으로 로컬스토리지에 저장, 삭제하는 연습해보겠습니다. 한 줄일 경우>데이터 추가/수정 : localStorage.setItem("key", "value")데이터 가져오기 :..

0. 기본정보#스파르타코딩클럽 #부트캠프 #24일/94일- 학습주제: [베이직 3rd] 자바스크립트 배열과 객체- 학습내용: Array(배열), Object(객체) 자료형, 데이터에 따라 HTML을 변경하는 방법, 다양한 배열 메소드, Spread Operator, destructuring- 특별사항: 코딩테스트 라이브 OT - 탐험반 신청했으나 취소 예정 ==> 지금은 "기능 구현"이 우선!- 학습일: 2024. 5. 20.1. 배운 내용 요약 - 과제 위주[베이직 3rd] 강의 목차- 노션 링크: https://daffy-slime-268.notion.site/4-cc20d48a3561471bb7ba953cfcf03363더보기Array(배열), Object(객체) 자료형 설명 데이터에 따라 HTML을..

0. 기본정보#스파르타코딩클럽 #부트캠프 #23일/94일- 학습주제: 수준별 수업 [베이직]- 학습내용: 이벤트 버블링, 함수 return, 스크롤 이벤트, 탭 메뉴로 마우스 호버(for문), setTimeout으로 광고창 닫기, setInterval로 타이머 만들기, 캐러셀 구현으로 이벤트와 에니메이션- 특별사항: [제출] React 입문 : 개인과제(My Todo List)- 학습일: 2024. 5. 16.1. 배운 내용 요약(틈틈이 보완할 부분)더보기1. 모달창 외부 클릭 닫기로 이벤트 버블링 학습2. 배달팁 계산기로 함수의 return 학습3. 스크롤 이벤트 학습4. 탭 메뉴로 마우스오버와 for문 학습5. setTimeout으로 광고창 닫기6. setInterval로 타이머 만들기7. 캐러셀 구..

0. 기본정보#스파르타코딩클럽 #부트캠프 #주말자습- 학습주제: 자바스크립트 기초 (강의 출처: youtube 입문자를 위한 자바스크립트 기초 by 유노코딩)- 학습내용: createElement, appendChild, append- 특별사항: (없음)- 학습일: 2024. 5. 12.1) createElement 코드 작성 - 브라우저 상 변화 없음 2) newDiv를 DOM에 추가 - appendchild ==> 브라우저 변화 있음!- area 안에 div 3개 추가 확인 3) newDiv 속성 조작하기 - 자바스크립트 style 조작법 4) newDiv를 DOM에 추가 - append 사용! ==> appendChild 와 동일하게 작동됨! 5) appendChild vs. append (차이점)..

0. 기본정보#스파르타코딩클럽 #부트캠프 #주말자습- 학습주제: JavaScript 문법- 학습내용: Null 병합 연산자('??')- 참고자료: 모던 자바스크립트 https://ko.javascript.info/nullish-coalescing-operator- 학습일: 2024. 5. 11.Null 병합 연산자 : '??'null 병합 연산자 ('??')를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있음x = a ?? b/* ??연산자 없이 동일한 동작을 하는 코드x = (a !== null && !== undefined) ? a : b;*/a가 null도 아니고 undefined도 아니면 a그 외의 경우는 b(다른 예시)let firstName = null;l..

0. 기본정보#스파르타코딩클럽 #부트캠프 #주말자습- 학습주제: JavaScript 문법- 학습내용: 화살표 함수- 참고자료: 모던 자바스크립트https://ko.javascript.info/arrow-functions-basics- 학습일: 2024. 5. 11.화살표 함수 기본- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있음- 화살표 함수라는 이름은 문법의 생김새를 차용한 것- 아래는 화살표 함수의 기본 예시 👇 👇let sum = (a, b) => a + b;/* 위 화살표 함수는 아래 함수의 축약 버전입니다.let sum = function(a, b) { return a + b;};*/console.log( sum(1, 2) ); // 3'function' 삭제매개변수를 감싼..

0. 기본정보#스파르타코딩클럽 #부트캠프 #주말자습- 학습주제: JavaScript 문법- 학습내용: 논리 연산자(||, &&, !)- 참고자료: 모던 자바스크립트 https://ko.javascript.info/logical-operators#ref-847- 학습일: 2024. 5. 11. 논리연산자 종류: ||(OR), &&(AND), !(NOT)논리연산자 정의: 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있음. 연산 결과 역시 모든 타입이 될 수 있음cf. falsy값 : false, 0, "", null, undefined, NaN 1) OR 논리연산자 (||)전통적인 방식(=피연산자가 불린형인 경우)- 인수 중 하나라도 true 이면 true를 반환하고, 그렇지 않으면 false를 ..

0. 기본 정보#스파르타코딩클럽 #부트캠프 #18일/94일  👇 더보기0. 개강 및 OT1. 팀 소개 페이지 미니 프로젝트2. 프로그래밍 기초     2-1. 개인과제      2-2. 팀 과제 ◀️◀️◀️◀️ 여기!3. 주특기 기초     3-1. 주특기 입문     3-2. 주특기 숙련     3-3. 뉴스피드 프로젝트4. 주특기 심화     4-1. 주특기 심화     4-2. 아웃소싱 프로젝트5. 주특기 플러스     5-1. 주특기 플러스     5-2. 심화 프로젝트6. 최종 프로젝트7. 지원 주차1.  팀프로젝트 설명- 프로젝트 기간: 2024. 5. 1.~ 5. 9.(총 10일)- 프로젝트 목표:1) Javascript 과정을 마무리하며, 팀원들과 함께 JS 문법의 핵심을 적용해 볼 수 ..

0. 기본정보#스파르타코딩클럽 #부트캠프 #17일/94일- 학습주제: 자바스크립트 기초 (강의 출처: youtube 입문자를 위한 자바스크립트 기초 by 유노코딩)- 학습내용: addEventListener- 특별사항: JS 개인과제 CSS : grid- 학습일: 2024. 5. 8.2. 배운 내용 요약1) addEventLiistener - 실습 내용 참고★본 메소드를 활용해 이벤트 핸들러 등록장점 : 1) 이전에 추가한 이벤트 핸들fj를 제거할 수 있는 대응 메소드 존재 - removeEventListener          2) 같은 리스너(target)에 대해 다수의 핸들러 등록 가능 - btn1, btn2, btn3 동일한 핸들러 사용(=적용) 가능          3) 추가적인 옵션 사항들 제..

0. 기본정보#스파르타코딩클럽 #부트캠프 #16일/94일- 학습주제: 자바스크립트 기초 (강의 출처: youtube 입문자를 위한 자바스크립트 기초 by 유노코딩)- 학습내용: window.prompt, 템플릿 리터럴, 복합 대입 연산자, document 접근, 조작- 특별사항: JS 팀프로젝트 마무리 (발표 D-2)- 학습일: 2024. 5. 7.1. 배운 내용 요약1) 템플릿 리터럴 - 백틱(``)- 표현식을 내장할 수 있는 문자열 표현법 (문자열의 내용에 데이터를 삽입하겠다는 뜻)- 데이터를 대신해 사용될 수 있는 것이라면 무엇이든 템플릿 리터럴에 삽입 가능 (예: 변수, 메소드)- 플레이스홀더( ${} ) 활용실습내용✍️더보기템플릿 리터럴 안에 변수와 숫자도 가능할까? Yes! 템플릿 리터럴 안에..

0. 기본정보#스파르타코딩클럽 #부트캠프(휴무)_어린이날대체공휴일- 학습주제: 자바스크립트 기초 (강의 출처: youtube 입문자를 위한 자바스크립트 기초 by 유노코딩)- 학습내용: 객체(object), 주석 방법, 콘솔(console), 코드의 구문, 변수- 특별사항: 작업 환경 개선- 학습일: 2024. 5. 6.History더보기스파르타코딩클럽에서 제공한 「Javascript 문법 종합」 강의가  입문자인 나에게는 다소 불친절했다(=기초적인 작동 원리, 상식까지 알려주지는 않았다). 프론트엔드 A to Z까지 다 알려줄 것처럼 홍보 했지만, 중간 수준인 'N' 또는 'O'수준에서 강의가 진행됐다. 안타깝게도 나의 수준은 정말로 A단계였고, 나에게는 모든 것을 하나 하나 설명해줘야 하는, 말 그대..

0. 기본정보#스파르타코딩클럽 #부트캠프 #경과훈련일_14일/94일- 학습주제: 「자바스크립트 종합반」 (4주차)- 학습내용: 콜백함수- 특별사항: [팀회의] 자바스크립트 팀과제 - 영화목록 홈페이지 만들기 - 2일차- 학습일: 2024. 5. 2.1. 팀프로젝트 활동 내용1) 기능 삭제 - 메인페이지 검색창의 유효성 검사2) 본인 역할 축소(=선택과 집중)에 문자 입력 후 클릭하면 input.value(=입력창의 입력값) 받기input.value로 TMDB 서버에서 영화 title 검색 기능을 fetch(=불러오기)fetch 값을 두번째 레이아웃(=검색 결과 화면)으로 넘기는 로직을 고민해보기 2. 오류 일지1) 팀 공유 github branch 버그/충돌 ==> 수정 작업 전 new branch 생..

0. 기본정보#스파르타코딩클럽 #부트캠프 #경과훈련일_13일/94일- 학습주제: 「자바스크립트 종합반」 (4주차)- 학습내용: 콜백함수- 특별사항: [팀회의] 자바스크립트 팀과제 - 영화목록 홈페이지 만들기- 학습일: 2024. 5. 1.1. 배운 배용 요약 - 콜백함수 기초2) 콜백 함수의 제어권(1) 호출시점 - 아래 게시글 참조https://joymet33.tistory.com/16 (2) 인자 - 예시 : map()- map 메서드를 호출해서 원하는 배열을 얻고자 한다면 정의된 규칙대로 작성해야 함- 인자(의 순서)까지도 제어권이 콜백 함수를 넘겨받은 코드에게 있음 (3) this- 콜백함수도 함수이기 때문에 this가 전역객체이나 예외사항이 있음- 제어권을 넘겨받을 코드에게 콜백 함수에 별도로 ..

0. 기본정보#스파르타코딩클럽 #부트캠프 #경과훈련일_12일/94일- 학습주제: 「자바스크립트 종합반」 (4주차)- 학습내용: 콜백함수- 특별사항: [재제출] 자바스크립트 개인과제- 학습일: 2024. 4. 30.1. 배운 배용 요약 - 콜백함수 기초 1) 콜백 함수 개요콜백 함수는 다른 함수의 인자로 전달되어, 특정 이벤트가 발생했을 때 호출되는 함수즉, 제어권을 가지고 있는 함수가 콜백 함수를 호출하는 것이를 통해 비동기 처리, 이벤트 핸들링, 고차 함수 등 다양한 프로그래밍 기법을 구현할 수 있습니다.2) 콜백 함수의 기본 개념함수 전달: 콜백 함수는 다른 함수의 인자로 전달됨. 이때 함수 자체가 전달되는 것이지, 함수의 실행 결과가 전달되는 것은 아님.제어권 위임: 콜백 함수를 호출하는 권한은 콜..

0. 기본정보#스파르타코딩클럽 #부트캠프 #경과훈련일_11일/94일- 학습주제: 「자바스크립트 종합반」 (3주차)- 학습내용: 실행 컨텍스트(스코프, 변수, 객체, 호이스팅)- 특별사항: [제출] 자바스크립트 개인과제- 학습일: 2024. 4. 29.1. 배운 배용 요약 - 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체- 실행 컨테스트 객체 종류 :VE(VariableEnvironment) : record, outer, snapshotLE(LexicalEnvironment) : record, outer, 변경사항 실시간 반영ThisBinding 1) LE (LexicalEnvironment)(1) environmentRecord(=record)와 호이스팅(hoisting, 끌어올리기)..

열심히 강의만 들으면 뭐하노, 응용할 줄 모르는데🤦‍♀️ (응용할 줄 모른다면 그 개념은 모르는 거다) 0. 변수 주요 개념 변수 이름 : 저장된 값의 고유 이름 (예: mypostingbox) 변수 값 : 변수에 저장된 값 변수 할당 : 변수에 값을 저장하는 행위 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 (예: let a = 2) 변수 참조 : 변수에 할당된 값을 읽어오는 것 1. 변수 선언 JS문법 같은 이름 여러 번 선언 가능 예시 기타 (덮어쓰는 방법) var o var a = 1; var a = 3; console.log(a); // 3 가장 마지막에 선언한 값으로 변수 덮어씌움 let x let b = 5; b = 9; console.log(b); // 9 가장 마지막에 선언한..

0. 기본 정보 - 학습출처: 「웹개발종합반」 (4~5주차), 「javascript종합반」 (1주차) - 학습내용: github 활용(베포용 https 만들기), javascript 언어의 특징과 역사, 기본문법 - 학습일: 2024. 4. 22. 1. 오류 내용 github과 연결하여 베포용 https를 만들어보려고 했지만 오류가 났다. 2. 해결 방법 https://joymet33.github.io/firebase/08_fire(2)/1_spartaflix_server.html 3. 오늘의 회고 - 칭찬: 실력 좋은 동료들을 만나 동기부여를 받음 - 반성: ① 주말 공부시간 증발, ② 수면시간 부족 (결론은 시간을 허투로 보냈다는 점) - 보충: ① 아침시간 활용 7:00~9:00 (2시간), ② 2..

0. 기본정보- 학습출처: 스파르타코딩클럽 「웹개발종합반」 (3주차 ~ 4 1/2주차)- 학습내용: jQuery+Fetch 활용, firebase 개념 및 데이터 넣기 ('데이터 가져오기' 는 다음 강의에😉) - 오류내용: 백틱(``) 사이 값 - 학습일: 2024. 4. 19.1. 배운 내용 요약오늘은 jQuery와 Fetch에 대해 배웠다. 음.. 많이 배웠지만 정확히 뭘 배웠는지 기억이 안 나서 복습 차원으로 오늘은 간략하게 배운 내용을 정리해보고, 그 다음에 항해 일지를 적어보겠다.("TIL = 복습"  끄적끄적✍️)1) jQuery- 한줄 개념: 자바스크립트 작업을 간소화해 생산성을 향상 시켜주도록 설계된 자바스크립 라이브러리(=남들이 만든 코드 모음)- 참고 블로그: 제이..

0. 기본 정보 - 학습출처: 스파르타코딩클럽 「웹개발종합밥」 (2주차) - 학습내용: CSS 활용, JavaScript 개념 및 기초 문법 - 학습일: 2024. 4. 18. 1. 오류 내용 & 문제 해결하기 1) 구글 폰트 적용하기 CSS의 활용 두번째 시간인데 구글 폰트 적용이 또 말썽이다. 원인은 바꾸고자 하는 폰트를 두 번 지정했기 때문이다. (브라우저 전 구역의 글자를 지칭하는 '*'와 class = do-hyeon-regular 두 가지가 충돌하고 있어서 폰트가 적용이 안 되었던 것이다.) * { .do-hyeon-regular { font-family: "Do Hyeon", sans-serif; font-weight: 400; font-style: normal; }} 구글 폰트 원문에서 복..

0. 기본 정보 - 학습출처: 스파르타코딩클럽 웹개발종합반(1주차) - 학습내용: HTML 기초, CSS 기초, 부트스트랩 활용 - 학습일: 2024. 4. 17. 1. 오류 내용 인프런 강의 「처음 만난 리액트」를 들으면서 가벼운 실수를 몇 차례 반복했다. 튜터의 해설이 제대로 이해가 되지 않아 재질문했다. 알고보니 내 실력이 부족한 탓이었다. 담임 매니저와 상담 후 인프런 강의 대신 웹개발종합반 강의를 듣는 것으로 결정했다. 2년 전에 완강했던 강의라 자신있었다. 하지만 착각이었다. 부트스트랩 실전편에서 허덕였다. 아래는 문제의 부트스트랩 오류 페이지다.