목차 값 변환 추상 연산 명시적 강제변환 암시적 변환 느슨한/엄격한 동등 비교 추상 관계 비교 1. 값 변환 타입 캐스팅 강제 변환 구분 어떤 값의 타입을 바꾸는 과정이 명시적이면 타입 캐스팅이다. (정적타입 언어에서 컴파일시점에 발생) 어떤 값의 타입을 바꾸는 과정이 암시적이면 강제 변환이다. (동적타입 언어에서 런타임시점에 발생) 명시적 강제변환 : 코드에서 의도적으로 타입 변환을 일으키는 것이 명백 const a = 42; const b = String(a);// 명시적 "42" 암시적 강제변환 : 다른 작업 도중 불분명한 부수효과로 부터 발생한 타입 변환 2. 추상 연산 -ToString 문자열이 아닌 값 → 문자열 변환은 ToString 추상 연산 로직이 담당한다. 내장 원시 값은 본연의 문자열..
FE개발자
10장에서 만든 애플리케이션을 최적화 해보자 11.1 많은 데이터 렌더링 하기 더보기 function creatBulkTodos() { const array = []; for (let i = 0; i { const [todos, setTodos] = useState(creatBulkTodos); //고윳값으로 사용될 id //ref를 사용하여 변수 담기 const nextId = useRef(2501); const onInsert = useCallback( text => { const todo = { id: nextId.current, text, checked: false, }; setTodos(todos => todos.concat(todo)); nextId.current += 1; // nextId ..
프로젝트 의도 : TodoList를 작성하고 목록에 추가, 제거할 수 있는 웹 구성 💜프로젝트 준비 : 1) 기본적인 프로젝트 생성 ( creat react-app ) 2) 사용된 라이브러리, 전처리기 - Sass, classnames, react-icon 3) .prettierrc 생성 더보기 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComa": "all", "printWidth": 80 } 4) index.css 설정 더보기 body { margin: 0; padding: 0; background: #e9ecef; } 5) App 컴포넌트 초기화 💜프로젝트 중요 구성 : 1) App.js App컴포넌트..
◾ 일반 CSS ◾ Sass - CSS전처리기 ◾ CSS Module ◾ styled-components 9️⃣.1️⃣ 일반 CSS, 가장 흔한 방식 CSS클래스를 중복 되지 않게 만드는 것이 중요하다. 1) 이름 짓는 규칙 : ( 컴포넌트 이름 - 클래스 )의 형태로 작성한다. 2) CSS Selector 사용 : .App .logo 처럼 특정 클래스 내부에 있는 경우만 적용한다. 9️⃣.2️⃣ Sass 사용하기 Sass는 CSS 전처리기 이며 작업을 편리하게 해주고, 코드의 재사용 증가, 코드의 가독성을 높여 유지보수를 쉽게 만든다 Sass 문법 참고 9️⃣.2️⃣.1️⃣ utils 함수 분리하기 여러 파일에서 사용될 수 없는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳..
8️⃣.1️⃣ useState 가장 기본적인 Hook 함수형 컴포넌트에서 state 사용시 사용한다. 예시 코드 더보기 import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); // useState 함수의 파라미터에 상태의 기본값을 넣어줌 // 함수는 배열을 반환하는데 배열의 첫 번째 원소는 상태값, 두 번째 원소는 상태를 설정하는 함수 return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; 여러번 useState 사용시 한번에 하나의 상태값만 관리하기..
6️⃣.1️⃣ 자바 스크립트 배열의 map() 함수 map함수는 파라미터로 전달된 함수를 이용해 배열 내 각 요소를 원하는 규칙대로 변환후 새로운 배열로 반환한다. arr.map(callback, [this Arg]) -callback : 새 배열을 생성하는 함수, 3가지 --currentValue : 현재 처리중인 요소 --index : 현재 처리중인 요소의 index --arr : 현재 처리중인 원본 배열 -this.Arg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 6️⃣.2️⃣ 데이터 배열을 컴포넌트 배열로 반환하기 key 값이 없이 배열을 랜더링 한다면, 에러가 발생한다. 6️⃣.3️⃣ Key 리액트에서 key는 컴포넌트 배열을 랜더링 했을때 어떤 원소에 변동이 있었는..
