출처 https://studiomeal.com/archives/197 flex-direction .container { flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ } flex-item들의 정렬 방향을 설정한다. row면 가로 column이면 세로로 정렬한다. flex-wrap .container { flex-wrap: nowrap; /* flex-wrap: wrap; */ /* flex-wrap: wrap-reverse; */ } 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 처리 할지..

async/await 이란? 지금까지 비동기/동기의 의미와 왜 비동기 처리가 필요한지 등등을 간략하게 알아봤다, 그런데 ECMAScript 2017 에서 async 함수가 추가되었다. 콜백헬을 해결해주던 Promise에서 더욱 가독성을 높이고 사람의 입장에서 더욱 일기 쉽도록 만들어 준다. function hello() { return "Hello" }; hello(); 웹 브라우저 콘솔에 위 코드를 실행해 보자, 쉽다 Heollo를 반환한다 async function hello() { return "Hello" }; hello(); 위 코드는 함수 앞에 async라는 키워드가 붙었다, 실행해 보면 이런 모습이다, Promise를 반환했다 그렇다 async 키워드를 붙이면 함수가 그냥 값을 return ..

redux란 무엇인가? redux는 react와 가장 많이 사용되지만 redux자체로 존재할 수 있다, 리액트에서 가장많이 쓰이지만 노드나 vue에서도 사용가능하다. redux 와 react 연결하기 - app.js import React from 'react'; import Head from 'next/head'; import withRedux from 'next-redux-wrapper'; import withReduxSaga from 'next-redux-saga'; import { applyMiddleware, compose, createStore } from 'redux'; import { Provider } from 'react-redux'; import createSagaMiddleware ..

자바스크립트에게 비동기란? 자바스크립트는 싱드스레드로 동작한다, 많이 들어보았을 것이다 하나의 스레드이기 때문에 한번에 하나의 작업만을 수행할 수 있다. 특히 Node.js 에서 웹서버를 구현할 때 모든 동작을 비동기로 처리하는 것은 매우 중요하다. 만약 동기로 처리하면 해당 처리가 완료될 때 까지 마치 서버가 멈춘 것처럼 다른 요청을 처리하지 못한다. 비동기가 대체 뭘까? 우리는 편의에 의해 금융/철학/과학/수학/역사/자연 등의 분야로 세상을 분리하지만 이 모든일은 동시에 일어난다. 어디서 이 문장을 봤는지 기억이 않나는데 유발 하라리의 사피엔스 라는 책에서 봤던 것 같다.. 검색으로 정확한 책이름을 찾고 싶은데 않나온다. 아무튼 실제 세상에는 모든것이 동시에 일어나는 일종의 비동기 이다. 하지만 프로..

이직 후 스프링부트, JPA를 주 스택으로 사용하게 되었다 공부한 내용을 기록하자 갓영한님의 강의는 늘 구매하자 기억하기 실무에서는 무조건 단순하게 명확하게 개발해야 한다 헷갈리게 만들면 안된다. (개인적으로 일관되게 만드는것도 중요 하게 생각 함) 정적인 의존관계는 변경하지 않은채로 동적인 의존관계 및 주입을 변경할 수 있어야 한다. (이게 가능해야 SOLID 원칙을 잘 지킨 것 이라고 볼 수 있다.) 가장 좋은 에러는 컴파일 시점에서 발생하는 에러다 런타임 시점에서 실행해 봤을 때 발생하는 에러는 큰 비용으로 이어질 수 있다. 용어 정리 TDD -> 테스트 주도 개발 => 테스트 코드를 먼저 짠다(검증 부터 고민한다) 이 후 실제 개발을 만드는 식에 개발 방법 서비스 -> 비즈니스 로직이 포함되는 부..

Optional 공부하기 이직 후 회사에서 스프링부트와 JPA를 사용하는데 자바스크립트에 익숙했던 나에게 자바문법이 익숙하지 않고 생각처럼 되지않는 경우가 많았는데 가장 헷갈리는게 Optional 이였다. Optional을 학습해 보자 Optional의 특징 값이 있거나 없음을 표현한다. null을 대체한다. 자바 8 버전에서 추가 되었다. if(sid != null && !sid.isEmpty()) { map.put("sid", sid); } if(utcTim != null && !utcTim.isEmpty()) { map.put("utcTim", Double.parseDouble(utcTim)); } if(rsltTTC != null && !rsltTTC.isEmpty()) { map.put("rsl..