일상지식 더하기

api에서 처음부터 데이터를 묶어서 전달해주면 좋겠지만,api에서 하는 일이 많거나 해당 데이터를 난잡하지 않고, 간결하게 등등 여러가지 이유로 화면에서 데이터를 묶어서 처리를 해야 할 때,reduce를 사용하여 묶는 방법에 대해서 알아보겠다. 예제const list = [{word: '가', no: 1}, {word: '나', no: 3}, {word: '나', no: 2}]const rtnList = list.reduce((acc, val) => { const { word, no } = val; if (!acc[word]) acc[word] = []; acc[word].push(no); return acc;}, {});// { 가: [1], 나: [3, 2] } 배열 내, 중복제..

JavaScript에서 배열을 정렬하는 방법은 Array.prototype.sort() 함수를 사용한다. 해당 함수는 배열의 요소를 정렬할 때, 기본적으로 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬한다. 보편적인 예제// test list const list = [ { data: '가', seq: 2 }, { data: '나', seq: 1 } ]; // 오름차순 정렬 list.sort((a, b) => a.seq - b.seq); // 결과: [{data: '나', seq: 1}, {data: '가',seq: 2}] // 내림차순 정렬 list.sort((a, b) => b.seq - a.seq); // 결과: [{data: '가', seq: 2}, {data: '나',seq: 1}]위..

defer는? 웹 페이지의 스크립트 실행을 지연시키는 데 사용한다. 이를 통해 HTML 문서의 파싱이 진행되는 동안 스크립트가 실행되지 않고, 문서의 구성이 완료된 후에 스크립트가 실행되어 페이지 로딩 성능을 향상시키고, 스크립트의 실행이 다른 자원들에 미치는 영향을 최소화하는 데 도움이 된다. 사용 방법 defer 사용 유무 차이점 사용하지 않을 때, 스크립트가 문서 파싱 중에 다운로드되고 실행되기 때문에, 스크립트의 실행이 완료될 때까지 페이지의 로딩이 중단된다. 스크립트가 실행되는 동안에는 페이지에서 다른 동작이 차단될 수 있다. 사용하게 되면, 스크립트가 문서 파싱 중에 비동기적으로 다운로드되지만, 파싱이 완료된 후에 순서대로 실행된다. 페이지의 로딩이 중단되지 않으며, 스크립트가 실행되는 동안에..

제일 쉬운 방법은 그냥 개발자도구 켜서 콘솔에 decodeURIComponent(url) 찍어주는 게 가장 쉬운데, 그냥 즐겨찾기나 원클릭으로 잡아놓고 쓰기도 좋다. 예시 변환(전환)하기See the Pen DecodeURICompnent by 서대석(Key) (@seodaeya) on CodePen.참고 decodeURIComponent() - JavaScript | MDNThe decodeURIComponent() function decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent() or by a similar routine.developer.mozilla.org

문제 프로젝트 history.back 문제를 해결하면서 history.replaceState를 사용하였다. document.referrer를 이용하여 history.back 했을 때 이전 페이지를 불러올 수 있도록 처리하는데, 해당 처리하는 화면에서 스크롤을 내려서 다시 현재 화면으로 오게 되면 스크롤이 내려가서 이전 페이지를 불러오는 현상이 생겼다. ex) A -> B,history.replaceState(null,null,document.referrer) -> C, history.back() -> A 스크롤 중간 해결 document.body.scrollIntoView(true); 해당 스크립트를 화면 이동하기 전에 스크롤을 최상단으로 이동시킨 다음 이전 페이지로 돌아왔을 때 스크롤이 내려가 있던 문..

동기스크립트로 프로토콜, 도메인, 포트, 쿼리스트링 처리할 일이 많아졌다. 스크립트 #프로토콜: URL의 호스트 이름과 포트 번호를 설정하거나 반환합니다. > location.protocol"http:" #URL path와 쿼리스트링을 제외한 URL 정보: URL의 프로토콜, 호스트 이름 및 포트 번호를 반환합니다. > location.origin"http://seodaeya.tistory.com" #호스트네임: URL의 호스트 명을 설정 또는 리턴합니다. > location.hostname"seodaeya.tistory.com" # URL 경로: URL의 경로 이름을 설정하거나 반환합니다. location.pathname"/admin/entry/post/" # 쿼리스트링: URL의 쿼리 문자열 부분을 ..

들어가기 전display는 block, none만 알고 살아왔다.jQuery는 show, hide 만 해주면 되니까.... 근데 이건 왠걸? jquery에서 제공해주는 attr 로 display 속성을 변경했는데,table 의 td tag 를 보여주고 숨기는 과정에서 문제가 발생했다. 하나의 tr에 td 태그로 나와야 할 것들이 td 태그로 나오긴 했지만, 하나의 tr에 두 줄은 무어란 말인가.... 이유인 즉슨, style 속성을 block 으로 해준 부분에서 잘못되었다. table 의 td 로 넣기 위해서는 display가 block 이 아닌 table-cell 로 해주어야 한다. 직접 테스트 해보자if("보여주고 싶을때"){$("#table_td").attr("style", "display:tabl..

왜?문자 타입에서 숫자타입으로 바꾸고 싶을 때, 방법문자를 숫자로 Number(변경할 값) # 간단한 예시 # 간단한 설명? 2 line 에서 는 문자열이기 때문에 1을 더해줘도 11이 되는 것이고, 3 line 에서는 숫자로 타입이 바뀌었기 때문에 1을 더해주면 12가 되는 것이다.

들어가기 전...script 로 host url 을 가져와서 사용해야 할 때가 있다.처음에는 location.host 를 사용하면서 앞에 'http://' 를 추가해주는 식으로 사용했었는데, ie11 부터 지원하는 속성이 생겼다. 사용 방법ex) var url = location.origin + query_string; 개발자도구로 실행해보면 필자는 맥으로 캡처를 했기 때문에 safari 로 테스트 했지만, IE11 에서도 동일한 값이 나오는 것을 확인 할 수 있을 것이다. 지원 브라우저 #참고 : http://www.w3schools.com/jsref/prop_loc_origin.asp

혹시 scrpit function 호출 시, 전달인자의 갯수를 더 주거나 아니면 덜 준 적이 있는가?작년 프로젝트에서 처음 function 전달인자 갯수가 다른 것을 접해본 적이 있었다.그때는 그냥 뭐 이게 뭐야, 잘못됐네. 이러면서 ... 호출이 되긴 했지만 관심 없었다.근데 이번 프로젝트 기본 구성된 프레임웍을 가지고 개발 시작 전에 잠깐 프레임웍을 훑어보던 중 또 전달인자가 다른 부분을 확인했다. 이번엔 시간도 많으니 한번 궁금해서 찾아봤다. 참고 URL : http://www.w3schools.com/js/js_function_parameters.asp 영어라서 마음에 들지 않지만, 제일 맨 위에 문장을 봐보자.A JavaScript function does not perform any check..