javascript69 [JS] 날짜 데이터 포맷 변경하기 코딩을 하면서 제일 껄끄러운 데이터 타입이 날짜 데이터다. 정확히 표현하자면 날짜 형식으로 된 데이터가 까다롭다. 어떤 날짜는 스트링으로 표현되기도 하며 어떤 날짜는 객체 형식을 띄기도 한다. 오늘 코딩을 하면서 날짜 데이터의 포멧을 바꿔야 하는 상황이 있어 관련해서 글을 남긴다. 간단하게 체크인 체크아웃 날짜를 선택할 수 있는 캘린더를 만들었다. 캘린더를 통해 날짜를 입력받으면 객체타입의 'US-us' 데이트 타입이 저장된다. ex: Jan 12 2012 10:25:26 문제는 데이터베이스의 경우 ISO format을 이용하기 때문에 이후 날짜를 이용한 기능 구현에 문제가 생길 것으로 생각되었다. ex: 2022-12-29 10:25:26 toISOString() 메소드 다행히도 javascript에는.. 2022. 1. 23. [Sequelize] 비동기 함수와 Sequelize 오늘 ORM 툴 중 하나인 Sequelize를 학습하다가 여러 번 키보드에 샷건을 때려 버렸다. 공식문서를 보면서 최대한 열심히 학습을 해보려 했지만 도대체가 코드가 작동을 할 기미를 보이질 않았다. 그러다가 아하! 하는 순간이 있었으니... 아래는 공식문서의 가장 첫 번째 설명 줄의 내용이다. Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more. Sequelize는 프로미스 기반의 node.js.. 2021. 12. 23. [React] Presentational vs Container Component React를 조금 더 심도 있게 들어가거나, 조금 큰 규모의 component를 작성하다 보면 Presentational Component와 Container Componenet에 대해 접하게 된다. 막상 들으면 "뭐지?" 하고 와닿지는 않는데, 알고 보면 아주 쉬운 개념이다. 아래 블로그에 자세히 설명이 되어 있어 번역해 옮겨본다. 출처: https://flaviocopes.com/react-presentational-vs-container-components/ React: Presentational vs Container Components The difference between Presentational and Container Components in React flaviocopes.com Th.. 2021. 12. 10. [React] State값을 직접변경하면 안되는 이유 React에서 state값을 변경할 때 항상 강조하는 부분은 State를 직접 변경하면 안 된다는 점이다. React를 처음 배울 때는 시간이 없어서 '그냥 그런갑다~'하고 넘겼지만, 오늘은 조금 깊게 왜 그런지 원리를 알아보고자 한다. 위의 이유를 알기 위해서 우선은 'Shallow Equality Check'에 대한 개념부터 이해해야 한다. Shallow Equality Check Shallow Equality Check 개념은 이전 포스팅에서 다루었던, Shallow copy vs Deep copy와 비슷하다. Shallow compare works by checking if two values are equal in case of primitive types like string, numbers .. 2021. 12. 10. [JS] 화살표 함수에서의 "this" 자동 바인딩 React 관련 포스팅에서 화살표 함수에서 this는 자동으로 바인딩된다고 설명을 했었는데, 이것이 의미하는 것은 무엇인지 그리고 관련해서 좀 더 Deep 하게 들어가 보자. 이것과 관련해서 아래 블로그를 번역하여 옮겼으니 참조하시길 바란다. 출처: https://javascript.plainenglish.io/this-binding-in-es6-arrow-function-70d80e216238 How “this” binds in regular functions and arrow functions in JavaScript Arrow syntax automatically binds this to the surrounding code’s context…but what does this mean? javasc.. 2021. 12. 6. [React] React에서 this는 무엇인가? 코딩 초급자 입장에서 this란 개념은 아무리 공부해도 새로운 느낌이다... 역시나 React에서도 this는 어김없이 등장하는데, 오늘은 다시 한번 this에 대해 이해하는 시간을 가져보려고 한다. 사실 이건 javascript 카테고리 안에 작성해야 하는 글이나, React를 공부하는 도중 학습한 내용이므로 React 카테고리에 글을 올린다. 마찬가지로 관련해서 자세한 설명이 있는 글이 있어 번역하여 옮겨본다: 출처: https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480 What is ‘this’ in React? And why do we use it all the time? medium.com What is ‘this’ in R.. 2021. 12. 5. [JS] Event Bubbling and Event Capturing React를 공부하다가 event.stopPropagation() 메소드를 보았다. 도대체 event.stopPropagation() 메소드가 왜 필요한지 조사를 해보니... 자바스크립트가 이벤트를 실행 할 때 event 버블링 현상이 발생하기 때문에 event bubbling 현상을 막기 위해 해당 메소드가 필요하다고 한다. 그렇다면 이벤트 버블링이란 무엇이고 왜 발생하는 것일까? 아래 블로그에 관련된 내용이 자세히 설명되어 있어 번역해 옮겨본다. 출처: https://vsvaibhav2016.medium.com/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e Event Bubbling and Event Capturing in JavaScri.. 2021. 12. 5. JS require와 import의 차이? 자바스크립트를 공부한지 어연 2개월 째... 근본없는 언어란 참으로 매력적이면서 난감하다... 뭔가 다양한 듯 싶으면서도 버전마다 바뀌는 문법을 보며, 역시 no 근본..! 을 외치게 된다. 모듈을 옮겨오는 require와 import를 바라보며 필자는 동일한 감정을 느끼게 된다. The difference between require and import 두 메소드의 차이는 위의 사진으로 한방에 정리된다. 여기서 CommonJS는 nodeJS라고 생각하면 된다. 즉 require메소드는 CommonJS에서 모듈을 들고올 때 사용하는 메소드이고 import메소드는 ES6문법에서 모듈을 들고올 때 사용하는 메소드라는 차이점이 있다. Require CommonJS 문법 원하는 부분만 따로 떼어 들고올 수 없다.. 2021. 12. 3. JS 약식 분기문에 의한 값 할당 방법 let _start = start || 0 오늘 연습문제를 보다가 이런 요상한 선언 & 할당문을 보게 되었다. 도대체 요녀석은 어떻게 이해를 하면 좋을까? 위와 같은 방식의 할당문을 약식 분기문에 의한 값 할당법이라고 부른다. 위와 같은 방식에는 || 혹은 && 오퍼레이터를 이용하는데, 이는 값이 truthy 한지 falsy 한지를 판별해 변수에 의도하는 값을 할당하기 위함이다. 예제를 통해 알아보자. let _start = start || 0 만약 start의 값이 falsy한 값이라면 _start에는 start의 값이 들어가게 된다. 이때 falsy 한 값임에 유의해야 한다. 즉 start가 false / 0 / '' 등의 값을 가진다면, false로 인정하고 || 등호 뒷편의 0이 _start에 할.. 2021. 11. 16. JS Operator "!!" & "^=" 오늘 코플릿 문제를 풀다가 요상한 연산자를 발견하였다. !! ^= 바로 알아보도록 하자. Not Not 연산자 (!!) Not연산자는 흔히 사용하는데 도대체 Not Not은 뭐지? 스택오버플로우에 따르면 Not Not 연산자는 아래와 같다. Converts Object to boolean. If it was falsey (e.g. 0, null, undefined, etc.), it will be false, otherwise, true. Not Not 연산자는 객체를 불리안 값으로 전환할 때 사용한다고 한다. 즉 Falsey한 null이나 0 등에 not not을 붙이면 False가 반환되는 것이다! !oObject // inverted boolean !!oObject // non inverted bo.. 2021. 11. 12. JS Linked-list & Hash table 오늘은 자료형의 두 가지 유형 Linked-list와 Hash table에 대해 알아보자 Linked-list In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. 위키피디아에서는 linked-list를 위와 같이 설명하고 있다. 해석하자면, 링크드 리스트는 데이터요소의 일련의 집합이며 메모리상 물리적 공간에서 물리적으로 순서가 정해져있지는 않다. 대신 각 요소들은 다음 데이터요소를 가르킨다. 무슨 말일까? 아래 그림을 보면 이해가 수월해.. 2021. 11. 11. JS 매개변수 기본 값 설정하기 오늘 재귀함수 코드를 살펴보다가 이상한 표현을 발견했다. (가위바위보의 경우의 수를 계산하는 알고리즘이다.) const rockPaperScissors = (rounds) => { //if rounds is 0 we will return an empty array if(rounds === 0) return [] // define a throw options array for each play we could make // "R" represents "Rock", "P" represents "Paper", "S" represents "Scissors" const throwOptions = ["R", "P", "S"] // define a solutions array to hold all of our pos.. 2021. 11. 10. 이전 1 2 3 4 5 6 다음
