Janu is Developing

click 이벤트들에게 다양한 형태가 있는데 헷갈려서 정리하는 포스트당.... 1. onclick = "handleClick" (괄호 x) 👉 "함수 그 자체(참조)를 전달function handleClick() { console.log('click!')}버튼"클릭되면 handleClick()을 실행해라"= 렌더링시 실행 x, 클릭할 때 실행됨 ✅HTML, Vanilla JS클릭 이벤트가 발생 할 때 실행할 코드로 저장 태그를 통해 전역으로 정의되어 있을 때 '클릭 시 실행'. 반드시 전역으로 선언되어야 함 = Window 객체에서 접근 가능해야 함!window 객체 : 자바스크립트의 내부 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소들의 최상위 객체..

네이밍 센스 황당하다... 거 안헷갈리게 지아줘야 하는게 예의 아닌지;이름들이 거기서 거기라 헷갈려서 정리한다Node.js: JavaScript 런타임 환경V8엔진을 기반으로 만들어진 JavaScript 런타임 환경으로, ⭐웹 브라우저 밖에서도 JavaScript 코드를 실행할 수 있도록 해준다. (V8이란 구글이 개발한 JavaScript 엔진으로 C++로 작성되었다고 한다.)Node.js가 개발된 덕에 개발자들은 JavaScript를 통해서 백엔드 개발이 가능해진 것이다. JavaScript로 서버를 구축하거나, 데스크톱 애플리케이션이나, 모바일 앱도 개발할 수 있게된 것이다.또한 Node.js는 다른 언어(C, Java)처럼 컴퓨터에서 직접 코드를 실행할 수 있는 런타임 환경을 제공한다. npm(N..

마음에 드는 웹앱 템플릿이 있어서 그거 다운받고 프로젝트를 세팅하는 과정에서 도대체 path를 어떻게 설정하는지 몰랐다.30분 정도 헤매는 과정에서 얻은 결과... 일단 의도한 결과는 나온것이므로 그 과정을 까먹기 전에 작성할련다. 난 금붕어니까...🐟 1. vite.config.ts에 alias로 @ 설정하기난 이거 자동으로 되는 지정어인줄 알았더니 내가 셀프로 설정해야 하는거더라?;어쨌든 alias로 설정해줬다.여기서 path란 내 파일에 있는 paths.ts가 아닌(난 이건줄 알았음 그럴리가 없는데 ㅋㅎ) Node.js의 내장 모듈인 path를 의미한다. Vite설정 파일은 Node.js환경에서 실행되지만 Typescript가 path모듈 타입 선언을 찾지 못해서 계속 빨간줄이 나타났다.➡️고로 ..

이번에 useEffect를 정리하면서 Carbon | Create and share beautiful images of your source code Carbon | Create and share beautiful images of your source code carbon.now.sh이런걸 알게된다. 이런 편리한 사이트가 있다는걸 이제 알았네잉... 두고두고 써먹어야지리액트를 사용하는 갠프에서 제일 많이 사용되는건 useState, useEffect, useReducer이었던 것 같다.뷰 처음 배울때도 간단한것들부터 너무 어려웠는데, 리액트도 하다보면 괜찮아지겠지... 1. useEffect란 무엇인가리액트 공식 문서에 따르면 useEffect란 외부 시스템과 컴포넌트를 동기화하는 React Hook..

갠프를 진행하면서 useState가 상태변화를 감지하는 것이라는걸 이해했다. 그런데 여러 요소를 제어할 때 한꺼번에 상태변화를 하고 싶은데 useState는 간단한 상태 or 1:1 상태를 감지하는 느낌이라고 이해했다.그래서 useState보다 좀 더 다양한 요소를 제어하는 Hook이 필요했는데... 찾다보니 useReducer를 알게 됬다.. 1. useState와 useReducer의 차이?useState : 간단한 숫자, 문자열, 불리언 값 관리에 적합하다.상태를 직접 변경하는 setter함수를 제공하며(set어쩌구~), 비교적 단순한 로직에서 사용된다. userReducer : 여러개의 값, 다양한 변경 방식에 적합하다.const [state, dispatch] = useReducer(reduce..

아무래도 독학 리액트를 하다 보니 초기 설정도 엉망이고 처음부터 제대로 설정하지 않아 고생을 한 것이 몇개가 있다컴포넌트 나누는것도 처음에 필요없겠지~ 하고 안하다가 나중가서 import 경로 전부 바꾸고...(정리하는 습관을 기르자)오늘은 프로젝트를 열 때 가끔 root파일이 보이지 않을 때의 해결법을 정리할 것이다. 1. 프로젝트 구조 클릭나는 인텔리제이를 한국어로 설정해놔서 한국어 메뉴가 나오는데,,,, 영어를 쓰는 사람들은 아마도 Project Structure로 뜰 것이다.2. 모듈 > +기호>모듈 가져오기(import modules) 선택저기서 플러스기호를 누르고 루트폴더를 선택해야 한다.무조건  '모듈 가져오기(import)'로 눌러야 한다!3. 루트폴더 선택자신의 상황에 맞는 루트폴더를 가..

(시작도 안했지만 벌써 하기 싫음)오늘은 내가 만들고 있는 개인 프로젝트 내에서 사용되는 useState에 대해 알아볼 것이다(나를 위한것) 1. State를 먼저 알아야 한다React 공식문서에서 state는 컴포넌트 별 메모리라고  설명한다. 즉, 컴포넌트는 현재 입력값, 현지 이미지, 장바구니 같은 것을 "기억"하고 있어야 하는데, 그 메모리를 state라고 선언하는 것이다./*state변수를 사용하기 위해선 useState가 반드시 필요하다.*/import {useState} from 'react';/*임의의 변수 하나 선언*/let count = 0;/*[state변수, setter함수 선언]*//*여기서 [] 문법은 배열 구조 분해라고 하며, useState가 반환하는 배열에는 항상 2개의 항..