YunHyeong

유효성 검사란 client측에서 server로 데이터를 보낼때 그 데이터들이 정확한지 확인하는 과정이다. 만일 이 부분을 직접 코드로 작성하면 조건문을 걸어서 일일이 검사를 해야하지만 Node js에서 express-validator라는 라이브러리가 있어서 비교적 간단하게 유효성 검사를 할 수 있다. 1. express-validator설치 npm i express-validator 2. express-validator 유용한 API notEmpty(): body안의 값이 비어있지 않은지 확인 withMessage(): body안의 값을 잘못된 방식으로 요청할 때 메세지 출력 isLength(): 글자수 크기를 제한할 때 사용 isInt(): 정수 값인지 확인 isEmail(): email인지 여부를 확..

문제 자체를 이해하기 까다러워서 다른 블로그들을 참고해서 해결했다. 문제에서 주어진 배열을 내림차순으로 정렬하고 HIndex를 하나씩 증가시켜서 배열의 숫자들과 비교해서 답을 찾았다. while문 안에서 HIndex + 1로 표현한 이유는 citations 배열에 [0]하나만 왔을 때를 대비하기 위해서다.

처음에 numbers배열에 있는 모든 숫자를 toString()을 통해서 문자열로 바꾼다음 sort()함수의 콜백을 (a,b) => (b+a)-(a+b)로 전달하여 정렬을 진행한다. 마지막으로 answer의 모든 값이 0일때는 answer의 첫번째 숫자가 무조건 0이기 때문에 문자열 '0'을 리턴한다.

오랜만에 프로그래머스 문제를 풀어봤다. k번째 수라는 문제였다. 특이했던 점은 테스트 2번에서만 계속 통과가 되지 않아서 구글링을 통해 원인을 알아봤다. 원인은 자바스크립트에서 단순히 sort만 사용했을 때는 안의 값을 문자열로 취급하여 유니코드 값 순으로 배열을 정렬한다. 예를 들어 [1, 10, 101, 61, 45].sort()로 사용하면 결과값은 [ 1, 10, 101, 45, 61 ] 이 나온다. 이를 해결하기 위해서는 위의 코드 처럼 콜백함수를 넣어 주어야 한다.

자바스크립트는 기본적으로 동기처리를 수행한다. 자바스크립트는 호이스팅(코드상에서 선언된 함수나 var 변수를 코드상 제일 위에 위치 시켜 순서대로 읽는 것)수행 이후 부터 코드를 순서대로 실행한다. 하지만 비동기처리는 코드의 순서에 크게 구애를 받지않고 정해진 함수를 처리하는 것을 말한다. 대표적으로 setTimeout함수가 있다. setTime함수는 일정 시간이 지나면 그 안에 있는 콜백함수를 실행시키기 때문에 코드 순서에 크게 상관없이 동작한다. Why Promise? promise를 인터넷으로 영화를 예매하는 상황과 비유해보자면, 영화를 예매할 때 원하는 좌석을 누르면 영화예매에 성공한다. 하지만 만일 좌석이 없거나 원하는 좌석을 이미 다른 사람이 예약한 경우라면 예매가 불가능하다는 메세지를 소비자..

게시물 생성 페이지를 모달 창처럼 만드는 와중 필자는 이벤트 버블링 문제를 겪었다. 이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이다. 사진 출처 : https://ssimplay.tistory.com/460 [jQuery] 모달창 만들기 안녕하세요. 개자이너 씸플레이입니다. 오늘은 모달 창을 만들어 볼 예정입니다. 모달 창이란? 여러분도 한 번쯤은 보신 적이 있으실 겁니다. 버튼이나 이미지를 눌렀을 때 새로운 페이지가 열 ssimplay.tistory.com 이런식으로 모달창이 있다고 했을 때 필자는 하얀색 모달창을 눌렀을 때는 현재 화면을 유지하고, 나머지 바깥쪽 화면을 눌렀을때 화면이 닫히도록 만들고 싶었다. 하지만 하얀색 모달..

- axios는 Node.js를 위해 만들어진 Promise API 비동기 통신 라이브러리다. axios사용 예시 - 먼저 axios를 설치한다. - axios사용 예시 코드 .then이라는 키워드가 비동기식 처리를 수행한다. axios.get을 이용하여 api를 가져오고 그 후 then으로 정보를 처리한다. 만일 api가 잘못됐거나 문제가 생길 경우 catch에서 예외처리를 한다.

프로토콜을 계층화 하는 이유는 안정적인 네트워크 통신을 위해서다 만일 프로토콜 계층화를 하지 않는 다면 작업이 복잡해지고, 암호화와 복호화를 하지않아 보안상의 문제가 발생할 수 있다. 1 layer : 어플리케이션 계층 애플리케이션 계층은 네트워크 애플리케이션과 애플리케이션 계층 프로토콜이 있는 곳이다. 인터넷의 애플리케이션 계층은 HTTP, SMTP, FTP 같은 많은 프로토콜을 포함한다. 우리에게 친근한 www.ietf.org 같은 이름을 32비트 네트워크 주소로 변환하는 네트워크 기능을 볼 것이고, 이것은 애플리케이션 계층에서 도메인 네임 서버(DNS)가 돕는다. 애플리케이션 계층 프로토콜은 여러 종단 시스템에 분산되어 있어서, 한 종단 시스템이 있는 애플리케이션이 다른 종단 시스템에 있는 애플리케..

리액트는 컴포넌트 기반의 View를 중심으로한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에서 렌더링되기 전에서 시작하여, 페이지에서 사라질 때 끝이난다. 위의 사진에서 볼 수 있듯이 크게 세가지 상황이 존재할 수 있는데 생성 될때(mount), 업데이트 할 때(update), 제거할 때(unmount)이다. 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다. 업데이트 부분은 총 4가지 상황에서 발생하는데, 1. props가 바뀔 때, 2. state가 바뀔 때, 3. 부모 컴포넌트가 리렌더링 될때, 4. this.forceUpdate로 강제로 렌더링을 트리거 할 때이다...

인터넷은 우리 일상에서 흔히 쓰이는 용어이고 휴대전화나 pc등으로 쉽게 접근할 수 있다. 하지만 "인터넷이란 무엇인가?"라는 질문에는 확실한 대답을 하기 어렵다. 인터넷을 확실한 개념으로 설명하는데는 어려움이 있다. 인터넷의 개념이 추상적이면서 범용적이기 때문이다. 인터넷이 무엇인가에 대해서 명확하게 답할 수 는 없지만, 인터넷의 구성요소와 서비스 측면에서 인터넷이 무슨 역할을 하며 인터넷의 쓰임을 알 수 있을 것이다. 1. 구성요소로 보는 인터넷(nuts and bolts view) 인터넷은 수많은 컴퓨터 장치들로 연결되어 있다. 이들 모든 장치는 호스트 혹은 종단 시스템(end system)이라고 부른다. 종단 시스템은 통신 링크(communication link)와 패킷 스위치(packet swit..