javascript16 [WIL 2023.06.11] 내배캠 4주차 📝 Situation(상황): 이번주 목표 지난주 개인과제로 만들었던 영화검색 사이트를 develop 영화별 상세 페이지와 상세페이지 내 댓글 기능을 필수로 하여 팀으로 사이트 완성하기 👀 Task(임무): situation 중 문제들 그 중 나는 local storage를 이용하여 댓글 기능을 만드는 역할을 맡았다. 댓글의 CRUD 구현하기와 댓글창 UI를 깔끔하게 만드는데에 목표를 두었다. 🔍 Action(접근방법): 해결시도 먼저 폼태그 안에 인풋창을 두어 제출란을 만들었다. // 코멘트 표시 function displayComments() // 코멘트 HTML 생성 function createCommentHTML(comment, index) // 새 코멘트 저장 function saveCommen.. 2023. 6. 12. [TIL 2023.06.09] Javascript call(), apply(), bind(), 팀과제 KPT 💻오늘 배운 내용 call(), apply(), bind() 세 함수는 모두 함수에서 this로 사용할 객체를 명시적으로 지정하여 실행되도록 해준다. call() 함수객체에 미리 정의되어 있는 함수로 첫번째 인자로 객체를 주는데 call()을 호출하는 함수가 인자로 주어진 객체에 딸려 있는 객체 처럼 동작하게 한다. 사용방법은 element.call(thisArg[, arg1[, arg2[, ...]]]) 첫 번째 인자는 함수를 소유하는 객체를 지정하고, 두 번째 부터는 옵션으로 필요하다면 함수로 보내는 인자를 지정할 수 있다. apply() call() 메소드와 기능은 동일. 차이점은 인자로 객체와 인자배열을 받는다는 것. bind() 인수로 주어진 객체를 this로 사용하는 함수를 반환한다. 반환된 .. 2023. 6. 10. [TIL 2023.06.08] css 가상선택자 / javascript 요소의 속성 값을 정의하는 메서드 💻오늘 배운 내용 css 가상 선택자 / 가상 요소 선택자 1. 가상 클래스 선택자 (pseudo-class) 먼저, 가상 클래스 선택자(pseudo-class)는 HTML 문서에 작성된 요소에 가상의 클래스를 만들어 부착할 수 있다. 가상 클래스 선택자의 종류는 다음과 같다. 1 :active ,과 함께 사용하는 경우가 많다. 사용자가 활성화한 요소를 나타낸다. (마우스로 요소 클릭 시) 2 :only-child 형제가 없는 요소를 선택할 때 사용된다. :first-child:last-child 와 동일하다. 3 :hover 마우스 커서가 올라가 있을 때(마우스 오버)선택된다. :link, :visited, :active를 함께 쓴다면 css작성시 순서에 주의해야 한다. 4 :only-of-type 같.. 2023. 6. 9. [TIL 2023.06.07] localstorage 페이지 당 각각의 댓글창 구현하기 ❓발생한 이슈/고민 자바스크립트와 로컬스토리지를 이용한 댓글 CRUD 기능은 다 구현이 되었지만 각각의 영화 페이지 마다 고유의 댓글창이 나와야 하는데 모든 페이지에 똑같은 댓글이 나타나는 문제 발생 💡해결과정 문제를 해결하기 위해서는 현재의 코드에서 4가지 수정사항이 필요했다. 1. 각 영화 페이지마다 고유한 식별자를 가지고 있어야 한다. 각 영화 페이지의 URL을 사용하여 고유한 식별자를 만들어서 댓글을 구분하는데 사용할 것. 2. localStorage를 사용하여 댓글을 저장할 때, 식별자를 함께 저장해야 한다. 기존의 comments 배열 대신 객체 형태로 댓글을 저장해야 한다. 객체의 속성으로는 영화Id, username, comment, password를 포함 3. displayComments.. 2023. 6. 8. [WIL 2023.06.04] 내배캠 3주차 📝 Situation(상황): 이번주 목표 개인 과제인 영화 검색 페이지 만들기가 이번 주의 목표였다. 저번주 한 주간 자바스크립트 학습한 이론강의를 몸소 손으로 익혀보는 시간이었다. 역시 가만히 앉아서 강의를 듣는 것과는 달라서 여러 고비를 만났다. 👀 Task(임무): situation 중 문제들 1. 데이터가 불러와지지 않는 문제 2. 데이터를 불러와서 카드 생성은 어떻게 하는 것? 3. 검색기능은 어떻게 만드는 것인가 4. 무한루프 하는 자동슬라이드를 만들기 5. 요소들 위치 조정 및 css 수정 🔍 Action(접근방법): 해결시도 위 문제들의 답을 찾기 위해 가장 먼저 찾았던 것은 구글 검색이었다. 오픈 api라는 개념 조차 무엇인지 생소했기 때문에 단어의 의미부터 파악했으며 이후 이걸 코드로.. 2023. 6. 7. [TIL 2023.06.05] Javascript localStorage를 이용하여 댓글 기능 만들기 💻오늘 배운 내용 localStorage란? 브라우저에 key-value 값을 Storage에 저장할 수 있다. 세션이 바뀌어도 저장한 데이터가 유지된다. setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 삭제 length - 전체 item 개수 key() - index로 key값 찾기 localStorage는 문자열만 저장할 수 있다. [객체->문자열] 객체를 저장하려면 JSON.stringify() 메서드로 문자열로 변환한 다음 저장해야 한다. [문자열->객체] 반대로 저장된 문자열 값을 가져와서 다시 객체로 변환하려면 JSON.parse() 메서드를 사용한다. ❓.. 2023. 6. 7. [TIL 2023.06.01] 영화 검색 페이지 완성! 제출 전 다듬기 (GOE’s CINEMA) 💻오늘 배운 내용 replace() str_text.replace("찾을 문자열", "변경할 문자열") 정규표현식 str_text.replace(/찾을 문자열/gi, "변경할 문자열") 정해진 규칙을 사용해 모든 문자를 변환할 수도 있고 숫자만 변환하거나 맨 처음, 맨 뒤만 변환할 수 있음 슬래쉬(/) 표시 안에 넣는 텍스트의 따옴표는 없어야함 gi의 의미 g : 전체 모든 문자열 변경 (global) i : 영문 대소문자를 무시, 모두 일치하는 패턴 검색 (ignore) 특수 기호를 맨처음 적을 때는 항상 역슬래쉬(\) 부분이 정규식 맨 앞에 존재 해야함 str_text.replace(/\./gi, "-") 기호의 뜻을 풀어보자면 1] /문자열/ (이제 정규식을 사용할건데)- ’/’ 슬래쉬는 정규 표현.. 2023. 6. 2. [TIL 2023.05.31] 순수 자바스크립트로 무한루프 자동 슬라이드 만들기 (GOE's CINEMA) 💻오늘 배운 내용 a.cloneNode() a요소를 그대로 복사 // a.cloneNode(true) a요소에 자식요소까지 모두 복사 a.prepend() a요소의 앞에 추가 setInterval() 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 예) 콘솔에 현재 시간을 2초마다 출력 ❓발생한 이슈/고민 무한루프 하는 자동슬라이드를 만들려고 한다. 20개의 카드들이 있고 그 앞뒤로 똑같은 20장의 카드를 복사한 뒤, -방향으로 한장씩 이동하는 애니메이션을 transition과 자바스크립트로 동작하게 한다. 그리고 기존카드의 마지막 카드가 카드들을 담고 있는 컨테이너의 첫번째에 오는 순간 슬라이드의 위치가 다시 처음으로 되돌아가는.. 2023. 6. 1. [TIL 2023.05.30] 자바스크립트 검색기능 (GOE’s CINEMA) 💻오늘 배운 내용 insertAdjacentHTML() element.insertAdjacentHTML(position, text); 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입 요소 변경이 아닌 요소 삽입만을 해야 하는 상황 position의 값은 beforebegin, afterbegin, beforeend, afterend만 사용할 수 있다. trim() 문자열 좌우에서 공백을 제거하는 함수 var a = " 가 나 다 라 마 " a.trim() //"가 나 다 라 마" replace() 문자열에서 변경하려는 문자열이 여러 번 반복될 경우, 첫 번째로 발견한 문자열만 치환 apple, banana, banana' 이렇게 'banana'가 여러 번 반복될 경우.. 2023. 5. 31. [TIL 2023.05.29] 영화 검색 페이지 만들기 (GOE’s CINEMA) 목차 💻오늘 배운 내용 ❓발생한 이슈/고민 💡해결과정 🧐궁금점과 부족한 내용 📋레퍼런스 💻오늘 배운 내용 CSS grid 사용 그리드 사용 방법은 의외로 간단했다. display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 2%; display를 grid로 두고 columns(가로), rows(세로) 값을 설정해주면 된다. 만약 간격을 주고싶다면 grid-column-gap 또는 grid-row-gap을 사용 fr이라는 단위는 fraction(뜻은 여기로)이라는 의미로 숫자 비율대로 트랙의 크기를 나눈다. 오픈 api를 이용해 바닐라 자바스크립트로 영화 카드 생성 결론은 웹개발 종합반에서 배웠던 내용을 응용해서 살짝만 변형한다면 굉장히.. 2023. 5. 30. [WIL 2023.05.28] 내배캠 2주차 📝 Situation(상황): 이번주 목표 자바스크립트 5주차까지 완강 개인과제 와이어 프레임 구성 및 Starting Assignments 작성 👀 Task(임무): situation 중 문제들 자바스크립트 이론 강의를 들으며 개인적으로 궁금했던 사항 중에 강의 안에서 해결되지 않았던 내용들이다. 프레임워크 vs 라이브러리 차이점 nodemon의 사용 자바 스크립트에서 ‘=’ ‘==’ ‘===’ 의 차이점 부족한 사고력? 컴퓨팅 사고와 개발실력을 늘리는 공부법 함수 표현식에서의 호이스팅 과정 문제사항이 생길 때 먼저 구글링을 해보고 그래도 이해가 잘 되지 않으면 튜터님에게 질문을 하는 방식으로 풀어갔다. 이번 주에 가장 충격 받은 순간은 개인 과제 발제 때가 아닐까 개인 과제라고 해서 그냥 알고리즘 문.. 2023. 5. 29. [TIL 2023.05.26] this의 정의, 활용방법, call, apply, bind 목차 💻오늘 배운 내용 ❓발생한 이슈/고민 💡해결과정 🧐궁금점과 부족한 내용 💻오늘 배운 내용 this 객체지향 언어에서의 this는 곧 클래스로 생성한 인스턴스 💡 비슷한 성질을 가진 여러개의 객체를 만들기 위해, 일종의 설계도라고 할 수 있는 생성자 함수(Constructor)를 만들어 찍어내듯 사용하는데 이렇게 생성된 객체를 인스턴스 생성자 함수(Constructor) = 거푸집 인스턴스 = 거푸집으로 찍어낸 칼 this는 실행 컨텍스트가 생성될 때 결정된다. 즉, bind 한다. this는 함수를 호출할 때 결정된다. 1] 전역 공간에서의 this 전역객체를 가리킨다 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경) 2] 메소드 내부에서의 this 함수와.. 2023. 5. 27. 이전 1 2 다음
