Abstraction

Data Collecting

EC2

• instance environment
• regional option
• Persisting Volume permanently by Amazon EBS
• Providing EIP for static IPv4 address

  S3

  Bucket

• all of the instances are belongs to some buckets like folder in Windows
• Container for instances.

  Objects

• smallest concept in S3
• An object consist of object data and meta data.

RDS

• Support relational database.

API Gateway.

• bridging from external service to internal AWS services.
• supporting consistance accessing methods from and to web, mobile.

Cloud Watch

• Kinesis Streamer

  Amazon Pinpoint

  Real-Time Processing

  real-time item recommenation

• Spark Streaming
• Flink (Kinesis Analysis)
  • real-time analysis.

Amazon ES

Data Cataloging(AWS glue)

Mock objects are simulated objects that mimic the behavior of real objects in a controlled way. They are used in unit testing to isolate the unit of code being tested from its dependencies, ensuring that the tests are focused solely on the behavior of the unit under test.

Benefits of Using Mock Objects:

• Isolation: They isolate the unit of code from external dependencies.
• Control: They allow you to define the behavior of dependencies in a predictable manner.
• Performance: They are lightweight and faster than real objects, especially when the real objects involve I/O operations.
• Simplification: They simplify testing by allowing you to simulate different scenarios and edge cases.

@Mock Annotation

The @Mock annotation is used in unit testing to create mock instances of classes. It is provided by mocking frameworks such as Mockito. When you annotate a field with @Mock, Mockito creates a mock instance of that field's type and injects it into the field.

@Mock
private SomeDependency someDependency;

@InjectMocks Annotation

The @InjectMocks annotation is used to automatically inject mock objects into the class instance that is being tested. This annotation is provided by Mockito and simplifies the setup of test scenarios where the class under test has dependencies that need to be mocked.

How It Works:

• Mockito scans the class for dependencies (fields that can be injected).
• It then looks for matching mock objects and injects them into the class.

'StepContribution' is a class in the Spring Batch framework that represents the contribution of a Step to the overall processing. It provides a way to collect and report statistics during the execution of a step, such as the number of items read, written, and processed.

In the context of a Tasklet, which is a step in a Spring Batch job, StepContribution can be used to update the step's execution context, handle errors, and manage rollback scenarios.

Mocking StepContribution in the test allows you to simulate its behavior without having to rely on the actual Spring Batch infrastructure. This is useful for isolating the logic of the AddPassesTasklet and ensuring the test is focused solely on the logic you want to verify.

ChunkContext

ChunkContext is another class in the Spring Batch framework that holds the context information for a chunk in a chunk-oriented step. It provides access to the StepContext, which holds contextual information about the current step execution, and allows sharing data across different chunks of the same step.

In chunk-oriented processing, a chunk is a set of items that are read, processed, and written together. ChunkContext provides the necessary context to manage this processing and maintain state between chunks.

Mocking ChunkContext in the test allows you to control and simulate the chunk's execution context without needing to execute a real batch job. This helps in testing the Tasklet logic in isolation.

In the provided test code, the annotations @Mock are used to create mock objects for StepContribution and ChunkContext. These are classes from the Spring Batch framework, and they play a role in the execution context of a batch job. Here's a detailed explanation of each:

StepContribution StepContribution is a class in the Spring Batch framework that represents the contribution of a Step to the overall processing. It provides a way to collect and report statistics during the execution of a step, such as the number of items read, written, and processed.

In the context of a Tasklet, which is a step in a Spring Batch job, StepContribution can be used to update the step's execution context, handle errors, and manage rollback scenarios.

Mocking StepContribution in the test allows you to simulate its behavior without having to rely on the actual Spring Batch infrastructure. This is useful for isolating the logic of the AddPassesTasklet and ensuring the test is focused solely on the logic you want to verify.

ChunkContext ChunkContext is another class in the Spring Batch framework that holds the context information for a chunk in a chunk-oriented step. It provides access to the StepContext, which holds contextual information about the current step execution, and allows sharing data across different chunks of the same step.

In chunk-oriented processing, a chunk is a set of items that are read, processed, and written together. ChunkContext provides the necessary context to manage this processing and maintain state between chunks.

Mocking ChunkContext in the test allows you to control and simulate the chunk's execution context without needing to execute a real batch job. This helps in testing the Tasklet logic in isolation.

Example Use in Test By mocking these classes, you can simulate the execution environment of a Spring Batch job without actually running a full job. This makes the test faster and more focused on the specific behavior of the AddPassesTasklet.

Here’s how these mocks are set up and used in the test:

@Mock
private StepContribution stepContribution;

@Mock
private ChunkContext chunkContext;

@InjectMocks
private AddPassesTasklet addPassesTasklet;

http
    .csrf().disable()
    .headers().frameOptions().disable()

• csrf().disable(): Disables Cross-Site Request Forgery protection.
• headers().frameOptions().disable(): Disables frame options to allow using the H2 console within a frame.

Configuring URL-Based Authorization:

.and()
    .authorizeRequests()
    .antMatchers("/", "/css/**", "/images/**", "/js/**", "/h2-console/**", "/profile").permitAll()
    .antMatchers("/api/v1/**").hasRole(Role.USER.name())
    .anyRequest().authenticated()

• authorizeRequests(): Starts configuring URL-based access management.
• antMatchers("/", "/css/", "/images/", "/js/", "/h2-console/", "/profile").permitAll(): Allows unrestricted access to the specified URLs.
• antMatchers("/api/v1/**").hasRole(Role.USER.name()): Requires users to have the USER role to access URLs starting with /api/v1/.
• anyRequest().authenticated(): Requires all other URLs to be accessible only to authenticated (logged-in) users.

entire source

 @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .csrf().disable()
                .headers().frameOptions().disable() // Disables these options to use the H2 console screen.
                .and()
                .authorizeRequests() // The starting point for setting URL-specific access management.
                .antMatchers("/", "/css/**", "/images/**", "/js/**", "/h2-console/**", "/profile").permitAll()
                // Specifies the targets for access management.
                // Allows management by URL and HTTP method.
                // Grants full access to the specified URLs such as '/' through the permitAll() option.
                .antMatchers("/api/v1/**").hasRole(Role.USER.name())
                // Only users with the USER role can access APIs with the "/api/v1/**" address.
                .anyRequest().authenticated()
                // Refers to the remaining URLs not specified.
                // Adds authenticated() to require login for all remaining URLs.
                .and()
                .logout()
                .logoutSuccessUrl("/")
                .and()
                .oauth2Login()
                .userInfoEndpoint()
                // Manages settings for retrieving user information after a successful OAuth2 login.
                .userService(customOAuth2UserService);
        // Registers the implementation of the UserService interface to handle post-login actions.
        // You can specify additional functions to proceed after retrieving user information from the resource server (i.e., social services).
    }

import org.junit.jupiter.api.Test;

• 모든 Row를 지우는 경우

• Auto-Increment reset

• Roll back 불가

• Perform bulk operation & faster than 'DELETE' cmd

• Cannot be used with a where clause

TRUNCATE TABLE your_table_name;

DELETE

• Removes one or more rows from a table based on a specified condition.

• Is slower than TRUNCATE, especially for large tables, as it processes each row individually.

• Can be rolled back within a transaction, allowing for data recovery in case of mistakes.

• Activates triggers if they are defined on the table.

• Can be used with a WHERE clause to delete specific rows.

DELETE FROM your_table_name WHERE condition;

or

BEGIN TRANSACTION;

DELETE FROM table1;
DELETE FROM table2;
-- Repeat for other tables

COMMIT;

Resolved [org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation]

해결

위의 캡쳐같이 group을 테스트 클래스가 위치한 패키지를 적어줘야 한다.

이후에 실행하자 테스트케이스가 잘 실행 되는것을 확인 할 수 있었다.

select
    pcb.id
    ,count(pcb.total_component_count) as count
from ks_inspection_result.t_result_aoi_pcb pcb
group by pcb.id

GROUP BY 절의 칼럼은 SELECT 절에 존재해야 사용할 수 있다.

**SELECT 절에서 집계 함수를 제외한 칼럼을 GROUP BY 절에 기술한다고 생각하면 된다.

Group을 여러개 지정하는 경우.

select
    pcb.id
     ,wfmi.array_value
    ,count(wfmi.pcb_id) as count
from ks_inspection_result.t_result_aoi_pcb pcb
left join ks_inspection_result.t_aoi_whole_wfmi_result wfmi
    on pcb.id = wfmi.pcb_id
group by pcb.id, wfmi.array_value
having count(wfmi.pcb_id) > 0 and wfmi.array_value > 0

pcb.id로 먼저 묶이고, wfmi.array_value로 한번 더 묶인다.

Using Order By

select
    pcb.id
     ,wfmi.array_value as arrayNum
    ,count(wfmi.pcb_id) as count
from ks_inspection_result.t_result_aoi_pcb pcb
left join ks_inspection_result.t_aoi_whole_wfmi_result wfmi
    on pcb.id = wfmi.pcb_id
group by pcb.id, wfmi.array_value
having count(wfmi.pcb_id) > 0 and wfmi.array_value > 0
order by count desc

order By절에서 집계함수절을 사용할수 있다.

2024-03-25 14:53:56.870  WARN 1294449 --- [nio-8081-exec-4] n.g.e.SimpleDataFetcherExceptionHandler  : Exception while fetching data (/aoiWfmiCountList) : com.kohyoung.ksmart.web.dto.AoiWfmiDto

• Many Java frameworks and libraries use reflection to dynamically create instances of classes. Reflection is a powerful feature that allows a program to manipulate attributes and behaviors of objects at runtime. For instance, when QueryDSL fetches data from the database and maps it to a DTO (Data Transfer Object) like AoiWfmiDto, it doesn't use the constructor you've written. Instead, it uses reflection to instantiate the class without calling any constructor explicitly.

QueryDsl은 reflection사용시 어떤 필드가 들어올 지 모르기 때문에 일단 비어있는 객체를 생성한다 (= no args condtructor)

일단 비어져 있는 객체를 생성하면 DB에서 필요한 정보를 relfection에 맞게 뽑아 사용한다.

Hexagonal Architecture.

도메인 중심 아키텍처의 일종

• UI나 database를 비지니스 로직으로 분리되어야하는 외부요소로 취급함
• 비지니스 로직(도메인 코드)이 외부요소에 의해 의존하지 않게 함
• 프레젠테이션 계층(controller)과 데이터 소스 계층(persistence)이 도메인 계층에 의존하도록 함
• 외부에 포함된 컴포넌트는 어댑터이고, 어댑터가 내부와 상호작용하는 부분이 포트임

MSA에서 불려지는 구조

1. Controller (=웹 컨트롤러)

2. UseCase.class

- SERVICE클래스가 UseCase.class를 구현한다.

3. port class

4. Core(= buisiness logic)

5. domain entity

- 현재 플젝에서는 MembershipJpaEntity

구조

1. Adapter(플러그인)

• driving adapter(주도하는 어댑터): 애플리케이션 코어를 호출함 웹, 외부 시스템 어댑터 ex) Controller
• driven adapter(주도되는 어댑터): 애플리케이션 코어에 의해 호출됨 영속성, 외부 시스템 어댑터 ex)

현재 진행중인 MSA프로젝트는 Adapter가 port interface에 명시되어 있는 메소드들을 구현하였다.

public class MembershipPersistenceAdapter implements RegisterMembershipPort, FindMembershipPort {
    private final MembershipRepository membershipRepository;
    @Override
    public MembershipJpaEntity createMembership(Membership.MembershipName name,
    Membership.MembershipAddress address,
    Membership.MembershipEmail email,
    Membership.MembershipValid valid,
    Membership.MembershipCorp corp) {

       return membershipRepository.save(
               new MembershipJpaEntity(
                       name.getName()
                       , address.getAddress()
                       , email.getEmail()
                       , valid.isValid()
                       , corp.isCorp())
       );
    }

    @Override
    public MembershipJpaEntity findMembership(Membership.MembershipId membershipId) {
        return membershipRepository.getById(membershipId.getId());
    }
}

2. Port(통로) : 애플리케이션 코어와 어댑터 간에 통신을 위한 부분으로 인터페이스로 구성한다.

• In Port(인바운드 포트): 외부에서 Adapter를 통해 들어온 요청을 처리하는 인터페이스 ex) Service I/F
• Out Port(아웃바운드 포트): 내부에서 외부의 기술이나 서비스를 사용하기 위한 인터페이스

- port클래스는 코어에 필요한 메소드들을 명시만 하고 Adapter클래스들이 구현한다.

3. Application Core: 도메인 엔티티, 유즈케이스.

모든 의존성은 코어를 향함

계층 구성

• 어댑터 계층: ex) web 어댑터(=웹 컨트롤러), persistence 어댑터
• 애플리케이션 계층: 포트와 서비스를 포함하는 곳
• 포트: 서비스에서 구현될 인터페이스
• • input port/output port
• 서비스
• • 포트 구현체(=유스케이스 구현체)
• 도메인 계층 -- 도메인 엔티티

• Open your project in IntelliJ IDEA.

• If you haven't already initialized your project as a Git repository, - go to VCS > Enable Version Control Integration from the top menu.

• Choose Git from the list and click OK.

  Step 2: Commit Your Project to the Local Repository

• Go to VCS > Commit (or use the Ctrl+K shortcut). In the Commit Changes dialog, select the files you want to commit. It's a good practice to review the changes and ensure temporary or unnecessary files (like build outputs) are not included. IntelliJ's .gitignore file can help with this.

• Write a commit message that describes the changes you're making.

• Click the Commit button. You can choose Commit and Push if you're - ready to push your changes directly after committing, but assuming this is the first commit, just a commit is sufficient for now.

  Step 3: Create a New Repository on GitHub

• Go to GitHub and log in.

• Click on the + icon in the upper-right corner and select New repository.

• Name your repository, add a description if you want, and decide if you want the repository to be public or private.

• Click Create repository. Do not initialize the repository with a README, .gitignore, or license. Since you're pushing an existing project, you'll want to leave the repository empty.

  Step 4: Link Your Local Repository to GitHub

• Inside the terminal, type the following command to add the GitHub repository as a remote to your project:

  • Replace with the URL you copied from GitHub.

git remote add origin <REPOSITORY_URL>

Step 5: Push Your Project to GitHub

Still in the IntelliJ Terminal, push your project to GitHub with the

git branch -M main

git push -u origin master

단편적인 예로 이전 돌아가고 싶은 커밋으로 가고 싶을 때 사용하거나, master 브랜치로 릴리즈를 했는데 치명적인 버그로 인하여 롤백해야하는 경우 이전 커밋으로 되돌아가기 위해 위 명령어를 사용합니다!

reset, revert 차이

둘다 이전 커밋으로 되돌린다는 점에서는 동일하나

github 같은 온라인 저장소에 올라가 다른 사람간 코드 공유의 유(revert)무(reset)에 따라서 달라집니다.

reset

origin에 올리지 않고 로컬에 커밋이 머물렀다면, 올라갔어도 나만 해당 브랜치를 사용한다면 reset를 쓰셔도 좋습니다.

사용법은 git reset --option 돌아갈 커밋입니다.

아래 예시로 알아보겠습니다.

1. commit을 여러번 합니다.

git commit -m "1"
git commit -m "2"
git commit -m "3"

2. commit을 바로 이전 상황으로 돌립니다.

git reset HEAD^

3.여러개의 commit 이전으로 돌리는 경우

git reset HEAD~2

• 커밋으로 되돌아갑니다.
• HEAD~2 부분에 커밋 해쉬를 써도 되돌아갑니다.

reset 옵션

--hard

hard 옵션을 사용하면 돌아간 커밋 이후의 변경 이력은 모두 삭제합니다.

git commit -m "1"
git commit -m "2"
git commit -m "3"

git reset --hard [1번commit hash]
git push

• 즉, 위처럼 실행할 경우 2, 3번 커밋 반영 내용은 모두 사라집니다. 물론 코드도 날아가지요.

--mixed

변경 이력은 모두 삭제하지만 변경 내용은 남아있습니다.

git commit -m "1"
git commit -m "2"
git commit -m "3"

git reset --mixed [1번commit hash]
git add .
git commit -m "~"
git push

• 위처럼 실행할 경우 이력은 날아가나 unStage 상태로 코드는 남아있습니다. 코드를 반영하려면 add 명령어로 stage에 반영하고 commit 합니다.

--soft

• 변경 이력은 모두 삭제하지만 변경 내용은 남아있습니다. 그러나 stage 되어있습니다.

  git commit -m "1"
  git commit -m "2"
  git commit -m "3"
  

git reset --soft [1번commit hash] git commit -m "~" git push

- 즉, add명령어 필요없이 바로 commit 진행 가능합니다.

# origin에 올린 상태에서 reset하고 push 한다면?
- 로컬은 origin에 있는 commit을 삭제한 채로 origin에 덮으려고 하니 당연히 에러가 뜹니다.
- #### 이럴땐 --force 옵션을 주어 강제로 로컬 commit history를 origin commit history로 덮어씁니다. 즉, 만약 해당 리포를 다른 사람들과 공유하고 있다면 무조건 하시면 안되는 행동입니다.

- ### reset 사용하는 경우
위처럼 다른 사람간 코드가 공유될 때, reset를 사용하면 상상치도 못하는 헬게이트가 열립니다. 그러므로 reset를 사용하는 경우는 아래와 같습니다.

혼자만 사용하는 브랜치인 경우
origin에 있지만 아무도 이 브랜치를 사용하지 않는다는 확신을 가지는 경우
그 이외의 경우 commit을 되돌릴때 아래의 revert를 사용합니다.

# revert
- ## revert는 reset과 다르게 커밋을 삭제하는 것이 아닌 커밋을 추가합니다.

그러나 이전 커밋과 정반대의 데이터를 추가하는 방식으로 코드를 되돌립니다. revert 명령어는 reset --soft, mixed와 동일한 결과를 가져오지만 이력은 Revert "..."라는 메세지가 추가됩니다.

git commit -m "1번 커밋" git commit -m "2번 커밋" git commit -m "3번 커밋"

git revert [1번commit hash]

위처럼 명령어를 실행하면 1번 커밋 이후의 커밋들이 삭제되는 것이 아니라, 1번 커밋에 해당하는 내용만 삭제됩니다. 그리고 Revert "1번 커밋"이라는 커밋에는 1번 커밋이 삭제된 이력이 남게 되죠.

git log에는 아래와 같이 찍힙니다.

Revert "1번 커밋" 3번 커밋 2번 커밋 1번 커밋

# 바로 커밋되게 하지 않으려면?
만약 revert한 결과를 stage 상태만 유지하고, commit 하지 않으려면 --no-commit 옵션을 추가합니다.

git revert --no-commit [커밋 해쉬]

// 이후 git commit -m "어떤 커밋을 왜 리버트했니?"

git push

# 여러개 커밋을 되돌리려면?

git revert [커밋해쉬]..[커밋해쉬]

git log에는

git revert [1번커밋해쉬]..[2번커밋해쉬] git log

Revert "2번커밋해쉬" Revert "1번커밋해쉬"

```

revert는 되돌리는 커밋이 중간에 있을때 커밋 해쉬를 넣어서 중간 커밋만 삭제할 수 있고, 어떤 커밋이 왜 revert 됬는지 commit message를 통해 관찰 가능함으로 더욱 유용합니다.

또는 revert는 커밋은 삭제되는 것보다 이전으로 되돌리는 이력마저 남기는 것이 history 유지 차원에서 더 좋습니다.

그래서 revert 씁시다!

- 오직 한 클래스만 상속받을 수 있다(다중상속이 불가능하다)

class One {
    public void methodOne()
    {

        // Some Functionality
    }
}

class Two extends One {

    public static void main(String args[])
    {
        Two t = new Two();

        // Calls the method one
        // of the above class
        t.methodOne();
    }
}

implements는 상속받은 methods들을구현해서 사용해야 하기 때문에 implements라고 한다..

- extends는 하나의 클래스만 가능하지만 implements는 상속 받는데 제한이 없다.

// Defining an interface
interface One {
    public void methodOne();
}

// Defining the second interface
interface Two {
    public void methodTwo();
}

// Implementing the two interfaces
class Three implements One, Two {
    public void methodOne()
    {

        // Implementation of the method
    }

    public void methodTwo()
    {

        // Implementation of the method
    }
}

// Defining the interface
interface One {

    // Abstract method
    void methodOne();
}

// Defining a class
class Two {

    // Defining a method
    public void methodTwo()
    {
    }
}

// Class which extends the class Two
// and implements the interface One
class Three extends Two implements One {

    public void methodOne()
    {

        // Implementation of the method
    }
}

Interface는 다중 extends가 가능하다.

// Defining the interface One
interface One {
    void methodOne();
}

// Defining the interface Two
interface Two {
    void methodTwo();
}

// Interface extending both the
// defined interfaces
interface Three extends One, Two {
}

- 테이블명 말고 데이터 베이스만 입력하고

- p다음에 비밀번호 붙여서 입력하기

[root@ksmart ~]# mysql -h 10.2.11.111 -u root -pakstnanrkd123@ kmng < server_equi.sql

import React, { createContext, useContext, useReducer } from 'react';
import { todoReducer } from './TodoReducer'; // Import the todoReducer 

dispatcher에서 필요한 Action정의

type TodoAction = { type: 'CREATE'; data: Todo };

dispatcher에 필요되는 parameter값들 정의.

interface TodoContextValue {
  tasks: Todo[];
  dispatch: React.Dispatch<TodoAction>;
  onCreate: (content: Todo) => void;
}

- tasks: Todo리스트를 구성하는 entity. 리스트로 정의되어 있다.

- dispatch: 리액트 Hook의 useReducer로 만들어진 함수

- onCreate : A function that takes a Todo item as an argument and is used to add a new Todo item to the list.

위에 정의한 TodoContextValue interface를 기반으로 한 Context를 생성.

export const TodoContext = createContext<TodoContextValue>({
  tasks: [],
  dispatch: () => {},
  onCreate: () => {},
});

- default값이 정의된 함수들.

- 리스트일 경우 비어져 있는 리스트, 함수는 비워져 있는 함수.

커스텀 훅을 생성후 export한다.

export const useTodoContext = () => useContext(TodoContext);

next.js는 _app.tsx를 쓰고 app.tsx는 쓰지 않는다.

In Next.js, _app.tsx and app.tsx serve different purposes.

_app.tsx:

The _app.tsx file is a special file in Next.js that acts as the root component for your application. It is responsible for initializing global styles, providing data-fetching and state management providers, and maintaining the overall layout and structure of your app.

You should create the _app.tsx file in the pages/ directory.

Here's an example of an _app.tsx file:

app.tsx:

On the other hand, app.tsx is not a special file in Next.js. It does not have any specific functionality or meaning within the Next.js framework.

You can create an app.tsx file if you have a specific purpose or requirement in your application that deviates from the standard Next.js conventions. It could be a custom component, a utility, or any other code related to your app's functionality.

You can create the app.tsx file anywhere in your project's directory structure, depending on your desired organization and file structure.

To summarize, _app.tsx is a special file in Next.js that acts as the root component of your application, while app.tsx is a generic file that you can create for custom purposes in your Next.js project.

_app.tsx 에서는 다음과 같은 일을 한다고 한다.

0. This file is the entry point for your Next.js application and acts as a wrapper for all your pages.

1. It allows you to define global styles, layout components

2. provide functionality that should be accessible across all pages

3. Custom error handling using componentDidCatch

4. Inject additional data into pages

5. add global CSS

   파라메터 두개 있는데 뭐에 쓰이는 물건인고?

_index.tsx

일종의 Landing page.

_index.tsx: This file is a specific page file that corresponds to the root URL of your application (e.g., /). It acts as the landing page or home page of your app. The name _index.tsx signifies that it is the index file for the root route.

In a Next.js application, the entry point is typically the _app.js (or _app.tsx) file, which serves as the main wrapper component for your entire application. It is responsible for initializing global styles, setting up the layout, and handling any shared functionality across pages.

In the index.js (or index.tsx) file, you don't need to explicitly return the _app.js component. Instead, Next.js handles this internally. The index.js file usually represents the default page of your application, and Next.js automatically associates it with the _app.js component.

Here's an example of a typical Next.js directory structure:

pages/
  |_ _app.js
  |_ index.js

In this case, the _app.js file would contain the root component, and the index.js file would be the default page that Next.js associates with the _app.js component.

So, to answer your question, in Next.js, you don't need to explicitly return the _app.js component from the index.js file. Next.js handles the integration of the root component internally.

export: With the export keyword, you can selectively export one or more declarations (variables, functions, classes, etc.) from a module. You can export multiple declarations from a single module, and you can import them individually using the corresponding import syntax. Here's an example:

// Exporting individual declarations using 'export'
export const variable1 = 10;
export function foo() {
  // Function implementation
}
export class MyClass {
  // Class implementation
}

To import the exported declarations individually:

import { variable1, foo, MyClass } from './module';

export default: The export default syntax allows you to export a single default value from a module. You can have only one default export per module. The default export is often used to export a single value, such as a class, function, or object literal, which is considered the main export of the module. Here's an example:

// Exporting a default value using 'export default'
export default function foo() {
  // Function implementation
}

To import the default export:

import foo from './module';
If you need to import both named exports and the default export from the same module, you can combine them in a single import statement:

import foo, { variable1, MyClass } from './module';

In summary, export is used to export multiple named declarations, while export default is used to export a single default value from a module. The choice between them depends on your specific use case and the desired import syntax.