얼음콜라

안녕하세요. 많은 javascript 개발자가 사랑하는 모듈이였지만, 이제는 바꿔야할 moment.js와 그 이유에 대해서 포스팅 해보겠습니다. 소식 Luxon 사용법 예시 1. 소식 moment.js가 레거시 프로젝트로 공식적으로 선언이 되었습니다. 이번 소식은 아닐 수 도 있습니다만, 중요한 소식이고 영향력이 있는 소식이라 판단되어 공유 합니다. https://momentjs.com/docs/#:~:text=We%20now%20generally%20consider%20Moment%20to%20be%20a%20legacy%20project%20in%20maintenance%20mode.%20It%20is%20not%20dead%2C%20but%20it%20is%20indeed%20done. Moment..

안녕하세요. Array 메소드가 공부를 멈추면 어떤 문제를 해결할 때 제가 아는 범주에서만 생각하게 되는 듯 합니다. 문제는 해결 할 수 있지만, 성장이 더뎌지는 느낌이 나서 제가 몰라서 자주 사용하지 않았던 Javascript Array.reduce 에 대하여 알아 보도록 하겠습니다. 설명 예시1 예시2 1. 설명 Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 라고 mdn web doc에 나와있습니다. 값이 나열 되어있는 배열에서, 한 값을 도출 할 때 사용하면 유용하다 것으로 인식 하면 될 듯합니다 참고 : https://developer.mozilla.org/ko/docs/W..

안녕하세여, 오랜만에 포스팅을 진행합니다. 어깨 수술이랑 새프로젝트 때문에 생각한 포스팅이 밀려있습니다. 오늘은 자주 사용하지는 않으나 까먹어서 매번 검색하는 window api 입니다. 1. window.innerWidth, window.innerHeight 현재 열려있는 윈도우(창)의 크기를 구하는 Web Api 입니다. 반응형웹을 만들때, 햄버거(메뉴창)를 만들때 유용합니다. 미디어 쿼리를 사용해서, 사용하는 방법도있으나, 저는 JS 가 익숙해서 컴포넌트를 올렸다 내렸다 하는 방식이 편하더라구요. 각자 다른방법이 있을테니 상황에 맞게 사용하면 될듯합니다. 아래 예제코드를 간단히 기입했습니다. innerWidth를 innerHeight으로 수정하면 반대 작업도 가능하겠죠? See the Pen Unt..

현재 저는 해외 기업 프로젝트를 진행 중이라, 만나이가 기본이라, 헷갈린적이 있었는데요. 이번에 저희 나라가 만나이 계산으로 바뀔수 있다는 정보를 확인하고, 찾고자하는 분들이 있을 듯해서 공유드립니다. Javascript 코드 코드 설명 1. Javascript 코드 아무것도 보이지 않는 분들은 [JS] 버튼을 한번 클릭해주세요. See the Pen Untitled by icecokel (@icecokel) on CodePen. 2. 코드 설명 처음에는 기존 한국 나이처럼 태어난 년도 기준으로 나이를 계산합니다. age = today.getFullYear() - birthDay.getFullYear(); 처음에 선언했던 birthDay 데이트 객체에서 년도만 오늘 기준으로 바꿔주고, getTime() ..

안녕하세요. 현재 토이 프로젝트로 실시간으로 렌더링이 중요한 작업을 진행하고 있었습니다. 컴포넌트의 state를 수정해도 리 렌더링이 되지 않아 골머리를 싸맸었는데, 아주 간단한 이유였습니다. state의 변화 기준 1. state의 변화 기준 우선 문제가 되던 프로젝트는 채팅 앱이였고, 웹소켓을 받았을 때 스테이트가 수정되도록 하는 게 목표였습니다. // 서버로 부터 메시지를 받을 때 webSocket.onmessage = (e: any) => { const msgObj = JSON.parse(e.data); const tempReceivedMessageList = receivedMessage; tempReceivedMessageList.push(JSON.parse(msgObj.message)); se..

안녕하세요. 오늘은 React 시자하는 방법에 대하여 포스팅을 진행하겠습니다. 사전설치 create-react-app으로 React 설치하기 react 시작하기 1. 사전설치 개발을 시작하기전 개발 할 툴이 있어야겠죠. 저는 VSCode를 사용해보겠습니다 code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized f..