728x90 반응형 전체 글229 [JavaScript] CallBack 콜백함수 2초가 지나면 result에 10이 더해져 값이 찍히는 함수 function increase(number, callback){ setTimeout(()=>{ const result = number+10; if(callback){ callback(result); } }, 2000) } increase(0, result=>{ console.log(result); }) 이 함수를 반복하고 싶을 때는 어떻게 해야 할까 EX01. CallBack함수 increase(0, result=>{ console.log(result); increase(result, result=>{ console.log(result); increase(result, result=>{ console.log(result); }) }) }) 이.. 2022. 12. 14. [REACT] react-router-dom 1. router-app 라는 리액트를 만들어서 react-router-dom 설치 설치 yarn add react-router-dom 2. index.js 리액트에 라우터를 적용하려면 src/index.js파일에서 react-router-dom에 내장되어있는 BrowserRouter로 컴포넌트를 감싸야 한다. App.js import About from './pages/About'; import Home from './pages/Home'; import { Route, Routes } from 'react-router-dom'; const App=()=>{ return( ) } export default App; About.js const About=()=>{ return( About About 페이지.. 2022. 12. 13. [REACT] 라우팅 라우팅이란? 웹에 어플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미 합니다. 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 1. 리액트 라우터 방식 - 리액트의 라이브러리들 중에서 가장 오래 되었고, 가장 많이 사용 - 가장 많이 사용 - 리액트 라우터를 사용하면 손쉽게 리액트 라우터로 싱글 페이지 애플리케이션을 만들 수 있음 - 멀티 페이지로 애플리케이션을 작성하면 다른 페이지로 이동할 때 새로운 html, css, js 이미지 파일 등의 리소스를 전달 받아 브라우저 화면에 보여 줍니다. 2. Next.js방식 - 리액트 프로젝트의 프레임 .. 2022. 12. 13. [REACT] Sass Sass Sass(Syntacitically Awesome Style Sheets)는 css전처리기로 복잡한 작업을 쉽게 작업 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수에 탁월함 설치 yarn add sass *Sass는 두 가지 확장자를 지원함 .scc와 .sass Sass가 처음 나왔을 때는 .sass 확장자만 지원하다가 나중에 개발자 들의 요청이 많아서 .scss도 지원하기 시작했다. Ex.sass $front-stactk : Heldie, sans-werid body font: 100% color:$primary-color EX.scss $front-stactk : Heldie, sans-werid; body{ font: 100%; col.. 2022. 12. 9. [REACT] 라이브러리 *node_modules에서 라이브러리 불러오기 @import '../../../node_modules/libray/style'; 위처럼 경로를 사용하다 보면 불편하기 때문에 @import '~/libray/styles'; 위와 같이 ~(물결 문자)를 사용하면 자동으로 node_modules디렉터리를 탐지하여 스타일을 불러올 수 있다. include-media 반응형 디자인에 적용 open-color 색상을 편리하게 적용 설치 이런식으로 같이 설치 할 수 있다. yarn add open-color include-media classnames CSS클래스를 조건부로 설정할 매우 유용한 라이브러리 설치 yarn add classnames EX import classNames from 'classnames';.. 2022. 12. 9. [REACT/JavaScript] map() map() JavaScript의 표준 내장 객체 Array의 메소드 prototype.map()이다. 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 형식 arr.map(callback(currentValue[, index[, array]])[, thisArg]) Ex01. import { useState } from "react"; const IterationSample = () => { const names = ['눈사람', '호빵', '눈', '바람']; const nameList = names.map( (currentValue, index, array) => currentValue={currentValue} index={index} array={arr.. 2022. 12. 8. [REACT] list 추가, 삭제 - map, concat, filter Ex.01. HTML을 사용한 list출력 const IterationSample = () => { return ( 눈사람 호빵 눈 바람 ) } export default IterationSample; Ex02. map을 이용한 list 출력 보다 간편한 출력이 가능하다. const IterationSample = () => { const names = ['눈사람', '호빵', '눈', '바람']; const nameList = names.map((name)=>{name}); return ( {nameList} ) } export default IterationSample; Ex03. Concat을 사용한 list추가 import { useState } from "react"; const Iteratio.. 2022. 12. 8. [Git] Private Repositorie 팀원 공유 1. Settings 2. Collaborators 3. Add people 4. Github 초대 Github 닉네임이나 이메일으로 검색해서 상대방을 초대할 수 있다. ※ 상대방이 Github계정이 있어야함 초대를 하면 상대방이 깃허브 가입시 적어놓은 이메일로 초대장이 간다. 5. 수락 이렇게 등록이 되면 git pull로 받아오고 push할 수 있다 2022. 12. 7. [REACT] input 클릭이벤트 EX01 import { useState } from "react"; const EventPractice=()=>{ const[username, setUsername] = useState(''); const[message, setMessage] = useState(''); const onChangeUsername=e=>setUsername(e.target.value); const onChangeMessage=e=>setMessage(e.target.value); const onClick=()=>{ alert(username + " : " + message); setUsername(''); //공백으로 처리 setMessage(''); //공백으로 처리 } const onKeyPress=(e)=>{ if(.. 2022. 12. 7. [Git] 설치 및 기초명령어 설치 https://git-scm.com/ Git git-scm.com 명령어 새로운 저장소 생성 git init 원격저장소의 깃 복사 git clone "본인 깃허브 파일의 링크" 로컬 git 저장소에 원격 저장소를 추가 git remote add origin "본인 깃허브 파일의 링크" 현재 디렉토리에 존재하는 파일이나 디렉토리를 확인 ls -alt 작업 디렉토리(working directory)와 스테이징 영역(staging area)의 상태를 확인 git status 커밋 전까지의 작업기록의 변경분을 저장 git add . 저장소에 커밋 git commit -m "My first git file" 원격 저장소에 업로드 git push origin main 2022. 12. 5. [VSCode] 유용한 확장프로그램 ESLint Reactjs code snippets 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하기 간편하게 하는 기능 Prettier - Code formatter 코드 스타일 자동을 정리해주는 도구 Auto Close Tag Auto Rename Tag Color Highlight Material Icon Theme 2022. 12. 5. [REACT] CMD를 이용해 REACT 개발환경을 설치하는 2가지 방법 - npm과 yarn PC에 리액트 앱을 생성하기 위한 방법은 크게 2가지 이다. npm과 yarn NPM NPM은 node.js 에서 제공하는 패키지 매니저(Package manager)이다. 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 수행되는 툴 패키지를 안전하게 배포받기 위해 사용된다. YARN Javascript 패키지 매니저이다. NPM과 마찬가지로 프로젝트 패키지 의존성을 관리하는 툴이라 할 수 있다. [ NPM을 사용한 REACT 설치 ] 1. Node.js NPM은 node.js 에서 제공하는 패키지 매니저(Package manager)이므로 npm을 사용하기 위해서는 node.js를 먼저 설치해야한다. Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. Ins.. 2022. 12. 5. [MySQL] DDL문 ALTER - 컬럼 추가, 수정, 삭제 아래와 같은 board테이블이 있다. desc board; 이 테이블의 컬럼구조를 변경하고 싶을 경우에는 ALTER를 사용한다. [ 추가 - ALTER ADD ] 형식 alter table [테이블명] add [컬럼명] [타입] [옵션]; 예제 EX01. 맨 뒤에 추가 alter table board add imgfile varchar(100) default 'none.gif'; EX02. 맨 앞에 추가 alter table board add imgfile varchar(100) default 'none.gif' first; EX03. 지정한 위치에 추가 alter table board add imgfile varchar(100) default 'none.gif' after content; [ 수정 - .. 2022. 12. 2. MVC 모델 웹 애플리케이션을 작성하기 위해서는 실제 업무를 처리하는(비즈니스 로직)과 화면을 처리하는 부분(프레젠테이션 로직)으로 구현합니다. 그리고 데이터베이스와 연동하여 데이터를 가져오는 Model부분이 있습니다. MVC패턴 M(Model) : 주로 데이터베이스와 연동하는 비즈니스 로직을 통해 얻어온 데이터를 저장하는 용도로 사용 V(View) : 사용자의 인터페이스로 주로 JSP페이지에서 사용 C(Controller) : 모델과 뷰 사이의 흐름을 제어하는 역할을 함. 클라이언트의 요청을 받아 이를 수행하기 위한 모델 영역의 어떤 비즈니스 로직을 수행할 지를 결정하고 이를 처리한 후에 결과를 보여주기 위한 뷰를 선택함. 주로 서블릿을 사용. 2022. 11. 30. 프론트엔드 시 사용하면 좋은 사이트 - 글꼴, 아이콘, 애니메이션 폰트 Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 눈누 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 아이콘 Google Material https://fonts.google.com/icons?icon.platform=web Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file wi.. 2022. 11. 28. [JSP] 파일전송 1. 폼을 통해 파일을 전송하기 위해서는 method가 반드시 post 방식이어야한다. get 방식은 주소 창을 타고 넘어가기 때문에 255자 이하의 작은 용량만 전송가능하기 때문이다. 따라서 파일 같이 용량이 큰 경우에는 get 방식으로 전송이 불가능하기 때문에 post 방식을 사용해야 한다. 2. form태그에 enctype="multpart/form-data"를 추가해주어야 한다. MultipartRequest 클래스 생성자 MultipartRequest ( javax.servlet.http.HttpServletRequest request, java.lang.String saveDirectory, int maxPostSize, java.lang.String encoding, FileRenamePol.. 2022. 11. 28. [JSP] JSTL <c:forEach> 선언문 형식 반복할 구문 상태용변수 ${status.current} 현재 for문에 해당하는 번호 ${status.index} 0부터 순서 ${status.count} 1부터 순서 ${status.first} 첫번째 ${status.last} 마지막 ${status.begin} for문 시작 번호 ${status.end} for문 끝번호 ${status.step} for문 증가값 index count title ${status.index} ${status.count} ${movie} ${movie} ${movie} ${movie} ${movie}, 2022. 11. 24. [JSP] JSTL <c:if> 2022.11.24 - [JSP] - [JSP] JSTL 설치 [JSP] JSTL 설치 JST JSP Standard Tag Library JSP에서 사용하는 표준 태그 라이브러리 장점 JSTL을 사용하면 JSP코드가 깔끔해지고 가독성도 높아짐 JSP는 스크립트릿과 자바 코드 등 여러 코드가 섞여서 복잡한 구조로 되 jjh93.com EX01. IF 형식 colorSelect.jsp 빨강 초록 파랑 colorResult.jsp 빨강 초록 파랑 EX02. choose core의 if문에는 else기능이 없으므로 그럴 경우 choose기능을 사용함 fruitSelect.jsp 원하는 과일을 선택해 주세요 사과 오렌지 청귤 바나나 fruitResult.jsp 선택한 과일은 사과 오렌지 청귤 바나나 2022. 11. 24. 이전 1 2 3 4 5 6 ··· 13 다음 728x90 반응형
