먼저 Node.js가 설치하고 나면 커맨드 명령어로 Next.js 프로젝트를 생성할 수 있다.Node.js 공식 웹사이트 (https://nodejs.org/) 에서 LTS(Long Term Support) 버전을 다운로드하여 설치한다.

2. npx를 이용하여 Next.js 앱을 생성한다.

이름 입력 후 설정 관련 내용이 나오는데 잘 모르면 기본 설정으로 해도 무관하다. npx create-next-app@latest my-project

3. 프로젝트로 이동 후 서버 실행

• 프로젝트 이동 : cd my-project
• 서버 실행 : npm run dev

이렇게 서버를 실행해주면 http://localhost:3000 로 접속해 초기 화면을 확인할 수 있다.

문구를 보면 알 수 있듯이 app/page.js 에 있는 화면이 출력되며 해당 파일 수정 시 내가 만든 UI가 출력된다.

4. Next.js 라우팅

Next.js는 파일 기반 라우팅 시스템을 이용하기 때문에 폴더 구조가 URL과 1:1로 매핑된다.

기본 라우팅

그래서 기본적으로 app 폴더 밑에 만든 디렉토리가 곧 URL 경로가 되기 때문에 해당 폴더 안에 반드시 page.js (또는 page.tsx)가 있어야 한다.

app/
 ├─ page.js               → http://localhost:3000/ (루트 페이지)
 ├─ dashboard/
 │   └─ page.js           → http://localhost:3000/dashboard
 ├─ about/
 │   └─ page.js           → http://localhost:3000/about

중첩 라우팅

폴더 안에 또 폴더를 넣으면 그대로 URL이 깊어진다. /dashboard/settings 접속 시 settings 화면 표시

app/
 ├─ dashboard/
 │   ├─ page.js               → /dashboard
 │   ├─ settings/
 │   │   └─ page.js           → /dashboard/settings
 │   └─ users/
 │       └─ page.js           → /dashboard/users

동적 라우팅

[폴더명] 을 쓰면 동적 파라미터를 받을 수 있다.

app/
 ├─ blog/
 │   ├─ page.js                 → /blog
 │   └─ [slug]/
 │       └─ page.js             → /blog/1, /blog/hello, /blog/nextjs

export default function BlogPost({ params }) {
  return <h1>My Post: {params.slug}</h1>;
}

캐치올 라우팅

여러 경로를 한 번에 처리하고 싶을 때는 캐치올 라우팅을 사용해주면 된다. 경로 파라미터가 없어도 동작하도록 하려면 [[...slug]] 사용한다.

app/
 ├─ docs/
 │   └─ [...slug]/
 │       └─ page.js             → /docs/a, /docs/a/b, /docs/a/b/c

export default function DocsPage({ params }) {
  return (
    <div>
      <h1>Docs</h1>
      <p>경로 파라미터: {JSON.stringify(params.slug)}</p>
    </div>
  );
}

5. css 설정하기

• CSS Modules : CSS를 파일 단위로 모듈화하여 클래스 이름이 해당 컴포넌트 내부에서만 유효하게 됨
  • 전역 클래스 이름 충돌 방지 (.button이 여러 곳에 있어도 자동으로 고유 이름으로 변환됨)

    .btn {
    background: blue;
    color: white;
    }

    import styles from './Button.module.css';
    export default function Button() {
    return <button className={styles.btn}>Click</button>;
    }
    

- ** Global CSS** : 프로젝트 전체에 적용되는 전역 스타일로, 모든 페이지에 공통 적용되는 스타일을 관리할 수 있다.
    - 규모가 커질수록 클래스 충돌, 스타일 우선순위 관리가 어려워 진다.
```css
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

• Tailwind CSS : 유틸리티 우선 CSS 프레임워크로, 유틸리티 클래스를 조합하여 빠르게 커스텀 CSS를 설정할 수 있다.

  <button className="bg-blue-500 text-white px-4 py-2 rounded">
  Click
  </button>

• Sass : 변수, 중첩 규칙, 믹스인 등의 기능을 제공하여 현재 널리 사용되는 CSS 전처리기
  • 유지보수가 쉬워지나 빌드 과정이 필요함 (컴파일 후 css로 변환)
  • css에서는 변수를 못쓰지만 Sass에서는 가능하고, 구조적으로 작성이 가능함

    $primary: #3490dc;
    

.btn { background: $primary; &:hover { background: darken($primary, 10%); } }

- CSS-in-JS: JavaScript 컴포넌트 내에 CSS를 직접 삽입하여 동적으로 스타일을 적용할 수 있다
```jsx
import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  border-radius: 5px;
`;

export default function App() {
  return <Button>Click</Button>;
}

무작위로 K개의 수 뽑기

✅ 문제 설명

랜덤으로 서로 다른 k개의 수를 저장한 배열을 만드려고 합니다. 적절한 방법이 떠오르지 않기 때문에 일정한 범위 내에서 무작위로 수를 뽑은 후, 지금까지 나온적이 없는 수이면 배열 맨 뒤에 추가하는 방식으로 만들기로 합니다.

이미 어떤 수가 무작위로 주어질지 알고 있다고 가정하고, 실제 만들어질 길이 k의 배열을 예상해봅시다.

정수 배열 arr가 주어집니다. 문제에서의 무작위의 수는 arr에 저장된 순서대로 주어질 예정이라고 했을 때, 완성될 배열을 return 하는 solution 함수를 완성해 주세요.

단, 완성될 배열의 길이가 k보다 작으면 나머지 값을 전부 -1로 채워서 return 합니다.

✅ 제한사항

1 ≤ arr의 길이 ≤ 100,000 0 ≤ arr의 원소 ≤ 100,000 1 ≤ k ≤ 1,000

🔽 소스코드 1

💻 풀이

• 주어진 배열 arr에서 중복되지 않는 숫자만 뽑아내기 위해 동적으로 크기가 조절되는 ArrayList를 사용한다.

• for 반복문을 사용하여 arr의 각 요소를 확인한다. → list.contains() 메서드로 현재 숫자가 이미 리스트에 포함되어 있는지 확인하고, → 포함되어 있지 않은 경우에만 list.add()로 숫자를 추가한다. → 리스트의 크기가 k에 도달하면 더 이상 숫자를 추가하지 않습니다.

• k 크기의 정수 배열을 생성한 후, 리스트에 담긴 숫자들을 순서대로 배열에 옮겨 담아준다. → 리스트에 담긴 숫자의 개수가 k보다 적다면, 남은 공간은 -1로 채워준다.

⌛ 시간 0.04ms ~ 10.51ms

    public int[] solution(int[] arr, int k) {

        List<Integer> list = new ArrayList<>();

        for(int num : arr) {
            if(list.size() < k && !list.contains(num)) {
                list.add(num);
            }
        }

        int[] arr_list = new int[k];

        for(int i = 0; i < k; i++) {
            if(i < list.size()) {
                arr_list[i] = list.get(i);
            }else {
                arr_list[i] = -1;
            }
        }

        return arr_list;
    }

콜라츠 수열 만들기

✅ 문제 설명

모든 자연수 x에 대해서 현재 값이 x이면 x가 짝수일 때는 2로 나누고, x가 홀수일 때는 3 * x + 1로 바꾸는 계산을 계속해서 반복하면 언젠가는 반드시 x가 1이 되는지 묻는 문제를 콜라츠 문제라고 부릅니다.

그리고 위 과정에서 거쳐간 모든 수를 기록한 수열을 콜라츠 수열이라고 부릅니다.

계산 결과 1,000 보다 작거나 같은 수에 대해서는 전부 언젠가 1에 도달한다는 것이 알려져 있습니다.

임의의 1,000 보다 작거나 같은 양의 정수 n이 주어질 때 초기값이 n인 콜라츠 수열을 return 하는 solution 함수를 완성해 주세요.

✅ 제한사항

1 ≤ n ≤ 1,000

🔽 소스코드 1 (배열 사용)

💻 풀이

• 나누거나, 곱했을 때 1이 되는 과정을 찾기 위해, 반복문 조건은 n != 1 로 설정해준다.

• 이후 조건문을 사용해 짝수일 경우 홀수일 경우를 다르게 해 적절한 값을 넣어주고,

• 배열의 크기를 사전에 알 수 없어 크게 잡아두었기 때문에, 반복문에서 j++를 통해 배열의 크기를 계산해서

• 최종 Arrays.copyOf() 를 사용해 유효한 배열의 크기 만큼을 return 해준다.

⌛ 시간 0.02ms ~ 0.03ms

    public int[] solution(int n) {

        int[] arr = new int[1000];

        int j = 1;
        arr[0] = n;

        while (n != 1) {
            if(n%2==0) n = n / 2;
            else n = 3 * n + 1;

            arr[j] = n;
            j++;

        }

        return Arrays.copyOf(arr, j);
    }

🔽 소스코드 2 (리스트 사용)

💻 풀이

• 위 방법과 다르게 list를 사용하면 크기를 계산하지 않아도 된다. → 대신 list를 배열로 변환하는 작업이 필요한데 이를 반복문으로 해도 되고, 스트림을 사용해도 된다.

• 먼저 List 를 선언해준 후 반복문을 통해 조건에 따라 다른 값을 list.add()로 넣어준다.

• 이후 반복문이 종료되면 .stream() 으로 스트림으로 변환해주고,

• mapToInt() 로 Integer -> int 로 만든 후 최종 toArray() 를 이용해 배열로 변환해 return 한다.

⌛ 시간 1.85ms ~ 2.79ms

    public int[] solution1(int n) {

        List<Integer> list = new ArrayList<>();
        list.add(n);

        while (n != 1) {
            if(n%2==0) n = n / 2;
            else n = 3 * n + 1;

            list.add(n);
        }

        return list.stream().mapToInt(i->i).toArray();
    }

Jenkins는 코드 변경을 자동으로 빌드, 테스트, 배포해주는 CI/CD 자동화 도구입니다.

👉 지속적 통합(Continuous Integration, CI) / 지속적 배포(Continuous Delivery, CD)

CI / CD / 파이프라인 알아보기

쉽게 설명해보면, 예를들어 개발자가 GitHub에 코드를 push했을 때

1. 젠킨스가 GitHub를 감시하고 있다가
2. 새로운 커밋 발생 시 자동으로 코드를 가져와서
3. 빌드하고 (컴파일)
4. 테스트를 실행항 후
5. 서버에 자동으로 배포를 해줍니다.

즉, 개발자가 일일이 하지 않아도 빌드, 테스트, 배포를 젠킨스가 자동으로 처리해주는 아주 편리한 도구입니다.

🚀 젠킨스의 특징

• 🔁 자동화된 빌드 및 테스트 ➡ Jenkins는 코드 변경을 감지하여 자동으로 빌드와 테스트를 실행합니다. ➡ 개발자는 커밋만 해도 최신 코드를 빠르게 검증할 수 있어, 오류를 조기에 발견하고 품질을 유지할 수 있습니다.

• 🔌 플러그인 확장성 ➡ 500개 이상 플러그인을 통해 Git, Maven, Docker 등 다양한 도구와 연동 가능합니다. ➡ 필요한 기능을 쉽게 추가해 유연하게 시스템 구성이 가능합니다.

• ♻ 파이프라인 정의 및 빌드 흐름 관리 ➡ 선언적 파이프라인과 스크립트 파이프라인을 지원합니다. 이를 통해 복잡한 빌드, 테스트, 배포 과정을 코드로 정의하고 관리할 수 있습니다.

• 🖥️ 다양한 플랫폼 지원 ➡ Windows, MacOS, Linux 등 다양한 운영체제에서 실행 가능합니다.

• 🌐 웹 기반 UI 제공 ➡ 웹 브라우저에서 접근 가능한 대시보드를 제공하여, 별도의 명령어 없이도 작업 상태 확인, 로그 추적, Job 설정 등을 쉽게 관리할 수 있습니다.

• 🧵 분산 빌드 지원 ➡ Master-Agent 구조를 통해 여러 노드에서 빌드를 병렬 또는 분산 실행할 수 있어, 대규모 프로젝트에서도 빌드 속도를 향상시킬 수 있습니다.

• 🧪 테스트 및 코드 품질 검사 ➡ 테스트 자동화뿐 아니라 정적 분석 도구(SonarQube 등)와 연계하여 코드 품질과 규약 준수 여부를 점검할 수 있습니다.

CI (Continuous Integration, 지속적 통합)

CI 는 개발자가 여러 명일 때 각자의 코드를 자주 통합해 빌드와 테스트를 자동으로 수행하는 과정입니다.

여러 개발자가 동시에 개발 코드를 작업할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다.

CD (Continuous Delivery / Continuous Deployment, 지속적 제공 / 지속적 배포)

CI가 빌드, 테스트 자동화에 초점이 맞춰져 있다면, CD는 빌드가 완료된 코드를 실제 운영 환경에 자동으로 제공하고 배포하는 프로세스입니다.

• 지속적 제공 (Continuous Delivery) : 코드가 배포 가능한 상태까지 자동으로 준비되도록 하고, 실제 운영 배포는 수동 승인 후 진행됩니다.

• *지속적 배포 (Continuous Deployment) *: 테스트까지 통과한 코드를 사람의 개입 없이 자동으로 운영 환경에 배포합니다.

CI/CD 를 사용하게 되면

• 자동 빌드, 테스트로 버그와 문제를 빠르게 발견하고 고칠 수 있어 개발 속도가 향상됩니다.

• 테스트 자동화, 정적 분석을 통해 코드 품질을 유지할 수 있습니다.

• 수동 작업에 따른 에러가 줄고, 배포 과정이 표준화되어 안정적인 서비스 운영이 가능합니다.

• 개발과 운영 간 협업이 강화될 수 있습니다.

파이프라인?

파이프라인은 소프트웨어 개발과 배포 프로세스를 여러 단계로 나눠 자동화한 작업 흐름입니다. 각 단계는 코드가 변경되어 최종 배포될 때까지 필요한 작업을 수행하게 됩니다.

CI/CD 파이프라인 구성 요소

• Build (빌드) ➡ 소스 코드를 컴파일하고 실행 가능한 프로그램으로 패키징하는 단계입니다.

• Test (테스트) ➡ 코드가 정상 작동하는지, 버그가 없는지 확인하는 단계로, 유닛 테스트, 통합 테스트 등이 포함됩니다.

• Release (릴리스) ➡ 빌드된 애플리케이션을 버전 관리 시스템에 등록하거나, 릴리스 버전을 생성합니다.

• Deploy (배포) ➡ 테스트를 통과한 애플리케이션을 실제 서비스 환경(프로덕션)으로 자동 배포합니다.

• Compliance & Validation (규정 준수 및 유효성 검사) ➡ 보안 정책이나 코드 품질 기준에 맞는지 점검하며, 승인 프로세스를 거치기도 합니다.

삼총사(Lv.1)

✅ 문제 설명

한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다.

한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하도록 solution 함수를 완성하세요.

✅ 제한사항

3 ≤ number의 길이 ≤ 13 -1,000 ≤ number의 각 원소 ≤ 1,000 서로 다른 학생의 정수 번호가 같을 수 있습니다.

🔽 소스코드 1 (반복문 사용)

💻 풀이

• 3개의 수의 조합을 찾기 위해서 3개의 for문을 사용하는 방법이다.

• 반복문이 많아질 경우 시간 복잡도는 최대 O(n³)가 되지만, 문제 조건 속 배열의 최대 길이가 13이므로 충분히 빠르게 구현할 수 있다.

• 먼저 0부터 시작하는 i를 기준으로 i < j < k 조건을 두어 반복문을 실행하고,

• 마지막에는 3개의 합이 0일 경우 count++ 를 통해 하나의 조합이 있음을 설정해준다.

⌛ 시간 0.02ms ~ 0.03ms

    public int solution(int[] number) {

        int count = 0;

        for(int i = 0; i < number.length; i++) {
            for(int j = i + 1; j < number.length; j++) {
                for(int k = j + 1; k < number.length; k++) {
                    if(number[i] + number[j] + number[k] == 0) {
                        count++;
                    }
                }
            }
        }
        return count;
    }

🔽 소스코드 2 (재귀함수 사용)

💻 풀이

• 배열의 길이가 길거나, 혹은 조합할 원소의 개수가 유동적인 경우, → 반복문보다 재귀 함수를 사용하는 것이 유리하다.

• 메인 함수에서는 재귀 조합을 위한 combine() 함수를 호출하여 → 조합을 시작하게 된다.

• 재귀 함수 combine() 내부에서는 다음과 같은 조건으로 동작한다:

• 현재까지 선택한 원소의 개수(depth)가 목표 개수(예: 3)에 도달하면, → 누적된 합을 기준으로 조건을 판단하고 count++ 등의 처리를 한다. → 이후 더 이상 탐색하지 않고 return하여 현재 호출을 종료한다.

• depth가 목표보다 작을 경우, 반복문을 통해 남은 원소들을 순회하며 → combine()을 자기 자신을 다시 호출한다 (다음 원소 선택).

• 이와 같은 재귀 호출은 반복문 내에서 이루어지며, → 반복문이 더 이상 실행되지 않는 조건 (즉, i >= 배열 길이)이 되면 해당 호출은 종료된다.

• 결과적으로, 모든 재귀 호출이 종료되고, 가능한 모든 조합을 탐색했을 때 → 메인 함수의 combine() 호출도 완전히 종료된다.

⌛ 시간 0.02ms ~ 0.08ms

    int count = 0;

    public int solution1(int[] number) {

        combine(number, 0,0,0);

        return count;
    }

    private void combine(int[] number, int start, int depth, int sum) {

        if(depth == 3) {
            if(sum == 0) count++;
            return;
        }


        for(int i = start; i < number.length; i++) {
            combine(number, i + 1, depth + 1, sum + number[i]);
        }

    }

l로 만들기

✅ 문제 설명

알파벳 소문자로 이루어진 문자열 myString이 주어집니다. 알파벳 순서에서 "l"보다 앞서는 모든 문자를 "l"로 바꾼 문자열을 return 하는 solution 함수를 완성해 주세요.

✅ 제한사항

1 ≤ myString ≤ 100,000 myString은 알파벳 소문자로 이루어진 문자열입니다.

🔽 소스코드 1 (반복문 사용)

💻 풀이

• 문자열을 다뤄야 하기 때문에 StringBuilder 를 선언해준다.

• 이후 반복문으로 문자열을 한 글자 씩 비교해 l 보다 앞에 있는 경우 l로 바꾼 문자열을 넣어주고,

• 아닌 경우 기존 문자열을 추가해주어 최종 리턴한다.

⌛ 시간 1.43ms ~ 8.75ms

    public String solution1(String myString) {

        StringBuilder sb = new StringBuilder();

        for(int i = 0; i < myString.length(); i++) {
            if(myString.charAt(i) < 'l') {
                sb.append("l");
            }else {
                sb.append(myString.charAt(i));
            }
        }

        return sb.toString();
    }

🔽 소스코드 2 (정규식 사용)

💻 풀이

• 정규식을 사용해 l에서 z 까지에 포함되지 않는^ 경우 l로 변환해준다.

• a-k를 조건으로도 설정 가능하다.

⌛ 시간 5.75ms ~ 17.77ms

    public String solution(String myString) {

        return myString.replaceAll("[^l-z]", "l");
    }

마지막 두 원소

✅ 문제 설명

정수 리스트 num_list가 주어질 때, 마지막 원소가 그전 원소보다 크면 마지막 원소에서 그전 원소를 뺀 값을 마지막 원소가 그전 원소보다 크지 않다면 마지막 원소를 두 배한 값을 추가하여 return하도록 solution 함수를 완성해주세요.

✅ 제한사항

2 ≤ num_list의 길이 ≤ 10 1 ≤ num_list의 원소 ≤ 9

🔽 소스코드 1 (copyOf 사용)

💻 풀이

• 새로운 배열을 선언해 파라미터로 받은 배열의 값을 복사해 넣어준다.

• 이때 copyOf()를 사용해 복사를 진행하는데, 마지막 값을 하나 추가해주기 위해 크기는 주어진 배열 길이 + 1로 설정해준다.

• 이후 배열 속 원소 값의 크기를 비교해 적절한 값을 새로운 배열에 마지막 index에 넣어준다.

• 별도의 반복문 없이 함수로 진행할 수 있는 방법이다.

⌛ 시간 0.02ms ~ 0.03ms

    public int[] solution1(int[] num_list) {

        int len = num_list.length;

        int[] arr = Arrays.copyOf(num_list, len + 1);

        arr[len] = (num_list[len -1] > num_list[len - 2]) ? 
                    num_list[len -1] - num_list[len - 2] : num_list[len -1] * 2;

        return arr;
    }

🔽 소스코드 2 (list 와 stream 사용)

💻 풀이

• 만약 copyOf() 함수가 기억이 안나고 반복문도 사용하고 싶지 않다면 stream을 사용해 풀어줄 수 있다. 😅😅

• 먼저 List를 만들어주면서 기존 배열의 값을 list에 넣어준다.

• 값을 넣기 위해 stream을 사용해주는데 boxed()를 이용해 int -> Integer 로 바꿔 사용해주고

• 배열을 List로 만들기 위해서 collect()를 사용해 변환해준다.

• 이후 위에 배열방법에서 사용한 방법처럼 배열 속 값을 비교해 적절한 값을 List에 add 해준다.

• 마지막으로 다시 int[]로 리턴하기 위해서 mapToInt()로 다시 int로 변환해주고 toArray()를 이용해 list를 배열로 변환해 리턴한다.

⌛ 시간 2.94ms ~ 5.01ms

    public int[] solution(int[] num_list) {

        List<Integer> list = Arrays.stream(num_list).boxed().collect(Collectors.toList());

        int len = num_list.length;

        list.add((num_list[len -1] > num_list[len - 2]) ? 
                num_list[len -1] - num_list[len - 2] : num_list[len -1] * 2);

        return list.stream().mapToInt(Integer::valueOf).toArray();
    }

숫자 찾기

✅ 문제설명

정수 num과 k가 매개변수로 주어질 때, num을 이루는 숫자 중에 k가 있으면 num의 그 숫자가 있는 자리 수를 return하고 없으면 -1을 return 하도록 solution 함수를 완성해보세요.

✅ 제한사항

0 < num < 1,000,000 0 ≤ k < 10 num에 k가 여러 개 있으면 가장 처음 나타나는 자리를 return 합니다.

🔽 소스코드 1

⌛ 시간 0.02ms ~ 0.03ms

• str1.indexOf(str2) : str1에 str2가 등장하는 첫 번째 인덱스를 반환한다. ※ 없을 경우 -1을 반환

• 정수를 문자열로 변환 (String.valueOf())한 후 indexOf()를 사용해 k가 존재하는 위치를 result에 저장해준다.

• 이후 만약 저장한 값이 -1일 경우 -1을 return 하고 아닐 경우 result에 1을 더해 return 준다. → 1을 더해주는 이유 : indexOf() 는 위치를 0부터 시작하지만 문제의 조건은 첫 번째 위치의 값이 1부터 시작하기 때문

    public int solution(int num, int k) {

        int result = String.valueOf(num).indexOf(String.valueOf(k));

        return result == -1? -1 : result+1;
    }

🔽 소스코드 2

• 위에 방식에서 시작 인덱스를 0이 아닌 1로 하기 위해 삼항연산자를 이용해 값에 +1 을 해주었다면

• 이 코드에서는 "=" 을 이용해 0번 인덱스에 무의미한 문자열을 넣어 우리가 찾는 값을 1부터 찾을 수 있도록 진행하였다.

• 직접 작성한 코드는 아니지만 생각의 전환을 할 수 있는 코드라 생각해 참고용으로 작성해보았다.

    public int solution1(int num, int k) {
        return ("-" + num).indexOf(String.valueOf(k));
    }

글자 이어 붙여 문자열 만들기

✅ 문제설명

문자열 my_string과 정수 배열 index_list가 매개변수로 주어집니다. my_string의 index_list의 원소들에 해당하는 인덱스의 글자들을 순서대로 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요.

✅ 제한사항

1 ≤ my_string의 길이 ≤ 1,000 my_string의 원소는 영소문자로 이루어져 있습니다. 1 ≤ index_list의 길이 ≤ 1,000 0 ≤ index_list의 원소 < my_string의 길이

🔽 소스코드

⌛ 시간 0.16ms ~ 1.53ms

• 새로운 순서로 작성된 문자열을 생성해야 하기 때문에 StringBuilder 를 선언해준다.

• 이후 반복문을 사용해 배열을 순회하며, charAt() 을 이용해 배열 속 값에 해당하는 문자열의 index를 추출해 StringBuilder에 담아준다.

• 최종 String 으로 return 하기 위해 toString() 사용해 return 해준다.ㅣ

    public String solution(String my_string, int[] index_list) {

        StringBuilder sb = new StringBuilder();


        for(int num : index_list) {
            sb.append(my_string.charAt(num));
        }

        return sb.toString();
    }

같은 숫자는 싫어 (Lv.1)

✅ 문제설명

배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,

• arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.

• arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.

배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.

✅ 제한사항

배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수

🔽 소스코드 1

⌛ 시간 0.02ms ~ 0.03ms

• 리턴할 값을 담을 배열을 선언해 준다.

• 이후 첫 번째 에는 주어진 배열 arr 의 0번 index의 값을 넣어준다.

• 반복문을 사용해 arr[i] 값이 i-1 번째 값과 일치하지 않을 경우에만 리턴할 배열에 값을 넣어주고,

• 반복문이 종료되면 실제 사용되는 index만 반환하기 위해 copyOf()를 사용해 return 해준다.

    public int[] solution(int[] arr) {

        int[] arr2 = new int[arr.length];
        int j = 1;
        arr2[0] = arr[0];

        for(int i = 1; i < arr.length; i++) {

            if(arr[i] != arr[i-1]) {
                arr2[j] = arr[i];
                j++;
            }

        }

        return Arrays.copyOf(arr2, j);
    }

문자열 내림차순으로 배치하기

✅ 문제설명

문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

✅ 제한사항

str은 길이 1 이상인 문자열입니다.

🔽 소스코드 1 (정렬 사용)

⌛ 시간 0.29ms ~ 2.45ms

• 문자열 배열을 선언해 주어진 문자열을 split() 로 하나씩 구분해서 담아준다.

• 이후 sort()를 사용해 오름차순으로 정렬한 후

• 내림차순 정렬을 위해 StringBuilder를 선언해 배열의 값을 담아주고,

• reverse() 로 내림차순 정렬해준 후 마지막으로 toStirng() 으로 String으로 변환해 return 해준다.

    public String solution(String s) {

        String[] strArr = s.split("");

        Arrays.sort(strArr);

        StringBuilder sb = new StringBuilder();

        for(String str : strArr) {
            sb.append(str);
        }

        return sb.reverse().toString();
    }

음양 더하기

(Lv.1)

✅ 문제설명

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요..

✅ 제한사항

absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같습니다. signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.

🔽 소스코드 1 (정렬 사용)

⌛ 시간 0.04ms ~ 0.07ms

• 반복문을 사용해 배열의 값을 하나씩 접근해줍니다.

• 이후 삼항연산자를 사용해 boolean 배열의 값이 true 이면 + 를 false 이면 - 하도록 작성해주고

• 최종 값을 return합니다.

    public int solution(int[] absolutes, boolean[] signs) {

        int sum = 0;

        for(int i = 0; i < absolutes.length; i++) {
            sum += (signs[i] == true ? absolutes[i] : - absolutes[i]);
        }

        return sum;
    }

정수 내림차순으로 배치하기 (Lv.1)

✅ 문제설명

함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.

✅ 제한사항

n은 1이상 8000000000 이하인 자연수입니다.

📌 내림 차순 방법

배열을 오름차순으로 정렬할 때는 sort()를 사용해 간단히 사용 가능하지만, 내림차순은 조금 더 많은 과정이 필요로 합니다.

내림차순으로 정렬하는 방법에는 여러가지가 있습니다.

1) 반복문 사용 2) Collections.reversOrder() 사용 3) reverse() 사용

이번 문제는 2번과 3번을 사용해 풀이를 진행하였습니다.

먼저 Collections.reversOrder() 을 사용하기 위해선 int, long 가 아닌 Integer, Long 와 같이 class 타입으로 배열을 선언해주어야 합니다.

이후 배열을 정렬해주며 내림차순을 위한 함수를 선언해줍니다. → Arrays.sort(arr, Collections.reverseOrder());

3번 방법의 경우 문자열을 다룰 때 자주 사용되는 방식입니다. 먼저 오름차순으로 정렬을 진행한 후 StringBuilder 를 선언해 reverse() 함수를 사용해줍니다.

정렬 자체를 바꾸는 것이 아닌 정렬된 결과를 뒤집는 방식으로 내림차순을 구현하는 방법입니다.

🔽 소스코드 1 (Collections.reversOrder() 사용)

1. 먼저 long을 하나씩 담아주기 위한 배열을 선언해줍니다. → List<Integer> 로도 선언 가능합니다.

2. 이후 하나씩 구분하기 위해 반복문을 사용해 줍니다. → n % 10 으로 한 자리씩 배열에 담아주고, → n /= 10 으로 배열에 담은 수를 제거합니다.

3. 이후 sort() 와 Collections.reverseOrder() 를 사용해 내림차순으로 정렬합니다.

4. 정렬이 완료 되었다면 long 타입으로 return 하기 위해 StringBuilder 으로 배열을 하나의 문자열로 만들어 주고,

5. 다시 long로 변환하여 return 해줍니다.

⌛ 시간 0.30ms ~ 1.00ms

    public long solution(long n) {

        Long[] arr = new Long[String.valueOf(n).length()];

        for(int i = 0; i < arr.length; i++) {
            arr[i] =  n % 10;
            n /= 10;
        }

        Arrays.sort(arr, Collections.reverseOrder());

        StringBuilder sb = new StringBuilder();

        for(long l : arr) {
            sb.append(l);
        }


        return Long.parseLong(sb.toString());
    }

🔽 소스코드 2 (reverse() 사용)

1. 먼저 long을 하나씩 담아주기 위한 String 배열을 선언한 후 split("") 를 이용해 하나씩 배열에 담아줍니다.

2. 이후 sort() 를 사용해 오름차순으로 1차 정렬을 진행합니다.

3. 오름차순 정렬 후 StringBuilder 를 이용해 배열의 값들을 하나로 합쳐준 뒤

4. reverse() 를 이용해 내림차순으로 정렬하며 long 타입으로 변환해 최종 return 합니다.

⌛ 시간 0.16ms ~ 0.20ms

    public long solution1(long n) {

        String[] arr = String.valueOf(n).split("");

        Arrays.sort(arr);

        StringBuilder sb = new StringBuilder();

        for(String str : arr) {
            sb.append(str);
        }

        return Long.parseLong(sb.reverse().toString());
    }

두 수의 연산값 비교하기

✅ 문제설명

연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다.

12 ⊕ 3 = 123 3 ⊕ 12 = 312 양의 정수 a와 b가 주어졌을 때, a ⊕ b와 2 * a * b 중 더 큰 값을 return하는 solution 함수를 완성해 주세요.

단, a ⊕ b와 2 * a * b가 같으면 a ⊕ b를 return 합니다.

✅ 제한사항

1 ≤ a, b < 10,000

🔽 소스코드 1 (정렬 사용)

⌛ 시간 6.30ms ~ 10.96ms

• 주어진 a 와 b 를 문자열 형태로 더해주기 위해 사이 "" 을 추가해주고 이를 Integer.parseInt()로 다시 정수로 변환해줍니다.
• 이후 삼항연산자를 사용해 두 값을 비교해 더 큰 값을 return해줍니다.

    public int solution(int a, int b) {

        int p = Integer.parseInt(a + "" + b);
        int x = 2 * a * b;

        return p > x ? p : x;
    }

최댓값과 최솟값 (Lv.1)

✅ 문제설명

문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다.

✅ 제한사항

s에는 둘 이상의 정수가 공백으로 구분되어 있습니다.

🔽 소스코드 1 (정렬 사용)

⌛ 시간 7.71ms ~ 9.51ms

• 문자열 배열(strArr)에 주어진 문자열 s 를 공백으로 구분해 값을 넣어준다.
• 이후 정수 배열(arr)을 문자열 배열과 같은 크기로 선언해준다.
• 이후 반복문을 사용해 문자열을 정수로 변환해 arr 에 넣어주고,
• Arrays.sort() 를 사용해 오름차순으로 정렬한 후
• 0번 인덱스와 n-1 번 인덱스를 return 해준다. ※ 0번은 최소, n-1은 최대값이다.

    public String solution(String s) {

        String strArr[] = s.split(" ");

        int[] arr = new int[strArr.length];

        for(int i = 0; i < arr.length; i++) {
            arr[i] = Integer.parseInt(strArr[i]);
        }

        Arrays.sort(arr);


        return arr[0] + " " + arr[arr.length -1];
    }

🔽 소스코드 2 (정렬 미사용)

⌛ 시간 6.68ms ~ 10.53ms

• 문자열 배열(strArr) 을 선언해 주어진 문자열 s 를 공백으로 구분해 넣어줍니다.
• 이후 max , min , n 을 선언해주고, min 과 max 에는 배열의 0번 인덱스 값을 넣어줍니다.
• 이후 반복문을 사용해 n 보다 작은 경우 min으로 n 보다 큰 경우 max 로 넣어주며
• 최종 최대, 최소값을 return합니다.

    public String solution1(String s) {

        String strArr[] = s.split(" ");

        int max, min, n;
        min = max = Integer.parseInt(strArr[0]);

        for(int i = 1; i < strArr.length; i++) {
            n = Integer.parseInt(strArr[i]);

            if(min > n) min = n;
            if(max < n) max = n;
        }

        return min + " " + max;
    }

조건에 맞게 수열 변환하기 1

✅ 문제설명

정수 배열 arr가 주어집니다. arr의 각 원소에 대해 값이 50보다 크거나 같은 짝수라면 2로 나누고, 50보다 작은 홀수라면 2를 곱합니다. 그 결과인 정수 배열을 return 하는 solution 함수를 완성해 주세요.

✅ 제한사항

1 ≤ arr의 길이 ≤ 1,000,000 1 ≤ arr의 원소의 값 ≤ 100

🔽 소스코드 1

실행 시간 : 0.01ms ~ 0.43ms

• ** 조건 1 ** : 50보다 크거나 같고 짝수이면 나누기 2
• ** 조건 2 ** : 50보다 작고 홀수이면 곱하기 2
• 그 외에는 별도 작업을 하지 않기 때문에 반복문 속 조건문을 활용해 문제 풀이
• 배열 전체를 순회하면서 그 안에 배열의 값이 조건 1 또는 2에 맞는 경우
• 수정된 값을 기존 배열 인덱스에 넣어준 후 return 한다.

    public int[] solution(int[] arr) {

        for(int i = 0; i < arr.length; i++) {
            if(arr[i] >= 50 && arr[i] % 2 == 0) {
                arr[i] = arr[i] / 2;
            }else if(arr[i] < 50 && arr[i] % 2 != 0) {
                arr[i] = arr[i] * 2;
            }
        }

        return arr;
    }

길이에 따른 연산

✅ 문제설명

정수가 담긴 리스트 num_list가 주어질 때, 리스트의 길이가 11 이상이면 리스트에 있는 모든 원소의 합을 10 이하이면 모든 원소의 곱을 return하도록 solution 함수를 완성해주세요.

✅ 제한사항

2 ≤ num_list의 길이 ≤ 20 1 ≤ num_list의 원소 ≤ 9 num_list의 원소를 모두 곱했을 때 2,147,483,647를 넘는 입력은 주어지지 않습니다.

🔽 소스코드 1

실행 시간 : 0.01ms ~ 0.03ms

• 배열의 길이에 따라 덧셈, 곱셈을 해야하기 때문에
• 곱셈일 경우 기본 숫자가 0이 아닌 1로 구성되어야 한다.
• 이를 해결하기 위해 삼항연산자를 사용해 길이에 따라 초기 숫자를 지정해준 후
• 반복문 속에 조건문을 작성하여 += 또는 *= 을 진행해준다.

    public int solution1(int[] num_list) {

        int num = num_list.length < 11 ? 1 : 0;

        for(int i = 0; i < num_list.length; i++) {
            if(num_list.length >= 11) {
                num += num_list[i];
            }else {
                num *= num_list[i];
            }
        }

        return num;
    }

🔽 소스코드 2

실행 시간 : 0.01ms ~ 0.04ms

• 기본 num = 1 로 설정해준 후
• 조건문 안에 반복문을 작성해 + 또는 * 을 처리해준다.
• 이때 덧셈일 경우 num 의 초기값이 0이어야 하므로,
• 최종 결과에서 -1 을 해준 후 return 한다.

    public int solution2(int[] num_list) {

        int num = 1;

        if(num_list.length >= 11) {
            for(int i = 0; i < num_list.length; i++) {
                num += num_list[i];
            }
            num = num - 1;
        }else {
            for(int i = 0; i < num_list.length; i++) {
                num = num * num_list[i];
            }
        }

        return num;
    }

카운트 다운

✅ 문제설명

정수 start_num와 end_num가 주어질 때, start_num에서 end_num까지 1씩 감소하는 수들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요.

✅ 제한사항

0 ≤ end_num ≤ start_num ≤ 50

🔽 소스코드 1

실행 시간 : 0.01ms ~ 0.03ms

start_num이 end_num보다 크거나 같을 때까지를 조건으로 반복문을 수행한다.

이런 문제의 경우 크기가 정해져 있기 때문에 별도 배열 함수가 아닌 계산을 통해 배열의 크기를 결정해주고, int j = 0으로 배열의 index를 설정해준다.

    public int[] solution(int start_num, int end_num) {

        int[] arr = new int[start_num - end_num + 1];

        for(int i = start_num, j = 0; i >= end_num; i--, j++) {
            arr[j] = i;
        }

        return arr;
    }

폴더 구조

먼저 크게 3개의 폴더로 나눠지는데

• node_modules : npm install을 하여 설치된 모듈들이 위치하는 폴더
• public : static 자원 폴더로 정작 파일들을 위한 폴더
• src : 리액트를 작업하는 폴더

1. public 폴더

• favicon.ico : 웹 사이트 상단에 위치하는 파비콘 이미지
• index.html : 가상 DOM 을 위한 HTML 파일로 빈 껍데기 파일이다. (index.js에 의해 렌더링된 결과가 표시됨)
• manifest.json : 앱 스토어 없이 기기의 홈화면에 설치할 수 있는 웹 사이트

2. src 폴더 ✨

• *App.css *: App.js 컴포넌트의 스타일을 정의하는 CSS 파일

• *App.js *: React 애플리케이션의 핵심 컴포넌트로, 주요 UI와 로직을 작성

• App.test.js : App.js 에 대한 테스트 코드 작성하는 파일

• *index.css *: 전반적인 또는 전역적인 스타일 정의 (공통 스타일)

• *index.js *: React 의 진입점이 되는 파일로 ReactDOM.render() 을 사용해 App 컴포넌트를 HTML 파일의 특정 요소에 렌더링 한다. (가장 먼저 실행되는 파일)

• *logo.svg *: React 로고 이미지로 필요 없으면 삭제

• reportWebSockets.js : 웹 성능 측정을 위한 기능을 제공하는 파일

• *setupTests.js *: 테스트 환경 설정 파일

3. 사용자 추가 폴더

기본 폴더 이외에도 개발을 위해선 추가적으로 폴더와 파일을 만들어 구분해줘야 한다.

✅ ** src/components/**

• 가장 기본적인 UI 요소들을 모아두는 폴더
• 예를들어 Button.js , Input.js , Header.js 등
• 각 컴포넌트는 해당 컴포넌트만의 .js (혹은 .jsx), .css (혹은 .module.css, .scss), .test.js 파일을 함께 가질 수 있다. (예: components/Button/index.js, components/Button/Button.css)

✅ ** src/pages/** 또는 ** src/views/ **

• 특정 페이지나 화면에 종속적인 컴포넌트나 로직을 해당 페이지 폴더에 묶어준다.
• 예를 들어 Login.js , HomePage.js 등
• 각 페이지 폴더 안에는 해당 페이지에만 사용되는 컴포넌트들을 포함시킬 수 있다. (pages/ProductDetailPage/ProductInfo.js, pages/ProductDetailPage/RelatedProducts.js)

✅ ** src/Feature/**

• 특정 기능을 중심으로 파일을 묶어준다.
• 애플리케이션의 규모가 커질수록 유지보수성이 높아진다는 장점이 있다.
• src/features/ (또는 src/modules/, src/domains/): 특정 비즈니스 로직이나 기능을 중심으로 파일을 그룹화 한다.

✅ ** 기타 유틸리티 및 공통 로직 폴더**

• 컴포넌트나 특정 기능에 종속적이지 않은 공통 코드들을 모아두는 폴더

• src/utils/: 재사용 가능한 유틸리티 함수들을 모아두는 폴더 예시: formatDate.js, validation.js, localStorage.js 등

• src/api/: 백엔드 API와의 통신 로직을 모아두는 폴더 예시: userApi.js, productApi.js, axiosInstance.js

• src/hooks/: 커스텀 React Hooks를 모아두는 폴더 예시: useDebounce.js, useFetch.js, useModal.js

• src/store/: Redux, Zustand 등 상태 관리 라이브러리를 사용하는 경우, 관련 파일들을 모아두는 폴더 예시: store.js, slices/userSlice.js, slices/cartSlice.js

• src/assets/: 이미지, 폰트 등 정적 자원들을 모아두는 폴더 예시: images/, fonts/, icons/

• src/styles/: 전역적으로 사용되는 스타일 변수, 믹스인, 테마 등을 모아두는 폴더 예시: variables.css, mixins.scss, theme.js (Styled-components 등 사용 시)

이렇게 폴더를 만들 때에 가장 중요한 것은 일관성과 명확성이다. 모두가 동의하는 구조를 만들고, 폴더나 파일의 이름만으로도 그 역할과 내용이 명확하게 파악되도록 하는 것이 중요하다.

초기에는 하더라도, 프로젝트가 커지면서 features, api, hooks 등으로 점진적으로 확장해 나가는 것이 일반적이고, 이럴 경우 많은 기능을 효율적으로 관리하고 유지보수할 수 있다.