코딩하는 복서 🥊

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

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

제네릭: 어떤 타입이 올 지 모르거나 다양한 타입이 필요한 경우, 실행하는 쪽에서 타입을 고르도록 함. // 이렇게 하나하나 적지 않고 function getSize1 (arr: number[] | boolean[] | string[] | object[]) { return arr.length; } // 실행하는 쪽에서 타입을 결정하게 함. 에 다른 대문자 써도 됨 function getSize2(arr: T[]){ return arr.length; } const arr1 = [1,2,3] getSize2(arr1) const arr2 = ["a","b","c"] getSize2(arr2) const arr3 = [{name:"cole", age: 23},{name:"jane", age: 50}] getS..

자바스크립트는 동적언어다. 즉, 런타임(실행될 때)에 타입이 결정되며 오류를 발견한다. 그러나 타입스크립트는 정적언어다. 즉, 컴파일(컴퓨터 또는 다른 언어가 읽을 수 있는 언어로 변환) 될 때 타입이 결정되며 오류를 발견한다. 0. 타입스크립트 typescript 란 다이나믹하게 이래도되고 저래도되는 망나니 javascript를 엄격하게 관리하는 일종의 에디터다. 모든 데이터의 타입을 정하여 타입 언매치로 발생하는 오류나 예상밖의 결과값을 예방할 수 있다. 1. node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vscode 설..

1. filter() 메서드란? 주어진 배열에서 조건에 맞는 모든 요소를 모아 새로운 배열로 반환합니다. 2. 사용법 const result = arr.filter(A => B); === arr(배열)에서 B 조건에 부합하는 요소 (A) 를 result 변수에 배열로 담는다.

좌,우로 넘어가는 배너가 아닌 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. flex의 속성은 아래와 같다.container에 적용되는 속성과 item에 적용되는 속성이 다르다.1.1 container 속성1) flex-wrap: 아이템을 감싸서 박스크기는 유지하면서 화면 크기에 따라 배치를 유연하게 함. *default는 nowrap *왼쪽이 nowrap, 오른쪽이 wrap 2) justify-content: 중심축 기준에서 컨테이너 안에 ITEM들 '정렬'을 어케할거냐? *flex-end 는 아이템 순서는 유지하면서 reverse (끝나는 부분에 붙어서 정렬) *space-around 는 item에 가상의 테두리를 둘러서 그 간격만큼 떨어짐(첫 간격과 마지막 간격은 중간 간격보다 작음) *space-evenly 는 item을 컨테이너 크기에 맞게 일정한 간격 유지하며 떨..

0. 들어가며 프론트 엔드를 구조적으로 보면 여러 개의 박스로 이루어져 있는데 이 박스를 CSS에서 어떻게 자리배치 할 수 있는지 알아본다. 1. display 대상이 블록(blcok) 속성을 따를 것이냐 인라인(inline) 속성을 따를 것이냐 e.g. 디스플레이 바꿔주면 박스도 줄바꾸지 않고 한줄에서 나오게 할 수 있음 ※ 디스플레이 변경 방법 셀렉터 안에 display: 원하는 상태 넣어주면 됨 1) block - 대상이 block element 속성을 따름 - 한 줄에 하나 2) inline - 대상이 inline 속성을 따름 - 한 줄에 여러개 (너비가 허용하는 한) 3) inline-block - 대상이 inline 처럼 한 줄에 나오는데 block일때 처럼 박스 형태는 유지 함. 4) fle..