고매의 기록 (187) 썸네일형 리스트형 [자바스크립트] 10진수에서 2진수, 2진수에서 10진수 만들기 1. 10진수에서 2진수 만들기 function DecimalToBinary(n) { console.log(`${n}의 이진수 구하는 DecimalToBinary() Start`); let numsArr = new Array(); // 이진수를 담을 배열 생성 let binary; if(n > 0) { let naturalNum = n; let firstBinary = naturalNum%2; numsArr.push(firstBinary); while(true){ if(naturalNum > 0){ naturalNum = Math.floor(naturalNum/2); num = (naturalNum)%2; numsArr.push(num); } else { break; } } numsArr.reverse(.. [자바스크립트] 별 찍기 응용문제 2개 Q1. function star_Q3(n) { let temp = (2*n)-1; // (가장 아래 별의 갯수 기준) 즉, temp = 2n-1 console.log(`Start star, temp is ${temp}`); for(let i=n; i>0; i--) { // star_Q3의 인자는 탑 높이(n) console.log(""); for(let j=1; jj || j>n){ // 탑 현재 높이(i) >= 별 갯수(j)보다 크거나 같을 경우, 별 갯수(j)가 탑 높이(n)보다 크거나 같을 경우 공백 처리 process.stdout.write(" "); } else { // 공백 처리된 나머지 부분에 별 찍기 process.stdout.write("*"); } } n++; // 탑을 한 층씩 쌓을 .. [러닝 자바스크립트] for...in과 hasOwnProperty() const SYM = Symbol(); const o = { a: 1, b: 2, c: 3, [SYM]: 4 }; // 1번 방법 (for...in) // for(let prop in o) { // if (!o.hasOwnProperty(prop)) continue; // console.log(`${prop}: ${o[prop]}`); // } // 2번 방법 (Object.keys) // 객체의 프로퍼티 키를 배열로 가져와야 할 때 편리 Object.keys(o).forEach(prop => console.log(`${prop}: ${o[prop]}`)); 문자열 프로퍼티와 심볼 프로퍼티가 있는 o 객체가 있다. 단순해보이지만 중간에 hasOwnProperty가 눈에 띄인다. hasOwnProperty.. 객체지향 (상속, 합성, 인터페이스) 캠핑 상황으로 이해해보기 객체지향 - 상속, 합성, 인터페이스 복습! 캠핑을 가서 텐트를 치고 밥을 먹는다. 그런데, 만약 텐트 3동이 텐트를 옮겨야한다면 어떻게 해야할지 객체지향으로 구현해보자. 부모 클래스 - 캠핑 자식 클래스 - 경량텐트, 에어텐트, 차박텐트 class Camping { public void reservation() { System.out.println("Camping - reservation"); } } class LightTent extends Camping{ public void shortly() { System.out.print("빨리 피칭할 수 있는 경량 텐트"); } } class AirTent implements setUp { public void doPack(int pack) { System... 자바스크립트 호이스팅 및 스코프 문제 { // 외부 블록 let x = { color: "blue" }; let y = x; let z = 3; { // 내부 블록 let x = 5; console.log(x); // 5 console.log(y.color); // blue y.color = "red"; console.log(z); // 3 } console.log(x.color); // red console.log(y.color); // red console.log(z); // 3 } 왜 x.color가 red가 되는걸까... y 변수에 x를 담는건데??? 리액트를 하기 전 자바스크립트를 공부해야 하는 이유 개인적으로 리액트를 상당히 좋아하는 편이다. 솔직히 내가 리액트를 좋아하게 된 계기는 로고가 예쁘고 퍼즐처럼 엮이는 모양새로 러닝커브는 쎄지만 한 번 구축해두면 재사용이 용이하고 무엇보다 문법이 예쁘기 때문이었다. (?). 가독성도 좋고, 조각조각 나있는 언어 구성이 아주 마음에 들었다. 그리고, 늘 리액트는 자바스크립트 기반의 라이브러리이기 때문에 바닐라 자바스크립트에 대해 잘 알아야 한다는 사실을 머릿속으로는 알면서도 막상 자바스크립트를 진지하게 공부할 생각을 하지 못했었다. 대충 위기 상황에 맞닥트리면 해결되지 않을까 안일하게 생각했던 것 같다. 그러다가 이번 이직 기회로 딥하게 공부할 기회가 되었는데, 막상 딥하게 들어가보니 정말 필요한 지식들이다. 과거 바닐라 JS로 프로젝트를 해보기도 했고 꽤.. Stepzen과 neon을 이용해 Postgresql과 graphQL 쉽게 사용하기 먼저 neon에서 postgresql 스키마와 테이블, 더미 데이터들을 넣어준다. Dashboard에는 host와 password등의 정보들이 담겨있다. stepzen은 graphql을 편히 사용해주는 GUI인데 프로젝트 내에 stepzen 폴더를 만들어주고 폴더 내부에서 stepzen 정보를 입력해주면 손쉽게 graphql을 적용할 수 있다. index.graphql을 확인해보면 postgresql로 만든 데이터들이 담겨져 있다. 처음 써보는 거라 아직 익숙치는 않음. 터미널에서 가동시켰던 stepzen url에 들어가면 graphql cli가 나온다. builder에서는 클릭하면 자동으로 gql을 입력해줌. 와 뭐지 신세계... GraphQL vs REST API https://yozm.wishket.com/magazine/detail/2113/ 개발자에게 편리함을 주는 ‘GraphQL’ 도입 시 주의할 점은? | 요즘IT 프론트엔드 개발자에게 API 통신 비용은 언제나 고민되는 요소다. 모던 브라우저의 경우 성능이 많이 좋아져서 유저가 불편할 정도의 지연은 자주 발생하지 않지만, API 통신은 네트워크 환경의 yozm.wishket.com 솔직히 REST API 상당히 편하고 익숙한 것은 맞는데 일일이 프론트엔드와 백엔드 소통이 필요한 것은 좀 귀찮았음. GraphQL 도입해보자. 에러에 대한 핸들링은 까다롭다고는 하나 RestAPI도 섞어 혼용해서 사용도 가능하다고 하니... 이전 1 2 3 4 5 6 7 8 ··· 24 다음
