반응형 { Frontend, Client }18 [Nextjs] Nextjs 13버전 라우팅 방식 알아보기 1. app 디렉토리 app 디렉토리가 라우팅의 핵심이며 하위 디렉토리 이름을 통해 라우팅을 합니다. app 디렉토리가 안보여요! 아직 베타버전이기 때문에 프로젝트 초기 생성시 app 디렉토리가 자동으로 생성되지 않습니다. 대신 이전 버전에 사용했던 pages 폴더가 존재하는데요. 이 pages 폴더를 삭제해주기고 app 디렉토리를 만들어주시면 됩니다. 그리고 app 디렉토리 기능을 켜기 위해 아래와 같이 next.config.js 파일에 다음을 추가합니다. /** @type {import('next').NextConfig} */ const nextConfig = { .. experimental: { appDir: true, }, .. } module.exports = nextConfig 2. 파일 컨벤.. 2023. 4. 25. [Nextjs] Nextjs 13 프로젝트 생성 및 테스트 환경 구성 1. 프로젝트 생성 yarn만 설치되어 있다면, 아래와 같은 명령어로 adam 이름을 가진 nextjs 프로젝트를 쉽게 생성할 수 있습니다. yarn create next-app adam 2. Nextjs의 다양한 테스트 도구들 넥스트는 공식문서에서 다양한 테스트 툴을 소개하고 있습니다. https://nextjs.org/docs/testing Jest Cypress Playwright 빠르게 훑어본 결과 모두 비슷비슷한 느낌이었습니다. 저는 제일 위에 있어서 Jest를 사용하기로 했습니다. Jest: https://jestjs.io/docs/getting-started 3. 테스트를 위한 패키지 설치 jest 설치 yarn add --dev jest scripts 등록 jest를 설치하고 나면 yarn.. 2023. 4. 25. [Flutter] 플러터 - 위젯(widget) 테스트 위젯 테스트 : https://flutter-ko.dev/docs/cookbook/testing/widget/introduction a. flutter_test 의존성 추가 근데 기본적으로 의존성이 걸려있어서 따로 추가할 필요가 없다. dev_dependencies: flutter_test: sdk: flutter b. 테스트할 위젯 생성 class MyWidget extends StatelessWidget { final String title; final String message; const MyWidget({ Key key, @required this.title, @required this.message, }) : super(key: key); @override Widget build(BuildCo.. 2022. 12. 9. [Flutter] 플러터 - 다트 : ENUM 타입 알아보기(enumerated types) 기본 enum 사용 enum Color { red, green, blue } blue 옆에 콤마를 붙여도 가능하다. 참고로 이 콤마를 trailing commas라고 부르며, 복붙 시에 에러를 방지해주는 효과를 가진다고 한다. 확장된 enum 사용 Enum을 마치 클래스처럼 확장하여 사용할 수 있다. 몇가지 규칙만 준수하면 된다. 1. 인스턴스 변수는 final이어야 한다. 2. 생성자는 constant이어야 한다.(메모리에 한번만 올라가게 하려고 그런거 같음) 3. 팩토리 생성자는 오직 정의되어있는 인스턴스들 중 하나만을 리턴할 수 있다. 4. Enum 클래스가 자동적으로 extends 되어 있어서, 다른 클래스를 상속받을 수 없다. 5. index, hashCode, 동등성을 재정의(override).. 2022. 12. 9. [Flutter] 플러터 - 다트 : 다양한 생성자 알아보기 생성자를 통한 파라미터 초기화 class Point { final double x; final double y; Point(this.x, this.y); } 네임드 생성자 const double xOrigin = 0; const double yOrigin = 0; class Point { final double x; final double y; //named constructor Point.origin() : x = xOrigin, y = yOrigin; } 상속 관계에서 생성자 활용 class Vector2d { final double x; final double y; Vector2d(this.x, this.y); } class Vector3d extends Vector2d { final double .. 2022. 12. 9. [Flutter] 플러터 - 다트 : 함수 알아보기(optional parameter, named parameter 등등) 다트에서 제공하는 함수에 관한 여러가지 기능을 알아보자. a. optional parameter : 함수 호출 시 [ ] 안의 파라미터를 선택적으로 넣어주거나 생략할 수 있다. String say(String from, String msg, [String? device]) { var result = '$from says $msg'; if (device != null) { result = '$result with a $device'; } return result; } assert(say('Bob', 'Howdy') == 'Bob says Howdy'); assert(say('Bob', 'Howdy', 'smoke signal') == 'Bob says Howdy with a smoke signal'); 주.. 2022. 12. 9. 이전 1 2 3 다음 반응형
