고목나무 매미의 라이프

Recent

• React.js React 주민등록번호 컴포넌트 1. 목적[인수 조건]Given개발자는 주민등록번호 유효성 검증을 위한 정규식을 이용한다.코드가 길어질 경우 라이브러리 React-hook-form을 사용할 수 있다.text input 2개로 구성된 컴포넌트로 구현한다.When주민등록번호 컴포넌트 GUI와 유효성 검증하는 함수로 각각 분리한다.Then1. 00년생 이전/이후와 생년월일, 성별 케이스별로 나누어주민등록번호의 뒷 번호 첫 번째 자리까지 유효성 검증을 진행한다.2. 실시간으로 유효성 검증이 진행된다.3. 올바르지 않은 주민번호 입력시 가이드 텍스트가 표시된다. [설명]보상 안내 받는 이와 예금주의 주민등록번호를 받았을 때 실시간 유효성 검증 기능이 있는 주민등록번호 컴포넌트를 구현한다.케이스는 00년생 이전과 이후로 나뉘며앞, 뒷 번호 자릿수..

• AWS AWS Secret Manager 목적Next.js 프레임워크 내에서 .env 파일 내의 S3 관련 Secret Key 노출을 방지할 수 있는 방법을 모색함빌드 후 배포시 .env 파일이 유실되어 릴리즈 버전에서 s3 접근에 리스크 존재, 이를 방지하기 위함AWS Secret Manager사용 방법https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-secrets-manager/import * as AWS from "@aws-sdk/client-secrets-manager";const client = new AWS.SecretsManager({ region: "REGION" });// async/await.try { const data = await client.l..

• JavaScript [Typescript] type 및 try-catch 시 return 처리 // psuedo codeclass Person { name: string; foo() { console.log(this.name); } constructor(name: string) { this.name = name; }}const p = new Person('kim');console.log(JSON.stringify(p));console.log(JSON.parse(JSON.stringify(p)));function bar(): string { let result = ''; // result가 try에서도 catch에서도 사용해야 할 경우 (부득이) try { result = 'success'; ..

• React.js Dynamic Route - Slug 목적정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터에서 경로를 생성하는 경우 요청 시 채워지거나 빌드 시 사전 렌더링되는 동적 세그먼트를 사용할 수 있다.Next.js의 Slug를 적극 활용해야 하는 이유App routing의 Slug 기능을 사용하여 동적 라우팅(Dynamic Routing)을 구현하려고 한다. 이 기능은 일반적으로 다음과 같이 사용된다.// app/blog/[slug]/page.tsxexport default function Page({ params }: { params: { slug: string } }) { return My Post: {params.slug};}이렇게 path param(segment)으로 온 param 데이터를 사용할 수 있는 것이 장점이다.그런데, ..

• 

  React.js Xlsx parsing + react-table 분석 계기https://bizinsight.atlassian.net/wiki/pages/createpage.action?spaceKey=Software&title=1.%20Excel%20%ED%8C%8C%EC%8B%B1B2B 여행자 보험 가입 서비스 프로젝트에서 가장 중요한 기능인 Excel 파싱 기능 관련하여 어떤 라이브러리를 사용할지 기술 검토를 했었다. 그 결과, xlsx 라이브러리(SheetJS)를 사용하는 것이 가장 적절하다고 판단하여 개발팀에 공유를 하였다. 그렇다면, 이 xlsx 라이브러리로 어떤 기능들을 구현해야 할지 보다 디테일하게 분석을 해보려고 한다.필요한 기능정해진 양식의 엑셀 파일에 원하는 정보를 리스트업하고, 해당 엑셀 파일을 정확하게 읽어오는 것정확하게 읽어온 데이터를 UI 상..

• 

  React.js OAuth 인증 - 인가에 대하여 0. Prologue사이트를 개발하겠다고 하면 빠질 수 없는 회원 관리와 로그인. 그런데, 솔직히 정작 ‘로그인은 어떻게 구현하는가?’에 대해서 깊게 고민해본적은 없었던 것 같다. 그래서, 이번 기회로 집중해서 알아 보게 되었다.단순하게 생각하면 ‘그냥 유저 테이블에 아이디, 이메일, 비밀번호, 연락처 등 정보 넣고, 비밀번호는 암호화해서 넣으면 되는거 아니야?’라고 생각할 수도 있다. 하지만, 유저 테이블에 아이디와 비밀번호를 암호화해서 넣는 방식은 이제 절대로 쓰면 안 되는 방법이다. 상당히 구식일 뿐더러, 보안에 틈이 많아 추후 문제가 생길 소지가 다분하다.그래서 위 방법으로부터 발전된 형태는 유저 테이블에 저장된 비밀번호 해시값을 사용자의 입력에 따른 해시값과 비교하여 동일하면 true가 되는 방..

• 

  React.js 전역 상태 관리 라이브러리 - Zustand vs Recoil 요약최근까지만 해도 Recoil이 공식적으로 SSR을 지원하지 않았는데, 최근 문서에 SSR 대처 방안을 업데이트 해주었다.알아본 김에 Zustand와 Recoil의 장단점과 특성을 파악하면 적재적소에 활용하기 좋을 것 같아 개인적인 호기심으로 조사해보았다. 알아보게 된 계기이전 프로젝트를 진행하며 서버 사이드와 클라이언트 사이드 데이터가 불일치하는 문제로 인해 쿠키, 세션을 활용하여 이슈를 해결하셨던 부분을 인지하고 있었다. 분명 이와 같은 상황이 다른 개발자들도 있었을 것으로 판단하여 더 나은 해결 방법이 없는지 확인하던 중 zustand로 해결했다는 어느 포스팅을 발견 후 본격적으로 알아보기 시작하였다.jotai는 월등히 좋다면야 알아보겠지만 지금으로서는 recoil, zustand만 알아봐도 충분..

• 

  React.js 파일 Drag & Drop 요약react-dnd는 Drag & Drop이 필요한 더 넓은 범위로 활용 가능한 라이브러리라서 react-dropzone만 사용해도 될 것 같다. 1. react-dropzone 샘플 코드// ...const [acceptedFiles, setAcceptedFiles] = useState([]);const onDropFiles = (acceptedFiles: File[]) => { setAcceptedFiles(acceptedFiles); console.log(acceptedFiles);}return ( // ... {({getRootProps, getInputProps}) => ( ..

• React.js Excel 파싱 관련 요약React-papaparse는 csv만 가능해서 xlsx → csv convert 과정이 추가로 필요하나,xlsx는 xlsx파일, csv 파일 둘 다 import 가능하며, json 변환도 쉽다.(단, xlsx 라이브러리로 xlsx 파일이 아닌 csv 파일을 파싱할 경우 특수문자가 나오는 문제가 있음.) Papaparse vs React-papaparsepapaparse: 브라우저, Node.js 모두에서 사용할 수 있으며, 큰 파일, 문자열, 스트림을 CSV로 변환하거나 CSV를 JSON으로 변환하는 기능을 제공import Papa from 'papaparse';Papa.parse(file, config); const csv = Papa.unparse(data[, config]);react-p..

• React.js React Storybook 사용 방법 **컴포넌트 주도 개발(Component Driven Development)Next.js Typescript 프로젝트에 적용하는 방법 (최초)npx create-next-app --typescript start-storybookStorybook 초기화npx sb init --builder webpack5 스토리북 초기화 명령어를 치면 위와 같은 메시지가 뜨고package.json에는 storybook dev dependencies가 자동으로 추가된다.{ // ... "scripts": { // ... "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, "devDependencies": { ..

• 

  개발 비동기(Asynchronous) 처리에 대한 이론 ‘비동기(Asynchronous)'란?서버로 보낸 요청에 서버가 응답할 때까지 기다리지 않고, 다른 처리를 할 수 있는 행위콜백 지옥을 Promise의 등장으로 해결할 수 있게 되었다.1-1. Promise미래의 어떤 시점에 결과를 제공하겠다는 ‘약속’ 반환const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000);});myPromise.then(n => { console.log(n);});작업이 끝나고 나서 또 다른 작업을 해야 할 때에는 Promise 뒤에 .then(...) 을 붙여서 사용하면 된다.const myPromise = new Promise((resolve, reject)..

• 

  JavaScript 자바스크립트의 프로토타입 - 자바스크립트 핵심 가이드 프로젝트가 얼추 마무리 되고 라는 책을 펼쳐 읽다가 문득 프로토타입에 대한 이해 부족한 듯 해서 하기 코드를 이해하려고 노력 중이다. (아직 이해가 안 되고 있음) if(typeof Object.create !== 'function') { Object.create = function (o) { var F = function () {}; F.prototype=o; return new F(); }; } var another_stooge = Object.create(stooge); 먼저 'Object.create'가 존재하는지 확인합니다. 'Object.create'는 일반적으로 객체를 새로 만드는 JavaScript 내장 함수입니다. 그러나 이 코드는 이 기능이 존재하지 않았을 경우를 대비해 만들어졌습니다...

• 

  Ruby On rails MAC M1 Github blog 깃허브 블로그 만들다가 발생한 Ruby gem 에러 지금 티스토리 블로그를 하고 있지만 개발 관련한 부분은 깃허브 블로그로 이관하고자 깃허브 블로그를 셋팅하던 중, 아주 골칫거리를 하나 만났다. 바로 Ruby! 며칠 조금씩 건들이며 계속 답답해하던 중 해결책을 찾아 공유해본다. 사실 간단했다. 요약하자면, 1. ruby가 기본적으로 셋팅된 2.6.0 버전은 기존 mac 운영체제 파일의 의존성때문에 냅두고, 2. 최신 버전을 추가로 설치하여 switching 해준다. 3. gem 경로의 home 셋팅을 다시 해준다. 사실 이것이 문제가 됐던 원인은 gem 경로를 flutter 환경 설정하면서 zshrc에 박아두었던 것도 에러의 원인 중 포함이었다. 꼼꼼하게 vi를 보지 않았던 탓... 아무튼 시간 낭비를 줄이기 위해 이 포스팅이 도움이 되시길 바란다. ❯ ..

• 

  React.js 한 입 크기로 잘라먹는 리액트 Chapter 5. 리액트의 기본 기능(1) 삼항 연산자를 활용한 조건부 렌더링 function Body() { const num = 200; if (num % 2 === 0) { return {num} is 짝수입니다 ; } else { return {num} is 홀수입니다 ; } // return ( // // // {num} is {num % 2 === 0 ? "짝수" : "홀수"} 입니다.{" "} // // // ); } 삼항 연산자는 간결하지만 가독성을 해칠 우려가 있다. 조건문은 가독성은 좋으나 중복 코드 발생 우려가 있다. 컴포넌트에 값 전달하기 import React from "react"; import "./Body.css"; function Body({ name, location, favorList }) { console.lo..

• ES6 Lodash Zip() : Reduce로 구현해보기 const originList = [ [1, 2], [3, 4, 5], [6, 7, 8, 9], ]; const reduceZipResult = originList.reduce((acc, cur, idx) => { for (let i = 0; i < cur.length; i++) { let el = acc[i]; if (el === undefined) { el = []; for (let j = 0; j < i; j++) { el[j] = undefined; } //el = Array(cur.length).fill(undefined); } el[idx] = cur[i]; acc[i] = el; } return acc; }, []); console.log(reduceZipResult);

• ES6 함수형 프로그래밍 - Reduce를 활용하여 Map, Filter 구현하기 let list = [1, 3, 4, 5, 6, 10]; function filter(list, predicate) { let new_list = []; for (let i = 0; i 5; } let filterResult = filter(list, predicate); console.log(filterResult); function myMap(list, func) { let result = []; for (let i = 0; i < list.length; i++) { result...

• 코딩테스트 [Javascript] 프로그래머스 - 같은 숫자는 싫어(스택/큐) function solution(arr) { let answer = []; for(let i = 0; i < arr.length; i++) { if(arr[i] !== arr[i+1]) { answer.push(arr[i]); } } return answer; } arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 얼핏 보면 중복을 제거하는 문제로 보이지만 첫 번째 케이스 [1, 3, 0, 1] 케이스는 중복을 제거한 결과가 아니다. 따라서 단순 중복 제거로 includes() 함수를 쓰면 안 된다. arr[0]과 arr[1]을 비교해서 같은 숫자이면 다시 돌고, 다른 숫..

• 

  lodash lodash :: _.zip()과 _.unzip() 구현하기 _.zip() import _ from "lodash"; const list1 = ['a', 'b'] const list2 = [1, 2]; const list3 = [true, false]; /** * 1. Lodash zip() */ const lodashZip = _.zip(list1, list2, list3); console.log(lodashZip); // [ [ 'a', 1, true ], [ 'b', 2, false ] ] /** * 2. myZip() 구현 */ function myZip(...arr) { let zipResult = []; // [0, 0], [1, 0], [2, 0] -> [0, 1], [1, 1], [2, 1] for(let i = 0; i < arr.length-1;..

• lodash lodash :: _.uniq(array) 구현하기 _.uniq(array) 함수는 Lodash에서 배열 내의 중복을 처리하는 array 함수이다. 해당 함수를 ES6 Javascript로 짐작하여 구현해봤다. 1. 첫 번째 방법 -> Object.keys()를 활용하여 key값들만 불러와 중복을 처리하는 방법. import _ from "lodash"; const list = [9, 4, 3, 4, 5, 7, 7, 5, 9, 10]; const lodashUniq = _.uniq(list); // [ 9, 4, 3, 5, 7, 10 ] console.log(lodashUniq); /************* * 첫 번째 방법. Object.keys() 방법 * 자동 정렬이 된다. => [ 3, 4, 5, 7, 9, 10 ] **/ function myUn..

• 

  ES6 Javascript ES6 - Set 기능 내부 구현해보기 const list = [3, 4, 3, 5, 10, 7, 1, 5, 4, 10]; function mySet(list) { let result = {}; for (let i = 0; i < list.length; i++) { if (result[list[i]] === undefined) { result[list[i]] = [list[i]]; } else { result[list[i]].push(list[i]); } } console.log(Object.keys(result)); return result; } console.log(new Set(list)); console.log(mySet(list)); Set 함수를 사용하지 않고 날 것으로 mySet 함수를 구현해보았다. Object 객체를 만들고, ..

• 

  ES6 Javascript ES6 - map, filter, reduce 함수 내부 동작 구현하기 1. Map function myMap(list, func) { let result = []; for (let i = 0; i (x % 2 === 0 ? true : false)); console.log(example); console.log(myMap(list, (x) => (x % 2 === 0 ? true : false))); map 함수 내부를 구현해보았다. 어려운 것은 아니고, 따로 myMap을 만들어서 내부적으로 어떻게 동작하는지 짐작하여 구현해보았다. 여기에서 중요한..

• 

  코딩테스트 [Javascript] N개 배열로 순열 조합 문제 Q. N개의 숫자로 이루어진 배열를 받았을 때 조합할 수 있는 순열 경우의 수를 모두 구하자. function doTree(input) { let doTree_result = []; let result = []; if (input.length > 3) { for (let i = 0; i < input.length; i++) { let prev = 1; let copyArr = [...input]; prev = copyArr.splice(i, 1); doTree_result = doTree(copyArr); for (let j = 0; j < doTree_result.length; j++) { doTree_result[j].splice(0, 0, prev); console.log(`doTree_result..

• 코딩테스트 [Javascript] 프로그래머스 코딩테스트 입문 K번째 수 function solution(array, commands) { let answer = []; for (let i = 0; i a - b); answer.push(copyArray[commands[i][2] - 1]); } return answer; } 2번째부터 5번째까지 잘라야 한다는 말은 인덱스 1번째부터 4번째까지 잘라야 한다는 말과 같다. 문제상에서 나오는 ~번째라는 말은 모두 -1로 배열상의 인덱스로 바꿔주고 sort()는 오류가 많으니 ..

• 코딩테스트 [Javascript] 프로그래머스 코딩테스트 입문 모스부호(1) function solution(letter) { let morse = { ".-": "a", "-...": "b", "-.-.": "c", "-..": "d", ".": "e", "..-.": "f", "--.": "g", "....": "h", "..": "i", ".---": "j", "-.-": "k", ".-..": "l", "--": "m", "-.": "n", "---": "o", ".--.": "p", "--.-": "q", ".-.": "r", "...": "s", "-": "t", "..-": "u", "...-": "v", ".--": "w", "-..-": "x", "-.--": "y", "--..": "z", }; let answer = ""; letter.split(" ").ma..

• 코딩테스트 [Javascript] 프로그래머스 코딩테스트 입문 팩토리얼 function solution(n) { let i = 1; let answer = 0; let result = 1; while (true) { result *= i; if (result > n) { answer = i - 1; break; } i++; } return answer; } let result = factorial(3628800); console.log(result); if문에 result > n 조건이 되면 이미 넘어버린 i값이 들어오고 break가 걸리므로 i-1값을 최종값으로 return해주었다.

• 코딩테스트 [Javascript] 유클리드 호제법을 활용한 최대공약수(GCD), 최소공배수(LCM) 구하기 function getGCD(input) { if (input[0] < input[1]) { let temp = input[0]; input[0] = input[1]; input[1] = temp; } let r = input[0] % input[1]; input[0] = input[1]; input[1] = r; if (input[1] === 0) { } else { getGCD(input); } return input[0]; } function getLCM(nums, gcd) { let lcm = (nums[0] * nums[1]) / gcd; return lcm; } let nums = [500, 100]; let inputNums = [...nums]; let gcd = getGCD(inputNu..

• 

  코딩테스트 [Javascript] 삼각형의 완성조건 (1) 처음 시도는 이렇게 했다. function solution(sides) { var answer = 0; var max = 0; var result = 0; for (let i = 0; i sides[j]) { max = sides[i]; } } } for (let i = 0; i max) { ans..

• 코딩테스트 [Javascript] 프로그래머스 첫 번째로 나오는 음수 function solution(num_list) { var answer = 0; for(let i = 0; i < num_list.length; i++) { if(num_list[i] < 0) { answer = i; return answer; } else { answer = -1; } } return answer; } num_list 내에 -1가 나오는 순간 지체할 필요 없이 인덱스를 return하면 된다. 양수일 경우에는 계속 -1을 담다가 return해버리면 된다.

• JavaScript [Javascript] 최대공약수 구하기 // 최대공약수 구하기 function getGCD(twoNums) { console.log("getGCD() :: Start"); let divisors_0 = []; let divisors_1 = []; let commonDivisors = []; let pnYN = []; // 1. 먼저 두 수가 소수인지 아닌지 판별한다. pnYN.push(primeNumYN(twoNums[0]), primeNumYN(twoNums[1])); // 2. 두 수가 소수가 아니라면 if ( (pnYN[0] === false && pnYN[1] === false) || (pnYN[0] === false && pnYN[1] === true) || (pnYN[0] === true && pnYN[1] === false) ) ..

• 

  JavaScript [자바스크립트] 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(..

• 

  JavaScript [자바스크립트] 별 찍기 응용문제 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++; // 탑을 한 층씩 쌓을 ..

• JavaScript [러닝 자바스크립트] 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..

• 

  JAVA 객체지향 (상속, 합성, 인터페이스) 캠핑 상황으로 이해해보기 객체지향 - 상속, 합성, 인터페이스 복습! 캠핑을 가서 텐트를 치고 밥을 먹는다. 그런데, 만약 텐트 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...

• JavaScript 자바스크립트 호이스팅 및 스코프 문제 { // 외부 블록 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를 담는건데???

• 

  JavaScript 리액트를 하기 전 자바스크립트를 공부해야 하는 이유 개인적으로 리액트를 상당히 좋아하는 편이다. 솔직히 내가 리액트를 좋아하게 된 계기는 로고가 예쁘고 퍼즐처럼 엮이는 모양새로 러닝커브는 쎄지만 한 번 구축해두면 재사용이 용이하고 무엇보다 문법이 예쁘기 때문이었다. (?). 가독성도 좋고, 조각조각 나있는 언어 구성이 아주 마음에 들었다. 그리고, 늘 리액트는 자바스크립트 기반의 라이브러리이기 때문에 바닐라 자바스크립트에 대해 잘 알아야 한다는 사실을 머릿속으로는 알면서도 막상 자바스크립트를 진지하게 공부할 생각을 하지 못했었다. 대충 위기 상황에 맞닥트리면 해결되지 않을까 안일하게 생각했던 것 같다. 그러다가 이번 이직 기회로 딥하게 공부할 기회가 되었는데, 막상 딥하게 들어가보니 정말 필요한 지식들이다. 과거 바닐라 JS로 프로젝트를 해보기도 했고 꽤..

• 

  React Native Stepzen과 neon을 이용해 Postgresql과 graphQL 쉽게 사용하기 먼저 neon에서 postgresql 스키마와 테이블, 더미 데이터들을 넣어준다. Dashboard에는 host와 password등의 정보들이 담겨있다. stepzen은 graphql을 편히 사용해주는 GUI인데 프로젝트 내에 stepzen 폴더를 만들어주고 폴더 내부에서 stepzen 정보를 입력해주면 손쉽게 graphql을 적용할 수 있다. index.graphql을 확인해보면 postgresql로 만든 데이터들이 담겨져 있다. 처음 써보는 거라 아직 익숙치는 않음. 터미널에서 가동시켰던 stepzen url에 들어가면 graphql cli가 나온다. builder에서는 클릭하면 자동으로 gql을 입력해줌. 와 뭐지 신세계...

• React Native GraphQL vs REST API https://yozm.wishket.com/magazine/detail/2113/ 개발자에게 편리함을 주는 ‘GraphQL’ 도입 시 주의할 점은? | 요즘IT 프론트엔드 개발자에게 API 통신 비용은 언제나 고민되는 요소다. 모던 브라우저의 경우 성능이 많이 좋아져서 유저가 불편할 정도의 지연은 자주 발생하지 않지만, API 통신은 네트워크 환경의 yozm.wishket.com 솔직히 REST API 상당히 편하고 익숙한 것은 맞는데 일일이 프론트엔드와 백엔드 소통이 필요한 것은 좀 귀찮았음. GraphQL 도입해보자. 에러에 대한 핸들링은 까다롭다고는 하나 RestAPI도 섞어 혼용해서 사용도 가능하다고 하니...

• React Native View 컴포넌트 안에서 삼항연산자로 css 사용 예시 isFirst를 boolean type으로 가정한다. {/* Experience */} Experience {user.experience?.map((experience, index) => ( ))} export default function ExperienceListItem({ experience, isFirst, }: ExperienceListItemProps) { return ( {experience.title} {experience.companyName} ); } type ExperienceListItemProps = { experience: Experience; isFirst: boolean; }; export default function ExperienceListItem({ experience..

• React Native 안드로이드 스튜디오 맥북 M1 에뮬레이터 안 켜질 때 해결 방법 SDK 경로도 더블 체크했을 때 올바르게 설정되었고, 안드로이드 스튜디오에 React native 프로젝트가 아닌 My Application으로 Empty Activity 설정으로 프로젝트를 만들어 에뮬레이터를 띄우면 제대로 띄워지는데 유독 RN으로 npm run android 하면 에뮬레이터가 구동 되지 않았다. 후...하루종일 구글링해서 해봤는데 해결되지 않았다. 깃허브에 올라와있는 m1 유저들을 위한 에뮬레이터를 dmg로 받기도 했는데 설정이 복잡하기도 하고 애초에 완전 해결책은 아니라고들 구글에서 얘기하더라. 그래서 아예 갤럭시 핸드폰(플립3)을 개발자 옵션을 켜서 (USB 디버깅 토글 활성화) 연결하여 직접적으로 키니 그제서야 제대로 구동되었다. 이 때에도 초반에 갤럭시가 처음에는 제대로 인식을..

• 

  React Native Xcode에서 Components가 없어졌을 때 찾는 방법 Platforms 탭의 리스트 아래 + 버튼을 누르면 시뮬레이터가 나온다. Xcode를 앱스토어에서 다운 받으면 이런 현상이 생긴다고 한다. 예전 개발자 홈페이지에서 다운 받으면 Components 탭이 있다고 함. 그런데 아마 지금은 플랫폼 탭으로 통일된 것 같음.

• 

  먹는게 남는 것 신상 과자 먹태깡 3봉지 성공 요즘 새로 나와서 편의점에서 구하기 약간 힘들다던데 나는 2번 시도 끝에 GS25에서 겟함 개인적으로 먹태, 황태, 명태 등 태로 끝나는 건어물 생선류 상당히 좋아하는 편 예를 들면 소주에는 먹태 황태는 그냥 건조된거 먹기도 하고 (고양이들 간식으로도 좋음) 명태는 명태식해 막국수랑 명태조림 이런거 상당히 좋아하는 취향 다행히 2+1이어서 3개 사와버렸다. 가격은 한 봉지에 1700원이었던 듯 얼마나 맛있는지 볼까 생긴 것은 기존 새우깡 두께의 1.5배에 양념 발라놓은 모양새 청양 마요 시즈닝이 들어간거라서 양념 맛이 강했음 가루가 손가락에 솔솔 묻어남 우리집 고양이가 황태에 환장해서 태짜로 끝나는 생선류라고 하면 덩달아 함께 환장한다. 먹태깡도 스멜이 강하게 났는지 탐하길래 강하게 혼내줬음… 너 이거 ..

• 

  먹는게 남는 것 제주도 맛집 삼대국수회관본점 고기국수 돔베고기 세트 과거 우리들의 블루스를 감명 깊게 본 우리는 제주도에서 고기국수로 유명하다는 삼대 국수회관 본점에 다녀왔다. 과연 베지근했을까? 행복국수 혹은 행운국수 맛이었으면 좋겠다. 주차장은 나름 가용 대수가 꽤 있는데 입구가 상당히 빡세다. 1차선(?) 이어서 만약 들어오는 차가 있으면 빠꾸해서 비켜줘야한다. 우리도 제주도 여행객인지라 렌트카였는데 살짝 긴장했다. 주차장을 통해 삼대국수를 먹으러 바로 올라갈 수 있다. 가끔 웨이팅도 하는지 캐치테이블이 놓여져 있었다. 다행히 우리가 갔을 때에 웨이팅을 하진 않았다. 오우 맛집이 맞긴 한건지 상당히 사람이 이미 많았다. 자리들도 많고 넓어서 여기에서 웨이팅까지 있으면 정말 사람들이 엄청나게 많은건데... 타이밍을 잘 잡았구나 싶었다. 고기국수는 1인분에 9천원으로 ..

• 

  먹는게 남는 것 경기도 양평 남한강 뷰맛집 카페 드립니다 DRIPNIDA 몇주 전 백패킹 가기 전에 다녀온 양평 리버뷰 카페 드립니다 (이름이 진짜 드립니다) 근처 스타벅스에 가자니 주차비가 발생되기도 하고 오래 있을 것도 아니었어서 급히 찾아서 간 곳 치고 만족스러웠다. 주차는 오리가 엄지척하고 있는 곳에 1-2대 정도 가능한데 주차 공간은 협소해서 조금 아쉬웠다. 입구에 들어가면 아기자기하고 깔끔한 인테리어의 카페를 만날 수 있다. 백패킹 가기 전이라 등산복 차림으로 거울 셀카 한 번 찍어주었다 ㅎㅅㅎ 좌석은 리버뷰를 보면서 간단히 자리하기 좋은 좌식형 좌석들도 있었다. 우리는 잠시 노트북을 해야했기 때문에 2층으로 올라갔다. 역시 빠질 수 없는 아이스 아메리카노와 케익을 마셨는데 이게 세트 구성이어서 그냥 한 번 시켜봤는데 케익 순삭할 정도로 달달하고 맛있었다. 사진으로..

• 

  먹는게 남는 것 서울 중랑구 중화역 숨은 곱창전골 맛집 넝쿨곱창 곱창 러버 곱순이인 나는 주기적으로 곱창을 먹어줘야 살맛이 나는데 오늘은 곱창전골에 소주가 땡겨 급히 곱창전골 맛집을 찾아보았다. 흔히들 리뷰 보고 방문하듯이 나 또한 리뷰를 보고 방문하였고, 숨은 맛집이라는 평이 보여서 고민 없이 바로 방문해봤다. 넝쿨곱창 (구)울타리곱창 중화역 4번출구 도보 5분 영업시간 매일 16:30 - 24:00 ☎ 0507-1308-1262 직접 여쭤보진 않았지만 가게 앞이라 주차 1대는 오피셜하게 가능하지 않을까 싶다. 나는 여기가 집 근처여서 걸어갔다. 메뉴판은 상기 사진과 같은데 타 흔한 곱창집들과는 달리 1인분 가격과 2인분 가격이 다르다. 2인분으로 주문했을 때 비교적 저렴하다. 곱창전골도 시세 평균 대비 2인분으로 주문했을 때 저렴한 편이다. 그리고 보통 곱창집들..

• 

  블로그 성장기 네이버 블로그 50일만에 일 방문자수 1000명 만든 방법 + 인증, 수익 안녕하세요 고매입니다. 저는 티스토리 블로그와 함께 등산, 백패킹, 캠핑, 여행 위주의 레저 여행 네이버 블로그를 운영하고 있고 워드프레스는 최근에 셋팅을 시작했는데요. 네이버 블로그 개설은 2023.04.23에 했으며 첫 게시글은 2023.05.02 였고, 오늘이 블로그를 본격적으로 키운지 딱 51일째 되는 날입니다. 50일만에 이룬 성과로 나쁘지 않았다 생각해서 인증과 더불어 노력했던 부분들과 수익에 대한 부분을 적어볼까 합니다. 방문자수 인증 저는 현재 레저/스포츠 분야 네이버 인플루언서를 도전하고 있고, 그래도 단기간에 빠르게 성장시킬 수 있었던 성장 기록 겸 제가 노력했던 부분들을 가감없이 공유하고자 블로그에 남겨봅니다. 블로그 지수는 현재 준최1-3 사이를 오가고 있고 글 총 갯수는 63개,..

• 

  먹는게 남는 것 제주도 서귀포 갈치조림 로컬 맛집 수희식당 얼마 전 제주도에 놀러가서 남친 회사의 동료 가족분이 로컬이시라며, 로컬이 방문하는 찐 맛집이라고 해서 추천 받아 방문한 수희식당. 제주도에서 맛집을 가려내는 방법은 주차장에서 차들의 번호판을 유심히 보는 것이다. ㅎ자가 많이 들어간 렌트카가 많다면 관광객이 대부분인 식당이고, 그 외에 번호판이 많다면 어느 정도 로컬들이 인정하는 식당이라고 보면 된다. 수희식당은 주차장에 가보았을 때 약 50 : 50의 비율을 가지고 있었다. 수희식당 내부로 들어가기 전 대략적으로 메뉴를 볼 수 있는 표지판이 있는데 흔히 제주도의 생선 전문 식당에서 볼 수 있는 메뉴 구성이었다. 수희식당도 마찬가지로 갈치조림과 고등어조림이 메인인듯 보였다. 식당에 들어서니 꽤 사람들이 많았다. 맛집인 줄 알고 방문했는데 사람이 없는 것..

• 

  먹는게 남는 것 중화역 맛집 냉면이 서비스로 나오는 흥부골숯불돼지왕갈비 집 근처에 있어서 드디어 가보게 된 흥부골 갈비집. 공사가 끝나고 다시 재오픈한 이후로 가봐야지 생각만 하다가 한참 뒤인 어제서야 가보게 되었다. 결론부터 얘기하면 아주 대만족! 맛있었음. 메뉴는 왕갈비와 스테이크 돼지고기가 전부이다. 개인적으로 맛집이라고 생각하는 곳들은 메뉴가 다양하지 않고 선택과 집중을 하던데 여기도 마찬가지로 갈비에 집중을 하는 곳이었다. 가격도 300g에 19,000원이면 착한 편으로 보인다. 삼겹살도 180g-200g에 14,000원은 기본으로 하니까. 밑반찬은 양배추 샐러드, 떡볶이, 쌈류, 무 오이 반찬(?) 그리고 양념게장이 나온다. 양념게장 상당히 맵지도 않고 달달하니 맛있었다. 갈비집에서 밑반찬으로 게장과 떡볶이가 나오는 경우는 많이 없는데 꽤나 흥미롭게 다가왔다. 물..

• 

  등산 서울에서 국립공원 스탬프투어 오프라인 여권 발급 받는 방법 안녕하세요 고매입니다. 오늘은 얼마 전에 발급 받았던 국립공원 스탬프 투어 여권 발급 받는 방법에 대해 말씀드리도록 하겠습니다. 국립공원 스탬프 투어 여권은 10개 스탬프를 찍었을 때 기념품과 완주증을 줍니다. 산쟁이에게는 이것이 명예 중 하나죠! 우리나라의 대표적인 메인 산들은 거의 국립공원에 속해 있으니까요 ㅎㅎ 저도 올해 안에 10개를 찍어보는 것이 목표입니다. 발급받을 수 있는 곳은 엄청 많은데 가기 전 미리 전화를 하시고 가셔야 합니다. 재고가 얼마나 남았는지 확인하신 후 출발하시는 것이 좋습니다. 전부터 계속 발급 받아야겠다 싶었는데 미루다가 이제서야 드디어 받게 되었네요!! 저는 서울에 거주하기 때문에 가장 가까운 '도봉산 공영주차장'으로 네비 찍고 출발했습니다. 공영주차장 외에 주차할 곳이..

• 

  먹는게 남는 것 중랑구 봉화산역 신내 맛집 콩두 청국장과 제육의 정석 안녕하세요 고목나무 매미입니다. 오늘은 연천으로 백패킹을 가기 전 너무 배가 고픈 나머지 저녁밥을 식당에서 먹고 갔는데요 조뚱씨가 7년 전 성남 야탑에서 즐겨 먹던 콩두가 없어져서 줄곧 슬퍼했었는데 집 근처 신내에 있는 것을 알고 바로 달려갔습니다. 옛날에 알고 있던 그 맛 그대로 밥 2그릇을 깨끗히 비우게 했던 콩두 봉화산역점을 소개합니다. 콩두 봉화산역점 주소 : 서울특별시 중랑구 신내로 225 디아뜨갤러리 157호 전화번호 : 02-3422-5560 영업시간 : 11:00 - 22:00(매주 일요일 휴무) 주차 : 봉화산역(남)환승주차장 봉화산역 환승주차장에 주차를 하면 바로 콩두를 쉽게 발견할 수 있습니다. 식사류와 함께 안주류도 판매합니다. 두부 베이스 식당이다보니 두부 요리들이 많은데 상당히 ..

• 

  먹는게 남는 것 중랑역 이삭토스트 홀이 있어 간단하고 편하게 먹을 수 있는 곳 계속되는 백패킹으로 인해 어깨, 목에 누적된 피로가 커서 마사지를 받으러 갔다 오는 길이었다. 괜시리 출출해져서 눈에 보이는 이삭토스트에 방문했다. 이삭 토스트는 다양한 메뉴가 있지만 유독 햄치즈만 손에 간다. 그 이유는 학창시절에 햄치즈만 많이 먹어서 추억이 가득한 메뉴이기 때문이다. 보통 이삭토스트 타 매장들은 테이크아웃만 되는 곳들이 많아서 길에서 급히 먹을 수 밖에 없었는데 중랑역 이삭토스트는 홀이 있어서 좀 더 편하고 차분하게 음미하며 먹을 수 있었다. 시킨 메뉴가 나왔다. 물티슈와 냅킨을 같이 주신다. 이삭토스트의 비밀 병기는 아마도 버터와 안에 들어가는 계란 토핑이지 않을까 싶다. 언제 먹어도 맛있는 이삭토스트 어떤 식당을 가도 식비 만원은 기본인데 그 가운데에서 착한 가격으로 우리의 배를 ..