전체 글365

• React Iteration Components (컴포넌트 반복) IterationComponents 목록 요소들을 반복처리 할때는 map함수를 이용 합니다. 반복 컴포넌트에는 반드시 key props를 전달해야 합니다. map 함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용 array.map(callbackFunction(currenValue, index, array), thisArg) currenValue: 현재값 index: 현재인덱스 arrayt: 현재배열, thisArg: callbackFunction 내에서 this로 사용될 값 filter - 요소개수만큼 반복하며 boolean을 이용한 새로운 list를 만듬 array.filter(callbackFunction(currenValue, index, array), thisArg) currenValue.. JS/React 2023. 1. 17.

• React 리엑트 이벤트 핸들링 이벤트 규칙 이벤트의 이름은 전부 카멜 표기법으로 표현됩니다. onkeyup -> onKeyUp 이벤트를 전달할 때는 {함수} 형태로 사용합니다 인풋값 핸들링 해보기 인풋의 값이 변화되는 이벤트 onChange 연결 이벤트 안 첫번째 매개변수에서 event객체 활용하기 (e.target.속성값) setter를 이용해서 state변경하기 const EventComponent = () => { //name을 저장할 useState const [name, setName] = useState(''); //이벤트함수의 첫번째 매개변수에 이벤트에 대한 정보를 넣어줌 const handleName = (e) => { // console.log(e.target.value) setName(e.target.value) /.. JS/React 2023. 1. 17.

• 

  React State State 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. state가 체인지 되면 변화를 감지하여 리렌더링을 수행한다. 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다르다. 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능 하다. =>State가 바뀌면 리렌더링이 발생한다!! useState(초기값) useState() : 배열반환 첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다. const [data, setData] = useState('초기값') state는 어떤 타입이던 상관 없습니다. (str, number, object) state는 여러개 일 수도 있습니다. state는 직접 수정하면 안 됩니다. .. JS/React 2023. 1. 16.

• React 컴포넌트 & 프롭스 (Components & Props) 컴포넌트(Components) 화면의 부분부분을 재활용해서 사용하기 위해, 자식 요소로 만든다. App에서 자식을 만들고, 그 자식에서 또다시 부분부분을 컴포넌트로. ->전체화면을 리렌더링하는걸 피하기 위해 변경하고 싶은 부분을 하나하나 자식컴포넌트로 만들고, 그 부분에서 재활용할 부분을 자식요소로. 컴포넌트는 만들 때 앞글자를 대문자로 만드는 것이 규칙이다. 모듈내보내기 - 외부에서 사용할 모듈 이름을 지정한다. - export default 이름 모듈불러오기 - 부모컴포넌트에서 사용한다. import 이름 from 경로; 컴포넌트는 함수형, 클래스형 2가지이다. 함수형 const MyComponent2 = () => { return 함수형 컴포넌트; }; export default MyComponen.. JS/React 2023. 1. 16.

• React JS 개념 리액트 시작하기 -프론트앤드인데, 백앤드랑 섞여서 많이 사용됨. +)리액트는 처음 페이스북에서 만들어졌다. 배워야하는 이유 1.차별화 2.전자정부프레임워크(우리나라 표준. 나라 관련 사업은 전부 이것 사용. 사용하면 세금감면.)-eGovFrame : spring으로 만들어져있음. ->v4.1 베타 버전이 22년 12월부터 업그레이되었는데 최신 Spring, SpringBoot지원 시작, React js의 뷰 탬플릿 탑재 -->즉, 사장되지 않을 것! 3.react JS에서 파생->react Native. : 모바일 react와 비슷한 vue JS, Angular JS. 셋이 비슷하고 문법만 살짝씩 다름. - 리액트는 자바스크립트 라이브러리 이다. - 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 .. JS/React 2023. 1. 16.

• JS es6 (Basic) ES6 Basic 전개구문 = 반복이 가능한 요소에서만 사용 가능함 let arr2 = [1,2,3, ...arr]; ->배열안에 배열을 넣는 이중배열이 되는게 아닌 arr배열의 값을 한칸씩 풀어서 넣어줌 spread //전개구문 = 반복이 가능한 요소에서만 사용 가능함 let arr = [1,2,3]; console.log(...arr); let str = "hello"; console.log(...str); //배열의 추가 let arr2 = [1,2,3, ...arr]; //1,2,3,1,2,3 console.log(arr2) //배열의 중간에 추가 let arr3 = [1,2,3, ...arr, 5]; //1,2,3,1,2,3,5 console.log(arr3) //배열의 복사 let arr4 =.. JS/JS(자바스크립트) ES6 2023. 1. 12.

• 

  JS (자바스크립트) AJAX (Asynchronous JavaScript And XML) Asynchronous JavaScript And XML ( 비동기적 자바스크립트 그리고 xml ) 참고페이지 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API 일반적인 데이터 처리방식은 순서대로 실행해주는 방식으로 동기적방식이라고 지칭한다. AJAX는 순차적으로 진행하지 않으므로 비동기적 방식이라고 지칭한다. ( 함수가 완벽하게 종료되기 전까지 기다리지 않는다.) 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다. ES6의 fetch API(비동기통신방법)을 이용해서 간단하게 사용할 수 있다. API가 뭔가요? Appli.. JS/JS (자바스크립트) ES5 2023. 1. 7.

• 

  JS (자바스크립트) Cookie Session 쿠키 쿠키는 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부이다. HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용된다. 이를 이용하면 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문에 사용자의 로그인 상태를 유지할 수 있다. 쿠키 사용의 주목적 3가지 세션 관리 : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리 개인화 : 사용자 선호, 테마 등의 세팅 트래킹 : 사용자 행동을 기록하고 분석하는.. JS/JS (자바스크립트) ES5 2023. 1. 7.

• 

  JS (자바스크립트) Location, History, Navigator객체 location객체 Location 인터페이스는 객체가 연결된 장소(URL)를 표현한다. URL파트 location 속성 설명 href URL전체 Protocol 프로토콜(Http, Https) Host Hostname + Port URL에 포트가 명시되지 않은 경우 Host와 Hostname은 동일값 반환 Hostname 도메인 Port 포트. 80, 443과 같이 연결 포트를 지정. 프로토콜이 http이면 80포트 생략 가능. 프로토콜이 https이면 443포트는 생략 가능. Pathname 현재 실행 페이지. Path의 마지막 경로. "/"로 끝날 경우 서버에서 지정한 기본 페이지로 자동 지정되지만, 클라이언트인 자바스크립트에서는 비어있게 됨. Origin Protocol + Hostname + P.. JS/JS (자바스크립트) ES5 2023. 1. 7.

• JS setInterval 실습 JS setInterval 실습 ( 사진 슬라이드하기) setinterval을 활용한 실습 slideImg의 css에 animation과 display:none을 적용해두고 active에는 display:inline을 적용함으로 둘다 적용된 이미지는 display가 덮어지는 효과를 낼 수 있다. 자바스크립트로 setInterval을 사용해 매초 active 클래스를 옮겨주는것으로 사진이 계속 animation이 나오는 효과를 볼 수 있다. CSS 더보기 HTML 더보기 애니메이션이 주기적으로 동작하려면 태그가 변경되어야 합니다. JavaScript 더보기 JS/JS (자바스크립트) ES5 2023. 1. 4.

• 

  JS (자바스크립트) timeout 타임아웃 JS 타임아웃 설정 window.timeout함수를 실습해보자 setTimeout(함수,밀리초) 로 사용가능하다 멈추는건 setTimeout을 저장해둔 변수명을 매게변수로 넣으면 정지할 수 있다. 아래의 코드를 참고하면 5초뒤에 경고창이 나오는 페이지를 만들고 버튼을 클릭하면 경고창이 나오지않게 할 수 있다. 더보기 5초뒤에 경고창이 나오는데 중지하려면 누르세요 JS/JS (자바스크립트) ES5 2023. 1. 4.

• 

  JS (자바스크립트) window.Interval(인터벌) Interval CSS 스타일 지정 폰트색상은 rgb 10, 10, 10을 기본으로 준다 html에 시작버튼과 멈추는 버튼 그리고 시간을 출력해줄 div생성 시작 멈춰 Script에 Interval을 생성해서 func1이라는 함수를 1초마다 동작하게 설정 더보기 JS/JS (자바스크립트) ES5 2023. 1. 4.