얼음콜라

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

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

안녕하세요. 저희 회사에서는 개발하면서 Warning과 Error관해 깐깐한 편인데요. 이전 회사와, 공부할 때는 원하는 기능만 되면, 개발이 완료되었다고 생각했었는데, Warning까지 다 잡아가면서 개발을 하니, 확실히 배우는 부분이 많습니다. 그래서 오늘은 많지는 않지만, 현재 사이드 프로젝트를 하면서 보였던 쉽게 놓치고 지나갈 수 있는 실수를 포스팅해보겠습니다. body태그 input:passowrd 태그 1. body태그 HTML 시멘틱에 대해서 알고 나서부터 신경 쓰면서 개발을 진행하고 있습니다. 난사를 막고, 좀 더 가독성 있는 코드를 짜고 싶은 욕심에 개발하고 있는 사이드 프로젝트에서도 적용시키려고 하고 있습니다. // app.tsx const app = ()= >{ return ( .....

안녕하세요. Express 서버 세팅을 완료 하고, 해당 프로젝트에 React를 올리는 작업을 포스팅진해도록 하겠습니다. TypeScript를 사용하여 Express 세팅하기 TypeSrcript를 사용하여 Express 세팅 안녕하세요. 사이드 프로젝트를 시작하며, TypeScript를 사용하여 Express 서버를 세팅해봤는데, 생각보다 찾아보고 설정해야할 항목이 많아서, 같은 상황에 도움이 될까하여 포스팅을 진행해봅니다 icecokel.tistory.com 설치환경 react 설치 및 확인 concurrently 설치 및 scripts 세팅 1. 설치환경 운영체제 Windows 10 Pro 사용 툴 VSCode 1.59 node v14.17.3 npm 6.14.13 2. react 설치 및 확인 r..