코딩하는 복서 🥊

유튜브 보다가 우연히 이벤트 루프에 대한 발표영상을 보고 이벤트 루프가 뭔지 그리고 콜백함수가 왜 중요한지 간략하게 개념 한번 더 잡아보려한다. 먼저 자바스크립트의 싱글 스레드 메커니즘에 대한 GPT의 설명을 보자. 자바스크립트는 주로 싱글스레드(single-thread) 환경에서 동작하는 프로그래밍 언어입니다. 이는 자바스크립트가 한 번에 하나의 작업만 처리할 수 있다는 의미입니다. 이 동작 원리를 이해하려면 몇 가지 개념을 알아야 합니다. 이벤트 루프(Event Loop): 자바스크립트 엔진은 이벤트 루프를 통해 비동기 작업을 관리합니다. 이벤트 루프는 콜 스택(Call Stack), 백그라운드(Background), 태스크 큐(Task Queue)로 구성됩니다. 콜 스택(Call Stack): 실행..

1. 파이어스토어 > 게시물 콜렉션 > 좋아요 필드 추가 - 게시물을 생성할 때, 게시물마다 좋아요 수 및 좋아요한 유저(id)를 담을 수 있는 배열 추가. - 업데이트 될때마다 관련없는 데이터까지 불러오는게 싫으면 콜렉션을 따로 만들어도 됨. /* firestore 추가 */ const docRef = await addDoc(collection(db, "feeds"), { createdAt: Timestamp.now(), creatorId: nowUser.id, feedText: feedText, imgUrl: imgUrl, nickName: nowUser.nickName, likes: { likeUsers: [], likeCount: 0, }, comments: [], }); 아래처럼 추가됨 2. 좋..

0. 들어가며 로그인창, 회원가입단에서 사용자가 입력창에 값을 넣었는지 안넣었는 지를 확인해야 한다. 이때, trim().length로 확인하지 않으면 의미없는 띄어쓰기를 입력해도 텍스트로 인식한다. 1. tirm() trim은 입력값 앞 뒤의 공백을 제거하는 메소드이다. const word = " hello " word.trim() === "hello" 2. 예시 아래는 사용자가 input 창에 값을 입력했는지 안했는지 판단하여 리스트에 추가하는 함수다. 조건 1) 아무 값도 입력하지 않으면 값 입력하라는 모달을 띄운다. 2) Age를 0이하 즉, 음수로 입력하면 나이를 잘못입력했다는 모달을 띄운다. 3) 이름, 나이(음수 아님) 모두 입력한 경우만 제출 함수가 실행 1번 컨디션 const handle..

1. 어떻게?state를 통해 버튼을 누르면 완료될때까지 버튼의 클릭 기능을 없애서 중복 클릭을 못하게 함. 2. 적용1) 불리언 타입의 State 를 만들어 준다. const [isBtnDisable, setIsBtnDisable] = useState(false); 2) 버튼의 state (true, false) 두가지 상태를 정의해준다.*여기선 버튼 대신 이미지를 사용하였다. *클릭 후 처리 중엔 아예 클릭이 불가능하게 하였다. - 클릭 전 (onClick 프로퍼티가 있음)isBtnDisable === false 일 때 버튼은 이렇고 // isBtnDisable === false && - 클릭 후 (onClick 프로퍼티가 없음)isBtnDisable === true 일 때 (클릭 후) 버튼은 이렇다..

좌,우로 넘어가는 배너가 아닌 CSS의 z-index를 활용하여 앞,뒤로 넘어가는 배너를 만들어보자 1. z-index란?CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.=== Z축 순서를 정하는 속성이라고 한다. 1) 그럼 Z축은 무엇인가?보통 X축이 가로, Y 축이 세로일때 앞뒤축이 Z축이다. 2) demo를 통해 z-index의 역할을 알아보자.- auto는 부모요소의 순서를 그대로 따른다. - 숫자가 들어갈 경우, 숫자가 높은게 더 앞에서 보이는 것을 알 수 있다.=== z-index의 숫자를 높이면 앞으로 튀어나온다. 그럼 이걸로 뭘 할 수 있다? 옆으로 넘어가는게 ..

1. 수동 슬라이드 배너 만드는 방법은 지난 포스팅 참고 https://stukkifather.tistory.com/51 [html, css, js] 초간단 슬라이드 배너 (캐러셀) 만들기 1. 슬라이드 원리 1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 stukkifather.tistory.com 2. 자동 슬라이드를 만들어보자 1) 기존에 만들어둔 함수를 활용 2) setInterval 함수를 활용, 2초마다 넘어가고 마지막 장이면 처음으로 돌아가도록 세팅 setInterval(()=>{ if(currentSlide ..

1. 슬라이드 원리1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 이동 2. HTML 작성1) 슬라이드는 4개 준비 2) 이전 버튼, 다음 버튼도 빠지면 섭함 3) 아이콘은 폰트어썸(fontawesome)에서 연결 DOCTYPE html> new_slide 3. CSS 작성1) float: left 로 이미지를 가로열로 정렬 .slide_item { float: left; } 2) 슬라이드에 한장 크기로 width를 정하고 넘치는건 숨기는 overflow: hidden 시전 (이쁘게 센터도 잡음) - 여기서 배너 수가 많아..

1. if, else if 를 활용한 계산기 만들기 // calculator 만들기 // command, a, b 인수 받기 // command는 add, subtract, multiply, divide const calculator = function(command, a, b){ let result = 0; if(command === 'add'){ result = a+b return console.log(result) }else if(command === 'subtract'){ result = a-b return console.log(result) }else if(command === 'multiply'){ result = a*b return console.log(result) }else if(comm..

1. Generator (feat. yield) - 함수의 실행을 중간에 멈췄다가 다시 실행할 수 있다. - 여러 값을 필요에 따라 하나씩 반환할 수 있다. - function* : 이렇게 function 오른쪽에 * 을 붙여서 만든다. - 내부에 yield 키워드를 사용하여 함수의 실행을 멈출 수 있다. - generator 실행하면 코드가 실행되는게 아니라 generator 객체가 반환됨 // generator yield next function* fn1(){ console.log(1) yield 1; console.log(2) yield 2; console.log(3) console.log(4) yield 3; return "finish"; } const test = fn1(); console.lo..

1. 조건문 if 문 (if, else if, else) 선언 방법: if(1번 조건){1번 true면 실행할 내용} else if(1번 조건 false일 때 2번 조건) {2번 조건 true면 실행할 내용} else{2번 조건까지 false일 경우 실행할 내용} if(조건)안의 값은 항상 불린 값으로 반환됨 조건문 안에서 == 또는 === 써야하는데 버릇처럼 = 로 쓰는 실수 주의! if문 요약: 조건 ? ture : no // 맞으면 왼쪽 반환 틀리면 오른쪽 반환 2. 논리 연산자 || (OR) // shift + \ 누르면 | 나옴 여러개 중 하나라도 true면 true , 즉 모든 값이 false 여야 false 를 반환 하나만 true 면 다 true니까 첫번째 true를 찾는 즉시 평가를 멈춤..