전체 글
-
[HTML+JS] window.postMessage() - <iframe> 과의 통신Front-End(Web)/HTML, CSS 2022. 2. 24. 22:27
현재, 회사의 서비스 분리 및 병합 등이 이루어지는 과정이어서, 선배 개발자님과 통합 멤버십 페이지를 개발하고 있다. 지금은 멤버십 개발 및 QA는 마무리된 상태이며, 이를 각 서비스에 연동하는 과정이며 여기서 많은 정책의 변화가 수반되고 있다. 그 중 하나가, 서비스에서 본인인증이 필요할 시, 멤버십 본인인증 창을 외부 팝업(일종의 모달) 형태로 띄우고자 하는 것이다. 팝업을 띄우는 다양한 방법이 있겠지만, 태그를 통해 내부에 웹페이지를 삽입하는 형태를 구상했다. 이 때, 내부 페이지의 X버튼을 클릭하면 외부 페이지가 이를 인식하고 창을 닫는 로직이 필요했으며, 이를 위해 window.postMessage() 라는 브라우저 이벤트 및 리스너를 활용하게 되었다. 내부에 웹을 띄우는 방법은 다방면에서 적용..
-
[CodeKata] 프로그래머스(Lv3) : 멀리 뛰기Algorithm 2022. 2. 19. 16:59
🥋 Oooth More!! (Level 3) 🧮 풀이 정답의 규칙성을 확인해보니 DP(Dynamic Programming) 으로 풀 수 있는 문제였다. 효진이는 1칸 혹은 2칸만 뛸 수 있다. 4칸을 뛴다고 가정하면, (2칸을 뛰는 모든 경우 + 2칸 뛰기), (3칸을 뛰는 모든 경우 + 1칸 뛰기) 둘의 합으로 결과를 산출할 수 있기 때문이다. function solution(n) { let dp = [0,1,2]; for (let i = 3 ; i
-
[Github] Branch 병합(Merge, Squash, Rebase)Environment(개발환경)/Git & Github 2022. 2. 18. 13:26
오랜만에 프론트앤드 개발 혹은 알고리즘 외의 주제로 포스팅을 작성하는 것 같다!!! 이 글을 포스팅하게 된 계기는, 개인 및 회사 프로젝트들을 진행하면서 Github를 사용하다보니 merge 외에 다른 병합 전략들을 접하게 되어 이를 정확히 알아보고 정리하고자 작성하게 되었다. 다수의 개발자들이 프로젝트를 진행하면, 개인의 코드를 관리하는 Git, 이 코드들이 병합되는 원격 저장소 Github(혹은 Gitlab 등) 과 같은 저장소를 사용하게 된다. 이런 Git, Github 와 같은 협업환경에서는, branch(브랜치)가 구성되어있어 개인환경에서 작업하거나 이를 main(master)과 같은 공용환경에 합치는 등의 작업이 가능하다. (Git & Github 정리 포스팅) [Git & Github] Gi..
-
[Javascript] 정규 표현식 (Regular Expression)Front-End(Web)/Javascript 2022. 2. 15. 02:14
🤔 서론 Javascript 언어를 사용하거나, 관련 프레임워크로 개발하다 보면 정규식이라는 개념을 종종 접할 수 있다. 아마도, 다양한 조건을 검색 혹은 대체하기 위한 목적으로 많이 사용해보았을 것이다. (이메일, 패스워드 조건 or match(), replace() 메서드 등) 지금까지는, 템플릿화된 정규식을 가져다 쓴게 대부분이고, 그렇기에 문법을 명확히 이해하지 못하고 관습적으로 사용하고 있었다. 이를 주도적으로 이해하고 직접 작성하기 위해선 제대로 공부해야겠다는 생각을 했고, 이번 포스팅을 그 기회로 삼을 예정이다! 📒 정규 표현식 (Regular Expression) 이란? 정규 표현식(이하 정규식) 은 '문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴'으로 MDN 공식문서는 ..
-
[CodeKata] 프로그래머스(Lv3) : 거스름돈Algorithm 2022. 2. 13. 18:11
🥋 Oooth More!! (Level 3) 🧮 풀이 나는 DFS로 접근했지만, 효율성 테스트에서 시간초과가 발생했다. function solution(n, money) { let answer = 0; money = money.sort((a,b) => b-a); const DFS = (rest, index) => { if (rest === 0) answer++ return; const m = money[index]; const max = Math.floor(rest/m); for (let i = max ; i >= 0 ; i--) { DFS(rest-m*i, index+1) } } DFS(n,0) return answer } DFS() 함수를 만들었고, 인자는 (남은 계산값, money 배열에서의 인덱스..
-
[Javascript] ES6 이후 - (2) ES2019, ES2020, ES2021Front-End(Web)/Javascript 2022. 2. 9. 13:15
이전 포스팅에서, 최근 Javascript의 문법이 격변했던 ES6(ES2015)에 대해 정리한 적이 있다. (포스팅 링크 : https://abangpa1ace.tistory.com/146?category=910462) [Javascript] ES6(ES2015) 🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 abangpa1ace.tistory.com ES6 버전업 된 2015년 이후, Javascript는 매년 TC39에 의해 버전업이 진행되고 있으며, ES2018(ES9) 버전까지 포스팅했었다. (포스트 링크 : https:/..
-
[Javascript] ES6 이후 - (1) ES2016, ES2017, ES2018Front-End(Web)/Javascript 2022. 2. 8. 19:37
이전 포스팅에서, 최근 Javascript의 문법이 격변했던 ES6(ES2015)에 대해 정리한 적이 있다. (포스팅 링크 : https://abangpa1ace.tistory.com/146?category=910462) [Javascript] ES6(ES2015) 🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 abangpa1ace.tistory.com 이 당시에, Javascript 문법에 많은 수정과 추가가 진행되었으며, 이는 컴파일링이 필요할 정도로 호환성 문제가 계속해서 대두되었다. (통상 IE) 이 포스팅은, 2015년 E..
-
[React] Portal (포탈), Modal 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 2. 6. 16:08
회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해서 표현한다. 하지만 React의 경우엔 어떻게 구현되는지 몰랐으며, 전역모달이 구현되는 영역에 Context API를 적용하면 되나 이 영역들이 리렌더링된다는 단점이 있었다. 그렇기에 전역상태를 통해 모달을 on/off 하는 방법을 찾아봤으며, 이 때 React의 Portal 기능을 통해 좀 더 효율적인 구현이 가능했다. 💙 Portal 이란? React 공식문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 소개하고 있다...