Bit의 개발다이어리
[한입 크기로 잘라 먹는 리액트] React 입문

React 입문 1. 리액트를 쓰는 이유 1 : 중복 수정 -> 각 부분을 컴포넌트로 나누어서 코딩 (단어 하나 입력으로 간단하게) 리액트는 컴포넌트 기반의 Javascript UI라이브러리이다. 산탄총수술할 일이 없다. 2. 리액트를 쓰는 이유 2 : 명령형 프로그래밍(jquery) 대신 선언형 프로그래밍(react) 절차 나열 대신 목적을 바로 말한다 3. 리액트를 쓰는 이유 3 : 가상 돔(virtual dom) dom(document object model) 브라우저가 실제로 사용하는 객체 돔을 계속 변경하게 되면(ex append)필요이상의 연산을 수행하면 성능저하의 문제가 발생할 수 있다. Create React App Webpack : 다수의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들 라..

[한입 크기로 잘라 먹는 리액트] Javascript 응용

Truthy & Falsy 전달받은 파라미터가 객체인지, falsy인지 확인해야한다. -> 에러발생 방지 !를 붙이면 !false(true)로 판단되어 예외처리하기 쉽다. 삼항 연산자 truthy와 falsy 적용가능. []은 truthy로 취급된다. 삼항 연산자를 중첩하는 것도 가능하다. 가독성이 떨어지므로 if문이 더 낫다. 조건문 업그레이드 if(food === "불고기" || food === "비빔밥" || food === "떡볶이") 에서 if(["불고기","떡볶이","비빔밥"].includes(food)) 로 복합한 조건문 간략하게 만들 수 있다. const meal = { 한식 : "불고기", 중식 : "멘보샤", 일식 : "초밥", 양식 : "스테이크", 인도식 : "카레" }; const..

[한입 크기로 잘라 먹는 리액트] Javascript 기본

변수 : let으로 선언(var는 중복선언이 되므로 오류발생위험) 변수명 중에서 쓸 수 있는 기호는 _와 $뿐이다. 상수 : const로 선언, 선언과 동시에 초기화가 되어야한다. (선언이후에 값을 바꿀수 없으므로) (자료형)데이터 타입은 원시타입(primitive data type)5개, 비원시타입(non-primitive data type)3개로 구분된다. Primitive type : 한번에 하나의값만 가질수있음, 하나의 고정된 저장공간 이용 Non-Primitive type : 한번에 여러개의값 가질수있음, 여러개의 고정되지 않는 동적 공간 사용 Number Infinity : 무한대 -Infinity : 마이너스 무한대 NaN : 연산이 잘못수행되었다 String "", '', 백틱(문자열 안에..

[타입스크립트] useEffect란?

`useEffect`는 React 라이브러리에서 제공하는 Hook 중 하나입니다. `useEffect`를 사용하면 컴포넌트가 렌더링될 때나 업데이트될 때 특정 작업을 수행할 수 있습니다. 이 Hook은 부수 효과(side effect)를 관리하기 위해 사용됩니다. 부수 효과는 컴포넌트 외부와의 상호작용을 의미합니다. 예를 들면 API 호출, 이벤트 등록 및 해제, 구독 등의 작업이 부수 효과에 해당합니다. `useEffect`를 사용하면 이러한 부수 효과를 컴포넌트에서 관리할 수 있습니다. `useEffect`의 기본 구조는 다음과 같습니다: useEffect(() => { // 부수 효과를 수행하는 코드 // ... // 컴포넌트가 언마운트되거나 업데이트되기 직전에 정리(clean-up) 함수를 반환할..

[리액트 오류] Module not found: Error: Can't resolve 'repl'
오류 2023. 5. 24. 09:34

해당 오류는 "Module not found: Error: Can't resolve 'repl' in '경로주소'"라는 메시지로, `경로주소` 경로에서 'repl' 모듈을 찾을 수 없다는 내용입니다. 이 오류는 모듈 시스템이 'repl' 모듈을 찾지 못해서 발생한 것입니다. 일반적으로 React 프로젝트에서 'repl' 모듈은 사용되지 않습니다. 따라서 해당 모듈을 찾을 필요가 없습니다. 해당 오류를 해결하기 위해서는 아래의 단계를 확인해보세요: 1. 프로젝트 의존성 관리 도구(예: npm 또는 yarn)를 사용하여 프로젝트의 종속성을 설치했는지 확인하세요. 종속성이 올바르게 설치되지 않았을 경우 해당 모듈을 찾을 수 없는 오류가 발생할 수 있습니다. 필요한 종속성을 설치하려면 프로젝트 루트 디렉토리에서..