반응형

1. 시험환경

    ˙ 구글 서치 콘솔

    ˙ 소유 도메인

 

2. 목적

    ˙ 구글 서치 콘솔에 도메인을 등록하여 소유권 확인하는 절차를 알아보자.

    ˙ 구글 검색노출을 위해 가장 먼저 진행되어야 하는 단계이다.

 

3. 적용

    ① 구글 서치 콘솔 사이트에 접속한다.

        - URL : https://search.google.com/search-console/about?hl=ko 

 

Google Search Console

Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다.

search.google.com

 

    ② "시작하기" 버튼 클릭 후 로그인한다.

 

    ③ 좌측상단 "속성 검색"을 클릭하고 "+ 속성 추가"를 클릭한다.

 

    ④ 등록할 URL을 입력한다.

        - 도메인 : TXT 값을 DNS 사이트(AWS Route 53 등)에서 설정하며 example.com의 모든 서브 도메인에 적용된다.

        - URL 접두어 : 설정 파일을 사이트마다 업로드하여 www.example.com와 와 같이 각각의 서브 도메인 마다 적용한다.

 

    ⑤ 태그를 복사하여 main 페이지에 추가한다.

        - 도메인 선택 경우 : 제공된 TXT 값을 복사하여 DNS의 TXT 레코드에 설정한다. 

 

        - URL 접두어 선택 경우 : 제공 파일을 다운로드하여 Hosting 사이트의 root 경로에 업로드한다.

 


    ⑥ DNS(도메인 TXT 설정) 또는 Hosting 사이트(파일업로드)에서 설정 후 소유권이 확인되도록 한다.

 

반응형
저작자표시

'웹 사이트' 카테고리의 다른 글

npm을 이용한 next.js 프로젝트 생성  (0) 2025.04.06
[워드프레스] 관리자 비밀번호 변경  (7) 2024.06.27
Docker 기반 워드프레스 초기 설치  (1) 2024.06.17
쿠키(Cookie)와 세션(Session)  (0) 2024.01.25
가비아(Gabia)에서 구매한 도메인(URL)을 EC2에 연결하기  (0) 2023.07.03
반응형

1. 시험환경

    · 윈도우

    · node v20.15.0

    · npm 10.7.0

 

2. 목적

    · npm 프로젝트 관리 툴을 이용한 next.js 프로젝트를 신규 생성하는 방법을 알아보자.

 

3. 적용

    ① 프로젝트 폴더를 생성한다.

        - 예시) nextjs 폴더를 생성한다.

 

    ② nextjs 프로젝트를 생성한다.

        - npx  create-next-app@latest  ./nextjs

 

    ③ 설치한 의존성 라이브러리를 선택하면 설치가 진행된다.

 

    ④ 프로젝트를 실행한다.

        - npm  run  dev

 

4. 결과

 

 

반응형
저작자표시

'웹 사이트' 카테고리의 다른 글

구글 서치 콘솔 등록 및 소유권 확인  (0) 2025.04.07
[워드프레스] 관리자 비밀번호 변경  (7) 2024.06.27
Docker 기반 워드프레스 초기 설치  (1) 2024.06.17
쿠키(Cookie)와 세션(Session)  (0) 2024.01.25
가비아(Gabia)에서 구매한 도메인(URL)을 EC2에 연결하기  (0) 2023.07.03
반응형

1. 시험환경

    · 윈도우

    · node v20.18.1

    · yarn v1.22.22

 

2. 목적

    · yarn 패키지 생성관리 툴을 이용하여 next.js 프로젝트를 생성하는 방법을 알아보자.

 

3. 적용

    ① 프로젝트 폴더를 생성 후 생성한 폴더로 이동한다.

        - 예시) nextjs 폴더를 생성한다.

 

    ② 생성한 프로젝트 폴더 내에서 신규 프로젝트 생성 명령어를 입력한다.

        - yarn  create next-app  --typescript  .

 

    ③ 필요한 라이브러리를 선택하면 설치가 진행된다.

라이브러리 선택

 

프로젝트 초기화

 

    ④ next.js 프레임워크 기반으로 초기화된 프로젝트 구조가 생성된 것을 확인한다.

 

4. 결과

    ① 설치한 프로젝트를 개발환경에서 실행한다.

        - yarn  dev

 

    ② 프로덕션 환경에 배포하기 위해 빌드하면 빌드 결과는 .next 폴더에 저장된다.

        - yarn  dev

 

    ③ 빌드된 Next.js 애플리케이션을 프로덕션 모드로 실행한다.

        - 이 명령을 실행하기 전에 yarn build 명령어를 사용하여 애플리케이션을 빌드해야 한다.

        - yarn  start

 

반응형
저작자표시

'FrontEnd Framework' 카테고리의 다른 글

yarn을 이용한 React 프로젝트 생성 (npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 에러 대응)  (0) 2025.01.10
node.js 최신버전 설치 (windows)  (0) 2024.03.06
[react.js] http 요청을 https로 redirection 하는 방법  (0) 2023.03.27
[react.js] /ws fail 에러 디버깅 - 콘솔로그(F12)  (0) 2023.03.27
[react.js] Invalid Host Header 에러 해결  (0) 2023.02.28
반응형

1. 시험환경

    ˙ Android Studio

    ˙ AVD(Android Virtual Device)

    ˙ Physical Device(삼성 갤럭시 S)

 

2. 목적

    ˙ 안드로이드 스튜디오에서 신규 프로젝트를 생성한다.

    ˙ 프로젝트를 AVD에 Import하고 결과를 확인한다.

    ˙ 프로젝트를 핸드폰 단말기에 Import하고 결과를 확인한다.

 

3. 적용

    ① Android Studio를 실행하고 "New Project" 버튼을 클릭한다.

 

    ② 프로젝트 템플릿을 선택하고, "Next" 버튼을 클릭한다.

 

    ③ 생성할 프로젝트를 설정하고, "Finish" 버튼을 클릭한다.

        - Name : 프로젝트 이름 입력
        - Pakcage name : 앱 구분을 위한 고유값 입력
        - Save location : 프로젝트 저장 위치 입력
        - Minimum SDK : 안드로이드 SDK 버전 설정. (전세계 사용자 디바이스 장치와 호환율 확인)

        - Build configuration language : Kotlin 또는 JAVA

 

    ④ 신규 프로젝트가 생성된다.

 

 

    ⑤ 프로젝트를 가상디바이스에 Import하기 위해 가상 디바이스 장치를 선택한다.

        - Virtual Device 최초 설정 방법은 포스팅을 참고한다. (https://languagestory.tistory.com/175)

 

    ⑥ "Run" 단축 아이콘을 클릭하여 프로젝트를 선택한 장치에서 실행한다.

 

 

    ⑦ 프로젝트를 실제 디바이스에 Import하기 위해 PC와 USB로 연결된 핸드폰 장치를 선택한다.

        -  Physical Device를 생성하는 방법은 포스팅을 참고한다. (https://languagestory.tistory.com/177)

 

    ⑧ "Run" 단축 아이콘을 클릭하여 프로젝트를 선택한 장치에서 실행한다.

 

4. 결과

    ˙ Virtual Device에서 실행한 화면을 확인하고, 화면을 클릭하여 조작한다.

AVD 환경에서 실행된 App 화면

 

 

 

반응형
저작자표시

'안드로이드' 카테고리의 다른 글

AVD(Android Virtual Device) 사용  (0) 2025.03.11
Android Studio 최신버전(Meerkat) 설치  (0) 2025.03.11
[BMI Calculator] 1. LinearLayout에 컴포넌트 배치하기  (0) 2022.12.11
Android Studio와 갤럭시 S 디바이스 장치 연결 설정  (0) 2022.12.10
[widget] RadioButton, CheckBox 기본 사용법  (0) 2021.07.22
반응형

1. 시험환경

    ˙ Android Studio

    ˙ AVD(Android Virtual Device, 안드로이드 가상 디바이스)

 

2. 목적

    ˙ Android Studio에서 제공하는 AVD를 최초 실행 및 동작하는 방법을 학습한다.

 

3. 적용

    ① Android Studio → More Actions → Virtual Device Manager를 클릭한다.

 

    ② 신규 디바이스를 만들기 위해 +("Create Virtual Device") 버튼을 클릭한다.

 

    ③ 가상 Device를 선택 후 Next 버튼을 클릭한다.

 

    ④ 가상 Device에 설치할 Android OS 이미지를 선택 및 설치한다.

 

 

    ⑤ 설치가 완료되면 에뮬레이터를 실행한다.

 

4. 결과

    ˙ PC 환경에서 개발한 앱을 테스트할 수 있는 가상 디바이스 장치가 생성되었다.

 

반응형
저작자표시

'안드로이드' 카테고리의 다른 글

Helloworld 프로젝트 생성 및 디바이스 테스트  (0) 2025.03.11
Android Studio 최신버전(Meerkat) 설치  (0) 2025.03.11
[BMI Calculator] 1. LinearLayout에 컴포넌트 배치하기  (0) 2022.12.11
Android Studio와 갤럭시 S 디바이스 장치 연결 설정  (0) 2022.12.10
[widget] RadioButton, CheckBox 기본 사용법  (0) 2021.07.22
반응형

1. 시험환경

    ˙ 윈도우

    ˙ 안드로이드 스튜디오

 

2. 목적

    ˙ 윈도우 운영체제에서 안드로이드 스튜디오를 설치한다.

 

3. 적용

    ① 안드로이드 개발자 사이트에 접속해서 "Andriod 스튜디오" 메뉴를 클릭한다.

        - URL : https://developer.android.com/

 

    ② "Download Andriod Studio" 버튼을 클릭한다.

 

    ③ 팝업창에서 "동의" 버튼을 클릭하고 최신 제공 버전을 다운 받는다.

 

    ④ 다운 받은 설치파일을 실행하고, 단계별 설치 과정에서 "Next" 버튼을 클릭한다.

        - Android Virtual Device (체크) : 실제 핸드폰이 아닌 PC에서 가상의 안드로이드 폰을 이용하여 테스트한다.

 

 

    ⑤ Android Studio IDE 설치 과정이 완료되면 SDK 설치를 해야 한다.

        - Import Andriod Studio Settings : 기존 설정 파일이 있는 경우 Import 할 수 있다.

 

    ⑥ 설치한 Android Studio를 실행한다.

 

4. 결과

    ˙ More Actions → SDK Manager

    ˙ 설치된 SDK 버전을 확인한다. 체크박스 설정을 통해 SDK 하위 버전도 사용할 수 있다.

 

반응형
저작자표시

'안드로이드' 카테고리의 다른 글

Helloworld 프로젝트 생성 및 디바이스 테스트  (0) 2025.03.11
AVD(Android Virtual Device) 사용  (0) 2025.03.11
[BMI Calculator] 1. LinearLayout에 컴포넌트 배치하기  (0) 2022.12.11
Android Studio와 갤럭시 S 디바이스 장치 연결 설정  (0) 2022.12.10
[widget] RadioButton, CheckBox 기본 사용법  (0) 2021.07.22
반응형

1.  문제

■ DFS를 이용하여 리스트의 조합(combination)을 구현한다.

 

2. 핵심요약

■ DFS 알고리즘 활용법을 알아보자.

 

3. JavaScript 코딩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let arr = [1, 2, 3, 4, 5];   // 주어진 배열
let result = [];              // 결과를 저장할 배열
let combination = [];         // 현재 조합을 저장할 배열
 
// 깊이 우선 탐색(DFS)을 수행하는 함수
const dfs = (startIndex) => {
    // 종료 조건: 선택된 원소의 개수가 k개가 되면 조합을 결과에 추가
    if (combination.length === 3) { // 예시로 3개 원소를 고르는 조합을 찾는 경우
        result.push([...combination]); // 조합을 결과에 추가
        return;
    }
 
    // startIndex부터 배열의 끝까지 순차적으로 탐색
    for (let i = startIndex; i < arr.length; i++) {
        combination.push(arr[i]);    // 원소를 현재 조합에 추가
        dfs(i + 1);                  // 다음 원소로 이동 (중복을 피하기 위해 i+1로 호출)
        combination.pop();           // 백트래킹: 원소를 제거하고 다른 경우를 시도
    }
}
 
// DFS 탐색 시작
dfs(0);
 
// 결과 출력
console.log(result);
 
 cs

 

4. 참고

https://languagestory.tistory.com/380

 

[DFS] 개념(Depth First Search; 깊이 우선 탐색) - 자바스크립트

1. DFS(Depth First Search; 깊이 우선 탐색)의 개념■ 그래프에서 모든 노드를 한번씩 탐색하기 위한 방법■ 스택 또는 재귀함수를 이용하여 구현■ 루트 노드[또는 임의의 노드]에서 시작하여 형제(si

languagestory.tistory.com

 

반응형
저작자표시

'알고리즘(코딩테스트)' 카테고리의 다른 글

[BFS] 개념(Breadth First Search; 너비 우선 탐색) - 자바스크립트  (0) 2025.02.16
큐(Queue) 구현 및 테스트 (JavaScript, Python)  (0) 2025.02.16
[DFS] 순열(permutation)  (0) 2025.02.16
[백준][DFS][난이도:하] 단지번호 붙이기 (2667번)  (0) 2025.02.16
[백준][DFS][난이도:하] 차이를 최대로 (10819번)  (0) 2025.02.16
반응형

1. BFS(Breadth First Search; 너비 우선 탐색)의 개념

■ 그래프에서 모든 노드를 한번씩 탐색하기 위한 방법

■ 루트 노드[또는 임의의 노드]에서 시작하여, 형제(sibling) 노드를 탐색한 후, 각 레벨에 있는 노드를 차례대로 탐색하는 방법.

■ Queue를 이용하여 구현

 

2. BFS 노드 방문 순서

■ 결과 : 1 → 2 → 3 → 4 → 7 → 8 → 9 → 5 → 6 → 10

    - step1) 루트 노드에서 시작하여, 같은 레벨에 있는 모든 노드를 탐색하고 큐에 추가한다.

    - step2) 큐에서 하나씩 노드를 꺼내면서 그 노드와 연결된 인접 노드를 탐색하고, 탐색된 노드는 큐에 추가한다.

    - step3) 큐가 빌 때까지 step1과 step2를 반복하며 모든 노드를 탐색한다.

 

3. 그래프 표현

■ "그래프"는 "인접 리스트"로 표현하여 보다 이해하기 쉬운 형태로 만들 수 있다.

1 2, 3
2 1, 4
3 1, 7, 8, 9
4 2, 5, 6
5 4
6 4
7 3, 10
8 3
9 3
10  

 

■ "인접 리스트"는 "2차원 배열[리스트]" 또는 "테이블[dictionary]" 자료구조로 코드화 한다.

1
2
3
4
5
6
7
8
9
10
11
12
let graph = []
graph['0'] = []         // index 0: 사용하지 않음.
graph['1'] = ['2', '3']
graph['2'] = ['1', '4']
graph['3'] = ['1', '7', '8', '9']
graph['4'] = ['2', '5', '6']
graph['5'] = ['4']
graph['6'] = ['4']
graph['7'] = ['3', '10']
graph['8'] = ['3']
graph['9'] = ['3']
graph['10'] = ['7']
 cs

 

4. JavaScript 코딩

- JavaScript로 구현한 Queue 참고: https://languagestory.tistory.com/400

 

큐(Queue) 구현 및 테스트 (JavaScript, Python)

1.  Queue 개념■ 선입선출 (FIFO): 큐에서 데이터는 먼저 들어온 순서대로 출력된다.■ enqueue: 큐에 데이터를 삽입하는 작업■ dequeue: 큐에서 데이터를 제거하는 작업■ Front: 큐의 앞쪽 (데이터가

languagestory.tistory.com

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 'queue.js' 파일에서 Queue 클래스를 가져옴
const Queue = require('./queue.js');
 
// BFS 알고리즘 구현
const bfs = (graph, currNode, visited) => {
 
    // Queue 인스턴스를 생성하여 사용
    const queue = new Queue();
 
    // 시작 노드를 큐에 추가하고 방문처리
    queue.enqueue(currNode);
    visited[currNode] = true;
 
    // 큐가 비어있지 않으면 계속해서 탐색
    while (queue.getLength() > 0) {         // 큐가 빌 때까지 반복
        const nextNode = queue.dequeue();   // 큐에서 하나의 노드를 꺼냄 (이 노드를 탐색)
        console.log(nextNode);               // 현재 노드를 출력 (탐색한 노드)
 
        // 꺼낸 노드의 인접 노드들을 탐색
        for (const neighborNode of graph[nextNode]) {
            // 방문하지 않은 인접 노드가 있으면 큐에 추가하고 방문처리
            if (!visited[neighborNode]) {
                queue.enqueue(neighborNode);  // 큐에 인접 노드를 추가
                visited[neighborNode] = true; // 해당 노드를 방문했다고 표시
            }
        }
    }
}
 
// 그래프의 연결 정보 (인접 리스트 형태로 표현)
const graph = [
    [],                 // 0번 노드: 사용하지 않음
    [2, 3, 4],          // 1번 노드: 2, 3, 4번 노드와 연결
    [1],                // 2번 노드: 1번 노드와 연결
    [1, 5, 6],          // 3번 노드: 1, 5, 6번 노드와 연결
    [1, 7],             // 4번 노드: 1, 7번 노드와 연결
    [3, 8],             // 5번 노드: 3, 8번 노드와 연결
    [3],                // 6번 노드: 3번 노드와 연결
    [4],                // 7번 노드: 4번 노드와 연결
    [5]                 // 8번 노드: 5번 노드와 연결
]
 
// 방문 여부를 체크하는 배열 (그래프 크기만큼 false로 초기화)
const visited = Array(graph.length).fill(false);    
 
// 1번 노드부터 BFS 탐색 시작
bfs(graph, 1, visited);     // 1번 노드부터 BFS 탐색
 
 cs

 

반응형
저작자표시

'알고리즘(코딩테스트)' 카테고리의 다른 글

[DFS] 조합(combination)  (0) 2025.02.16
큐(Queue) 구현 및 테스트 (JavaScript, Python)  (0) 2025.02.16
[DFS] 순열(permutation)  (0) 2025.02.16
[백준][DFS][난이도:하] 단지번호 붙이기 (2667번)  (0) 2025.02.16
[백준][DFS][난이도:하] 차이를 최대로 (10819번)  (0) 2025.02.16

+ Recent posts

티스토리툴바