브렌쏭의 Veritas_Garage

자바스크립트에서 어레이 내장 정렬 메소드를 이용해 숫자를 정렬하면 기기묘묘한 일이 생긴다. [ 1, 2, 5, 7, 10, 20, 80 ] 을 정렬하기 위해 .sort() 를 쓰면 다음과 같이 정렬된다. [ 1, 10, 2, 20, 5, 7, 80 ] 이유는 간단하다. 숫자 데이터 타입으로 들어가 있든, 숫자모양의 문자열로 들어가 있든 일단 자바스크립트의 함수는 모든 데이터타입을 아스키 코드로 바꿔버린 뒤, 그 아스키 코드넘버 순으로 정렬하기 때문이다. 그래서 1 다음에는 10이 오고, 그 뒤에는 100이 온다. ASCII.... 영문 키보드로 입력할 수 있는 모든 기호들이 할당되어 있는 가장 기본적인 부호 체계이다. 한 글자당 7바이트의 내용과 1바이트의 오류검출코드가 들어가 있다. 여러분도 어디 외계..

어쩌고 저쩌고, 블라블라 블라 하다 보면 문자열에는 온갖 띄어쓰기와 대소문자들이 난무한다. 따라서 컴퓨터가 알아들을 수 있게 문자열을 적절히 조작하는 법을 알아야하겠다. 1. String.prototype.trim() 뭔가를 트림한다고 한다면 보통 가장자리를 깔끔하게 잘라내는 걸 떠올린다. 그래서 trim은 문자열 양쪽 끝에 있을 수 있는 공백을 지워준다. 물론 메소드이므로, 함수이고, 그래서 괄호는 붙여줘야한다. let str = " sample text "; console.log( str.trim() ) // "sample text" 앞뒤로 있던 띄어쓰기가 사라졌다. 이외에도 탭도 날려준다. 1-1. trimStart() 와 trimEnd() 앞뒤를 일괄로 날려버리니 그러고 싶지 않을 때도 있을터, ..

GraphQL ??? 그래프 수식 작성용인가?? 이름에 QL 이라는 단어가 들어가는 것을 보면, SQL 형식을 가지는 놈 같다. 즉, 쿼리기반 언어이다. 엑셀처럼 키와 밸류를 가진 여러 데이터를 처리하고, 그 데이터들은 서로 링크가 되어 위치를 참조하고, 뭐 그런거. 그러나 기존의 SQL 문법보다 GQL의 문법은 좀 더 다르다. sql의 문장(statement)은 주로 백앤드 시스템에서 작성하고 호출 하는 반면, gql의 문장은 주로 클라이언트 시스템에서 작성하고 호출 합니다 - 카카오 Tech Blog - sql은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이고, DB기준으로 글을 써야한다 gql은 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것이 목적, 클라이언트..

#프레임워크-라이브러리 라이브러리가 하나의 도구라면, 프레임워크는 그 도구들의 집합 뭐 상황따라 판단하는 거지..(ex. 독자 도메인 홈페이지가 있냐 없냐 등) 1. 공식 Document를 보자 굉장히 잘 되어있고, 어차피 여기서 레퍼런스를 확인해야한다. 왜냐면 버전 변경 때 마다 반영되는 건 공식 홈페이지 뿐일테니. 언제나 공식 Docs를 봅시다. 그리고 설치할 때 이상한 개인 브랜치 받아서 곤욕을 겪지 않지 않도록 하자. 2. 보긴 보는데 영어로 보자 뭐 영어로 쓴거 영어로 보는데 이유가 있나. 그냥 보면 되지. 3. Express yarn, npm 원하는 것으로 설치. 나는 yarn 기준. 먼저 init으로 package.json 생성 yarn init yarn install express ?? y..

Template Literals! 템플릿 리터럴 use to ‘backtick’ to wrap up 맥에서는 영어일때만 ₩ 대신 백틱이 나온다.. option+₩ 으로 `을 쓸 수 있다 `string somthing ${variables or anything} another string that thing..` 기절 편리하다. 특히나 안내문구에 변수가 여러개 들어가는 경우라던지. 더 할말이 없다. 너무 짧으니까 다른것도 더 쓰기로 하자. 콜백 함수 Callback 지금 세상에는 유령이 떠돌고 있다.. 콜백 이라는 이름의 유령이.. 놀랍게도, 여러 복잡한 설명이 몹시 활개치는 모양새다. 일단 그냥 함수를 순서대로, 순차적으로 실행시키기 위한 방법으로 함수 파라미터 안에 함수를 넣는 걸 말한다. 그냥 Nes..

Array, Object Copying (Shallow Copy & Deep Copy) 1. 얕은 복사 : Shallow copy //만약 object0 = { name : brent, gender : male, hobby : { first : coding second : sleep } } //일 때, object1 에 0를 얕은 복사 하기 위해서는 let object1 = { ...object0 } //가 된다. 그러나 0내부의 hobby항목은 주소값이 그대로 첨부되어 복사가 아니라 원본을 참조한다 2. 깊은 복사 : Deep copy //만약 object0 = { name : brent, gender : male, hobby : { first : coding second : sleep } } 일 때,..

HyperTexT Protocol 즉, 프로토콜이다. HTML 이 HyperText Markup Language니까, 그 하이퍼텍스트를 전송하는 약속이라고 하면 되겠다. 서버와 클라이언트 사이에서 하이퍼텍스트 문서를 '주고' '받으니' 당연히 2개의 방식으로 되어있는 구조이다. 1. 누가 주는 쪽이며, 받는 쪽인가? 모든것은 클라이언트를 기준으로 한다. 어차피 클라이언트 측 화면을 보기위해 이 모든걸 만든거니까. 따라서 클라이언트가 요청하는 것이 Request, 또한 클라이언트가 응답받는 것이 Response다. 2. HTTPS는? HTTP에게 진화의 돌(TLS)을 붙여 진화시킨 형태이다. 보안 업그레이드 버젼. 요즘엔 이게 기본이다. 3. 일단 REQUEST. 한영키 전환하기 귀찮으니까 리퀘스트나 요..

물론, 세상사 true 와 false로 깔끔하게 나뉘는 것이 아니듯, 자바스크립트도 그렇다. 자바스크립트도 결국 사람이 만든 코드덩어리 아니겠는가 따라서 어떤 값들은 true에 가깝고, 반대로 false에 가까운 값들도 있다. Truthy / Falsy 뜨루씌하다와 활씌하다 ... 이런 식으로 표현되는 데이터들은, 컴퓨터에 의해 "넌 그래서 참이냐 거짓이냐, 1이냐 0이냐, 확실히 해라" 하며 대답을 강요당할때 내밀게 되는 대답이다. 중세 마녀사냥이 따로 없다. 1. truthy 0 이 아닌 숫자 빈 문자열이 아닌 문자열 객체 (비어있어도 상관없음) 배열 (마찬가지임) true(당연하게도) 2. falsy 숫자 0 빈 문자열 undefined null NaN false 가볍게 기억해두면 되겠다. 조건문의..

https://javascript.info/destructuring-assignment Destructuring assignment javascript.info 위 페이지 내용의 대략적인 번역 + 개인적인 필기 Object & Arrray - I need Datas.. a lots of datas.. 오브젝트와 어레이는 자바스크립트에서 가장 많이 쓰이는 데이터 구조입니다. 오브젝트는 key와 연동해서 데이터를 저장할 수 있는 하나의 덩어리를 제공합니다 어레이의 경우, 순서가 있는 리스트 형식으로 데이터를 모을 수 있도록 합니다 그렇지만 종종 데이터의 집합보다는 개별 데이터들에 접근 할 수 있는 방법이 필요할 때가 있습니다. 바로 그럴 때, 우리는 destructuring assignment를 이용합니다...

const 배열 = []; //데이터 추가 //1. 배열 맨 뒤에 데이터 추가 배열.push(넣고 싶은 데이터); //2. 배열 맨 앞에 데이터 추가 배열.unshift(넣으려는 데이터); //데이터 제거 //1. 배열 맨 뒤에서 데이터 삭제 배열.pop(); //2. 배열 맨 앞에서 데이터 삭제 배열.shift() 기본적인 것. //데이터의 index 값 반환 배열.indexOf(찾으려는 데이터); //만약 존재하지 않는 데이터라면 -1을 반환한다. //같은 데이터가 여러개라면 가장 낮은 수의 인덱스 값을 반환한다. //데이터의 존재 여부 반환 배열.includes() push() 하게 된다면, 원본이 수정된다. 그리고 const 로 만들었든 let으로 만들었든 상관없이 변경함. + push의 결과는 ..