처음부터 시작하는 Java

스프링부트 동작원리 내장 톰켓을 가지고 있다 socket : 운영체제가 가지고 있는 것 통신 : 연결시 스레드를 생성 > 연결이 계속 유지 > 부하가 심함 http 통신 : 문서를 전달하는 통신 / Stateless 방식 - 한번 연결후 응답을 하면 response 후 연결 끊음 - 부하가 적지만 다시 연결되면 새로운 것으로 인식 (같은 곳에서 요청을 하더라도 전에 요청했던 곳인지 알 수 없음) - 문서전달의 목적으로 만들어짐 html(확장자) 톰켓 소켓을 불러서 사용 (system call) http 기반 = 소켓 톰켓과 웹서버의 차이 ? 웹서버 : url 의 마지막 l = location static 자원 : 정적인 자원 아파치 = 요청을 받고 응답을함 (HTML, CSS, PNG... ) 톰켓 : ..

class - 설계도 (의자 설계도) abstract class - 추상적 설계도 (가구 설계) interface - 실체화가 된 것 (의자) ioc - 제어의 역전 (주도권이 스프링에 있음) IoC 컨테이너 - 제어의 역전 누누 클래스를 만들었는데 다른곳에서 누누를 쓰고 싶을때 ? 스프링이 객체를 스캔해서 heap 메모리에 저장해둔다 스프링이 객체를 관리 누누를 하나만 만들어서 가져가서 씀 DI dependency injectsion 의존성 주입 IOC 에서 스캔해준 하나의 object를 가져가서 씀 heap 메모리에 A라는 [이름을 가진] 클래스가 없다면 해당 변수에는 null 이 아니고 해당 type를 heap 에서 찾아서 값을 넣어준다. 그것이 DI 많은 필터를 가지고 있다 web.xml 은 필터..

https://ant.design/components/form/v3 Migrate Form to v4 - Ant Design Remove Form.create# Form of v4 does not need to create context by calling Form.create(). Form now has it's own data scope and you don't need getFieldDecorator anymore. Just use Form.Item directly: const Demo = ({ form: { getFieldDecorator } }) => ( {getFie ant.design

useReducer 의 장점 로직 분리로 인해 다른곳에서도 재사용 가능 import React, { useEffect, useReducer, useState } from 'react'; import axios from 'axios'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: action.data, error: null }; case 'ERROR': return { loading: false, data: null, error: action.err..

일단 axios 를 설치하자 둘중에 하무거나 npm 쓰면 npm yarn 하면 yarn npm install axios yarn add axios 설치후 package.json 에 설치가 잘 되어 있는지 확인하자~ useState 와 useEffect 로 데이터 로딩 요청에 대한 상태를 관리 할 때에는 총 3가지 상태를 관리해 줘야한다 1. 요청의 결과 2. 로딩 상태 3. 에러 일단 컴포넌트에 Users.js 생성 import React, { useEffect, useState } from 'react'; import axios from 'axios'; function Users() { const [users, setUsers] = useState(null); const [loading, setLoad..

객체 생성자 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있음 객체 생성자를 사용 할 때에는 보통 함수의 이름을 대문자로 시작, 새로운 객체를 생성 할 때에는 new 를 붙여준다 function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function () { console.log(this.sound); } } const dog = new Animal('개', '댕댕이', '멍멍'); const cat = new Animal('고양이', '냥냥이', '야옹'); dog.say(); cat.say(); // result : 멍멍 // re..

indexOf => 원하는 항목이 몇 번째 원소인지 찾아주는 함수 // indexOf const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; const index = superheroes.indexOf('토르'); console.log(index); // result : 2 findIndex 배열 안에 있는 값이 숫자, 문자열, 또는 불리언일때 찾고 싶은 항목이 몇번쨰 원소인지 ? indexOf 배열 안의 값이 객체, 배열이면 ? findIndex const memu = [ { id: 1, text: '모듬회', done: true }, { id: 2, text: '삼겹살', done: true }, { id: 3, text: '탕수육', done: tr..

객체를 위한 반복문 for ...in Object.entries : [[key, value][key, value]] 반환 Object.keys : [key,key,key] 반환 Object.values : [value,value,value] 반환 const dog = { name: '강아지', sound: '멍멍', age: 3 }; console.log(Object.entries(dog)); console.log(Object.keys(dog)); console.log(Object.values(dog)); for (const key in dog) { console.log(`${key}: ${dog[key]}`); } 위 log 의 순서대로의 결과임

리액트에서는 배열이나 객체를 업데이트 해야 할 때에는 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해야함 예를 들어 // 잘못된 코드 const object = { a: 1, b: 2 }; object.b = 3; console.log(object); 이렇게 하면 안됌 이렇게 해야함 spread 연산자 ... 를 사용해서 새로운 객체를 생성 // 이렇게 사용 (불변성을 지켜주어야함) const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; console.log(nextObject); 배열도 마찬가지임 push, slice 등의 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되고 concat, filter, map 등의 함수를..

이때까지 만들었던 것들은 App 컴포넌트에서 onToggle, onRemove 가 구현되어 있고 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에 전달이 되고 있음 그중 UserList 컴포넌트는 onToggle과 onRemove를 전달하기 위해서 다리 역할만 하고 있음 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에 전달하는 작업은 리액트로 개발을 하다 보면 자주 발생하는 작업인데 컴포넌트 한 개 정도는 괜찮지만 여러 개가 된다면 번거로운 상황이 발생할 것임 그럴 때 Context API와 dispatch를 함께 사용하면 복잡한 구조를 해결할 수 있다 Context API를 사용하면 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있음 여기서 값은 상태 일 수도 함..

컴포넌트를 만들다보면 반복되는 로직이 자주 발생하는데 그럴 때 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용 하는 방법을 알아보자 src에 hooks 라는 디렉토리를 만들고, 그 안에 useInputs 라는 파일을 만들자 *커스텀 Hooks 를 만들 때에는 보통 use 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성함 안에서 useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현하고 컴포넌트에서 사용하고 싶은 값들을 반환 해주면 됌. useInputs.js import React, {useCallback, useState} from "react"; function useInputs(initialForm) { const [form, s..

React.memo 는 컴포넌트의 props 가 변하지 않았으면 리렌더링을 방지해서 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있음 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정 할 수 있음 CreateUser.js import React from "react"; const CreateUser = ({username, email, onChange, onCreate}) => { return ( 등록 ); }; export default React.memo(CreateUser); function > const 로 변경후 감싸주면 됨 export default 에 CreateUser 를 React.memo 로 감싸주기만 하면 됨 UserList.js 도 해주자 import React, {us..

useCallback 은 useMemo 와 비슷한 Hook 임 useMemo 는 특정 결과 값을 재사용 할 때 사용 useCallback 은 특정 함수를 새로 만들지 않고 재사용 할 때 사용 아래의 함수는 컴포넌트가 리렌더링 될 때 마다 새로 만들어짐 솔직히 함수를 선언하는것 자체는 메모리, CPU, 리소스도 많이 차지 하지 않아서 딱히 신경 안써줘도 되긴 하지만 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 중요함. 나중에 컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는것 조차 하지 않고 컴포넌트의 결과물을 재사용하는 최적화 작업을 할텐데 그 작업을 하려면 함수를 재사용 하는것이 필수 const onCreate = () => { const user = { ..

가뜩이나 힘든 컴포넌트 구조를 개발자 도구에서 보자 1. 아래 링크로 가서 설치/ 등록 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022. chrome.google.com 2. 확장 프로그램 등록 / 세부설정 3. 개발자 도구를 열고 컴포넌트 렌더링 업데이트시 하이라이트 처리 체크 그럼 사이사이에 하이라이트 처리가 된다 렌더링 업데이트가 ..

성능 최적화를 위하여 연산된 값을 useMemo 라는 Hook 을 사용하여 재사용 하는 방법을 알아보자 App 컴포넌트에서 아래와 같이 countActiveUsers 라는 함수를 만들어서, active 값이 true 인 사용자의 수를 세어서 화면에 렌더링 해보자 App.js import React, {useRef, useState} from 'react'; import CreateUser from './components/CreateUser'; import UserList from "./components/UserList"; function App() { function countActiveUsers(users) { console.log("active 값이 ture 인 유저의 수를 센는중..."); re..

useEffect 가 하는 일? useEffect Hook 을 이용하여 React 에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야하는지를 말하는것 React 는 넘겨준 함수를 기억했다가 (이 함수가 'effect') DOM 업데이트를 수행한 이후에 불러냄 effect 를 통해 데이터를 가져오거나 다른 명령형 (imperactive) API 를 불러내는 일을 할 수도 있음 useEffect 를 컴포넌트 안에서 불러내는 이유? useEffect 를 컴포넌트 내부에 둠으로써 effect 를 통해 const state 변수, prop에 접근할 수 있음 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있음 Hook 은 자바스크립트의 클로저를 이용하여 React 에 한정된 API 를 고안하..

User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현해보자 users 배열안에 active 라는 속성을 추가해주자 App.js import React, {useRef, useState} from 'react'; import CreateUser from './components/CreateUser'; import UserList from "./components/UserList"; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const {username, email} = inputs; const onChange = e => { const { name,..

이번에는 배열에 항목을 제거 해보자 앞의 글과 계속 이어지는 중 UserList.js import React from "react"; function User({user, onRemove}) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({users, onRemove}) { return ( {users.map(user => ( ))} ); } export default UserList; User 컴포넌트의 삭제 버튼이 클릭 될 때에는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출 해 주어야한다. 여기서 onRemove 는 "id 가 ~~~ 인 객체를..

reduce reduce 는 잘 사용하면 정말 유용한 내장 함수임 배열의 총합을 구한다고 해보자 변수 sumEx 는 그냥 대충지은거임 현재 열어놓은 크롬창에 sum이 선언되어있어서..ㅇㅇㅋ const numbers = [1, 2, 3, 4, 5]; let sumEx = 0; numbers.forEach(n => { sumEx += n; }); console.log(sumEx); 결과는 15 여기서 sumEx 를 계산하려고 선언을 하고, forEach 를 사용해서 계속해서 덧셈 해줬음 근데 reduce 를 사용하면 아래와 같다. const numbers = [1, 2, 3, 4, 5]; let sumEx = numbers.reduce((acc, current) => acc + current, 0); con..

spread spread 의 의미 : 펼치다, 퍼뜨리다. 예를 들어 이런 객체들이 있고 새 객체를 만들 때 마다 앞의 객체의 속성을 그대로 가지고 만들어 줬다. 그러면서 속성은 하나씩 추가가 되었는데 이런 식으로 기존의 것을 건들이지 않고 새로운 객체를 만드는 함수가 spread 놀랍다 매우... 그리고 spread 연산자는 배열에도 사용 할 수 있따. 또한 배열에서 spread 함수를 여러번 사용도 가능! ㅗㅜㅑ... rest 객체에서의 rest rest 안에 head 값을 제외한 값이 들어있다. rest 는 객체와 배열에서 사용 할 때는 이런식의 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때에는 rest 라는 키워드를 사용, 그치만 추출 값한 값의 이름이 꼭 rest 일 필욘없다. 이어서 bo..

자~ 연동 드가자~ 인텔리제이, node.js 가 설치되어있다는 가정하에 연동을 시작해보자 (강제로 잠깐 떠났지만 인텔리제이가 그리웠다.. 인텔리제이 못 잃어..) 1. File -> New -> Project 클릭 2. Spring Initializr 에서 설정하기 언어가 코틀린이면 코틀린으로 바꾸고 설정! 타입은 메이븐이나 그래들 중 본인이 사용하는것ㄱㄱ 3. 원하는 Dependencies 선택 Spring Web만 있어도 된다! 나중에 추가 설정 가능 4. 프로젝트를 만들면 이런식으로 생길텐데 터미널을 열자 npx create-react-app 원하는 디렉토리 이름 위의 이미지의 simple-react 는 내가 명명한 것이다. 그 후 엔터를 누르면 설치 시작! 가만히 구경만 해주자 그러면 happy..

배열에 새로운 항목을 추가하는 방법을 알아보자! 우선 input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트를 components 디렉터리에 생성 import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; 이번 컴포넌트에는 상태관리를 CreateUser 에서 하지 말고 보무 컴포넌트인 App 에서 하게 하고, input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용해보자 위의 컴포넌트를 App 에서 UserList 위에 렌더링 해보자 App.js import './App.css..

Flutter 실전으로 들어가기 전에 Dart 문법을 익혀보자! 간단하게 웹으로 Dart 를 실행 할 수 있는 DartPad 로 익혀보자 Dart 변수와 타입 확인 ${} 를 사용하면 문자열에 변수를 바인딩 할 수 있다. void main () { int n1 = 1; double d1 = 10.1; bool b1 = true; String s1 = "홍길동"; print("정수 : ${n1}"); print("실수 : ${d1}"); print("부울 : ${b1}"); print("스트링 : ${s1}"); print("-----------------------"); print("정수 : ${n1.runtimeType}"); print("실수 : ${d1.runtimeType}"); print("부울..

컴포넌트에서 특정 DOM 을 선택해야 할 때 => ref 를 사용 함수형 컴포넌튼에서 이를 설정 할 때 => useRef 사용 설정 useRef Hook 은 DOM 을 선택하는 용도 외에도, 다른 용도가 있다! 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후 업데이트 된 상태를 조회 할 수 있지만, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있다. 이 변수를 사용하여 다음과 같은 값을 관리 할 수 있다. setTimeout, setInterval 을 통해서 만들어진 id 외부 라이브러리를 사용하여 생..

걍 간단하게 ㄱㄱ html 함수는 해당 태그를 포함한 문자열을 통째로 가져오거나 셋팅하는것이고 ex) TEST text 함수는 태그를 제외한 문자열만 가져오거나 셋팅 ex) TEST ez

플러터를 시작해보자! 플러터란 ? android 와 ios 앱과 웹을 단일 코드 베이스로 개발할 수 있는 구글의 모바일 UI 프레임워크 원래는 ios 와 android는 2개의 코드가 필요하다. java, swift 플랫폼 별로 달라지는 부분들을 서로 다른 플랫폼에서도 자연스럽게 동작하는 앱을 개발하는 것이 목표이다. 플러터의 모든 것은 위젯이다. 따라서 위젯에 대한 개념을 안다면 쉽게 개발이 가능하다 플러터의 언어 특징 플러터는 Dart 라는 프래그래밍 언어를 사용한다. Type 을 지원하는 언어 Type 추론을 지원한다 단일 스레드로 비동기 방식을 지원 UI 에 최적화된 언어 동시성을 지원하지만 완벽하게 격리됨을 보장해 준다 스프레드 연산자를 지원 배열은 없고 컬렉션만 존재 Kotlin, Swift,..

https://developer.android.com/guide?hl=ko 개발자 가이드 | Android 개발자 | Android Developers 개발자 가이드 Android 개발자 가이드에 오신 것을 환영합니다. 이 문서에서는 Android 프레임워크와 기타 라이브러리에서 API를 사용하여 Android 앱을 빌드하는 방법을 설명합니다. Android를 처음 접 developer.android.com

아래와 같이 배열을 하나하나 렌더링 하는것은 노가다를 해야해서 별로 좋지 않아서 컴포넌트를 재사용 할 수 있도록 새로 만들어 보자! ** 한 파일에 여러개의 컴포넌트를 선언해도 괜찮다! 일단은 노가다 버전 UserList.js import React from 'react'; function usersList() { const users = [ { id: 1, usersname: 'velopert', email: 'public.velopert@example.com' }, { id: 2, usersname: 'tester', email: 'tester@example.com' }, { id: 3, usersname: 'admin', email: 'imAdmin@example.com' } ]; return ( ..

JavaScript 에서 특정 DOM 을 선택할 때에는 getElementById, querySelector 같은 DOM Selector 함수를 사용했지만 리액트에서는 ref 를 사용한다 아래 코드는 바로 직전게시글의 내용에서 추가하여 특정 DOM 을 선택 후, 포커싱을 input 으로 잡아보자. 걍 포커싱 잡는 코드임 InputSample.jsx import React, { useState } from "react"; import { useRef } from "react"; function InputSamle() { const [inputs, setInputs] = useState({ id: "", nickname: "" }); // useRef 선언 const nameInput = useRef(); ..

components/InputSample.jsx import React, { useState } from "react"; function InputSamle() { // text 의 초기 값을 "" 로 설정 const [text, setText] = useState(""); // e.target 이벤트가 발생한 DOM input DOM const displayText = (e) => { setText(e.target.value); }; const onReset = () => { setText(""); }; return ( reset 값 : {text} ); } export default InputSamle; App.js import './App.css'; import InputSample from './..