나디아 성장 일기

동기 & 비동기 이해하기 동기(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..

입력값 가져오기 / 블로그 글 발행, 삭제 기능 onChange / onInput : 에 입력 시 코드 실행하는 이벤트 { ... }}/> 입력값 가져오기 : 사용자가 입력한 글 다루기 e.target.value : 이벤트가 발생한 html 태그에 입력한 값 1. 입력값을 저장할 state 생성하기 let [value, setValue] = useState(''); 2. 입력값으로 state 값 변경하기 { setValue(e.target.value)}}/> 이벤트 버블링 막기 e.stopPropagation() onClick={(e)=> { e.stopPropagation(); // 이벤트 버블링 막기 }}> 👍 * 이벤트 버블링: 이벤트가 상위 html로 퍼져서 중복되는 현상 입력칸 종류 블로그 글 ..

props: 부모 state 👉 자식에게 전송 / 상세 페이지 기능 만들기 props : 부모의 state 사용 가능 부모 state 👉 자식에게 전송 ⭕ 부모 👉 자식 이외의 전송은 불가능 ❌ 문자, 숫자, 함수도 전송 ⭕ 부모 state 👉 자식에게 전송하기 1. 2. 자식 컴포넌트 function의 파라미터로 props 전달 3. {props.작명} 사용 function Modal(props) { return ( {props.작명} ) } 모달창 배경색 다르게 주기 props.color로 구멍을 뚫어놓으면 컴포넌트에서 색상 변경만 해주면 됨 function Modal(props){ return ( { props.글제목[0] } 날짜 상세내용 ) } 상세 페이지 기능 만들기 : 글 제목을 누르면 해당..

map() / 블로그 글 개수만큼 html 생성하기 map( ) : array 자료 개수만큼 함수 안의 코드를 실행해주는 함수 JSX 안에서 for문, if문 사용 ❌ 👉 map( ) 사용 ⭕ map( ) 함수를 쓰면 그 자리에 array[ ]가 남음 콜백 함수를 사용해야 함 [ ].map (function( ) { return ( 반복할 코드 ) }); 함수 파라미터 1 == array안에 있는 자료 파라미터 2 == 인덱스(index) [4, 5, 6].map(function(a, i) { console.log(a) // 4 5 6 console.log(i) // 0 1 2 }) return 값을 작성하면 array 자료 개수만큼 array로 반환해줌 [1, 2, 3].map(function(a) {..

컴포넌트 (Component) / 상세 페이지 만들기 컴포넌트 (Component) : html을 한 단어로 축약하기 컴포넌트 사용하는 경우 반복적인 html 축약 큰 페이지 자주 변경되는 UI들 컴포넌트 단점 state를 가져다쓸 때 문제가 생김 (function 범위가 다르기 때문) 컴포넌트 만들기 function 만들기 - 다른 function 밖에 생성 - Component명 => 대문자로 시작 return( ) 안에 html 넣기 - 부모 태그는 꼭 1개여야 함 html을 사용할 곳에 쓰기 - 도 가능 // 방법 1 function Modal() { return ( 제목 날짜 상세내용 ) } // 방법 2 let Modal = () => { return ( ) } 삼항 연산자(ternary op..

블럭 요소 vs 인라인 요소 vs 인라인블럭 요소 블럭요소 (block element) 태그가 좌우공간을 다 차지하는 요소 기본 너비값이 100% ☞ 각 요소가 수직으로 쌓인다. 너비값( width), 높이값(height) ⭕ 상하좌우 마진, 패딩 모두 ⭕ 내부에 블럭요소와 인라인요소를 포함 가능⭕ 인라인요소 (inline element) 태그가 실제로 코딩된 그 영역만 차지하는 요소 기본 너비값 == 컨텐츠 너비값 나란히 위치 가능 ⭕ 너비값( width), 높이값(height) ❌ 위아래 마진 ❌ (좌우 마진, 상하좌우 패딩은 ⭕) 내부에 블럭요소 포함 불가능 ❌ 인라인블럭 요소 (inline-block element) 수평으로 배치⭕ + 크기값 & 상하좌우 마진⭕ 기본 너비값 == 컨텐츠 너비값 ⭐..