프론트엔드 개발(18)
-
Array.prototype.some() - 배열에 요소 존재여부를 판별하는 메소드
some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다. - MDN의 Array.prototype.some() Array.prototype.some()은 배열의 요소 중 특정 조건(판별함수)을 만족하는 요소가 하나라도 존재하는지 여부를 판단할 때 쓸 수 있습니다. Array의 요소 중 콜백함수(판별함수)가 true를 반환하는 값이 하나라도 나오면 해당 메소드는 true를 반환합니다. 다시 말하면 true를 반환하는 값이 하나도 없으면 false를 반환합니다. 알고리즘을 공부하면서 유용하게 쓸 수 있다는 걸 알았지만 많이 써보지 않아 익숙치 않아서 한번 정리합니다. let array = [1, 2, 3, 4, 5]; const even = element => element..
2019.07.30 -
React의 componentDidUpdate 사용할 때 주의점: 무한루프
componentDidUpdate()에서 setState()를 즉시 호출할 수도 있지만, ... 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다는 점에 주의하세요. - React 공식문서 componentDidUpdate(){ ... this.setState({currentAddress:items[0].region.area3.name}); } React로 프로젝트를 진행하다 특이한 현상을 발견했습니다. 화면을 render한 직후 다음 단계에서 외부 API 호출을 하기 위해 componentDidUpdate()를 사용하는데 여기서 위의 코드처럼 setState()를 사용하니 무한루프에 빠지는 것입니다. 특히나 외부 API를 호출하는 로직이 들어가있어 이 상태로 5분만 내버려두면 한달치 무료 호출량을 ..
2019.07.24 -
JS 기술면접 스터디 3주차: 호이스팅부터 이벤트 버블링까지
기술면접 스터디 2주차에 이어 3주차를 진행하고 관련 내용을 정리합니다. 이전의 내용이 궁금하시다면 다음을 클릭해주세요. 1주차: 이벤트 위임부터 코드구성까지 2주차: 호스트 객체부터 Ajax까지 전체 질문 리스트의 출처는 front-end-interview-handbook이며, 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용을 담고 있진 않습니다. 관련해서는 이후에 따로 정리할 계획입니다. 3주차 질문은 호이스팅, JS 템플릿, attribute/property, load/DOMContentLoaded, 일치연산자, same-origin 정책, "use strict";, fizzbuzz 문제, 이벤트 버블링 등에 대한 내용입니다. 1. JavaScript 템플릿을 사용한 적이 있나요..
2019.07.21 -
JS 기술면접 스터디 2주차: 호스트 객체부터 Ajax까지
기술면접 스터디 1주차에 이어 2주차를 진행하고 관련 내용을 정리합니다. 1주차 내용이 궁금하시다면 여기를 클릭해주세요. 전체 질문 리스트의 출처는 front-end-interview-handbook이며, 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용을 담고 있진 않습니다. 관련해서는 이후에 따로 정리할 계획입니다. 2주차 질문은 호스트/내장객체, 함수선언, call()/apply()/bind(), Ajax, JSONP 등에 대한 내용입니다. 1. 호스트 객체와 내장 객체의 차이점은 무엇인가요? 내장객체는 ECMAScript에 의해 정의된 JavaScript의 일부인 객체(String, Math, RegExp, Object, Function 등)이고 native object, bui..
2019.07.19 -
[HTML & CSS팁] content에 개행(줄바꿈)을 하는 방법
CSS (가상요소)의 content에 개행이 필요한 경우 보통 JavaScript에서 콘텐츠에 개행이 필요한 경우 ES6의 Template literals을 이용해 편하게 개행을 하는데 CSS에서도 될 줄 알고 했다가 전혀 되지 않았다. \A 키워드를 이용하면 쉽게 개행(줄바꿈, 엔터, new line)할 수 있습니다. 대소문자 무관하게 적용되며 가상요소가 아니어도 상관없이 content에 모두 쓸 수 있습니다. JavaScript의 \n과 동일하게 기능합니다. 코드와 결과물은 아래에 있습니다. .className::after{ content: "클릭하여 이미지 변경"; /*...연관없는 스타일은 주석처리...*/ } 여기에 \A와 white-space 속성을 추가해줍니다. .className::afte..
2019.07.15 -
JS 기술면접 스터디 1주차: 이벤트 위임부터 코드구성까지
개발 프로젝트 동아리 활동 중 JS기술 면접을 대비하고 싶은 사람들과 함께 지난 7주간 모여 스터디를 진행했습니다. 질문 리스트는 front-end-interview-handbook에서 가져왔으며 매주 모여 일정 분량의 질문에 대한 답변을 준비하고 서로 돌아가며 말하고 이를 서로 보완하고 지적하는 식으로 진행하였습니다. 이 스터디를 하면서 JavaScript에 대해 피상적으로 알고 있던 내용을 문장으로 정리할 수 있었고 그러면서 동시에 모르는 내용이나 안다고 생각했던 내용에 대해서도 개념을 확실히 잡을 수 있었습니다. 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용은 담고 있지 않습니다. 관련해서는 이후에 따로 정리할 계획입니다. 첫주차 질문은 이벤트 위임, this, 프로토타입 상속..
2019.07.14