자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

flatMap()에 대해서 알아보자. 얘를 설명하고 있는 MDN을 보면 '먼저 매핑함수를 사용해서 각 요소에 map을 수행한 후, 결과를 새로운 배열로 평평화한다.' 평평화가 뭔 말이냐... 그래서 직접 써봤다. 위의 결과는 map()을 사용했을 때와 결과가 똑같다. 그러나 진가는 이제부터 발휘된다. map()에 들어가는 함수에서 리턴을 배열을 할 경우 어떻게 될까? 요소에 2를 곱한 후 그 결과를 배열로 리턴하면 map()의 경우 리턴되는 각각의 배열 요소를 배열로 감싸서 리턴한다. [ [ 2 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ] ] 하지만 flatMap()이 출동하면 어떻게될까? 일련의 처리를 수행하는 함수에서 각각의 요소를 배열로 리턴해도 리턴하는 요소의 배열을 제거하여 순수한 값을..

그동안 Javascript의 쓰고 싶었으나 몰라서 못썼던 기능들을 학습해보자. 가장 먼저 map()함수다. 해당 함수는 배열에 사용할 수 있다. map() 인자로 함수를 넣어서 배열의 모든 요소들에 동일한 로직을 수행할 수 있다. map()의 인자로 익명함수를 넣었고 x는 arr1의 요소들이다. 요소에 곱하기 2를 하여 리턴하여 새로운 배열을 반환한다. 여기서 중요한건 기존 arr1변수에 값이 변경되는 것이 아니라 새로운 배열을 생성한다는 것이다!! 잊지말자! 위의 기능을 풀어보면 다음과 같다. const arr = [1, 2, 3, 4, 5]; function myMap(array) { const tempArray = []; for(let i = 0; i < array.length; i += 1) { ..

어제 마무리한 채팅 프로그램을 리뷰해보자. 데이터 베이스는 사용하지 않았다. 가볍고 빠르게 만들기 위해서 변수에 저장하여 사용하는 방식으로 만들었다. (굳이 간단한 프로그램 디비 붙여서 자원낭비 하기 싫다...) 우선 로그인 및 회원가입 화면을 만들어보자. 최초로 사이트를 접속했을 때 로그인 폼을 보여준다. 이후 좌측에서 메뉴를 변경하면 그에 해당하는 폼을 보여준다. 공통적으로 input 태그에 대한 데이터 검증을 시도해야하고, 로그인에서 존재하지 않는 계정으로 로그인을 시도할 경우 회원가입 폼으로 이동시켜주자. 템플릿을 하나 만들고 아래의 코드를 작성하자. html head title script(src = '/js/socket.io.js') body div(id = 'wrapper') div(id =..

오늘은 그동안 스킵되었던 신규 기능 게임 가이드 기능을 개발했다. 역시나 기획은 아직 나오지 않고 목록 화면 디자인만 나와서 해당 디자인을 기반으로 테이블 설계를 작업했다 그리고 목록 조회, 검색 조회, 목록 페이지네이션 API를 만들고 상세보기 API를 만들었다. 그 외에 글 작성이나 수정 등은 컨셉이 나와야 작업이 가능할 것 같아 다시 스킵되었다. 현재 채팅기능이 완료되서 주석 달고 코드 정리 중이다. 아마 내일은 코드와 함께 리뷰 일지를 작성할 수 있을 것 같다.

오늘도 어김없이 어제 공부의 연장선이다. https://pa-pico.tistory.com/3?category=839605 [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (1) - 설계 및 기획 [PROJECT] Socket.io 채팅 어플리케이션 (1) - 설계 및 기획 Socket.io 채팅 애플리케이션 (1) - 설계 및 기획 앞으로 여러 차시를 거쳐서 채팅 애플리케이션을 만들 것 이다. 기본적으로 준비해야 할 것들 IDE (.. pa-pico.tistory.com 이 곳에 올라와있는 포스트를 기반으로 디자인이나 코드작업을 진행하고 있다. 단 코드가 jQuery 기반 코드여서 이를 JavaScript 기반으로, 서버는 TS를 첨가해서 변환하여 작업하고 있다. 그리고 템플릿은 pug..

오늘도 어제의 공부 내용의 심화 학습이다. 네임스페이스를 학습하여 여러 채널을 띄우는 방법을 터득했다. 이제 회원가입, 로그인, 로그아웃을 소켓 통신으로 구현하여 적용하고, 이후 채팅방을 선택하여 접속, 채팅할 수 있는 기능을 만들 것이다. 오늘은 템플릿 만들고 디자인하고 학습하는데 시간을 다 써서 딱히 만들어진게 없다...

아직 기획이 안나와서 공부 중이다. 그래서 개인 프로젝트를 어떻게 해야할 지 좋은 아이디어도 안떠오르고 해서 언젠가 한번 공부해야지 했던 소켓을 학습하는 시간을 가졌다. Socket.IO란? 소켓은 브라우저와 서버간의 실시간 양방향 및 이벤트 기반 통신을 가능하게 해주는 라이브러리다. Socket.IO 특징 신뢰성 프록시 및 로드 밸런스 환경에서도 연결이 가능하다. 개인 방화벽 및 바이러스 백신 소프트웨어로부터 신뢰를 얻을 수 있다. 자동 재 연결 지원 별도의 설정이 없는 한 연결이 끊긴 클라이언트는 서버에 다시 연결할 수 있다. 연결 해제 감지 HeartBeat 메커니즘으로 서버와 클라이언트 모두 어느 한 쪽이 응답이 없을 때를 알 수 있다. 바이너리 지원 브라우저의 ArrayBuffer 및 Blob에..

오늘은 어제에 이어서 계속해서 로그인에 관련된 문제들을 점검했다. 우선 프론트팀에서 webpack dev server로 개발을 진행하고 있는데, vue-cli로 프로젝트를 생성하지 않고 직접 webpack.config 등 설정 파일들을 수기로 작성하여 사용하고 있었다. 여기서 개발 중 프론트 개발 서버에서 백엔드 개발 서버로 요청을 보내고 응답을 받았을 때 응답에 Set-Cookie 헤더 정보가 있어도 클라이언트 브라우저에서 쿠키를 생성하지 못하는 문제가 있었다. 해당 문제는 웹팩 설정에 대한 이해도가 깊지 않은 상태에서 개발을 하다보니 발생한 문제였다. 해결 방법은 다음과 같은데, webpack dev server의 webpack config 설정 중 proxy 속성을 설정해야 한다. 이 속성은 API..