TLDR웹뷰형태의 앱을 서비스하게 되니, React에서 앱으로 데이터를 주고받을 수 없을까? 하는 생각이 들었습니다. 저희 서비스에서는 웹뷰로 표시될 앱을 외주를 맡기고 앱동작이 아닌 거의 모든 UI와 상태들이 웹에서 관리되고 있었기 때문에, 데이터를 전달해서 기능과 UI를 다르게 서비스하는 기능이 필요했습니다.이번 포스팅에서는 저희 서비스에서 웹과 앱간에 데이터를 주고받기 위해 사용한 두 가지 방식에 대해 소개해드리려고 합니다. URL params웹뷰로 연결된 앱에서는, URL 을 통해 앱에 웹을 표시합니다. URL 뒤에 약속된 params에 데이터를 남긴다면 데이터를 전달하거나 그에 맞춰서 UI를 변경할 수 있습니다.저희 서비스에서 앱에서 사용자의 몇몇 액션에 따라 페이지에 팝업이 떠야 하는 경우가 ..

문제프로그래머스 코딩테스트 연습 : [PCCP 기출문제] 1번 / 동영상 재생기도움말 자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n)소요 시간: 45분 코드function toFixedTime(minutes, seconds) { if(minutes.toString().length Number(op_start.split(":")[0]) && minutes = Number(op_start.split(":")[1]) ) { if( minutes Number(op_start.split(":")[0]) ) { return true; } else if( minutes === Number(op_start.split(":")[0]..

개요웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 URL Encoding에 대해 알아보려고 합니다. TLDRReact를 통해 개발하다 보면, 전역 상태를 통해 데이터를 전달하기도, Component의 Props를 통하는 방법 등등 여러 방법으로 데이터를 전달하지만, URL의 params를 통해 데이터를 전달하곤 합니다. 이번 프로젝트 개발에서도 특정 데이터에 대한 "메모"와 "메모 수정 페이지"로 이동하기 위해 메모 데이터를 URL params를 통해 넘기고자 시도했습니다.api를 통해 받아온 responseData에서 바로 URL로 데이터를 전달하기 위해 아래와 같은 코드를 작성했습니다.navigate(`/place/${id}/edit?memo=${responseData.memo)}`); 결과는,, 원..

문제프로그래머스 코딩테스트 연습 : [Level 1] 과일 장수  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n ** log n)소요 시간: 15분  코드function solution(k, m, score) { score = score.sort(); let result = 0; for(i = score.length - m; i >= 0; i = i - m) { result += score[i] * m; } return result;}  회고

문제프로그래머스 코딩테스트 연습 : [Level 1] 기사단원의 무기  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n ** log n)소요 시간: 20분  코드function getDivisor(number) { if(number === 1) return 1; let min = 1; let max = Math.sqrt(number); let count = 0; while(min limit) { result += power; } else { result += weapon; } } return result;}  회고sqrt 함수명 기억..

문제프로그래머스 코딩테스트 연습 : [Level 1] 명예의 전당 (1)  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: Array시간 복잡도: O(n ** 2)소요 시간: 30분  코드function solution(k, score) { let hallOfFamers = []; let result = []; for (index in score) { if(hallOfFamers.length cur - next); if(hallOfFamers[0] cur - next); result.push(hallOfFamers[0]) } return result;}  회고더 나은 풀이법에 대한 고민 중.. 배열에 넣고..

문제프로그래머스 코딩테스트 연습 : [Level 1] 문자열 나누기  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n)소요 시간: 15분  코드function solution(s) { let flag = s[0]; let count = 0; let flagCount = 0; let otherCount = 0; for(index in s) { if(s[index] === flag) { flagCount = flagCount + 1; } else { otherCount = otherCount + 1; } if(flagCou..

개요 지금까지, 몇 만개 가량의 수치 데이터를 표현하기 위한 화면을 설계하고 프로시저와 트리거를 이용해 통계 테이블을 만들었습니다. 이제 화면에 구현을 해보려고하고 그래프를 구현하기 위한 라이브러리로 Google Charts를 선택했습니다. 구글 차트를 선택한 이유 그래프를 그리기위해 우선 관련 라이브러리 리서치를 했습니다. 정말 다양한 라이브러리가 있었고 그 중 Chart.js 와 Google Chart 두가지 라이브러리 중에서 고민하고 Google Chart를 선택한 이유에 대해서 말씀 드리겠습니다. 우선 Chart.js 입니다. CANVAS 베이스로 빠른 렌더링 속도를 가지고 있습니다. 작은 라이브러리 용량과 공식문서 가이드만 봐도 쉽고 간단하게 그래프를 그릴 수 있다는 점이 가장 큰 메력이었습니다..

문제프로그래머스 코딩테스트 연습 : [Level 1] 추억 점수  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: Hash시간 복잡도: O(n ** 2)소요 시간: 10분  코드function solution(name, yearning, photo) { //1. name-yearning Dict var userDict = {} var photoYearning = [] name.forEach((name, index) => { userDict[name] = yearning[index]; }) //2. photo.forEach 해서 각 사진별 점수 계산하기 photo.forEach((peoples) => { var score = ..

문제의 발생.. github Links NomadCoders의 side-projects 모임에서(매주 간단한 side-projects과제를 받고 코딩하는 모임) Collor Palette를 제작할 때였다. github-pages를 이용해 보기 위해 정적인 웹페이지를 만들기로 하고 COLOR.js에 있는 변수명을 Import 하려고 하자 문제가 발생했다. 문제1 Uncaught SyntaxError: Cannot use import statement outside a module script의 type을 module로 설정 해야지만 import를 사용할 수 있다는 Error였다. Module? 기본적으로 JavaScript 파일을 담고있는 파일이지만, 일반 JavaScript 파일과 다른 차이점을 가지고 ..

특정 다수의 input의 값을 className을 통해서 불러 오면서 그에 맞는 key값을 html에서 불러 올때 사용가능한 코드 들이다. 1. element.parentElement : 해당 요소의 부모 요소를 불러 온다. value.parentElement; //value의 부모 요소를 불러온다 2. element.previousElementSibling : 해당 요소의 이전 요소를 불러 온다. value.previousElementSibling; //value의 이전 요소를 불러온다 3. element.nextSibling : 해당 요소의 다음 요소를 불러 온다. element.nextSibling //element의 다음 요소를 가져온다 # previousElementSibling과 nextSib..

내가 아는 방식에는 parentNode를 통해서 appendChild를 이용하는 방법 뿐이었다. 이번에 프로젝트를 하면서 해당 요소의 다음 또는 parentNode의 중간에 삽입을 해야 하는 상황에서 html을 고치면 javascript까지 고쳐야 할것 같아서 위의 상황에 바로 맞출수 있는 방법을 알아 보게 되었다. 0. !! !의 경우 false를 true로 true를 false로 바꾸는 입력값을 "boolean"형으로 변환하게 된다. 하지만 !!를 사용하게 되면, 다른 타입의 데이터를 형변환 해준다. ex) !!("asdf") //true !!("") // false !!111 //true !!0 //false !!NaN //false !!true //true 1. parentNode.insertBe..