본문 바로가기

STUDY

(287)
Java | 배열 오름차순 / 내림차순 정렬하기 ( Arrays.sort() ) Arrays는 java.util소속 클래스로 배열과 관련된 여러 메서드들이 포함되어 있습니다. ! 반드시 import 해주어야 사용할 수 있습니다. 기본적으로 sort() 메서드는 오름차순 정렬을 해줍니다. 내림차순 정렬을 하고싶다면? 내림차순 정렬을 하기 위해서는 int가 아니라 Integer배열로 변환해준 뒤 Collections혹은 Comparator의 reaverseOreder() 메서드를 이용해 내림차순 정렬을 해야 합니다. 그냥 int배열에는 reverseOrder()가 적용되지 않습니다. 만약 int배열로 다시 변환하고 싶다면 mapToInt를 이용해 다시 한 번 변환해줄 수 있습니다. import java.util.Arrays; import java.util.Collections; //im..
Java | 자바 가상 머신 JVM(Java Virtual Machine) Write once, Run anywhere. 자바는 자바 가상 머신(JVM: Java Virtual Machine)을 통해 운영체제와 상관 없이 독립적으로 동작할 수 있습니다. 즉 운영체제에 맞는 JVM만 설치되어 있다면 어떤 운영체제에서도 동일한 실행결과가 나온다는 것입니다. JVM덕분에 개발자는 운영체제와 상관없이 자바 프로그램을 개발할 수 있습니다. (JVM은 운영체제에 맞게 설치되어야 하며, JVM은 JDK혹은 JRE를 설치할 때 자동으로 설치됩니다.) JDK? JRE? JDK는 자발 개발 도구(Java Developmemt Kit)으로 프로그램 개발에 필요 JRE는 자바 실행 환경(Java Runtime Enironment)로 프로그램 실행에 필요 JVM과 자바 프로그램의 실행단계를 보면, 개..
React | Hooks로 Life Cycle API 구현하기 Hooks는 함수 컴포넌트에서도 클래스 컴포넌트처럼 state를 다룰 수 있고 여러 기능을 사용할 수 있게 해줍니다. (this를 바인딩 하지 않아도 돼서 매우 편리하게 사용 중) 리액트에서 기본으로 제공하는 Hooks는 useState, useEffect, useCallback 등이 있으며, 그중에서 Life Cycle API와 관련된 Hooks는 useEffect입니다. 즉 useEffect로 componentDidMount, componentDidUpdate 등의 처리를 할 수 있습니다. 해당 컴포넌트에서 구독이나 비동기 네트워킹 등의 동작은 useEffect를 이용해서 데이터를 받아오면 됩니다. +) 사용 예시 useEffect를 이용해 컴포넌트가 생성될 때 비동기 통신을 통해 값을 받아와 컴포넌..
React | emoji 사용하기 role과 aria-label을 지정해주면 warning표시 없이 이모지를 사용할 수 있습니다. ✍ HTML Special Character Codes Browse special HTML symbols and find their character codes in the categories above. Every character has a code available in the following format html-css-js.com
CSS | 말풍선 만들기 사이트 ( + 활용) 아래 사이트에 방문해서 기본 말풍선을 만들 수 있는 코드를 생성한 후, 커스텀 해주면 편리합니다. cssarrowplease Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. Fork me on Github www.cssarrowplease.com +) 예시 버튼을 눌러 채팅을 시작해 보세요! .room-list-empty-room{ position: absolute; background: #5677f4; color: #fff; padding: 13px; border-radius: 20rem; top: 135px; right:..
MySQL | 조건부 UPDATE ( IF / CASE ) UPDATE를 할 때 WHERE절 외에 조건을 주어 수정되도록 합니다. UPDATE 테이블명 SET 컬럼명 = CASE WHEN 조건 THEN (조건부합O)변경할 값 ELSE (조건부합X)변경할 값 END WHERE 조건 예시 host_user나 participant_user가 'abc'라면 null로 업데이트하고, 아닐 경우 값은 유지되도록 함 UPDATE CHAT_ROOMS SET HOST_USER = CASE HOST_USER='abc' THEN NULL ELSE HOST_USER END, PARTICIPANT_USER = CASE PARTICIPANT_USER='abc' THEN NULL ELSE PARTICIPANT_USER END WHERE CHAT_ROOM_ID = 2; +) 참고 CASE문..
React | 로그인 정보 없을 경우 로그인 페이지로 redirect하기 ( react-router, PrivateRoute, 로그인 권한 ) +) 참고 Private routes with React-router-DOM If you have been developing in React then you have probably come across React-router-dom. One thing I was looking for when I started the… medium.com 1. PrivateRoute 작성 저는 로그인 정보를 localStorage에 저장하는 방법을 사용하고 있습니다. 상황에 맞게 작성하세요. 로그인 정보가 있을 경우 해당 컴포넌트로 이동할 수 있지만, 로그인 정보가 없다면 로그인 페이지로 redirect되도록 해줍니다. import React from 'react'; import { Redirect, Route } f..
React | React-Redux 비동기 통신(fetch / redux-thunk) 1. Action, Reducer 작성 fetch를 사용하기 위해서 우선 npm을 이용해 isomorphic-fetch를 install해줍니다. $ npm install isomorphic-fetch action 생산자는 아래와 같이 작성해주었습니다. import fetch from 'isomorphic-fetch'; import * as type from '../constants/actionTypes'; export const userSignUp = (signUpInfo) => { return dispatch => { fetch("http://localhost:3002/users/signUp", { method:'post', headers: {'Content-Type': 'application/json..