Jini Dev

DataGrip을 새롭게 사용하게 되어 작성한다. 공식사이트 : https://www.jetbrains.com/ko-kr/datagrip/ DataGrip: JetBrains가 만든 데이터베이스 및 SQL용 크로스 플랫폼 IDE www.jetbrains.com데스크탑 다운로드를 받는다.다운로드 링크는 https://www.jetbrains.com/ko-kr/datagrip/download/#section=windows이며, 30일 무료체험이 가능하다. 일단 현재 진행하는 프로젝트가 MySQL 을 DataGrip을 통해 확인? 관리되고 있어서 오늘 설치하긴했는데하나하나 더 공부해야겠다...

오늘 DB를 설명 듣다가 OAuth가 뭐냐고 질문을 받았는데OOS로 잘못들어서 모른다고 했다.. ㅎㅎㅎㅎ.....나중에 알고보니 OAuth였던것.. 사실은 아는거였지만...!! 그래도 개념 정리하기 위해 쓴다!OAuth란? 기존엔 인증방식 표준이 없어서, 기본인증인 아이디와 비밀번호를 사용했었다.기본 인증이 아닌 경우에는 각 애플리케이션에서 각자 개발한 회사의 방법대로 사용자를 확인했는데EX) 구글, Apple, 페이스북, 마이크로소프트, 트위터 등 에서 각자 만들어 놓은 Auth 사용하기=> 위와 같이 제 각각인 Auth 인증 방식을 표준화 한 인증방식이다. 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트를 접속할 때 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 ..

React : event 기능 적용 (이벤트 연결하기)마우스 이벤트Mouse EventonClick 마우스 버튼 클릭 시 발생하는 이벤트(MouseDown과 MouseUp이 한 세트여야 onClick이 된다)onMouseDown마우스 버튼을 눌렀을 때 발생onMouseUp마우스 버튼을 뗐을 때 발생onMouseEnter요소 밖에서 안으로 마우스 커서가 들어갔을 때 발생onMouseLeave요소 안에서 밖으로 마우스 커서가 나갔을 때 발생onMouseMove요소 안에서 마우스 커서를 움직였을 때 발생 - onClick, onMouseDown, onMouseUp의 이벤트를 모두 등록한 경우onMouseDown > onMouseUp > onClick 순서대로 실행된다.- 위의 상황에서 이벤트를 등록한 해당 요..

이벤트 적용하기1) JSX 문법에서 이벤트 속성명은 카멜 케이스(camelCase)로 작성한다.2) 특정 이벤트 발생 시 적용될 함수를 Props로 넘겨준다. 버튼 // 버튼이 클릭(onClick) 되었을때 handleClick 함수를 실행하도록 적용JSX 문법 관련 링크 참고이벤트 객체 (event)export default function Event() { function handleClick(e) { // e : 이벤트 객체 console.log('버튼1이 클릭되었습니다.', e); } // e.target : 이벤트가 발생한 요소 / e.target.value : 입력된 값 return ( 버튼 );}이벤트(onClick)가 발생 했을때 해당 함수(han..

요구사항카드가 접히고 열리는 것을 구현한다 (아코디언 컴포넌트 구현)카드가 접혔을 땐 제목 우측에 '+' 를 열렸을 땐 '-' 가 표시 되도록 한다기본 스타일 코드와 App.js 는 구현되어있다.// App.js - Accordion 부모 컴포넌트import Accordion from './test/toggle/Accordion';function App() { return ( );}​라이프사이클을 생각해보면서 구현 해보기 :React : Lifecycle(라이프 사이클) - 클래스형 컴포넌트 vs 함수형 컴포넌트 React : Lifecycle(라이프 사이클) - 클래스형 컴포넌트 vs 함수형 컴포넌트React : 클래스형 컴포넌트와 훅의 등장 이유 React : 클래스형 컴..

React : 클래스형 컴포넌트와 훅의 등장 이유 React : 클래스형 컴포넌트와 훅의 등장 이유React : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.com클래스형 컴포넌트의 lifecycle 1. 마운트(mount) : 컴포넌트가 실행(생성)될 때 construnctor > getDerivedStateFromProps > render > componentDidMount 클래스의 constructor 실행getDerivedStateFromProps 메소드 실행..

React : Hook React : HookReact : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.comuseCallback 컴포넌트에서 최초 렌더링 시 특정 함수를 기억했다가 리렌더링 할 때 재활용 하는 훅이다.- 메모이제이션 하고 싶은 함수를 콜백 함수로 작성한다.=> 리렌더링이 발생해도 내부의 함수는 여러번 생성하지 않는다.- 의존성 배열(dependency list)의 값에 따라 useCallback 내부 로직의 실행 조건을 적용 할 수 있다. 1. 의존..

React : Hook React : HookReact : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.comuseEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있게 해주는 훅이다.- 실행하고 싶은 작업을 콜백 함수로 작성한다.- return 은 clean-up 함수를 필요한 경우 작성한다.- 의존성 배열 (dependency list)의 값에 따라 useEffect 내부 로직의 실행 조건을 적용할 수 있다. 1. 의존성 배열이 없는 경우 : 매 랜..

React : Hook React : HookReact : 컴포넌트와 Props, State (+ useState 훅) 화면을 각 요소로 쪼갠 것- 하나의 JSX 를 반환하는 함수 컴포넌트 만들기 - PascalCase를 사용하여 컴포넌트를 만든다.- 컴포넌트는 기본" data-og-host="jini-dev.tjini-dev.tistory.comuseState 컴포넌트 내에서 상태(state)를 관리할 때 사용하는 훅이다.- useState 함수의 인자로 state의 초기 값을 지정한다.- state(상태 값)과 setState(상태 값을 변경하는 함수)를 배열로 반환한다.import React, { useState } from 'react'; // useState importexport default..

gh-pages React 를 배포해야하는데 파일을 직접 업로드 하는 방법 말고 배우질 않아서...! 인프런 강의를 보다가 gh-pages 라는 거로 배포할 수 있다는 사실을 알게 되었다!엄청 편리하다 gh-pages는 요거다https://www.npmjs.com/package/gh-pages gh-pagesPublish to a gh-pages branch on GitHub (or any other branch on any other remote). Latest version: 6.3.0, last published: 4 months ago. Start using gh-pages in your project by running `npm i gh-pages`. There are 1121 other pro..