개발 메모장 개발 메모장

react

• Git 기초 마스터하기 - 1편 브랜치 전략

  Git 2023. 12. 27. 14:09

  Git의 브랜치는 메인 개발 라인에서 벗어나 다른 이들에게 영향을 주지 않고 독립적으로 작업할 수 있게 해 줍니다. 기능, 수정, 실험 관리에 필수적입니다. 첫 번째로 Git을 사용할 때 가장 기본이 되는 브랜치 전략에 대해 알아보겠습니다. 1. Feature Branch Workflow 각각의 새로운 기능은 자체 브랜치에서 개발되며, 최종적으로 메인 브랜치로 병합됩니다. git checkout -b feature/new-feature-name # 기능 작업 git commit -am "새로운 기능 추가" git checkout main git merge feature/new-feature-name 2. Gitflow Workflow 프로젝트 릴리스를 중심으로 한 엄격한 브랜치 모델. 피처, 개발, 릴리..

  Read More
• Javascript ES13 문법정리

  JS & TS 2023. 12. 4. 18:10

  1. Top-level await(최상위 await) 지금까지 JavaScript에서는 await 키워드를 async 함수 내에서만 사용할 수 있었습니다. 그러나 ECMAScript 2022에서는 최상위 모듈에서도 Promise를 기다리기 위해 await 키워드를 사용할 수 있게 되었습니다. 이를 통해 부모 모듈의 실행이 자식 모듈의 실행이 완료될 때까지 기다리게 됩니다. // before await Promise.resolve(console.log("Inkoop")) // SyntaxError: await is only valid in async function const print = async () => { await Promise.resolve(console.log("Inkoop")) } prin..

  Read More
• Javascript ES12 문법정리

  JS & TS 2023. 12. 1. 16:49

  1. Numeric Separators ES12에서는 숫자 구분자를 도입하여 숫자 리터럴 간에 밑줄(_)을 삽입하여 가독성을 향상할 수 있습니다. 이 기능은 코드 내에서 큰 숫자 값을 더 읽기 쉽게 만들어줍니다. 숫자 구분자 도입으로 코드 가독성이 크게 향상되며, 특히 많은 숫자 상수나 값을 다룰 때 유용합니다. // before const billion = 1000000000; const trillion = 1000000000000; // ES12 const billion = 1_000_000_000; const trillion = 1_000_000_000_000; 2. Logical Assignment Operators ES12에서는 논리 할당 연산자(||=, &&=,??=)를 도입하여 논리 연산과 ..

  Read More
• Javascript ES11 문법정리

  JS & TS 2023. 11. 24. 17:35

  ES11이라고도 알려진 ECMAScript 2020은 JavaScript 언어에 몇 가지 새로운 기능과 개선 사항을 도입했습니다. 개인적으로 정말 좋아하는 기능들이 생긴 버전이라 기억에 남고 지금도 자주 사용하는 기능들이 많은 버전입니다. 1. Optional Chaining Operator (?.) 선택적 연결 연산자(?.)는 각 수준의 존재를 명시적으로 확인할 필요 없이 객체의 중첩 속성에 액세스 하는 간결한 방법을 제공합니다. 널('null' 또는 '정의되지 않음') 값이 발견되면 평가가 중단됩니다. // 이전 if (object && object.property && object.property.nestedProperty) { const value = object.property.nestedPro..

  Read More
• Javascript ES10 문법정리

  JS & TS 2023. 11. 8. 16:48

  ECMAScript 2019 (ES10)은 개인적으로 정말 많이 사용하는 flatMap이나 trimStart, trimEnd와 같은 내용이 업데이트된 버전입니다. IE를 제외하고 대부분의 브라우저가 지원하기 때문에 지금도 쉽게 사용해 볼 수 있습니다. 1. Array.flat() 및 Array.flatMap() 이전: 중첩된 배열을 결합하고 펼치는 것은 종종 사용자 정의 함수나 루프가 필요했습니다. 이후: flat() 및 flatMap()을 사용하면 이 작업을 간단하게 수행할 수 있습니다. // 이전 const nestedArray = [1, [2, [3, 4], 5]]; const flattenedArray = [].concat.apply([], nestedArray); // flattenedArray..

  Read More
• Next.js 14버전 정리

  Next.js 2023. 11. 1. 16:18

  Next.js 13 버전 이후로 호불호가 늘어나는 느낌이 강한 Next.js의 14 버전이 출시되었습니다. 14 버전은 13 버전 때처럼 엄청난 변화내용이라기보다는 13.5 버전의 뒤이은 13.6 버전에 가깝다는 느낌이 드는 업데이트였습니다. 1. Next.js 컴파일러: Turbocharged 이제부터 Next.js는 개발 환경에서 빠른 성능을 제공하기 위해 Rust 기반 컴파일러 'Turbopack'를 사용합니다. 이로 인해 개발 서버의 시작 속도가 최대 53.3% 향상되고 Fast Refresh를 통한 코드 업데이트 속도도 최대 94.7% 향상되었습니다. 이는 특히 큰 애플리케이션 및 모듈 그래프에서 빠른 성능 향상을 의미하며, 'next dev --turbo'를 사용하면 보다 빠르고 안정적인 성능..

  Read More
• Javascript ES9 문법정리

  JS & TS 2023. 10. 16. 15:40

  ES9(ECMAScript 2018)은 특별히 새로운 기능이 많이 추가되지는 않았지만 지금도 항상 사용하는 내용들이 포함된 버전입니다. 1. 비동기 반복 (Asynchronous Iteration) ES9에서는 비동기 반복이 가능하도록 for-await-of 루프가 추가되었습니다. 이를 통해 비동기 데이터를 간편하게 반복할 수 있습니다. // 이전 const asyncData = [asyncFunc1(), asyncFunc2(), asyncFunc3()]; Promise.all(asyncData) .then(results => { for (const result of results) { console.log(result); } }); // ES9 const asyncData = [asyncFunc1(),..

  Read More
• Javascript ES8 문법정리

  JS & TS 2023. 10. 6. 13:43

  2017년에 출시된 ECMAScript 8 (ES8)은 언어에 중요한 향상 및 추가 사항을 가져왔습니다. 이전 ES7일 때 변경사항이 적었던 것이 이것을 위해서라는 생각이 들 정도로 지금도 많이 사용하는 중요한 문법들이 추가된 버전이라고 생각합니다. 1. Async/Await ES8은 async 및 await 키워드를 도입하여 자바스크립트에서 비동기 프로그래밍을 혁신적으로 개선했습니다. 이러한 기능은 프로미스(Promises) 작업을 더 직관적으로 처리하며 코드를 더 깨끗하고 가독성 있게 만듭니다. // 이전 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); })..

  Read More