전체 글 149

[제이쿼리] JQuery 기본 문법과 특징

1) 기본문법 선택자 : 함수가 적용되길 원하는 요소 및 속성 동작함수 : 선택된 요소에 원하는 동작을 설정 - 아이디 선택자 : $("#id명") - 태그 선택자 : $("태그명") - 클래스 선택자 : $(".id명") - 속성 선택자 : $("태그명[속성명=속성값]") // input 태그들 중 type이 password인 태그를 선택하기 $("input[type='password']") $(function( ){ $(선택자).동작함수( ); }); // 아래 3구문이 같은 뜻 $( ); = window.onLoad( ) = $(document.ready( )) 2) 값 가져오기 $("선택자").val( ) let inputTag = $("#text") inputTag.val( ) 3) 문자열 변경..

Front-End/JQuery 2021.12.11

[Python] 파이썬 입출력, 문법 알아보기

1) 파이썬 사용해보기 Shell에서 Ctrl+N 으로 새 창 열고 workspace에 파일을 저장하여 사용하기! - 파이썬 출력하기 print(값1, 값2, ...) - 파이썬 주석 ''' 여러줄 주석 ''' # : 한 줄 주석 # 실행 : F5 - 파이썬 실행하기 print("Hello",'Python') #파이썬은 문자열의 따옴표를 " , ' 둘다 사용가능하다. print("Hello","Python",end="||") print(10,20,30,sep="*") - 파이썬 서식문자 print("%f"%10.24) - 파이썬 입력하기 input("정수 : ") input("사용자에게 보여줄 문자열") => 통째로 사용자가 입력한 str 값이다. - 파이썬 형변환 자동 형변환 : 정수 + 실수 -> 실..

Back-End/Python 2021.10.05

[Python] 파이썬 설치하기, 프로그램 구조 알아보기

1) 파이썬이란? - 인터프리터 언어이다. - 객체 지향 언어이다. 2) 파이썬 설치하기 1. 파이썬 사이트 접속하기 https://www.python.org Welcome to Python.org The official home of the Python Programming Language www.python.org 2. 다운로드 페이지 접속하기 https://www.python.org/downloads/release/python-395/ Python Release Python 3.9.5 The official home of the Python Programming Language www.python.org 3. Windows installer (64-bit) 버전으로 다운받기 (옛날버전임) 4. 다운..

Back-End/Python 2021.10.05

[React] 컴포넌트 스타일 알아보기

1) SASS, SCSS - CSS pre-processor 라고도 부른다. - 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주고 유지보수를 쉽게 할 수 있다. - 파일 확장자 2가지를 사용한다. ( .sass / .scss ) - 참고하면 좋은 사이트 https://sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn..

Front-End/React 2021.09.12

[Spring] 검색 처리 구현하기(Mybatis 동적 태그)

1) 검색처리 제목 / 내용 / 작성자 ---> 단일 항목 검색 제목 or 내용 / 제목 or 작성자 / 내용 or 작성자 / 제목 or 내용 or 작성자 ---> 다중 항목 검색 2) Mybaits의 동적 태그들 if WHERE --('T') 제목으로 키워드 검색 BOARDTITLE LIKE '%'||#{keyword}||'%' --('C') 내용으로 키워드 검색 BOARDCONTENTS LIKE '%'||#{keyword}||'%' --('W') 제목으로 키워드 검색 BOARDWRITER LIKE '%'||#{keyword}||'%' choose(when, otherwise) WHERE --('T') 제목으로 키워드 검색 BOARDTITLE LIKE '%'||#{keyword}||'%' --('C')..

Back-End/Spring 2021.09.10

[React] useState, useRef 함수 알아보기

1) useState 함수 - 컴퍼넌트에서 동적인 값의 상태(state)를 다루는 hook 함수를 뜻한다. const [현재상태변수, 설정함수] = useState(초기값); ▼ const [number, setNumber] = useState(0); ✔ hook 함수 - 상태 관리를 다루던 클래스를 좀 더 쉽게 다룰 수 있도록 만들어진 함수들을 말한다. 2) spread 란? - 객체 또는 배열을 펼처 저장하는 방법을 뜻한다. const dog = { name: '코비' }; ▼ 하단의 ...이 spread 방법이며, 위의 값을 밑의 ...방법을 이용하여 복사 붙여넣기 한다는 뜻 const cuteDog = { ...dog, age: 10 } ▼ spread 방법을 또 써보았다. const blackC..

Front-End/React 2021.09.05

[React] 컴퍼넌트(Component)에 대해 알아보기

angular.js(프레임워크) vue.js(프레임워크 또는 라이브러리) ✔ 프레임워크와 라이브러리의 차이점 프레임워크 라이브러리 집(건축물) 도구, 인테리어 제품 ✔ 컴퍼넌트(Component) - 리액트에서 레고 조각처럼 조합하여 프로그래밍 할 수 있도록 만든 모듈 단위이다. - 함수형(버전 16.8), 클래스형이 있다. ✔ props (properties) - 컴퍼넌트에 매개변수를 전달해준다. function 컴퍼넌트명(props){ return {props.속성} } ✔ defaultProps - 컴퍼넌트에 props를 지정하지 않았을 때 기본값을 설정해준다. 컴퍼넌트명.defaultProps = { 설정할 프로퍼티 ... } ✔ 삼항연산자를 사용하여 조건부 렌더링 1. 조건식이 true인 경우와..

Front-End/React 2021.09.04

[React] 리액트 시작하기(cdn, JSX태그, yarn 프로젝트)

1) 리액트의 시작 1. cdn을 이용하는 방법 - https://ko.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaScript library for building user interfaces ko.reactjs.org - babel : 과거 브라우저에 맞도록 스크립트를 자동으로 변환해준다. (트랜스 컴파일러) https://babeljs.io/docs/en/babel-standalone Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io ✔ JSX 태그란? - 페이스북에서 만든 마크업 태그이다. - JSX -> J..

Front-End/React 2021.09.04

[React] React(리액트) 개요, MVC 패턴, 특징, 준비자료

1) React(리액트)란? - 페이스북사에서 만든 자바스크립트 라이브러리이다. - 페이스북에서 자체적으로 사용하기 위해 만들었고, 많은 웹 어플리케이션에 적용하고 있다. - 유저 인터페이스를 만드는 라이브러리이다. - View 레이어를 담당한다. - vue.js, angular.js 와 유사하다. - React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(PC 어플리케이션) 2) M(Model) V(View) C(Controller) 패턴 Model : Data View : UI Controller : logic 3) 리액트의 특징 - 컴퍼넌트로 이루어진 UI 라이브러리 - 컴퍼넌트는 한 가지의 기능을 수행하는 UI 단위를 말한다. - 리액트 어플리케이션..

Front-End/React 2021.09.04

[Node.js] mongoose 모듈, Passport 모듈

1) mongoose 모듈이란? - mongodb의 odm(object data mapping) 모듈을 말한다. - 하나의 컬렉션 안에 똑같은 속성을 가진 문서객체를 반복적으로 넣어두면 데이터를 조회할 때도 어떤 속성들이 있는지 미리 알고 있는 상태에서 조회할 수 있다. npm i mongoose - 위의 명령어로 실행하여 설치해준다. ✔ odm(object data mapping) 데이터베이스와 객체지향 프로그래밍 언어 사이 호환되지 않는 데이터를 변환하는 프로그래밍 기법 mongodb 모듈 vs mongoose 모듈 mongodb : java jdbc driver (속도빠름) mongoose : java mybatis, hibernate 2) 몽구스 모듈 스키마 - 데이터 유효성 검증을 위해 스키마를..

Front-End/Node.js 2021.09.04
반응형