얼음콜라

안녕하세요. 많은 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() ..

안녕하세요. 요즘 프로젝트를 바삐 달리고, 오랜만에 포스팅을 진행합니다. 평소에 CSS에 자신이 없어, 어려워하는 부분이 많았고, 제 수준에 꽤나 까다로운 과제들이 있었어서, 다른 분들 포스팅을 자주 보게 됐습니다. 그러다가 코드 펜이라는 걸 알게 됐고, 포스팅할 때 유용할 것이라 판단되어 조사를 했습니다. 코드 펜이란? 코드 펜 가입 및 로그인하기 코드 펜 사용해보기 1. 코드 펜이란? 개발자들 주로 프론트 엔드 개발자들이, 본인이 구현한 HTML, CSS, Javascript 코드 조각들을 테스트하고, 시연하기 위한 커뮤니티,라고 정의되어있습니다. 블로그 포스팅을 자주 찾아보시는 분들은, 코드 펜이라고 하면 잘 모르시지만, 막상 보면 한 번쯤은 본 적이 있는 커뮤니티 일 듯합니다. 2. 코드 펜 가입..

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

안녕하세요. 오늘은 저번 포스팅에 이어서 TypeScript 환경에서의 Express-session의 cookie를 이용하여, 자동 로그인을 진행하는 파트를 포스팅 해보겠습니다. 작업환경 로그인 기억하기 1. 작업환경 운영체제 Windows 10 Pro 사용 툴 VSCode 1.59 node v14.17.3 npm 6.14.13 2. 로그인 기억하기 작업 전 cookie의 Expires / Max-Age 먼저 알아 보고 가겠습니다. 각각 만료 / 최대 연령(수명주기) 라고 직역이 가능 할 듯 합니다. cookie가 사라지는 시점이죠. express-session에서는 cookie의 MaxAge를 따로 설정해주지 않으면 seesion 상태가 됩니다. 세션이 사라지면 쿠키도 같이 사라지죠. 로그인 기억하기 ..

안녕하세요. 오늘은 제가 사이드 프로젝트에 추가한 SCSS에 대해서 간략한 포스팅을 진행하겠습니다. SCSS 개념 및 장점 SCSS 사용방법 1. SCSS 개념 및 장점 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS라고 합니다. ** SASS/SCSS 앞으로는 SCSS 문법으로만 진행할 것이 이기에 SCSS라고 통칭하겠습니다. SCSS는 중첩, 변수 선언, 연산자 등 많은 장점을 가지고 있습니다. 대..