front-end
-
JS if else 조건문front-end/JavaScript 2023. 8. 21. 20:32
1. if문이란 특정 조건을 만족시(참의 경우) 실행하는 조건문 if 문 이외 else if문으로 다양한 참의 조건을 만들 수 있다. else if의 갯수 제한은 없다. if (num < 1){ console.log('1보다 작다') } else if (num < 5) { console.log('5보다 작다') } else { console.log('5보다 크다') } 2. 조건식 중 거짓으로 취급하는 값 false undefined null 0 NaN ("") if (null){ console.log('나올까') } else { console.log('말까') } // 말까 - 비교 연산자 사용 가능 ==, === 같다 != 다른지 크다 작다 = 크거나 작거나
-
One-way reactive data flow 와 Context APIfront-end/React 2023. 8. 11. 14:13
1. 단방향 데이터 흐름(one-way reactive data flow)의 장단점 단방향 데이터의 장점 관리가 용이하다 DOM가 궁합이 좋다 안정성이 보장이 된다. 단방형 데이터 단점 자식요소에서 부모요소로 데이터를 바로 전달할 수 없다 - props로 데이터 전달하면 생기는 문제점은? 최하단 컴포넌트에서 최상단 있는 컴포넌트에 데이터를 전달할 경우 여러 컴포넌트를 연달아서 props를 전달해야 한다(props drillong) 하위 > 상위 데이터 전달하는 과정 복잡하며, 많은 단계를 진행 할수록 실수도 잦아진다. context 라는 데이터 보관함을 통해 전역적으로 관리하는 방법이 나왔다. 2. Context API 장단점 장점 전역 상태 관리에 용이하다. 중첩 컴포넌트에 건편한 전달이 가능하다. 컴..
-
Map, Filter 함수front-end/JavaScript 2023. 8. 10. 09:06
1. map() 함수 배열의 내장 함수 반복 되는 컴포넌트를 렌더링 하기 위해 사용 주어진 함수를 호출한 결과를 모아서 새로운 배열을 생성한다. 배열이름.map(콜백함수) let teacherList = ['AAA', 'BBB', 'CCC', 'DDD'] let teacherRender = teacherList.map(item => {item}) // 일반적인 case console.log(teacherList[0]+"님") // map 함수 let newList = teacherList.map(item => item+'님') console.log(newList) 2. Filter 함수 배열의 각 요소에 대해서 주어진 함수의 결과 값이 ture인 요소들만 모아서 새로운 배열로 반환하는 함수 find의 경..
-
JS function 문법과 매개변수(parameter), addEventListenerfront-end/JavaScript 2023. 8. 9. 22:26
1. function(함수)의 사용하는 이유 재사용성 가독성 모듈화 function 작명(){ 코드내용 } 2. 매개변수(parameter)란 변수의 한 가지 종류이며, 함수 등에서 input의 데이터에 해당된다. 하나의 속성값 또는 object가 될 수 있다. 알림창입니다. function 알림창(작동내용){ document.getElementById('alert').style.display = 작동내용; } 위 코드 창을 열기 닫기를 하는 2가지를 만들 수가 있다. 열기 닫기 알림창('block'); // 창 열기 // document.getElementById('alert').style.display = 'block'; 알림창('none'); // 창 닫기 // document.getElementB..
-
javascript 변수(var, let, const 차이점)front-end/JavaScript 2023. 8. 8. 21:51
1. java와 javascript의 차이점 Java int age = 20; char alpha = 'a'; double avg = 78.4; 강력한 자료형 javascript var age = 20; var alpha = 'a'; avg = 35.5; 2. var / let / const 차이점 - Var 변수 재선언이 가능하다. 변수 재할당이 가능하다. 호이스팅시 변수값이 초기화 된다. 전역 범위를 가지고 있다. 단 함수 내에서 선언시 함수 범위로 지정이 된다. var a = 1; var a = 2; //가능 var b = 1; b = 2; //가능 // 함수 범위 내에서만 사용 가능 function helloFunction() { var hello = "hello"; } console.log(he..
-
ES7+ React 확장 프로그램 단축키front-end/React 2023. 8. 8. 13:59
1. 확장 프로그램 설치 설치를 통해 React의 사용이 더욱 편리해진다. rce : class componet 생성 rafce : allow function component 생성 rfce : function component 생성 2. 단축키 rfce + enter import React from 'react' function rfce() { return ( rfce ) } export default rfce rafce + enter import React from 'react' const racfce = () => { return ( racfce ) } export default racfce rce + enter import React, { Component } from 'react' export ..
-
Font Awesome 이용하기front-end/HTMI CSS 2023. 8. 8. 09:36
1. Font Awesome 직접 사용 방식 Font Awesome 홈페이지에서 다운로드 파일 중에서 CSS, Webfonts를 작업 폴더에 넣기 CSS 폴더 내에 있는 all.css 파일을 head에 링크 2. Font Awesome CDN 링크 방식 CSS 호스팅 하는 경우 all.min.css 파일을 링크를 통해 직접 다운로드 방식이 아니더라도 사용 가능 font awesome 5 cdnjs 장점도 존재 하지만 단점은 사이트가 다운 될 경우 CSS 파일 이용이 힘들어진다. 3. Font Awesome 아이콘 넣기 Font Awesome홈페이지 접속 ICON 탭에서 접속 후 6버전 혹은 5버전 클릭 필요한 아이콘을 검색 HTML 코드를 복사 후 작업 HTML에 붙어넣기 - 둥근원에 별모양 넣기 먼저 ..
-
javascript의 개요front-end/JavaScript 2023. 8. 7. 23:15
1. javascript란? 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어 Front-end (리액트, next js) Back-end(NODE JS) 모바일 애플리케이션, dataBase(MongoDB, Realm) 머신러닝/ 딥러닝(Tensor Flow.js) AR/VR(AR.js) 2. javascript의 특징 모든 웹 브라우저에서 동작이 가능하다. 웹 브라우저에서 실행 결과를 즉시 확인힌다. 다양한 용도의 프로그램 개발이 가능하다. 다양한 자바스크립트 공개 API가 많다. 다양한 라이브러리와 프레임워크가 있다. 3. HTML의 조작과 변경 html 조작과 변경으로 얻는 이점 탭, 모델 등 웹페이지 UI를 만들 수 있다. 유저가 입력한 데이터를 검사하는 것이 가능하다. 유저가..