본문 바로가기
728x90
반응형

분류 전체보기145

[자바스크립트-객체] 객체 키를 동적으로 할당하는 법(computed property) computed property 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법이다. 기존에는 객체를 만들 때 정해진 이름의 속성명을 사용해 왔지만, ES6부터는 computed property를 사용하여 객체를 선언하는 순간에 변수를 활용하여 동적인 프로퍼티명을 할당할 수 있다. let age = '27'; let a = { name: 'judy', [test]: 27 // computed property } console.log(a) // {name: 'judy', age: 27} 객체의 key 속성명을 변수로 지정하는 법 객체의 프로퍼티에 접근하는 방법은 2가지(a.name, a ['name'])가 있지만, 변수로 키를 지정해 줬을 때 접근할 수 있는 방법은 3가지가 있다. l.. 2023. 2. 1.
[자바스크립트-객체] 객체의 값을 기반으로 키를 정렬하는 법 아래와 같은 객체가 있다고 가정을 해보고, 객체의 값이 큰 순서대로 정렬된 키를 결과로 얻고 싶을 때는 어떻게 해야할까? 코딩테스트를 연습하다가 정리를 해보면 좋을 거 같아서 작성해보았다. const obj = { '1': 1, '2': 3, '3': 4, '4': 2 } 2가지 방법 1. for in문을 활용하여 새로운 array를 다시 만드는 방법 for in문을 활용하여 객체의 키와 값으로 새로운 배열을 만들고, 그 배열을 sort하는 방법이 있다. let sortArray = []; for (let key in obj) { sortArray.push([key, obj[key]]); } console.log(sortArray); // [ [ '1', 1 ], [ '2', 3 ], [ '3', 4 ].. 2023. 1. 31.
PR template/Reviewer 자동화시키는 법 PR template 설정 설정방법 1. root, docs/, .github/ 중 원하는 디렉토리에 pull_request_template.md 파일명을 가진 파일을 생성한다. 나는 docs 폴더에 해당 파일을 생성했다. 2. PR요청시 생성할 내용을 설정한다. angular PR template 로 선택했다. 그 이유는 공통적인 카테고리가 잡혀있어서 PR이 한눈에 들어오고, 체크리스트 방식이라 PR을 간단하게 작성할 수 있기 때문이다. 다만 팀원들과 내용을 한국말로 수정했고, 사용하지 않는 대목은 삭제했다. Reviewer 설정 설정방법 1. root, docs/, .github/ 중 원하는 디렉토리에 CODEOWNERS 파일명을 가진 파일을 생성한다. 마찬가지로 docs 폴더에 해당 파일을 생성했다.. 2023. 1. 30.
[react] 중첩 삼항연산자 쓰는 법 + 단점 결론부터 말하면 {} 안에 ()를 써주면 된다. 중첩 삼항연산자를 쓰기 전 코드 {checked && message === '' && isDuplicate ? '다른 닉네임을 입력해주세요.' : ''} {checked && message === '' && !isDuplicate ? '사용가능한 닉네임입니다.' : ''} 중첩 삼항연산자를 쓴 후 코드 {checked && message === '' ? (isDuplicate ? '다른 닉네임을 입력해주세요.' : '사용가능한 닉네임입니다.') :''} + 중첩 삼항연산자를 쓰는 것이 더 좋을 줄 알고 리팩토링을 하려고 했던건데,(checked && message === '' 코드가 중복적으로 나오는 것이 보기 싫었다.) 오히려 코드의 가독성이 떨어진다는 .. 2023. 1. 29.
[css] tailwind css 설치하는 법 tailwind css 설치하는 법 1. 터미널에 아래의 코드를 입력해 tailwind css 설치하기 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 2. 자동으로 생성된 tailwind.config.js 파일의 content에 해당 코드를 추가하기 content: [ './src/**/*.{js,jsx,ts,tsx}', ], 3. 그리고 src/App.css 파일의 제일 상단에 3줄의 코드를 작성하기 @tailwind base; @tailwind components; @tailwind utilities; 4. 잘 작동하는지 확인하기 위해 src/App.tsx 파일로 와서 실험해 보기 import "./App.css"; f.. 2023. 1. 29.
728x90
반응형