내가 보려고 쓰는 기록

이번주는 프로젝트 기간이다. 우리팀은 인스타그램을 클론코딩 하기로 했고 4명이 각각 홈, 탐색탭, 메시지, 알림을 맡기로 했다 나는 탐색탭 담당! 탐색탭은 레이아웃 설계, 무한스크롤만 잘 구현하면 어렵지 않을 것 같았는데 레이아웃이 규칙적이면서도 규칙적이 아닌 느낌이라 설계하는게 은근 어려웠고 무한스크롤도 처음 보는 메소드들이라 좀 생소했다 그래도 새로운 메소드를 활용할 수 있어서 많은 도움이 됐다! https://lovely-stroopwafel-17c7b3.netlify.app/home_final.html 무한스크롤 무한스크롤을 구현하기 위해서는 3가지 메소드가 필요하다. ● window.innerHeight : 브라우저 창의 높이 ● window.scrollY : 스크롤한 값 ● document.d..

오늘은 부트스트랩 / css 변수, 미디어 쿼리에 대해서 배운 날 ~_~ Bootstrap 부트스트랩의 장점은 레이아웃을 쉽게 설계할 수 있다는 것, 반응형 웹을 만들기 좋다는 것 등이 있다. html, css로 하나하나 만들어야 될 것들을 복붙만하면 쉽게 만들 수 있어서 귣... 가장 많이 사용하는 네비바, 모달, 카드, 버튼, 캐러셀, 그리드 등을 사용해 실습을 진행했다. class의 이름에 따라 화면 비율이 달라짐 container 중 가장 많이 사용한다는 container-fluid ● Navbar, Modal, Card, Carousel, Gutters을 사용해서 간단한 메인화면 만들기 실습 버튼을 눌렀을 때 모달창을 실행시키기 위해서는 모달 class == 버튼 data-bs-toggle 모달..

const callback = []; for (var i = 0; i 5); } callback.forEach((cb) => console.log(cb())); // 출력: 5 5 5 5 5 5 const callback = []; for (let i = 0; i i); } callback.forEach((cb) => console.log(cb())); // 출력: 0 1 2 3 4 5 위 두 코드의 차이점은 for문 안의 var, let 이다. var를 쓰면 5만 5번 출력되고 let을 쓰면 0부터 5까지 출력된다 (왜지) 위 코드들에서 배열에 push로 화살표 함수를 넣는 것부터 이해가 안됐다. 반복문써서 배열에 push할땐 callback.push(2) 이렇게 숫자만 직접적으로 넣어봤기때무네... ..

마우스 이벤트 click - 클릭했을 때 dbclick - 더블클릭했을 때 mouseover - 마우스를 요소 위로 움직였을 때 mouseenter - mouseover과 같은 기능, 버블링이 발생하지 않음 mouseout - 마우스가 요소를 벗어날 때 mousedown - 마우스 버튼을 누르고 있는 상태 mouseup - 마우스 버튼을 떼는 순간 * 마우스 토글시 mouseover, mouseout 이벤트 같이 주면 됨 클래스 이름이 같은 버튼 중 하나만 선택하고 싶을때는 this 사용 * this : 함수가 속해 있던 객체(자기자신)를 참조 (나만 선택됨) //버튼여러개 있을때 하나만 적용시키기 this const btns = document.querySelectorAll('.btns'); //cla..

어제 이어서 오늘도 자바스크립트 수업을 했다. 어렵다고 느껴왔던 반복문은 여전히 헷갈리긴 했지만 선생님이 꾸준히 반복하면 괜찮을 거라고 하셨다. 하핫 사용자로부터 데이터 입력받는 함수 prompt prompt로 입력받은 값은 모두 문자형! (숫자 변환 필요시 형변환 필요) 만약 prompt로 받은 값이 홀수인지 짝수 판별하려면? 먼저 prompt를 변수에 담고 숫자로 형변환 후 if문 or 삼항연산자로 조건주면됨 for문 for ( 초기값; 조건식; 증감값 ){ // 조건식의 결과가 참인 경우 반복할 코드 } * 초기값 : 어디서부터 시작할건지 조건식 : 어디서부터 어디까지 (조건이 안맞으면 for문 종료) 증감값 : 얼마나 증감 for문 활용 ✔ 1부터 10까지 더하기 for문 밖에 합계를 담을 변수 ..

css에서 가장 헷갈리는 display 속성을 배웠다. 보통 display, align-items, justify-content 세 가지를 이용해 레이아웃을 설계하는데 쓸 때마다 어렵고 헷갈린다. 그래도 오늘 수업을 통해 조금은 감이 잡혔다. css 끝나고 자바스크립트도 조금 배웠는데 새롭게 알게 된 부분도 많았다. 앞으로 배워야할 jQuery, node, react 모두 자바스크립트를 기반으로 하기때문에 내일부터 진짜 초집중 해야겠다. ● CSS 복합선택자 :first-child{ } //첫째 :last-child{ } //막내 :nth-child(n){ } //n번째 :not(특정태그){ } //특정태그 제외 :nth-child(odd){ } //홀수번째 태그 :nth-child(even){ } //..

sort( ) - 배열 정렬(내림차순, 오름차순) console.log([1,6,5,33,7,111].sort((a,b)=>a-b)) // 오름차순 [ 1, 5, 6, 7, 33, 111 ] console.log([1,6,5,33,7,111].sort((a,b)=>b-a)) // 내림차순 [ 111, 33, 7, 6, 5, 1 ] indexOf( ) - 배열에서 특정 요소를 찾아 인덱스 반환, 특정 요소 존재하지 않으면 -1 반환 * 배열안에서 요소의 순위 구할 때 사용 (프로그래머스 코테 입문 중 진료순서구하기 문제) const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // 1 (첫..

input 태그 속성 type : input 태그의 종류 value : input 태그의 초기값 name : 제출시 서버로 전달되는 이름 placeholder : 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말 버튼 기능 구현을 위해 필요한 state들 1. text state : input에 입력한 값 저장할 state 2. name state : 버튼 누를 때 text state값 저장할 state 위의 기능 구현을 위해 필요한 function들 1. onChange : input에 입력한 값 text state에 넣어주는 함수 2. onClick: 버튼 눌렀을 때 text의 값 name state에 넣어주는 함수 ex) state와 function들 const [text,s..