앵코딩

Koa란? Node.js환경에서 웹 서버 구축시 Express, Hapi, Koa등 웹프레임워크를 사용함 Express 는 미들웨어, 라우팅, 템플릿, 파일 호스팅 같은 다양한 기능이 자체적으로 내장 Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리 적용하여 사용 => 필요한 기능들만 붙여 서버를 만들 수 있어 가벼움 async, await 문법을 정식으로 지원하여 비동기 작업이 수월 koa 프레임 워크 설치 npm add koa ESLint란? 문법 검사 도구이며 , 코드를 작성할 때 실수할 시 에러또는 경고 메시지를 에디터에서 바로 확인할 수 있게 해줌 npx eslint --init Koa 기본 사용법 // src/index.js const Koa = require("koa"); co..

ERROR 는 에러라 꼭 고쳐야하고 WARNING 은 경고 - 무시가능 /* eslint-disable */ // Lint를 꺼줌 , WARNNING메시지 안보이게 좋아요 버튼 & 갯수 UI 만들기 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [글제목,b] = useState(['여성 의류 추천','대구 분식집 추천','리액트 공부방법']); // a: state에 보관했던 자료 // b: state 변경을 도와주는 함수 let [like,setLike] = useState(0); // setLike - state변경함수 /..

import logo from './logo.svg'; import './App.css'; function App() { // return() 안에는 병렬로 태그2개이상 기입금지 return ( 블로그임 글제목 2월 17일 발행 ); } export default App; state 란? 자료 잠깐 보관할때 변수 저장 Destructuring 문법 // 여러가지 자료들을 한 곳에 보관하고 싶을때 array let num = [1,2]; // 따로 변수로 빼고 싶을때 let a = num[0]; //1 let c = num[1]; //2 let [d, f] = [1, 2]; // 쉽게 빼주려면 Destructuring 문법을 사용해서 빼줌 // 이렇게 선언시 d=1, f=2의 값을 가지게됨 state 만드..

처음 App.js 파일에서 중간 부분들은 지운 후 기본 상태에서 시작 import logo from './logo.svg'; import './App.css'; function App() { return ( {/* 이 안에 jsx문법 사용하여 작성 */} ); } export default App; JSX 란 ? javascript파일에서 html을 쉽게 작성할 수 있게 도와주는 언어 JSX문법 1. class 대신 className 사용 2. 변수를 넣을땐 {중괄호 사용} => 데이터를 꽂아넣는다 ( 데이터 바인딩 ) 3. style 넣을 땐 태그안에 style={{ 스타일명 : '값' }} import logo from './logo.svg'; import './App.css'; function Ap..

React를 사용하는 이유 1. Single Page Application 만들때 사용 => Javascript로 사용시 코드가 길고 복잡 2. Html 재사용이 편리 3. 같은 문법으로 앱개발 가능 ( ReactNative ) 개발환경 셋팅 1. Node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 프로잭트 생성 - 작업용 폴더 생성 후 shift + 우클릭 , PowerShell/터미널 열기 누름 npx create-react-app 파일이름 3. 미리보기 터미널에서 npm start 입력 프로젝트 파일 node_modules폴..

UI에 간단한 애니메이션을 추가하려면 가능하면 css로 처리해주는것이 좋다 -> 성능때문 로그인 로그인하세요 닫기 /* one-wqy 애니메이션 1. 시작스타일 2. 최종스타일 3. 원할때 최종스타일로 변하라고 코드를 만듬 4. transition 추가 */ .modal{ width: 300px; height: 100px; border: 1px solid #333; border-radius: 10px; background-color: #333; margin-top: 20px; opacity: 0; /* 완전투명 */ visibility: hidden; /* display:none과 같음 */ transition: all 1s; /* 변할때 1초 걸려서 서서히 실행 */ } .show-modal{ visi..

jQuery HTML 조작 문법을 쉽게 바꿔주는 라이브러리 설치한 곳 하단에서 jQuery 문법 사용 가능 거의 모든 자바스크립트 라이브러리는 태그가 끝나기전 넣는것을 권장 => 페이지 로드 성능때문 jQuery CDN 안녕 // 태그안 글자를 바보로 // JavaScript document.querySelector('.hello').innerHTML = "바부"; // jQuery $('.hello').html('바보') 안녕 안녕 안녕 버튼 // test-btn을 클릭시 $('#test-btn').on('click',function(){ // $('.hello').hide(); // 사라짐 $('.hello').slideToggle(); // 슬라이드up, down }) Navbar An item A..

부트스트랩 CDN 서브메뉴 만들기 Navbar An item A second item A third item A fourth item And a fifth one .list-group{ display: none; } .show{ display: block; } // sub 메뉴 보이기 // 버튼을 누르면 에 show를 부착 document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){ // navbar-toggle을 클릭하면 list-group에 class show를 추가해주세요 document.getElementsByClassName('list-group')[0].classList.toggle('show..

알림창 닫기 버튼1 버튼2 // 콜백함수 // 파라미터 자리에 들어가는 함수 document.getElementById('close').addEventListener('click',function(){});

Alert 박스 닫기 버튼 //파라미터 function close_box(구멍) { //축약할 코드 작성 document.getElementById('alert-box').style.display = 구멍; } close_box(); //파라미터를 쓰면 () 안에 내용 입력가능 //()에 있는 내용이 구멍 자리에 들어가서 실행 close_box('none') close_box('block') 함수 2개를 만들필요없이 하나만으로 활용 가능 ! 숙제 alert창 2개 만들기 1. 아이디를 입력 안하셨어요 2. 비번을 입력 안하셨어요 알림창 닫기 버튼1 버튼2