얼음콜라

안녕하세요. 많은 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 랑 document가 뭔가 비슷한듯 한데, 다른것 같다. 차이가 뭘까 싶어서 조사를 시작했다. window 와 document 차이 1. window 와 document 차이 결론 부터 말하자면 , window 안에 document가 포함되어 있다. 아주 간단하게 증명할 수 있었습니다.. 개발자 도구를 열고 window 객체를 찾아보니 보란듯이 document가 안에 있었습니다. 대표적인 document 예제로도 확인이 가능했습니다. window.document.getElementById("tinymce"); document.getElementById("tinymce"); 이 두가지는 같은 결과를 보여줍니다. 포함 관계임을 쉽게 알 수 있었습니다. s..

안녕하세요. 요즘 급하게 다른 회사에서 진행하던 프로젝트를 받아서, 거의 마무리 되어가고있는데, 매달의 마지막날 계산하는 방법을 배열로 정리해놓은것을 확인했습니다. 더 쉽게 계산할 방법이 있는데, 모르시는 분들이 있을 수 있겠다 싶어서, 공유하고자 합니다. 그래서 오늘은 매달의 마지막날을 구하는 방법에 대해서 포스팅을 해보겠습니다. 매달 마지막 날 계산 코드 설명 1. 매달 마지막 날 계산 (JavaScript 코드) See the Pen Untitled by icecokel (@icecokel) on CodePen. 2. 코드설명 코드 설명이랄게 없이 간단한 코드라 짧겠지만, 설명을 드려보겠습니다. 머릿글에서 말했던것 처럼 배열로 마지막날을 가지고 다닌다면, 윤달 계산처럼 특이 케이스 경우를 예외로 걸..

안녕하세여, 오랜만에 포스팅을 진행합니다. 어깨 수술이랑 새프로젝트 때문에 생각한 포스팅이 밀려있습니다. 오늘은 자주 사용하지는 않으나 까먹어서 매번 검색하는 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..