javascript

많은 프로그래밍 언어가 나머지 연산자를 제공합니다. 하지만 언어마다 결과가 다를 때가 있습니다. C언어, Java, Python, Javascript 네 가지 언어에 대해 나머지 연산자를 비교해 봅시다. 모듈러 위키 백과를 보면 `모듈러 산술(Modular Arithmetic)`를 다음과 같이 정의합니다. 💡 모듈러 산술 혹은 합동 산술은 정수의 합과 곱을 어떤 주어진 수의 나머지에 대하여 정의하는 방법이다. 임의의 정수 $a, b$가 있을 때, 정수 $n$에 대해 $a=b+kn$을 만족시키는 정수 $k$가 존재한다면 $a$와 $b$는 같은 동치류에 속하고 $n$에 대해 합동이라고 합니다. 기호로는 다음과 같이 씁니다. $a\equiv b\space(\text{mod}\space n)$ $n=3$일 때 ..

Object로 구성된 Array에서 특정 property 값을 타입으로 추출하기. feat. type guard Object array에서 타입 추출하기 typescript에서 같은 형태의 object를 담은 array에서 object의 특정 키값을 추출할 상황이 생각보다 많이 나온다. 이참에 한번 정리해보자. The Problem 웹 사이트를 만들다가 객체 배열을 관리하다 생긴 문제였고 typescript를 사용할 때 많이 마주치는 경우인 것 같아 예시를 통해 정리해보려 한다. 예시를 위해 작성된 코드이기에 내용은 이상하더라도 구조는 같으니 어떻게 처리하는지만 봐주셨으면 한다. 사람들의 데이터를 관리하고 처리하는 상황을 예시로 들어보자. 모든 사람들에 대한 정보를 담은 people 배열이 있고 사람은 ..

회원가입 로직에서 생긴 Promise 비동기 DB 처리와 에러 처리 고민 고민 우선 채팅을 구현하기 앞서 회원가입과 로그인을 먼저 구현했다. 고민을 얘기하기 전 상황에 대해서 설명해보면 다음과 같다. 먼저 회원가입은 아래와 같은 절차로 진행된다. 이메일, 닉네임, 비밀번호의 형식을 확인 이메일, 닉네임 중복확인(DB) 비밀번호 해쉬화 새 유저 생성(DB) 응답 이 과정에서 이메일, 닉네임 중복확인, 비밀번호 해쉬화, 새 유저 생성은 비동기 작업으로 이루어진다. 첫 번째 고민은 비동기처리를 하나하나 순서대로 await await await으로 받아 동기와 다름없이 처리하고 싶지 않았다. 먼저 비동기 작업을 모두 프로미스로 받은 후 나중에 한 번에 await으로 받고 싶었다. 처음 생각한 방법은 이메일, ..

가볍게 pug로 front end를 개발하다 결국 react로 전환하게 되었다. pug에서 react로 react를 몇 번 써봤고 state, props에는 익숙하지만 context API, routing은 개념만 알고 사용해 본적이 몇 번 없어 조금 더 써보고 나중에 프로젝트할 때 react를 써야지 하는 마음에 pug로 개발을 시작했었습니다. 아무래도 html, css, vanillaJS에 익숙한 저에게는 pug는 손발처럼 편했습니다. 하지만 pug로 개발하던 중 이럴 바에 찾아보면서 react로 하자 라는 생각이 들어 react로 전환하게 되었습니다. pug에서 느낀 불편함 pug에서 layout과 include를 적절하게 사용하면 react처럼 컴포넌트 단위 개발을 할 수 있습니다. 단순한 화면..

// primary type const myName:string = 'cloer' const age:number = 13 const married:boolean = false // Array const weekdays:string[] = ['mon', 'tue', 'wed'] const weekend:Array = ['sat', 'sun'] // tuple const user:[string, number] = [myName, age] // void const voidFunc = ():void => { // No return } // never const naverFunc1 = ():never=>{ while(true){ // Infinite loop } } const naverFunc2 = ():neve..

canvas API와 nodeJS, MySQL로 간단한 웹게임을 만들어보자! Canvas로 슈팅게임 만들기 기말고사 기간 공부가 하기싫어 vs code를 열고 이짓 저짓 하다가 간단한 게임을 만들어 보기로 했다. 즉각적인 결과를 얻을 수 있고 로직도 짤 수 있는 canvas가 시험기간에 공부하기 싫을 때 놀기 적당해 보였다. 먼저 canvas를 써본적이 없으니 기본적인 사용 방법을 공부하기 위해 유투브에서 영상을 찾아봤다. 이 영상을 보고 만들었으며 추천한다. 영상을 보며 따라 만든 후 AWS EC2에 배포해 친구들에게 알려줬고 점수 스크린샷을 찍어 서로 자랑하는 모습을 보고 점수를 저장하는 서버를 만들기로했다. 이 글은 시험이 끝난 뒤 영상을 안보고 만들 수 있는지 스스로 테스트도 해볼겸 처음부터 리..

var와 let의 차이를 공부하다 나온 호이스팅과 TDZ에 대해 알아보자. 호이스팅과 TDZ 호이스팅과 TDZ로 인해 기존에 다른 프로그래밍 언어를 배운 사람들은 Js코드가 이상하다고 느낀다. 나도 그랬다. 하지만 Js를 쓰다보면 호이스팅덕분에 더 편한것 같다. 호이스팅 (hoisting) Js는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당한다. 덕분에 스크립트내에서 함수 선언의 위치는 중요하지 않다. 스크립트내에서 함수 호출을 함수 선언보다 먼저 해도 문제가 없다. 또 호이스팅은 스코프 단위로 일어난다. 예를 보며 이해해보자. callFunc();// 함수 호출 function callFanc() { console.log("나 함수!"); } // 함수 선언 가장 처음 배운 언어가 C..

Why Js? 프로그래밍 언어를 배우다보면 결국 언어는 별게 아니라는 생각을 하게 된다. 중요한 것은 구조이고 언어는 수단일 뿐이다. 하지만 우리는 그 언어의 특성을 알때 언어의 장점을 극대화 하여 어떤 프로그램의 성능을 높일 수 있다. 언어를 잘 알아야 프로젝트에서 언어를 선택할때 어떤 언어를 사용할지에 대한 정확한 근거가 생긴다. 프론트앤드와 백앤드 심지어 데이터베이스까지 모든 분야에서 사용가능하다는 점에서 나는 javascript에 큰 매력을 느꼈고, 자세히 공부해 보려한다. Js는 풀스택이 되는 가장 빠른 선택일 것이다. Js를 배우고 프론트앤드, 백앤드, 데이터베이스의 전체 로직과 구조를 훑고 세부분야를 선택해 공부하며 필요에 따라 다른 언어와 프레임 워크를 공부할 계획이다. 이 모든 게획은 J..