🤯TIL

[React] async와 await를 사용한 CRUD

1. Create (C) - 비동기적으로 데이터 생성 POST // 예시: Axios를 사용한 POST 요청 const createData = async (data) => { try { const response = await axios.post('/api/data', data); console.log(response.data); // 생성된 데이터 확인 } catch (error) { console.error('Error creating data:', error); } }; 2. Read (R) - 비동기적으로 데이터 조회 GET // 초기 데이터 로딩 const fetchInitialData = async () => { try { const response = await axios.get('/api/..

[한입 크기로 잘라 먹는 리액트] simpleDiary 코드

App.js import { useState, useRef, useEffect } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; // https://jsonplaceholder.typicode.com/comments function App() { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then(..

[한입 크기로 잘라 먹는 리액트] React에서 API 호출하기

https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com https://jsonplaceholder.typicode.com/comments App.js - API 호출 코드 getData작성 - mount될 때 나와야 하는 데이터 > useEffect 사용(빈배열) - 초기 데이터 initData 설정 import..

[한입 크기로 잘라 먹는 리액트] React Lifecycle 제어하기 - useEffect

출처 https://inf.run/N9fZn 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로 끝장낼 수 있어요. www.inflearn.com

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 4 - 데이터 수정하기

1. onDelete > onRemove로 변수명 변경 2. DiaryItem.js에 수정하기 버튼 추가 DiaryItem.js - 수정하기 버튼 추가 - 삭제하기 버튼 onClick 함수를 handleRemove로 빼서 정리 - state 생성 - 토글함수 생성 : isEdit이 true면 수정중이라고 간주 > content부분에 수정폼 띄우기 - 토글 상태(T/F)에 따른 버튼 기능 수정 - 수정 취소 후 다시 수정클릭 시 내용 원본 복구 - 수정완료 후 기능 추가 import { useRef, useState } from "react"; const DiaryItem = ({ author, content, emotion, created_date, id, onRemove, onEdit, }) => { ..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 3 - 데이터 삭제하기

1. DiaryItem.js에 삭제버튼 생성 2. App.js에 onDelete 함수 생성 3. props로 DiaryList.js에 onRemove 함수 전달, DiaryItem에 또 전달 DiaryItem.js - props에 onDelete 추가 - 삭제하기 button 생성 후 windo.confirm창 추가 const DiaryItem = ({ author, content, emotion, created_date, id, onDelete, }) => { return ( 작성자 : {author} | 감정점수 : {emotion} {new Date(created_date).toLocaleString()} {content} { if (window.confirm(`${id}번째 일기를 정말 삭제하시겠..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 2 - 데이터 추가하기

1. dummyList 주석 2. App.js에 전역적으로 데이터 관리하는 useState 추가 3. App.js에 onCreate 함수 추가 4. DiaryEditor에 prop으로 onCreate함수 내려주고 handleSubmit에 함수 추가 5. 작성 후 기존 editor에 남아있는 데이터 초기화 App.js import { useState, useRef } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; // const dummyList = [ ... function App() { const [data, setData] = useState([])..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 1 - 리스트 렌더링 (조회)

1. DiaryList.js 파일 생성 2. App.js에 추가 3. 임시배열 만들어서 prop으로 전달 4. DiaryList가 undefined로 전달될 경우 에러 해결 5. DiaryItem.js 생성 App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const dummyList = [ { id: 1, author: "도로시", content: "하이 1", emotion: 5, created_date: new Date().getTime() }, { id: 2, author: "나로시", content: "하이 2", emotion: 3, created_date:..

[한입 크기로 잘라 먹는 리액트] React에서 DOM 조작하기 - useRef

1. handleSubmit에 조건문, focus문 추가 2. DOM에 접근하는 useRef() 사용 DiaryEditor.js import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = ..

[한입 크기로 잘라 먹는 리액트] React에서 사용자 입력 처리하기

App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; function App() { return ( ); } export default App; DiaryEditor.js : 일기를 작성하는 부분 import { useState } from "react"; const DiaryEditor = () => { const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { console.log(e.target.name + " : " + e.target.value); setState({ ...state, [..

[React vs JavaScript] React란?

React? 페이스북에서 만든 오픈소스 자바스크립트 라이브러리 중에 하나 *뉴스피드 기능을 위해 만든 것 React와 JavaScript가 다른가? JavaScript : 프로그래밍 언어 React : 자바스크립트라는 프로그래밍 언어를 쉽게 쓸 수 있도록 도움을 주는 라이브러리 React의 장점 1. 더 쉽게 구현 가능 - 동일한 기능을 JS만으로 직접 구현하는 것에 비해 훨씬 더 쉽게 구현 가능 2. Component - 필요할 때 이미 만들어진 컴포넌트들을 간편하게 가져다 사용 가능 3. 페이스북 대기업 지원 - 유지보수 가능 *참고영상 https://youtu.be/nT4OWJJjtJg?si=AdAPwIqS9WpjMYJS

[코딩앙마] 영어 단어장 CRUD_v6기준

코딩앙마 YouTube https://youtu.be/05uFo_-SGXU 폴더 구성 App.js //App.js import Header from "./component/Header" import DayList from "./component/DayList"; import Day from "./component/Day"; import CreateWord from "./component/CreateWord"; import CreateDay from "./component/CreateDay"; import {BrowserRouter, Routes, Route } from 'react-router-dom'; import EmptyPage from "./component/EmptyPage"; export de..

[Linux] 리눅스 가상환경 구성하기

1) Oracle Virtual Box 다운로드 https://www.virtualbox.org/wiki/Downloads Downloads – Oracle VM VirtualBox Download VirtualBox Here you will find links to VirtualBox binaries and its source code. VirtualBox binaries By downloading, you agree to the terms and conditions of the respective license. If you're looking for the latest VirtualBox 6.1 packages, see Virt www.virtualbox.org 2) Oracle Virtual Bo..

[정처기] C언어 정리

C언어 기본 구조 본문(main 함수) 전에 처리하는 전처리 부분과 본문으로 구성 헤더는 xxx.h 파일로 되어있고, 헤더 안에는 프로그래밍에 필요한 함수들이 포함 전처리기(Preprocessor 먼저 처리하는 애) 개념 실행 파일을 생성하는 과정에서 소스 파일 내에 존재하는 전처리 지시문을 처리하는 작업 전처리기 종류 #include : C언어 프로그램에 헤더 파일을 포함할 때 사용 #define : 매크로 정의, 상숫값 지정을 위한 예약어로 구문의 상수로 치환할 때 사용 C언어 기본코드 #include #define A 5 int main(){ printf(“수제비 %d”, A); return 0; } C언어는 main 함수부터 시작 stdio : standard input output define ..

CONCAT으로 시작일 + 종료일 기간 출력하기

TABLE에 시작일, 종료일로 데이터를 입력받으나 웹에 출력할 때에는 기간으로 나타내야 할 경우 시작일 : start_date 종료일 : end_date SQL문 쿼리 작성 SELECT CONCAT(start_date, ' ~ ', end_date) AS use_date FROM TABLE명 >> 출력해야 할 그리드에 use_date를 넣어준다면 시작일 ~ 종료일을 출력할 수 있다. 😊 ✨날짜 형식도 같이 바꾸고 싶어요! to_char(시작일 / 종료일, '날짜형식')을 사용 SELECT CONCAT(to_char(start_date, 'yyyy-mm-dd'), ' ~ ', to_char(end_date, 'yyyy-mm-dd')) AS use_date FROM TABLE명

[생활코딩] 문서의 기하학적 특성(엘리먼트 위치 크기 알아내기 / Viewport / 스크롤 / 스크린의 크기)

엘리먼트의 위치 및 크기 알아내기 API 이용 : console.log(t.getBoundingClientRect()); 테두리를 제외한 엘리먼트의 크기 : ClientWidth, ClientHeight 사용 Viewport 스크롤에 따라 위치의 값이 달라질 때 이해하기 스크롤 할 때 바뀌는 화면영역 = viewport Viewport의 좌표 : getBoundingClientRect - 문서의 내용 중 사용자에게 보여주는 영역 - getBoundingClientRect의 값이 스크롤에 따라 달라지는 뷰포트의 좌표를 사용 - 스크롤의 정도를 알고 싶을 때 pageYOffset 사용하기 문서의 좌표 - 뷰포트 + 스크롤된 정도 스크롤 scrollLeft, scrollTop 프로퍼티 이용 ➡ 문서의 스크롤 ..

[생활코딩] 이벤트(등록방법 / 전파 / 기본동작의 취소 / 문서로딩 / 마우스 / jQuery 이벤트)

이벤트란? 사용자가 클릭했을 때, 스크롤을 했을 때, 텍스트 필드의 내용을 바꾸었을 '때' - event target : 이벤트가 발생하는 대상 ex) 버튼 - event type : 이벤트가 발생하는 행위 ex) 클릭, 변경 - event handler : 어떠한 이벤트가 발생했을 때, 실행할 코드들 등록방법 & inline 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다. (1) inline : 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것 (this : 이 이벤트가 동작하고 있는 element를 가르킨다. document.getElementById('target') 대신 사용가능) (2) 프로퍼티 리스너 : 이벤트 대상이 되는 객체의 프로퍼티로 이벤트를 등록하는 방식 : 인라인 방식에 비해 HT..

[생활코딩] Text 객체(값 API, 조작 API)

dorothy , : Element dorothy : Text 객체 Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. DOM에서는 공백이나 줄바꿈도 텍스트 노드! 값 API nodeValue = " " 선언시 값 변경됨 data 조작 API call + [append / delete / insert / replace / subString] + Data() 출처 Text 객체 - 웹브라우저 JavaScript (opentutorials.org) Text 객체 - 웹브라우저 JavaScript 소개 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄..

[생활코딩] Document 객체

Document 객체 문서 전체를 대표하는 객체 - Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. - HTMLDocument 객체는 문서 전체를 대표하는 객체 document.childNodes[0] : document.childNodes[1] : ~ 주요 임무 : 새로운 노드 생성 : 문서 정보에 대한 API 제공 (title, URL, referrer, lastModified 등의 정보를 프로그래밍 적으로 제공) 출처 Document 객체 - 웹브라우저 JavaScript (opentutorials.org) Document 객체 - 웹브라우저 JavaScript 소개 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDo..

[생활코딩] Node 객체(관계 API, 노드 종류 API, 변경 API)

Node 객체 DOM에서 시조와 같은 역할 관계 : 각각의 구성요소들의 프로그래밍적으로 어떻게 연결되어 있는지 알 수 있다. Node 관계 API .firstChild.nextSibling.previousSibling 활용 노드 종류 API .nodeType : 해당되는 노드의 정보가 element, 속성, comment, text인지 알 수 있다. .nodeName : 태그의 이름, 텍스트 등 노드타입보다 조금 더 디테일한 정보를 알 수 있다. 재귀함수 : 어떠한 함수가 실행될 때 자기 자신을 호출하는 것 (traverse: 하나씩 조회한다.) 노드 변경 API 노드 추가 : appendChild(child) : 제일 끝에 추가 : insertBefore(new Element, reference Ele..

[생활코딩] Element 객체(식별자 API, 조회 API, 속성 API, jQuery 속성 제어 API)

Element 객체 element를 추상화한 객체 DOM의 계층구조에서 Element 객체의 위치 Node Document CharacterData Element Attr HTML Document Text | Comment(주석) HTML Element | - HTMLHeadElement - HTMLLIElement var t = document.getElementById('active'); .style : inline 수식 식별자 API 자신을 찾을 수 있도록 이름을 갖는 것 Element.tagName : ONLY 읽어오기 Element.id : id 값 읽고 변경가능 Element.className : 까다로움. / 클래스 네임 지정, 변경 추가 가능 Element.classList : 훨씬 사용이..

DOM : Document Object Model

문서 객체 모델(Document Object Model, DOM)? ➡ 웹 페이지를 자바 스크립트로 제어하기 위한 객체 모델 (웹 페이지 내의 모든 콘텐츠를 객체로 나타내준다.) 제어 대상 찾기 1) document.getElementsByTagName('li'); - document 객체는 페이지의 기본 ‘진입점’ 역할 - document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있음. 2) jQuery 라이브러리 사용 - 기본문법 $('li').css('color', 'red'); - chaining이 가능하여 연속적으로 효과 및 기능 적용이 가능하다. 출처 https://ko.javascript.info/browser-environment 브라우저 환경과 다양한..

BOM : Browser Object Model

브라우저 객체 모델(Browser Object Model, BOM)? ➡ 웹 브라우저 제어를 위한 브라우저가 제공해주는 객체들 (문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체) location 객체 : 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해준다. : 식별자 알아내기 https://dorothy-yang.tistory.com/ protocol : // host : port / pathname ? search # hash navigator 객체 : 브라우저와 운영체제에 대한 정보를 제공해주는 객체 - 크로스 브라우징 : 브라우저 상관 없이 동일하게 보여지는 기능 - navigator.userAgent : 브라우저에서 서버에..

[Python 입문] 데이터 타입의 중요성_by생활코딩

데이터 타입이 왜 중요한가? 데이터 타입에 따라서 연산방법이 다르기 때문에 엄격하게 분리하고 있다. Number Text 1 1+1 "Hello World" len("Hello World")

[Python 입문] 파이썬 쉘/파일 이용해서 실행_by생활코딩

Python에게 명령하는 방법 1) Shell : 채팅으로 대화를 주고받으며 작업 (다시 사용하지 X 작업 실행 시 좋다.) 2) File : 자주 시키는 일들을 적어두었다가 필요할 때마다 사용 (재사용 O, 복잡한 일 O) 작성된 코드는 Python Interprater 프로그램으로 전달된다. Interprater ➡ 코드의 내용대로 운영체제를 동작시킴 ➡ 컴퓨터를 동작시킴 파이썬 쉘을 이용해서 실행 (대화) 직접 파이썬 프로그램 설치해야 사용가능 cmd 창과 비슷하게 생김 휘발성 print(1+1)에서 print 생략 가능 1+1만 해도 ➡ 2 // 결과값 출력됨 len("hello world") ➡ 11 실행유보하려면 \(역슬래쉬) 사용한다. >>> a=1;\ .. . b=1;\ ... a+b ➡ ..

[Oracle] SQL Developer에서 ERD 출력하는 방법

ERD 란? ERM 프로세스의 산출물을 가리켜 개체-관계 다이어그램(Entity-Relationship Diagram) ERM 이란? 데이터 모델링 분야에서 개체-관계 모델이란 구조화된 데이터에 대한 일련의 표현 이 데이터의 "구조" 및 그에 수반한 제약 조건들은 다양한 기법에 의해 설계될 수 있음 그 기법 중 하나가 개체-관계 모델링(Entity-Relationship Modelling) 출처 : https://ko.wikipedia.org/wiki/%EA%B0%9C%EC%B2%B4-%EA%B4%80%EA%B3%84_%EB%AA%A8%EB%8D%B8 개체-관계 모델 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 데이터 모델링 분야에서 개체-관계 모델이란 구조화된 데이터에 대한 일..

[연산자] 삼항 연산자? (조건 ? T : F)

삼항 연산자 : 세 개의 피연산자를 받는 연산자 세 개의 피연산자 : 조건 / 참의 경우 결과값 / 거짓의 경우 결과값 결과 = ( 조건 ) ? ( 참의 경우 결과값 ) : ( 거짓의 경우 결과값 ) int x = 3; int y = 5; int max = (x > y) ? x : y; System.out.println(max); // 5 // 3이 5보다 크다는 것은 거짓이므로 false 값인 y, 5가 출력됨 int min = (x < y) ? x : y; System.out.println(min); // 3 // 3이 5보다 작다는 것은 참이므로 true 값인 x, 3이 출력됨 boolean b = (x == y) ? true : false; System.out.println(b); // false..

[연산자] 복합대입 연산자?

대입 연산자 : 자신 = 자신 + 2; 복합대입 연산자 : 자신 += 2; 복합 대입 연산자 num = 10; // num = num + 2; num += 2; System.out.println(num); // 12 // num = num - 2; num -= 2; System.out.println(num); // 10 // num = num * 2; num *= 2; System.out.println(num); // 20 // num = num / 2; num /= 2; System.out.println(num); // 10 // num = num % 2; num %= 2; System.out.println(num); // 0

[제이쿼리] 제이쿼리 문서 객체 선택자와 조작법

Do it! 자바스크립트 + 제이쿼리 입문 4년 연속 베스트셀러! 전면 개정판으로 출간! 자바스크립트, 제이쿼리의 기본부터 실전에 필요한 핵심까지 모두 담았다! ‘두잇 시리즈 최고 작품’이라 평가받은 책! 전면 개정판으로 더욱 알차게 만들었습니다! 이제는 웹 개발자뿐만 아니라 웹 퍼블리셔와 디자이너에게도 코딩 능력이 필요한 시대! 자바스크립트를 1도 모르겠다면? 프런트엔드 실무 교육 경력 10년 강사가 엄선한 155개의 예제로 기본부터 실무 활용까지 완벽하게 대비하세요. 실제 사이트에 적용하는 ‘반응형 웹 UI 만들기’까지 실습하고 나면 실무가 두렵지 않은 자신을 발견할 수 있을 것입니다! 저자 정인용 출판 이지스퍼블리싱 출판일 2018.04.06 목 차 1. 제이쿼리 기본 다지기 2. 선택자 3. 제이..

[Spring_JAVA] UUID 란?

UUID ? 😎 Universally Unique IDentifier, 범용 고유 식별자 소프트웨어 구축에 쓰이는 식별자 표준 util 안에있는 GUID 클래스의 randomUUID 메소드를 호출하면 생성가능 완벽한 고유값이라는 보장은 없지만 실제 사용시에 중복될 가능성이 거의 없어서 테이블의 key값이나 파일 업로드시 임시 파일명 등으로 사용될 수 있음 참고 https://ko.wikipedia.org/wiki/%EB%B2%94%EC%9A%A9_%EA%B3%A0%EC%9C%A0_%EC%8B%9D%EB%B3%84%EC%9E%90 범용 고유 식별자 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 범용 고유 식별자(汎用固有識別子, 영어: universally unique identifi..