김평범's OrdinaryCode

javascript 데이터 형태 중에서 객체 배열 형태를 많이 이용하다 보니 해당 Array에서 특정 값을 갖고 있는 객체를 찾아야 되는 업무가 많았다. 오늘은 javascript의 필터 기능을 이용해서 특정 key에 특정 value를 가진 객체를 찾아내 보도록 하겠다. 🤔Array.filter란? Array filter를 이용하면 해당 조건에 만족하는 요소를 모두 찾아서 반환시켜준다. 예시 코드 위의 코드를 보자. 1~5까지 숫자를 가진 배열에서 3보다 큰 수를 찾으라고 하면 4,5라는 새로운 배열을 만들어서 return 해준다. filter기능을 이용하면 이처럼 배열에서 내가 원하는 조건을 가진 요소를 가지고 새로운 배열을 만들 수 있다. 🍒객체 배열 내에서 특정 value 값을 가지는 객체 반환하기..

input에서 사용자는 수정을 못하게 하려면 readonly라는 옵션을 이용하면 된다. 최근 프로젝트에서 input check box도 readonly를 시키려고 아래 코드를 넣었으나, 동작하지 않았다. 📌input type checkbox readonly 오류 코드 readonly="true"로 변경을 해봤지만 그 부분도 적용이 안되고, disable="true"는 작동이 되고 뭐일까 하고 찾아봤다. 🍒input type checkbox readonly 성공 코드 확인해보니, checkbox의 readonly는 먹지 않아서 위처럼 onClick 이벤트에서 return false를 걸어주면 된다고 한다. 실제로 적용해보니 잘 작동한다.

nuxt에서. env 파일을 배포 환경과 개발환경마다 다르게 쓸 경우가 있다. 오늘은 @nuxtjs/dotenv를 이용해서 배포 환경마다 .env파일을 변경해보도록 하겠다. 1. @nuxtjs/dotenv와 cross-env를 설치를 해준다. npm install @nuxtjs/dotenv --save npm install cross-env --save 2. package.json 설정 cross-env를 이용해서 환경변수를 설정해줄 수 있다. package script에서 실행할 때 NODE_ENV 값을 설정해준다. "scripts": { "dev": "cross-env NODE_ENV=development nuxt", "start": "cross-env NODE_ENV=production nuxt s..

최근 협업 중에 git ignore에 파일을 추가했지만, 생각 없이 올리다보니 git ignore가 정상적으로 동작하지 않는 것을 발견했다. 검색을 해보니 git에도 캐시가 있어서,ignore에 들어가도 바로 적용이 안되는 경우가 있다고 한다. 📌WebStorm 폴더 색상 별 git 상태 확인하기 webstorm에서 보다보면, git이 연결될 경우 파일 색상에 따라서 git 상태를 확인할 수 있다. 빨간색 : git commit 목록에 add되지 않은 상태 파란색 : 이전 commit파일과 비교했을 때 변경이 내용이 있는 상태 흰색 : 이전 commit과 비교했을 때 변경 내용이 없는 경우 초록색 : 이전 commit에는 해당 파일이 없이 새로 생성이된 경우 노란색 : .gitignore에 추가된 상태 ..

⚠️Error:getaddrinfo EAI_AGAIN 아침 출근부터 오류 발생 처음 보는 오류인데, 일단 아마존 DB가 접속이 안된다. 로그인이 안 되는 대형사고 발생!! EAI_AGAIN이란? EAI_AGAIN은 DNS 조회시간 초과 오류이다. 📌PING 테스트 진행 DNS가 문제라고 하니, ping으로 google.com을 호출해봤는데 문제가 없는 서버에서는 ping이 잘 날라고 있었는데, 지금 오류가 발생하는 서버에서는 Temporary failure in name resolution 오류가 발생 😶nslookup 테스트 진행 nslookup 명령어 뒤에 조회하려는 도메인을 입력하면, 네임서버 관련된 조회가 된다고 하니 이것도 테스트를 진행 nslookup google.com nslookup goo..

많이 사용하는 datepicker 중 bootstrap datepicker가 있다. 필요한 모든 기능들이 제공되어서 꾸준히 사용하고 있는 datepicker! 📌공식사이트는 아래 링크 참고 https://getdatepicker.com/4/ https://getdatepicker.com/4/ Get awesome Dashboard Templates Looking for a template with the datepicker ready to go? Then get check out these templates from our partners. getdatepicker.com https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-d..

vue.js에서 v-if 조건 중 filter를 통해 정제된 데이터 값이랑 비교하고 싶을 때가 있다. 📌v-if문 시 filter로 이용한 데이터 값 조건으로 넣어주기 v-if="$options.filters.필터명(필터파라미터)" 샘플 코드 filter를 통해서 user레벨을 확인한 뒤 그에 따른 인사말을 v-if를 이용해서 출력하는 코드이다. 로그인회원 레벨 : {{$options.filters.levelCheck(userList, loginUser.id)}} 안녕하세요! 정회원이시네요! 안녕하세요! 준회원이시네요! 만약 필터를 통해서 준회원인지 정회원인지 확인하고 그에 맞는 텍스트를 보여줘야 하는 상황이라면 회원 레벨을 체크하는 필터를 만든 뒤 v-if에서 user를 확인해서 출력된 level 값에..

css 작성하다 보면, 자식 선택자를 선택하는 것은 매우 잘되어있는데, 부모에서 밑에 해당 자식이 있는 경우 작동하게 하는 방법이 딱히 없는 것 같아서 찾아보았다. 필요한 상황 예를 들어 ul li 구조에서 a태그 내. active 클래스가 활성화되었을 때 li 태그에 css를 주고 싶은 상황이다. 📌자식선택자 선택하기 li밑에 있는. active class를 가진 a태그에 css를 주는 것은 매우 간단하다. ul li a.active { color:skyblue; } ul 태그 안에 li태그 안에 a.active가 되어있는 태그를 찾는 방법이다. 그냥 depth순서대로 작성해주면 해당 태그를 선택해서 css를 적용할 수 있다. ✨특정 자식선택자를 가진 부모 태그 선택하기 반면 li 태그중 .acitve..

javascript 내에서 배열을 조작해야 되는 것 중 내가 원하는 값을 지우고 싶을 때가 있다. 이때 이용하는 것이 바로 splice() ✂ Array.splice() 배열 뒤 splice를 이용하면 기존 요소를 삭제하거나 교체하는 것이 가능하다. array.splice(시작 index, 제거 index, 추가 요소) 시작 index 배열 변경을 시작할 index 번호를 입력한다. 제거 index 0을 입력하면 어떤 요소도 제거되지 않으며, 특정수를 입력하면 start 이후부터 해당 수만큼 요소가 제거된다. 추가 요소 배열에 새로 추가될 요소가 들어간다. 만약 입력이 없다면 제거만 되고 새로운 요소는 추가되지 않는다. 샘플 코드 let obj = [ {id:1, name:'apple'}, {id:2, ..

자바스크립트에서 default 객체를 선언하는 방법은 아래와 같다. const obj = {}; 이후 로직에서 obj 객체에 key,value가 세팅이 되었는지 아닌지 체크하는 방법이 필요해서 찾아보게되었다. 🧡Object.keys 이용하기 Object.keys()를 이용하면 주어진 객체의 key 이름을 배열로 반환한다. Object.keys(obj) //빈객체일 경우 [], key가 있는경우 [id,name] 해당 기능을 이용해서 if문처리가 가능하다. 예시코드 let obj = {} obj ={ id:1, name:one } if(Object.keys(obj).length !== 0) { alert("빈객체아님!") } 위 예시로 빈객체인지 아닌지 확인이 가능하다! ✅사용시 주의사항 만약 obj객체에..