너와 나의 프로그래밍

프론트엔드 개발자 기술면접을 보는 중 "부모에서 자식 함수를 호출하는 방법"은 무엇일까요? 라는 질문을 받은 적이 있다. React.js는 Vue.js와 다르게 정말 대표적인 "단방향 통신"의 프론트엔드 라이브러리인데 굳이 왜 자식에서 함수를 호출해야 할까? 라는 의문점이 들었다. 하지만 개발을 하다보면 참 여러가지 케이스가 많이 발생하는데 어쩔 수 없이 자식에서 함수를 호출해야되는 상황도 있기 마련이다. 대표적인 단방향 통신의 React.js에서 과연 자식 함수를 어떻게 호출할 수 있는거지?라는 의문에 구글링을 해본 결과 정말 방법이 있어서 "아니 이런것이 있었어!?🙄", "이 점은 내가 아직 부족한게 많구나...😭" 라는 점도 느끼게 되었다. 그 방법은 React의 useRef, forardRef와 ..

2017년 개발자는 꼭 개발 블로그를 운영하면 좋다는 의견을 들어 시작을 했고 2022년이 되어서야 드디어 애드센스에서 수익을 창출할 수 있게 되었다.✌️ 처음에는 포트폴리오용 어플리케이션에 admob을 적용하는 것부터 시작해서 그렇게 보면 참 수익 창출하기가 보통 어려운게 아닌가 싶다.😂😂 (앉아서 돈을 번다는게 참 쉬운것 같지만서도 쉽지 않다는 생각도 든다.) 개인 일상 블로그를 운영하면서 네이버 애드포스트를 통해 수익을 창출하거나 쿠팡 파트너스를 통해 간간히 수익을 창출하는데, 개발 블로그라는게 참 인기가 없는 것 같기도 하고 개발 블로그로는 수익을 창출하기가 꽤 어려운 것 같다. 하지만 처음 블로그를 시작했던 "모두에게 내 공유를 나눠서 해결했으면 좋겠다."라는 마음으로 앞으로도 꾸준히 개발 관련..

알고리즘 문제를 풀 때나 현업 프로젝트에서도 정렬은 거의 필연적으로 만나게 된다. Javascript에서 이미 Array.prototype.sort 라는 메서드를 제공하긴 하지만 그리 간단한 정렬들만 만나기는 참 쉽지 않고 이 정렬 메서드는 굉장히 많은 활용성을 가지게 된다. 그 중 배열 안에 있는 객체의 대해서 정렬을 하는 다양한 방법을 소개해볼까 한다. const items = [ { name: 'Edward', score: 1 }, { name: 'Sharpe', score: 2 }, { name: 'And', score: 3 }, { name: 'The', score: 3 }, { name: 'Magnetic', score: 4 }, { name: 'Zeros', score: 5 } ]; ✌️ 객..

요즘 프론트엔드 개발을 하면서 GraphQL을 많이 쓰는 추세다. 새로운 기술을 도입하는 스타트업 같은 경우에 유독 많이 사용하는 듯 하다. 여러 채용공고를 보면서 Recoil이라든지 React-Query라든지 여러가지 많은 라이브러리들을 사용하는 것 같다. 도대체 GraphQL이 뭐길래 이렇게 도입을 하는 것일까...? 🤔 What Is "GraphQL" GraphQL은 Facebook이 2012년에 개발하여 2015년에 공식적으로 배포한 "데이터 질의어"다. "질의어"란 Query Language를 말하는데 말 그대로 Query Language를 사용해서 API 통신을 할 수 있게 만들어준다. 간단하게 기존의 RESTful API를 불러오는 방식(예: Promise, fetch, Axios, ajax..

Kakao에서 무료 주소검색 API를 안드로이드나 iOS에서 웹뷰로 간단하고 쉽게 사용할 수 있게 제공하고 있다. 안드로이드에서는 따로 CSS를 적용하지 않아도 화면에 꽉 차게 반응형이 자동적으로 이루어지는데 iOS에서는 이상하게 반응형이 적용되지 않아 브라우저에서 보는 화면을 그대로 사용하는 이슈가 있었다. 기본적으로 제공하고 있는 예제에서는 딱히 Mobile OS별로 처리를 하는 방법이 적혀있지 않아서 찾던 중에 iOS WebView로 API 예제를 구현하신 분의 Github을 보고 힌트를 얻어 동적으로 DOM을 조작하는게 좋은 방법이라고 생각됬다. DOM이 onLoad 될 때 execDaumPostcode function을 실행하고 DOM의 대한 동적인 사이즈 조작은 initLayerPosition..

Intro...😇 프로젝트를 진행하다보면 체크박스(Checkbox)는 정말 필연적으로 만나게 되는 것 같다. 보통 체크박스로 선택한 Value들로 처리를 하는 방식이 많은데 가장 많이 질문하는 것이 다중 선택 후 Check 된 값들의 추출방식이 아닐까 싶다. Checkbox는 기본적으로 다중선택이 가능하다. 5개가 있으면 5개 모두 체크가 가능하고 10개가 있으면 10개 모두 된다. 하지만 10개의 Checkbox중에 오직 한가지만 선택할 수 있도록 해야한다면 과연 어떻게 하면 좋을까? How To Only One Check!?🤔 제일먼저 type인 checkbox의 input Element를 넣어주고 id를 Setting 해준다. const selectOnlyOne = (id) => { for (var..