전체 글

• 자바스크립트 모듈과 엄격한 모드(strict mode)

  Language/JavaScript 2024. 4. 28. 15:55

  업무를 하다보면 막히는 부분이 있을 때 기존의 코드를 참고하거나 구글 검색을 주로 많이 하는 편이었다. 자바스크립트계의 바이블이라는 를 읽으면서 그동안 어떻게 이걸 모르고 개발했지? 라는 생각을 많이 하기도 했어서 이번 기회에 자바스크립트 docs 정독을 했다. 얼마 전에 학습했던 자바스크립트의 스코프와 클로저 개념에 대해서도 정리가 잘 되어있었고, 이번엔 외부 스크립트를 임포트해서 사용할 때 type="module"을 명시하는 것과 스크립트 최상단에 "use strict"를 선언하는 것에 대해서 이해하게 되어 정리하고자 한다.   기본적인 자바스크립 개념을 이해하기 위해 공식 문서를 꼭 한번 정독해야 한다고 생각한다.https://developer.mozilla.org/ko/docs/Web/JavaSc..

  Read More
• 프로젝트에 타입스크립트와 스토리북 적용하기

  Library/React 2024. 4. 14. 23:48

  타입스크립트 기존의 CRA 프로젝트에 타입스크립트를 적용해보자. yarn add --dev typescript @types/react @types/react-dom tsc --init 1. yarn 패키지 매니저를 사용해서 타입스크립트 의존성을 추가하고 패키지를 설치한다. 2. 프로젝트에 대한 초기 TypeScript 설정 파일(tsconfig.json)을 생성한다. 3. tsconfig.json 파일이 추가되었다면 기존의 jsconfig.json 파일은 삭제한다. 스토리북 https://storybook.js.org/docs/get-started/install Install Storybook • Storybook docs Storybook is a frontend workshop for buildin..

  Read More
• homebrew 사용해서 JDK를 재설치 해보자

  Language/Java 2024. 4. 6. 11:18

  기존 JDK 삭제 homebrew 사용하여 삭제하기 1. brew 명령어로 설치된 openjdk 확인 brew list 2. brew uninstall brew uninstall openjdk@11 직접 삭제하기 1. Java 설치되어 있는 디렉터리로 이동 cd /Library/Java/JavaVirtualMachines 2. ls 명령어 사용하여 기존 JDK 버전 확인 3. 제거하기 sudo rm -rf jdk-11.0.13.jdk * 삭제 후에 다시 ls 명령어로 정상적으로 삭제되었는지 확인합니다. 다른 버전으로 재설치하기 - JDK 1. openjdk 버전 확인 현재 기본은 21 버전입니다. 버전 입력하지 않을 시 openjdk jdk 21로 설치됩니다. https://formulae.brew...

  Read More
• 자바스크립트 스코프(Scope)와 클로저(Closure) 이해하기

  Language/JavaScript 2024. 3. 30. 21:11

  자바스크립트 스코프 (Scope) 스코프는 영어로 scope, 영향 범위를 의미하는 개념이다. 자바스크립트를 변수를 선언할 때 var, let, const를 사용하는데 var와 let 혹은 const는 변수의 영향 범위가 다르게 동작한다. 매우 중요한 개념이고 면접에서도 스코프와 클로져(closure) 개념을 물어볼 수 있기 때문에 기본적으로 반드시 알고 있어야 한다. 아래의 코드를 작성할 때 변수 a와 b가 어디에서 접근 가능한지 아마 알고 있을 것이다. 이 경우에 변수 a는 전역 변수로 어디에서나 참조 가능하다. 하지만 b는 그렇지 않다. myFunction 내에서 선언된 변수는 그 내부에서만 참조할 수 있고 함수의 외부에서는 참조할 수 없다. 이게 바로 스코프의 개념이다. a는 global scop..

  Read More
• 테스트 주도 개발 (TDD)

  개발 방법론 2024. 3. 17. 18:40

  테스트 주도 개발이란 테스트를 먼저 작성하고 개발하는 개발 방법론을 말한다. 켄트 벡이 저술한 '테스트 주도 개발' 도서를 읽고 예제를 따라하면서 TDD에 대한 공부를 하고 개발할 때 적용을 해보기도 했다. 책에서는 TDD 방법론을 적용할 시에 프로그래밍 순서를 다음과 같이 결정했다. 1. 빨강 - 실패하는 작은 테스트를 작성한다. 2. 초록 - 빨리 테스트가 통과되게끔 만든다. 3. 리팩토링 - 일단 테스트를 통과하게만 하는 와중에 생겨난 모든 중복을 제거한다. - 도서, 테스트 주도 개발 테스트를 작성하는 이유는 다음과 같다. 오류를 찾아내고, 최소 단위의 컴포넌트로 분할하여 응집도를 높이고 결합도를 낮추고, 테스트 코드를 통해 다른 개발자들도 함수가 어떤 기능을 하는지 이해할 수 있다. 즉 코드가 ..

  Read More
• React 개발을 해야하는데 말이야, 어떻게 시작하면 되는건데?

  Library/React 2024. 2. 3. 13:49

  Vue ➔ React 마이그레이션 시작하기 기존에도 리액트를 조금씩 공부하긴 했지만 넥스트와 타입스크립트까지는 아니었다. 그런데 사내 이커머스 솔루션의 프론트엔드가 vue에서 react로 마이그레이션을 진행하면서 급하게 범위를 넓혀 공부를 하게 되었다. 공부 기간은 약 2-3주로 여유가 있지는 않고 지금도 스토리보드를 보면서 어떻게 개발을 하면 좋을지 감을 잡아가고 있는 단계이다. 지난번 NextJS의 앱 라우터 방식을 살짝 맛봤었는데, 사실 이것도 프로젝트에 적용할 예정이기 때문에 공식 문서를 참고했었다는 사실. 그래서 오늘 정리해볼 내용은 '스토리보드와 화면을 봤는데, 어떻게 시작하면 좋을까?'에 대한 내용이다. 정답은 없으니 참고만 하시고, 혹시 더 좋은 제안이 있다면 댓글로 남겨주시길... Vue..

  Read More
• Properties 설정으로 Configuration 객체 생성하기

  Framework/Spring Boot 2024. 1. 25. 22:19

  Properties 설정으로 Configuration 객체 생성하기 .yml 혹은 .properties 사용하여 개발 환경을 설정하는데 이 설정을 소스 코드에서 활용을 해야하는 경우가 있다. 내 경우에는 jwt 생성할 때 암호키(secret-key)와 만료 시간(expire-length)를 설정하고 @Value 어노테이션을 사용해서 값을 주입해 사용했다. 그런데 이렇게 어노테이션으로 주입하는 경우 문제가 발생할 수 있다. - final 선언을 하지 않으면 값이 언제든지 변경될 수 있음 - 사용하는 클래스마다 선언을 하기 때문에 오타같은 휴먼 에러가 발생할 수 있음 - 변경이 필요한 경우 여러 위치에서 수정이 필요함 이러한 문제를 해결하기 위해 아래의 소스 코드를 리팩토링하려고 했다. @Component ..

  Read More
• NextJS 공식문서에서 App Router 살펴보기

  Framework/Next JS 2024. 1. 23. 15:09

  React와 NextJS 프론트엔드 프레임워크 NextJS의 App Router 이번에 프로젝트의 과업은 프론트엔드를 vue에서 react로의 마이그레이션이고, 프레임워크는 NextJS를 사용한다. 이를 위해 '실전에서 바로 쓰는 NextJS' 도서를 읽어봤고, app router 방식을 공부하기 위해서는 공식 문서를 참고했다. The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. 앱 라우터는 새로운 라우팅 방식이기 때문에 개념 학습을 위해 공식 문서를 참고하는 것을 추천한다. 공식 문서에서 한국어를 지원하지 않는 경우에는 번역 github를..

  Read More