내가 보려고 쓰는 기록

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

오늘은 어린이날 빨간날 쉬는날 꺅 앨범을 너무 오랫동안 안털어서 쌓이고 쌓였다 퇴원하고 첫끼로 먹은 추어탕.. 원래 추어탕 안좋아했는데 싹싹 긁음 퇴원한지 얼마 안돼서 내가 먹을 수 있는 메뉴 앨범에 벚꽃 사진 너무 많아서 삭제했다 퇴원하고 자꾸 집에 도넛 생김 괜찮아 엄마가 행복해보였어 응 못먹어~ 고구마나 먹어~ 코딩온 면접보러 서울 올라간 날 원래 같으면 근처 맛집 검색해서 갔을텐데 근처에서 샐러드 사먹었다 식탐을 억제하는 법 터득 터미널에섴ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 퇴원하고 제일 많이 먹은 음식 브토달볶 오랜만에 나주가서 곰탕 먹고 유채꽃밭 가서 꽃구경하고 집와서 또 브로콜리 보라 광주온날 월남쌈 배터지게 먹고 보라 앞치마 사야된대서 모던하우스 갔는데 면 100% 면 1000%ㅋㅋㅋㅋㅋㅋㅋ이거 사가심 지겹..

오늘은 부트스트랩 / 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 (첫..