똑같은 삽질은 2번 하지 말자

@RequestMapping(path ="search", method=RequestMethod.GET) public String search(@Validated AccountSearchForm form, BindingResult result,Model model) { if(result.hasErrors()) { return "account/searchForm"; } return "account/searchResult"; } Spring 에서도 유효성 검사가 된다. 뭐가 효율적인지는 잘 모르겠다 프론트단에서 javascript 를 이용해 검사를 해주는게 더 좋은지

-Reactivity : Vue JS 추구하는 가장 중요한 포인트 : 변경된 데이터를 바로 바로 적용하는 것 -인스턴스 : Vue 로 개발할때 개발해야할 단위, 필수적으로 생성해야할 요소 -컴포넌트 : 프론트 프레임워크 부분에서 중요한 요소들(재사용성, 반복 줄이기) -컴포넌트 통신 : 통신 규악을 세움으로써 데이터의 흐름을 예측할 수 있게 하는것 -props : 상위 -> 하위 -event emit : 하위 -> 상위 -HTTP 통신 라이브러리(axios) :깃헙 보자 https://github.com/axios/axios -템플릿 문법 - 데이터 바인딩 (v-bind) - 뷰 디렉티브 (v- ) -Vue CLI :명령어로 프로젝트를 생성하는 도구, 웹팩을 씀 -싱글 파일 컴포넌트 : 파일을 쪼개서 구..

position: absolute z-index: 1 position: absolute z-index: 2 position: absolute z-index: 3 이렇게 화면이 나타난다.. 개인적으로 datepicker api를 쓰면서 달력이 자꾸 다른 태그밑으로 가려져버려서 안 가려지게 하기위해ㅡ 찾아낸 css 속성이다.

1. 프록시 패턴 정의 실제 기능을 수행하는 객체Real Object 대신 가상의 객체Proxy Object를 사용해 로직의 흐름을 제어하는 디자인 패턴입니다. 2. 프록시 패턴 특징 원래 하려던 기능을 수행하며 그외의 부가적인 작업(로깅, 인증, 네트워크 통신 등)을 수행하기에 좋습니다. 비용이 많이 드는 연산(DB 쿼리, 대용량 텍스트 파일 등)을 실제로 필요한 시점에 수행할 수 있습니다. 사용자 입장에서는 프록시 객체나 실제 객체나 사용법은 유사하므로 사용성이 좋습니다. 결제 인터페이스 public interface Payment { void pay(int amount); } 현금 결제 클래스 public class Cash implements Payment{ @Override public void..

Cipher : 일반적인 암호화로 평문 -> 암호문 -> 복호문(평문)의 방식으로 암호화하고 복호화 합니다. 즉, 암호화를 하기 위한 Key 를 가지고 암호화하며, 복호화합니다. Hmac: 암호화를 하면 다시 되돌릴 수 없기 때문에, 암호화 된 암호문 그 자체를 이용합니다. 흔히 웹사이트 가입하면 운영자도 가입정보를 알 수 없다고 하는건 이렇게 Hmac으로 암호화되어서 입니다. Module 가져 온뒤, 사용해보겠습니다. 1.Cipher 방식을 이용한 암호화 var crypto = require('crypto'); // 암호화 var cipher = crypto.createCipher('aes256','password'); // aes256 방식으로 password(key)로 암호화하겠다. cipher.u..

Serialize와 Deserialize 로그인이 성공하면, var LocalStrategy = require('passport-local').Strategy; module.exports = new LocalStrategy({ usernameField: 'email', passwordField: 'password', passReqToCallback: true // 이 옵션을 설정하면 아래 콜백 함수의 첫번째 파라미터로 req 객체 전달됨 }, function (req, email, password, done) { console.log('passport의 local-login 호출됨 : ' + email + ', ' + password); var database = req.app.get('database'..

Object.keys(io.sockets.adapter.rooms).forEach(function (roomId) { console.log('현재 방 ID : ' + roomId); var curRoom = io.sockets.adapter.rooms[roomId]; } Object.keys(객체배열) 해당 객체에 대한 키값들이 callback 함수의 roomId로 들어가 방에 대한 모든 정보들을 얻어올 수 있다. ex) let arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // array like object let obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Obj..

Socket 통신 Server와 Client가 특정 Port를 통해 실시간으로 양방향 통신을 하는 방식 Socket통신은 Http 통신과 달리 Server와 Client가 특정 Port를 통해 연결을 성립하고 있어 실시간으로 양방향 통신을 하는 방식입니다. Client만 필요한 경우에 요청을 보내는 Http 통신과 달리 Socket 통신은 Server 역시 Client로 요청을 보낼 수 있으며, 계속 연결을 유지하는 연결지향형 통신이기 때문에 실시간 통신이 필요한 경우에 자주 사용됩니다. 예를 들면, 실시간 Streaming 중계나 실시간 채팅과 같이 즉각적으로 정보를 주고받는 경우에 사용합니다. 예를 들어 실시간 동영상 Streaming 서비스를 Http 통신으로 구현하였다고 가정하겠습니다. 이러한 경..

1. 온라인 리스소를 활용할 것(Take Advantage Of Online Resources) 먼저 온라인 리소스와 툴을 잘 활용해야 한다. 인터넷은 무한한 정보를 제공하고 있기 때문에 이를 최대한 이용해 올바른 리소스와 툴을 찾으면 프로그래밍 언어를 빠르게 배울 수 있다는 얘기다. 실제 스탠포드 대학에 의해 수행된 연구에 따르면 경험 있는 프로그래머들도 새로운 코딩 언어를 배우기 위한 정보를 찾을 때 "구글 검색(Google searches), 문서(Documentation), 예제 코드(Example code), Q&A 사이트" 등 네 가지에 의존한다. 또한 깃(Git) 등을 통해 코드 쓰는 연습을 많이 하고, 개발자를 위한 지식인으로 불리는 '스택오버플로(StackOverflow)'에 가입해 활용..

설계를 잘하는 방법 1. 사업적 목표(Business Goal)를 먼저 정의하라. 왜 새로운 소프트웨어가 필요한지를 정의해야 한다. 이루고자 하는 것이 무엇인지, 왜 투자되는지를 생각해야 한다. “개발자의 눈으로 Business Roadmap을 해석하는 것을 Technical Roadmap이라고 한다.” 이것은 개발자 및 기획자들의 불필요한 노력을 줄여주고, 협업 구성원들이 쉽게 이해하게 함으로써 조직 역량을 쉽게 집중할 수 있게 해준다. 2. 사용자(User)가 서비스를 어떻게 사용하는지를 정의하라. 사용자는 “직접적인 사용자”를 말한다. 사용자가 이 서비스를 어떻게 사용할지 상상이 되지 않는다면, Architecture를 그리기 시작해서는 안된다. 이 상상은 예외로 인한 에러나 오류가능성을 줄여준다...