404 page not found : 기록장

현재 근무하고 있는 회사에서 third-party sdk를 사용하여, 채팅 개발 중 넘어오는 createdAt 시간을 각기 다르게 표출해야해서 초기 작업 중, moment.js를 사용하였지만 더 가벼운 라이브러리인 dayjs를 활용하게 되었습니다. 채팅방 리스트에서 표출 될 시간의 포맷은 1 초전, ~분전, ~시간 전, 날짜 이며, 채팅방 내용 옆에 붙을 시각 표시는 00:00AM / 00:00PM 채팅 날짜 구분을 위해 사용할 포맷으로 요일-일-달 입니다. 사내에서 개발하여 사용하는 데이터의 createdAt은 string으로 넘어오며, sdk에서 넘어오는 데이터의 createdAt은 number로 넘어오기 때문에 time의 type을 number 와 string으로 지정했습니다 dayjs를 사용할 때..

동등 연산자 (==) 자바스크립트에서는 두 개의 값이 같은지 비교할 때 동등 연산자 (==)를 사용합니다. 이 연산자는 값의 타입을 무시하고 값 자체를 비교합니다. 예를 들어, 다음과 같은 코드를 실행하면 true를 반환합니다. var a = 10; var b = "10"; console.log(a == b); // true a와 b는 값은 같지만 타입이 다릅니다. 하지만 동등 연산자는 값을 비교하기 때문에 true를 반환합니다. 일치 연산자 (===) 동등 연산자와 달리 일치 연산자 (===)는 값과 타입을 모두 비교합니다. 예를 들어, 다음과 같은 코드를 실행하면 false를 반환합니다. var a = 10; var b = "10"; console.log(a === b); // false a와 b는 ..

기본 연산자 javascript에서는 다양한 종류의 연산자가 사용됩니다. 단항 연산자 단항 연산자는 하나의 피연산자에 대해 적용되는 연산자입니다. 가장 일반적인 단항 연산자는 부호 연산자입니다. 부호 연산자는 + 또는 -로 나타낼 수 있으며, 피연산자의 부호를 반대로 바꿉니다. let x = 10; console.log(-x); // -10 이항 연산자 이항 연산자는 두 개의 피연산자에 대해 적용되는 연산자입니다. 기본 연산자인 덧셈 (+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/), 그리고 나머지 (%) 연산자가 이항 연산자에 해당합니다. let x = 10; let y = 5; console.log(x + y); // 15 console.log(x - y); // 5 console.log(x * y..

자바스크립트에서는 다양한 자료형을 다룰 수 있습니다. 때로는 서로 다른 자료형을 연산하거나 비교해야 할 때가 있습니다. 이때 자동 형 변환이 일어나기도 하지만, 명시적으로 형을 변환해주는 것이 더욱 안전하게 코드를 작성할 수 있습니다. 문자열로 변환 숫자나 불리언 값 등을 문자열로 변환하려면, 각 값의 toString() 메소드를 사용하면 됩니다. let num = 123; let booleanValue = true; console.log(num.toString()); // "123" console.log(booleanValue.toString()); // "true" 숫자로 변환 문자열을 숫자로 변환하려면 parseInt()나 parseFloat() 메소드를 사용합니다. let strNum = "456..

alert, prompt, confirm을 이용한 상호작용 웹 개발에서 사용자와의 상호작용은 매우 중요합니다. 이번 글에서는 자바스크립트의 alert, prompt, confirm을 이용한 상호작용에 대해 알아보겠습니다. alert alert는 가장 간단한 상호작용 방법 중 하나입니다. alert를 사용하면 사용자에게 메시지를 보여줄 수 있습니다. 예를 들어: alert('안녕하세요!'); 위 코드를 실행하면, 사용자에게 안녕하세요!라는 메시지가 나타납니다. prompt prompt는 사용자로부터 입력을 받을 수 있는 상호작용 방법입니다. prompt를 사용하면 사용자에게 질문을 하고, 사용자가 텍스트를 입력할 수 있는 입력창을 제공합니다. 예를 들어: let name = prompt('이름을 입력하세요..

취업 후 첫 사이드 프로젝트로 LOACUT | 로생네컷 을 개발하는 첫 사이드 프로젝트를 진행하고 AWS에 배포까지 완료하였다. 처음 이 프로젝트를 기획했을 때 유저들이 포토샵 또는 이미지 에디터를 사용해서 인생네컷을 제작하는 걸 보았는데, 포토샵이나 이미지 에디터에 익숙한 사람이라면 괜찮을텐데, 대다수의 로스트아크를 플레이하는 유저들이 포토샵에 익숙하지 않거나, 이미지 에디터를 사용하려면 이미 잡혀있는 틀이 필요하고 또는 그 이미지 에디터 사이트에 가입을 해야하거나 금액을 지불해야 하는 경우가 있기 때문에 프로젝트의 키워드는 "포토샵 없이 간단하게" 였다. 모든 작업들은 프론트에서 처리하기 때문에 백앤드 서버가 필요가 없었고, react-cropper 와 dom-to-image 를 사용하여 개발작업을 ..

자료형 자바스크립트는 동적 언어로, 변수의 자료형을 지정하지 않아도 됩니다. 그러나 자료형에 대한 이해는 프로그래밍에 매우 중요합니다. 자바스크립트에서는 명시적으로 형 변환을 해주지 않아도 자동으로 형 변환이 이루어집니다. 이는 동적 언어의 특징 중 하나입니다. 예를 들어, 숫자와 문자열을 더하는 경우 자동으로 문자열로 변환됩니다. 하지만 때로는 명시적으로 형 변환을 해주어야 하는 경우도 있습니다. 자료형에 대한 이해는 프로그래밍에서 매우 중요합니다. 자바스크립트의 기본 자료형에는 숫자(Number), 문자열(String), 불리언(Boolean), null과 undefined이 있으며, 참조 자료형에는 객체(Object)와 배열(Array)이 있습니다. 기본 자료형 숫자(Number) 숫자 자료형은 정..

Javascript에서 객체를 생성하는 방법에는 여러 가지가 있습니다. 그 중에서도 Prototype은 객체를 생성하는 가장 기본적인 방법 중 하나입니다. Prototype을 이용하면 기존 객체의 속성과 메소드를 상속받아 새로운 객체를 생성할 수 있습니다. Prototype을 이용한 객체 생성 방법 Prototype을 이용한 객체 생성 방법은 다음과 같습니다. function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayHello = function(){ console.log("안녕하세요. 저는 " + this.name + "입니다."); } var person1 = new Person("홍길동", 20); var ..