나디아 성장 일기

JSX (JavaScript eXtenstions) : 확장된 자바스크립트 문법 변수 값 활용하기 { 변수 } 컴포넌트 내부에 변수를 선언하고, 그 변수의 값을 {중괄호}를 이용하여 html로 렌더링하도록 만들 수 있다. 📌 주의사항 1. {중괄호} 내부에는 Javascript 표현식만 넣을 수 있다. 숫자, 문자열, 삼항 연산자(? 조건문), 변수명 등 ⭕ if문, for문 불가 ❌ const Main = () => { const number = 10; return ( main { number % 2 === 0 ? "짝수" : "홀수" } ); }; 2. 숫자, 문자열, 배열 값만 렌더링 된다. boolean형, null, undefined 불가 ❌ { number % 2 === 0 ? "짝수" : "..

React 컴포넌트 (Component) 컴포넌트 (Component) : html 태그들을 반환하는 함수 보통 함수 이름을 따서 부름 (ex. function App( ... ) 👉 App 컴포넌트 컴포넌트 함수명은 반드시 첫 글자가 대문자여야 함 함수 표현식 function Header() { return ( Header ) } 화살표 함수 const Header = () => { return ( Header ) } 컴포넌트 계층 구조 컴포넌트는 계층 구조로 나타난다. 루트(root) 컴포넌트 : 모든 컴포넌트의 조상 역할을 하는 컴포넌트 원하는 대로 변경 가능하지만 보통은 App을 루트 컴포넌트로 둠 부모 컴포넌트 : 다른 컴포넌트의 호출을 품은 컴포넌트 자식 컴포넌트 : 다른 컴포넌트의 retur..

react 시작하기 react app 생성하기 npm create vite@latest vite 사용 * vite (비트) : 프론트엔드 개발을 위한 툴 Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능 Build : Production 배포를 위한 소스코드 번들링 기능 버전 확인하기 18.2.0 버전이 아니면 삭제 후 재설치해야 함 // package.json "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, 기존 라이브러리 재설치하기 npm i react 실행하기 npm run dev ESlint 설치 .eslintrc.js에서 옵션 수정 "no-unused-vars": "off", : 사용하지 않는 ..

📌 npm: node package manager   📌 라이브러리 설치하기1. npm로 설치하기npm i randomcolorpackage.json 파일의 "dependencies"에 라이브러리가 추가됨  2. import문 추가하기import 작명 from "라이브러리명";import randomColor from "randomcolor";const color = randomColor();console.log(color)  * 라이브러리 재설치npm ipackage.json/package-lock.json가 삭제되면 재설치하면 됨   📌 npx mrm gitignore: .gitignore 파일 자동으로 생성하는 명령어* .gitignore: 버전관리에서 제외하는 파일  📌 문법 검사 라이브러..

모듈 시스템 1. CJS (Common JS modul System) : Node.js에서 가장 일반적으로 사용되는 모듈 시스템 값 내보내기 module.exports = { 내보낼 값들(프로퍼티) } // math.js function add(a, b) { return a + b; } function sub(a, b) { return a - b; } module.exports = { add: add, // add라는 변수에 add()함수 저장 sub: sub, } 값 불러오기 require("./파일명"); // index.js const moduleData = require("./math"); // math 모듈러로부터 객체 형태로 내보내진 값을 반환함 console.log(moduleData); /..

동기 & 비동기 이해하기 동기(Synchronous) : 여러 개의 작업을 순서대로 실행 쓰레드(Thread)로 동기 처리 작업의 흐름을 파악하기 쉬움 시간이 오래 걸림 👉 멀티 쓰레드로 해결 (각 쓰레드로 개별 작업) 자바스크립트는 멀티 쓰레드 불가능 ❌ 👉 비동기로 해결 비동기 (asynchronous) : 작업을 순서대로 처리하지 않음 X 콜백 함수로 비동기 처리 👉 콜백 지옥에 빠짐 👉 promise 사용 📌 promise : 비동기 작업을 효율적으로 처리할 수 있도록 도와주는 내장 객체 promise는 비동기 작업을 감싸는 객체 프로미스를 이용하면 콜백 함수를 이용한 비동기 처리보다 더 쉽게 비동기 작업을 수행할 수 있다. promise 진행 단계 대기(Pending): 작업을 아직 완료하지 않..

자바스크립트 정리 - 심화 단락 평가 : 논리 연산에서 첫 번째 피연산자의 값만으로 해당 식의 결과가 확실할 때, 두 번째 값은 평가하지 않는 것 && 👉 둘 다 true여야 true || 👉 둘 중 하나만 true여도 true 조건문 없이도 조건 확인 가능 function printName(person) { const name = person && person.name; console.log(name || "person의 값이 없음"); } printName(); // 함수 인자값으로 undefined 전달 // undefined(False) &&은 이미 F이기 때문에 person.name엔 접근 X => const name = person(undefined) // F || T이므로 "person의 값..

자바스크립트 정리 - 기초 명시적 형변환 내장함수를 이용하여 직접 형 변환 문자열 👉 숫자 Number(값) let str1 = "10"; let strToNum1 = Number(str1); (숫자가 아닌 문자열을 포함한) 문자열 👉 숫자 parseInt(값) let str2 = "10개"; let strToNum2 = parseInt(str2); 숫자 👉 문자열 String(값) let num1 = 20; let numToStr1 = String(num1); nullish 병합 연산자 존재하는 값을 추려내는 기능 null, undefined가 아닌 값을 찾아내는 연산자 let var1; // undefined let var2 = 10; let varr = var1 ?? var2; // varr = 1..

HTML (Hypertext Markup Language): 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드 마크업(markup) 언어: 자료 구조를 표현하기 위한 언어    CSS selector 문법>: .class 태그 안에 있는 직계 자식.navbar>li { display: inline-block;} 공백: .class 태그 안에 있는 모든 자식.navbar li { display: inline-block;}   CSS selector 우선순위style=""   (1000점) #id            (100점) .class       (10점)             (1점)       요소 가로 배치하기..

class 컴포넌트 옛날 문법 요즘 잘 안씀 React에서 제공하는 Component라는 클래스를 extends (상속) state 만들기 object 형태로 작성 class 작명 extends React.Component { constructor(props) { super(props); // class state 만들기 this.state = { name : 'kim', age : 20 } onIncrese = () => { const newCount = this.state.count + 1; this.setState({ count: newCount }); }; } render() { return ( '안녕' {this.props} { // state 변경하기 this.setState({age : 21..