DOUSTORY

리액트의 핵심 모듈 2개로 리액트가 하는 일 알아보기 1. 리액트 컴포넌트 => HTMLElement 연결하기 2. 리액트 컴포넌트 만들기 자바 처럼 import를 사용해서 리엑트의 모듈을 가지고 온다 {React 컴포넌트} - JS, JSX => ReactDOM.render는 java의 main과 같은 시작 함수 이다. class ~~ 이렇게 시작하는 것은 리엑트 컴포넌트다 만들어진 컴포넌트를 실제 HTMLElement에 연결할 때 ReactDOM라이브러를 이용한다. {React} 컴포넌트를 만들어보자 리액트 컴포넌트를 만들 때 사용하는 API모음 더 자세한 내용은 다음에 다뤄보도록하자 CDN을 통해 리액트 라이브러리 사용해보자 리액트도 CDN을 통해 사용할 수 있다. 해당과정을 통해 리액트 프로젝트를..

Vue.js CLI 로 설치하기 오늘은 지난번 CDN으로 Vue.js 프레임 워크를 사용했다면 이번에는 CLI(Command-Line Interface) 로 설치를 해보도록 하겠습니다. VS CODE 터미널 실행 VSCODE를 실행하고 창 하단을 드레그 해서 터미널 창을 올린 후 다음 명령어를 입력합니다. npm i -g @vue/cli * mac 유저 같은 경우 'sudo' 를 앞에 붙여 권한 부여를 해줘야 하는 경우도 있습니다.(sudo npm i -g @vue/cli) * 앞 디렉토리는 상관 없습니다 성공적으로 설치가 끝났다면 Vue CLI 홈페이지를 참고해서 몇가지 명령어를 실행 해볼 수 있다. https://cli.vuejs.org/guide/ Overview | Vue CLI Overview ..

Vue.js는 프론트 앤드의 프레임워크이다. 난이도는 낮고 활용도는 높기 때문에 입문자들에게 적합하다고 할 수 있다. 순서는 다음과 같다. 1. Vue.js 최신버전으로 설치하기 2. Vue.js CDN 방식으로 추가하기 3. Hello Vue! 실행해보기 1. Vue.js 최신버전으로 설치하기 https://v3.ko.vuejs.org/ Vue.js v3.ko.vuejs.org 구글이나 네이버에 검색하면 2버전이 나오고, 찾기가 어려우니 위링크를 통해서 최신버전인 3버전을 설치하도록 하자! 릴리즈 노트 : 새로운 버전에 대한 달라진 점을 알려준다 2. Vue.js CDN으로 추가하기 CDN 방식으로 간단하게 html 파일에 script를 추가하여 사용 할 수도 있다. 3. Hello Vue! 실행해보기..

display 와 position 한방에 이해하기!! Block-level 1 2 3 Inline-level 1 2 3 display : 는 inlin과 block으로 나뉜다고 볼 수 있다. span : edfult inline(물건) **쓰는 값에 따라 모양이 변한다. div : defult는 block(상자) ** 상자고 기본적으로 밑으로 내려간다. ** inline-block : 한줄에 여러개 들어가는 상자 position : relative; : 내가 원래 있던 자리에서부터 이동한다. absolute; : 담겨 있는 박스안에서 이동한다. fixed; : 웹페이지 안에서 움직인다. sticky; : 원래있어야하는 자리에 있으면서 스크롤링 되어도 그자리에 있는다.

Asynchronous Javascript and XML 일반적인 HTTP 요청 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 홈페이지 전체를 새로고침 하지 않더라도, 페이지일부에 정보를 받아오는 것.. 대표적으로 검색어 자동완성 $.ajax({ url: “전송페이지”, //전송방식 두가지.. get(보안이 낮음), post(보안이 높음) type: “전송방식”, data: “전송할 데이터“, dataType: “요청한 데이터 형식“, success: function(data){ 전송 성공 시 실행될 코드; }, error: function(){ 전송 실패 시 실행될 코드; } });

DOM 다루기 .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다. .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. jQuary를 사용하겠다!! $(document). ready(function() { }); .append() 메소드 $(target).append(source) 클릭이벤트 처리해보기 $(this) : 클래스명이나 id를 각각 설정해서 호출해야줘야하는데 자기 자신을 가리키는 변수 $this를 사용한다면 중복 소스를 줄여줄 수 있다. > 현재 이벤트가 발생한 애 data() [데이터 저장] - 문법 : $(..

일반함수 //일반함수사용법? function sayHello() { console.log(“안녕하세요?”); } sayHello(); // > 안녕하세요 리턴함수 function getCalcNumbers() { sayWelcome(); // >"안녕하세요" var numberOne = 10; var numberTwo = 20; var result = numberOne + numberTwo; console.log( numberOne + “ + ” + numberTwo + “ = ” + result ); // return 키워드는 호출자에게 함수의 호출 결과값을 전달할 수 있도록 한다. return result; } var calcResult = getCalcNumbers(); console.log(cal..

북마크를 누르면 바로 이동이 가능합니다. 1. 개요📝

북마크를 누르면 바로 이동이 가능합니다. 1. 개요📝

폼(from) 웹 화면의 특정 항목에 사용자가 뭔가를 입력하는 형태 ex) 회원가입 화면, 로그인 화면, 게시판 화면 을 만드는 기본적인 태그 method name action target 폼요소에 레이블을 붙임 폼들을 하나의 영역으로 묶음 하나로 묶은 그룹에 이름을 붙여줌 아이디: 비밀번호: 작성자한테 받는 부분 input은 꼭 타입이 들어가야한다 hidden 사용자에게 보이지는 않지만 서버로는 넘겨지는것 text : 문자타입 tel : 전화번호 url : url입력 password : 비밀번호 입력 -> ****으로 출력된다. datetime : 국제표준시로 설정된 날짜와 시간 date : 사용자 지역 기준 날짜 month : 연, 월 week : 연, 주 number : 숫자를 조절할 수 있는 화살..