프론트엔드 (40) 썸네일형 리스트형 '모듈' 과 '패키지' 는 같은걸까? 나의 코드를 npm install 형식으로 배포하기 위한 과정에서 문득 모듈과 패키지에 대해 같은것을 다르게 지칭하는 것인지 궁금해졌다. 모듈이란 Node.js require() 함수에 의해 로드할 수 있는 node_modules 디렉터리 파일 또는 디렉터리를 말한다. 개발하는 어플리케이션의 크기가 커지면 파일을 여러개로 분리해야하는 시점이 온다. 이때 분리된 각각의 파일을 모듈 이라고 한다. 모듈은 대개 특정한 기능을 수행하는 복수의 함수로 구성되어있다. 모듈은 단지 하나의 파일에 불과하다. 모듈에 특수 지시자인 export나 import를 적용하면 다른 모듈을 불러와 함수를 호출하는 기능 공유가 가능하다. 모듈은 package.json 파일을 가질필요가 없기 때문에 모든 모듈이 패키지 인것은 아니다!.. [ag-grid] ag-grid cell에 값이 나타나지 않는 문제 해결하기 에러내용 ag grid에서 headerName이 '컬럼명'인 컬럼에만 편집모드 옵션을 활성화했다. 그랬더니 필드값이 그리드상에 그려지지 않는 문제가 발생하였다. 셀을 클릭하여 편집모드를 활성화해보니 값을 가지고는 있으나 랜더링이 되지 않는 문제가 발생됐다. 해결방안 기본 그리드는 렌더러를 수행해야한다. 따라서 셀 렌더러(cellRenderer)로 파라미터값을 렌더링함으로써 해결할 수 있다. // 예시 let columnDefs = [ { headerName: 'No', field: 'id' }, { headerName: '컬럼명', field: 'columnName', cellRenderer: (params) => { return params.value } }, ] 참고링크 : https://stacko.. [javascript] 객체에서 마지막 인덱스 찾는법 (findIndex 뒤에서부터 적용하기) 특정 조건을 만족하는 인덱스를 뽑아야 한다. 배열을 대상으로 할 경우 lastIndexOf() 를 사용하면 쉽게 찾아지지만, 배열안에 객체형태로 되어있는경우는 예외이다. 만약 다음과같은 데이터를 가진 arr 변수가 있다고 할때 나는 name이 jeongmin인 객체의 마지막 인덱스을 구하고싶다. let arr = [{ 'name': 'jeongmin', 'job': null }, { 'name': 'kim', 'job': 'dancer' }, { 'name': 'lee', 'job': 'actor' }, { 'name': 'jeongmin', 'job': 'developer' }] 해당 경우에 만약 아래 로직처럼 findIndex를 사용하게 된다면 조건을 만족하는 첫번째 값을 반환한다. let first.. [javascript] Converting circular structure to JSON (JSON 형태 배열 로그 찍는법) 에러 발생 원인 이벤트 발생 객체를 콘솔로그로 확인해보려고 하니 >> [objdec Object] 로 출력되어 헤당 내용을 확인할 수 없었다. 떄문에 JSON.stringify 형태로 로그를 확인하려 하니, 선회하는 구조를 JSON 구조로 아래와같은 에러가 발생하였다. 해결책 for in을 사용하여 해당 객체의 콘솔로그를 확인할 수 있다. 나는 키와 밸류를 모두 확인하고자 다음과 같은 로그로직을 짰다. for (let node in event) { console.log(JSON.stringify(node) , ' : ' , JSON.stringify(event[node])); } for in 과 for of의 차이는 여기를 참고! https://pro-jm.tistory.com/50 [javascript.. Vue.js 자식에서 부모로 데이터 전송하기 (객체 일부값만 변경하는법) 부모 컴포넌트에서 데이터 바인딩을 통해 자식 컴포넌트로 데이터를 전달한다. (v-bind 디렉티브 사용!) 자식컴포넌트에서 데이터 변경이 발생시 v-on으로 선언된 함수로 데이터를 전송해 변경할 수 있다. 이때, 객체의 일부값만 변경하고싶다면 Object.assign 을 활용할 수 있다. 1. 부모에서 자식으로 데이터 전달하기 /* 부모컴포넌트 */ /* 자식컴포넌트 */ 위와같은 구조일때, 부모 컴포넌트에서 item 이라는 변수를 자식컴포넌트(child)에 바인딩 하였다. 자식컴포넌트에서 해당 데이터를 전달받아 아래의 방식으로 부모에게 전달할 수 있다. 2. 자식 컴포넌트에서 데이터 변경 후 부모로 전달하기 /* 스크립트부분 */ export default { props: ['item'], method.. [bootstrap] Collapse (콜랩스) 메뉴 접기/펴기 위아래로 아코디언(accordion) 형식으로 메뉴를 펼치고 접는 로직을 짜면서 메소드를 정리하고자 부트스트랩의 콜랩스 예제를 정리했다. 아코디언(Accordion) 타입 예제 HTML 삽입 미리보기할 수 없는 소스 1. href or data-target 첫번째 예시는 클릭했을때 펼칠 영역을 href를 사용하여 선언하였고, 두번째 예시는 클릭하였을때 펼칠 영역을 data-target을 사용하여 선언하였다. 접힌 대상은 두가지 속성을 사용하여 요소를 표시하고 숨길 수 있다. 다만, 두가지 속성을 이용할때 data-toggle="collapse" 선언은 필수이다. 2. role 컨트롤의 HTML 요소가 버튼이 아닌 경우에는 role에 속성을 추가해야한다. 위의 예시의 경우 div 속성이므로 role에 ta.. [javascript] Map 알아보기 (set, get 메소드 사용하기) 프로그래머스 해시문제를 풀고 다른사람 풀이를 살펴보던중 Map을 사용한 풀이를 보았다. Map역시 ES6에 도입된 문법이다. 이번엔 Map의 key value를 사용해보는 예제를 정리해보려 한다. 나의 풀이는 https://pro-jm.tistory.com/52 여기를 참고. 1. Map() 이란? Map()은 key-value 페어로 이루어져있다. key를 사용하여 value를 get, set 할 수 있다. key는 중복될 수 없다. (하나의 key에 하나의 value값만 가질 수 있다는 뜻) key로 사용 가능한 데이터타입은 string, symbol, object, function 이 있다. 2. 메소드 개념 set() set 메소드를 사용하여 Map에 새로운 객체를 추가할 수 있다. (key, v.. [javascript] 누산기 reduce 알아보기 (알고리즘 자주출몰) 알고리즘 문제에 많은 사람들이 풀이법으로 reduce를 많이 사용하고있다. for문이나 카운트를 위해 별도 변수를 선언하지 않아도 아웃풋을 출력해낼 수 있기때문에 코드가 훨씬 직관적인것 같다. 정말 강력한 기능이라고 하는 reduce를 정리하자면 다음과 같다. 1. 개념 reduce는 배열 요소를 순회하며 리듀서 함수를 실행하고 누적된 하나의 값을 반환한다. 즉 함수의 반환값은 누산기에 할당되고, 배열을 순회하는 과정에 해당 값이 유지되므로 하나의 값을 반환하는 것이다. 2. 인자값 리듀서 함수가 인자로 받는것은 다음과 같다. 누산기 현재값 현재 인덱스 원본배열 MDN에서 제공하는 정보는 다음과 같다. arr.reduce(callback[, initialValue]) callback : 배열의 각 요소에.. 이전 1 2 3 4 5 다음
