선언형 프로그래밍, 모듈화. 코드를 읽기에 너무 편하다. 바닐라 자바스크립트로 짜는 코드도 참 매력있다. 중복은 무조건 제거하는 것. 프론트엔드에서의 상태 관리. 화면에 그려져야 할 데이터를 관리하는 것. 하루아침에 만들어질 수는 없고 의식하면서 계속 코드의 퀄리티를 높여 가는 것이 중요하다.
무조건 코드는 선언형으로 짤 것, 순수 함수로 짤 것 함수를 실행하는 쪽에서는 함수명만 보고도 코드의 동작을 알 수 있게끔 변수 명도 신경 써서 잘 짜야한다. remove delete update modify 비슷한 단어들이 있을 때 하나만 통일해서 써야한다. 비슷한 역할을 하는 코드끼리 위치를 모아서 정리하기 작성을 완료한 코드는 편집기의 코드 접기를 이용해 접어두고 흐름만 파악 리팩터링을 할 때는 너무 큰 범위로 하면 안 되고 작은 단위로 하면서 무조건 테스트 리팩터링엔 유닛 테스트가 꼭 필요하다, 필수 기존에 있던 A 기능을 리팩터링 했을 때 A가 제대로 동작하는지 + 다른 기능들이 문제없이 동작하는지 새롭게 B 기능을 추가했을 때 기존에 있던 A 기능이 정상적으로 동작하는지 실 서비스에서는 기능이..
기본적인 사용법 외에 템플릿 리터럴을 사용하는 방식을 설명하고자 합니다. Nesting Templates 템플릿 리터럴을 중첩하는 방식입니다, 삼항 조건 연산자의 예시로 확인 해 보겠습니다. function isLoveTS() { return true; } function isLoveJS() { return true; } const classes = `자바스크립트${ isLoveJS() ? `${isLoveTS() ? '와 타입스크립트를 사랑힙니다.' : '만 사랑합니다'}` : '를 싫어합니다.' }`; console.log(classes); // 자바스크립트와 타입스크립트를 사랑합니다. Tagged Templates 템플릿 리터럴을 함수의 인수로 넣는 방식입니다. const city = 'Seoul'..
eval 함수는 JavaScript 코드를 실행시켜주는 함수입니다. 하지만, XSS(Cross-Site Scripting)등의 보안문제로 사용하지 말 것을 추천하는데요. 그러나 분명 용도가 있었기에 만들어 졌을 것이기에 어디에 사용되는지 찾아봤습니다. 1.FaaS 같은 서비스를 만드는 경우에 - 사용자가 입력한 함수를 그대로 적용하기 위해 2. 프론트나 백 개발중에 hot reloading을 위해 - eval 함수는 재시작하거나 상태를 잃지 않고 코드를 변경할 수 있다 3. 웹팩등의 설정에서 const data = eval('require')(`./emails/${recipient}/${type}.json`) 참고 자료 https://stackoverflow.com/questions/10474306/wh..
JavaScript ES2022 Array.prototype.at() 음수로도 배열의 요소를 가져올 수 있습니다. const arr = [1, 2, 3, 4, 5] console.log(arr.at(-1)) // 5 // console.log(arr[arr.length - 1]) // 5 console.log(arr.at(1)) // 1 console.log(arr[1]) // 1 Object.hasOwn() Object.hasOwn()은 Object.prototype.hasOwnProperty()의 대안으로 나오게 되었습니다. 객체안에 상속받지 않은 프라퍼티가 존재하면 true, 아니면 false를 반환합니다. Object.create(null)로 객체를 생성하여 프로토타입이 없는 객체여도 Object..
str.split([separator[, limit]]) split 메서드는 String 객체를 지정한 구분자(separator)를 이용하여 여러개의 문자열로 나눌 수 있습니다. 이렇게 나뉜 문자열들은 배열에 담기게 됩니다. const greeting = "안녕하세요, 반갑습니다." const splitArray = greeting.split('') console.log(splitArray) // [ '안', '녕', '하', '세','요', ',', ' ', '반', '갑', '습', '니', '다', '.' ] const splitArray = greeting.split(' ') console.log(splitArray) // [ '안녕하세요,', '반갑습니다.' ] const splitArray =..
