코딩하는 복서 🥊

유튜브 보다가 우연히 이벤트 루프에 대한 발표영상을 보고 이벤트 루프가 뭔지 그리고 콜백함수가 왜 중요한지 간략하게 개념 한번 더 잡아보려한다. 먼저 자바스크립트의 싱글 스레드 메커니즘에 대한 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..

1. export default export default 를 하면 import 에서 '어떤 이름'을 하던 그 파일에서 가져오는 건 디폴트로 설정한 것을 가져옴. 2. export (named export) 한 파일에서 export 하는 게 많을 경우, default 없이 export somthing, export something 함 3. import 1) default가 있는 export 를 import 하는 경우 { } 쓰지 않고 가져오는 변수를 내가 이름을 정해서 쓸 수 있음. (보통 파일명과 동일하게 감. 혼선을 피하기 위해) e.g. import 내가정한이름 from './my/component' // 수입 const mydata = () => `내이름: ${내가정한이름}` // 이렇게 가져와..

자바스크립트는 동적언어다. 즉, 런타임(실행될 때)에 타입이 결정되며 오류를 발견한다. 그러나 타입스크립트는 정적언어다. 즉, 컴파일(컴퓨터 또는 다른 언어가 읽을 수 있는 언어로 변환) 될 때 타입이 결정되며 오류를 발견한다. 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 설..

useRef 를 사용하여 DOM 요소에 쉽게 접근할 수 있다. 1. 개요 마운트되었을 때부터 INPUT 창이 활성화 되어 있도록 input 태그에 focus() 메소드를 사용할 것 2. inpiut 태그를 참조할 useRef를 선언 const inputRef = useRef(); 3. input 태그에 ref={} 프로퍼티로 참조시켜 준다. 4. useEffect 로 마운트부터 포커스되도록 inputRef를 가져와 focus()를 걸어준다. *inputRef.current.focus() 는 document.getElementById('input').focus() 와 동일한 역할을 한다. useEffect(() => { inputRef.current.focus(); // document.getElement..

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

리액트의 가장 큰 특징은 컴포넌트(사용자 정의 태그)가 있다는 것 1. 컴포넌트(Component)란? 1) 재사용이 가능한 독립적인 모듈 2) 레고에서 하나의 블록 또는 한 파츠 (블록 덩어리) 3) 특정한 기능을 수행하기 위해 구성한 작은 기능적 단위 === 특정 기능을 수행하는 코드 덩어리를 '태그'로 만든 것. 2. 컴포넌트는 왜 필요한가? 1) 여기 1억줄 짜리 코드가 있다 치자 1억줄 코드 다른 1억줄 코드 또 다른 1억줄 코드 2) 이게 한 파일에 있으면 관리도 힘들고 찾기도 힘들고 가독성도 떨어지지 않을까? 3) 그래서 이걸 간단하게 태그 하나에 담는 것이다. 이런 식이나 이런 식으로 너무 깔끔하다^.^ 3. 컴포넌트 만들기 1) 쉽다 함수에 담으면 끝 (*단, 컴포넌트는 첫글자가 대문자여..

좌,우로 넘어가는 배너가 아닌 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. 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..