본문 바로가기

Front-end/필기일지

(18)
231006 - [React] 모듈 module (외부 모듈 export / import) / node.js / npm 명령어: node package manager / Webpack / 배포용 프로덕션 [23.10.06] 45일차 React를 활용한 SPA (Single Page Application) Front-end - [React] - 모듈 module (외부 모듈 export / import) - node.js - npm 명령어: node package manager - Webpack - 배포용 프로덕션 - powershell 터미널에서 위 명령어들 지우기 : clear - cf) React native는 모바일 앱관련 프레임워크 * 리액트 문법 module모듈 (export / import) - 02_module 폴더 ** git / github 원격 저장소 – 인증 문제로 접근이 안되는 경우 다른 사용자의 정보가 있다면 지우고 다시 인증연결이 필요하다. ** 새로운 React 앱 만들기 기존..
231005 - [React] / local storage / json 정의로 local storage에 편하게 저장하기 / 배포 (github, git, repository 원격저장소) / 배열 함수 array function / 모듈 module (외부 파일문법) [23.10.05] 44일차 - 체계적인 사고 - 문제해결 능력 - 기술학습 능력 > 0919 : 0일차 - 2시간 (HTML + CSS활용) 0920 : 1일차 – JavaScript 기본 0921 : 2일차 – JavaScript 기본 0922 : 3일차 – JavaScript 기본 0925 : 4일차 – JavaScript 기본 (happymarket) 0926 : 5일차 – JavaScript 기본 (happymarket) 0927 : 6일차 – React 1004 : 7일차 - React 1005 : 8일차 - React 1006 : 9일차 - React node.js Front-end - [React] - local storage - json 정의로 local storage에 편하게 저장하기 ..
231004 [React] state 상태 (함수 useState(), 상태끌어올리기 lifting state) / validation (유효성) 검증 / local storage에 저장 [23.10.04] 43일차 Front-end - [React] - state 상태 (함수 useState(), 상태끌어올리기 lifting state) - validation (유효성) 검증 - local storage에 저장 1) 새로 같은 이미지가 추가 될 때 key경고 없애기 (date같이 고유키 생성 활용) 2) 하트 클릭 시마다 하트 옆에 숫자 카운트 늘어나게 (1 부터 표시) - 리액트의 컴포넌트 Component는 재사용의 목적으로 많이 쓰인다 - 리액트에서 같은 엘리먼트를 여러 개 추가 하게되면 key값 때문에 경고가 뜬다. ‘key값을 고유로 만들어야함’ - 리액트 element를 배열.map()을 통해 축약하기 // * component const Favorites = () => { ..
230927 [React] 리액트 React 문법(JSX) / 리액트 엘리먼트 React element / 컴포넌트 Component / 리액트에서의 event [23.09.27] 42일차 Front-end - 리액트 React 문법(JSX) - 리액트 엘리먼트 React element - 컴포넌트 Component - 리액트에서의 event - 확장 ‘Errorlens’ syntax에러나 오류 시 알림보여줌 - HTML 태그 내 js영역 {} 주석 가능형태 const favorites = ( { // hi } { /* test('수요일') */ } {/* 100 + 5 */} ); - React에서는 ‘class’가 다른 기능적 의미를 가지고있기 때문에 태그의 class는 “className”으로 표기해야한다. (but, 렌더링 시엔 ‘class’ 로 나온다) ex) X => O 기본 * ex01-javascript // 순수 자바스크립트 형태 상품 1페이지 ..
230926 [JS] JS실습(동적처리 기능) / JS를 이용한 다양한 기능 추가 / JSON / Local Storage / filter 함수 / 객체의 Boolean [23.09.26] 41일차 Front-end [Java Script] - JS실습(동적처리 기능) - JS를 이용한 다양한 기능 추가 - Local Storage - filter 함수 - 객체의 Boolean - 자료형 - 변수 선언 - 연산자 - 대화상자 : 창(경고, 확인, 입력) - 조건문 : if, switch - 반복문 : while, do~while, for - 함수 정의 및 호출 : JS는 함수형 언어 - 변수 종류 - DOM 접근 - form 안의 button type = “submit” 등록 // form안에 있는 버튼 submit // -> form태그 action="URL"페이지로 연결 // action이 없는 경우 -> 현재페이지 연결 (= refresh 새로고침) - (VScod..
230925 [JS] 객체 축약표현 / DOM 접근(특정 elements 찾아가기) / event(JQuery, eventListener, eventHandler), form, modal [23.09.25] 40일차 Front-end [Java Script] - 객체 object 축약표현 - DOM 접근 (특정 element 찾아가기) - event (jQuery / listener) - form - 자료형 - 변수 선언 - 연산자 - 대화상자 : 창(경고, 확인, 입력) - 조건문 : if, switch - 반복문 : while, do~while, for - 함수 정의 및 호출 : JS는 함수형 언어 - 변수 종류 - DOM 접근 - window + . : 이모지띄우기 - css 속성값 : transparent : background 색을 완전 투명하게 initial : 초기값 * object 객체 축약표현 객체 축약 표현 // 객체 : Object const name = '홍길동'; ..
230922 [JS] 화살표 함수arrow-function / 변수 종류 (hoisting, 전역변수, 지역변수, scope, lexical scope, callback, closure) / DOM 기초 (특정 element 찾아가기) [23.09.22] 39일차 Front-end [Java Script] - 화살표 함수arrow-function - 변수종류 (hoisting, 전역변수, 지역변수, scope, lexical scope, callback, closure) - DOM 기초 (특정 element 찾아가기) - 자료형 - 변수 선언 - 연산자 - 대화상자 : 창(경고, 확인, 입력) - 조건문 : if, switch - 반복문 : while, do~while, for - 함수 정의 및 호출 : JS는 함수형 언어 - 변수 종류 - DOM 접근 - [JS]에서 NaN(Not a Number)는 연산을 할 수 없는 데이터 뜻함 - script (실행의 의미를 담고 있음) - var이라고 꼭 전역 변수인것은아니다! ex) 함수안에..
230921 [JS] 조건문 : if, switch / 반복문 : while, do~while, for / 함수 정의 및 호출 (함수 선언식, 함수 표현식, 중첩 함수 inner function, 인수로 함수명, 리턴값이 함수명, 화살표 함수arrow-function) [23.09.21] 38일차 Front-end [Java Script] - 조건문 : if, switch - 반복문 : while, do~while, for - 함수 정의 및 호출 (함수 선언식, 함수 표현식, 중첩 함수 inner function, 인수로 함수명, 리턴값이 함수명, 화살표 함수arrow-function) - 자료형 - 변수 선언 - 연산자 - 대화상자 : 창(경고, 확인, 입력) - 조건문 : if, switch - 반복문 : while, do~while, for - 함수 정의 및 호출 : JS는 함수형 언어 - 변수 종류 - DOM 접근 - 전역변수 var변수는 global(전역)에 할당되었다가 실제 해당 문장이 실행될 때 초기화 - 함수 표현식은 전역 변수만 메모리에 올려두고 필요할..