his

[Git] Merge vs Rebase / Fetch vs Pull 차이

hisjeans — Tue, 7 Jul 2026 17:56:17 +0900

Git을 사용해 협업하는 중 브랜치를 합치거나 원격 저장소의 코드를 가져올 때 어떤 명령어를 사용해야 하는지 고민되는 순간

1. Git Rebase vs Git Merge: 브랜치를 합치는 두 가지 방법

git rebase와 git merge의 차이점을 설명하고, 각각 어떤 상황에서 사용하는 것이 적절한지 설명해보자

Git에서 분기된 브랜치를 하나로 병합한다는 의미에서는 동일하지만

어떻게 커밋 히스토리(이력)를 남기느냐에 따라 git merge와 git rebase로 다른 결과를 낳는다

merge는 브랜치의 변경 사항과 흐름 이력을 그대로 남기지만

rebase는 대상 브랜치의 최신 커밋 위에 현재 브랜치의 커밋들이 순서대로 재적용되어 선형 히스토리가 형성된다

따라서 브랜치의 사용 내역을 남겨둘 필요가 있다면 merge를,

히스토리를 깔끔히 만드는 게 중요하다면 rebase 사용하는 것이 적합하다

rebase 는 커밋을 하나씩 재적용하기 때문에 충돌이 발생할 경우, 이를 각 커밋마다 해결해야 할 수 있다

(merge 보다 충돌에 대한 해결 과정이 번거로울 수 있는 것)

더 자세히 살펴보면,

git rebase:
- 단어 뜻 그대로 브랜치의 베이스(Base)를 다시 설정한다
- 현재 브랜치의 시작점을 대상 브랜치의 가장 최신 커밋으로 옮겨, 처음부터 한 줄로 작업한 것처럼 커밋 히스토리를 일직선으로 깨끗하게 만든다
- 개인 브랜치에서 뻗어나간 가지를 굳이 사용할 필요 없다면 사용한다
- 복잡하게 얽힌 브랜치 트리를 단순화해 선형 히스토리를 유지하는 것이 가능하다
- 혼자서 작업하는 개인 브랜치에서 유용하다 직접 작업한 여러 커밋을 마치 하나의 작업이 이어진 것처럼 보여줄 수 있다
- ⚠️ 기존 커밋을 그대로 옮기는 것이 아니라, 동일한 변경 내용을 가진 새로운 Commit을 생성하기 때문에 Commit Hash가 달라진다
- ⚠️ 이미 공유된 원격 저장소에 다른 개발자가 작업 중인 브랜치에서는 사용하지 않는 것이 일반적 - Rebase는 과거의 커밋 히스토리 자체를 변경하기 때문에 공용 브랜치에서 사용하면 다른 팀원들의 로컬 저장소 히스토리와 엇갈리면서 충돌이 일어날 수 있다 ‼️
git merge:
- 병합된 브랜치의 모든 변경 사항 및 히스토리를 그대로 유지하면서, 병합 이후 두 갈래를 하나로 묶어주는 새로운 병합 커밋(Merge Commit)을 생성한다
- 이러한 과정은 두 경우에 사용한다
  - 기능 브랜치 병합(3-way merge): 별도의 브랜치에서 개발하던 기능이 완성되면, 이 기능을 포함하고 있는 브랜치를 main이나 master 브랜치와 병합해 기능을 통합한다

빠른 포워드 병합(fast-forward merge): 하나의 브랜치에만 변경 사항이 존재하고 있고 다른 브랜치는 변경되지 않은 상황에 발생한다 이러한 경우 Git은 단순히 브랜치 포인터를 앞으로 이동시킨다

어느 브랜치에서 어떤 변경이 일어났는지, 언제 브랜치가 합쳐졌는지 명확히 알 수 있다
기존 히스토리를 손대지 않고 보존하기 때문에 협업 시 안전하다
여러 개발자가 함께 작업하는 공용 브랜치(예: main, develop)의 작업물을 합칠 때 사용한다
다만 대규모 프로젝트, 다수의 개발자가 동시에 작업한다면 수많은 가지치기, 병합 커밋들이 얽혀 히스토리 그래프가 복잡해질 수 있다

구분	Merge	Rebase
히스토리 형태	비선형(브랜치 흔적 보존)	선형으로 깔끔하게 유지
병합 커밋 생성	⭕️	❌
커밋 해시 변경	❌	⭕️
공용 브랜치 사용	안전	위험할 수 있다
충돌 처리	1회	커밋별 처리

2. Git Fetch vs Git Pull : 원격 변경사항 가져오는 방법

git fetch와 git pull의 차이점을 설명하고, 각각을 사용하는 것이 적절한 상황을 설명해주세요.

git fetch와 git pull은 원격 저장소(Remote Repository)의 최신 변경 사항을 로컬로 가져오는 명령어

이들은 merge 여부에서 차이 나타나는데,

git fetch는 병합하지 않지만 git pull은 병합한다는 점에서 다르다

fetch는 원격 저장소의 변경 사항들을 우선 로컬로만 가져오는 방법으로

다른 개발자가 푸시한 내용을 로컬로 가져오고 싶을 때 사용한다

git pull은 원격 저장소를 가져와 합치는 방법이다

더 자세히 살펴보면,

git fetch:

원격 저장소의 새로운 커밋, 브랜치 등의 정보를 로컬로 가져오고 현재 작업 중인 로컬 브랜치에 이 변경된 데이터를 Git에 병합하거나 커밋하지 않는다
기존 작업 내역을 변경하지 않아 안전하게 현재의 작업 내역을 유지하면서 원격 저장소의 변경사항 확인 가능하다
필요한 경우 git fetch 이후, git diff 명령어로 원격 코드와 로컬 코드 간 변경 사항을 검토한 뒤, 수동으로 병합(git merge)할 수 있다

git pull:
- git fetch + git merge 가 결합된 명령어
- 원격 저장소에서 최신 변경사항을 로컬 저장소로 가져와 작업 중인 로컬 브랜치에 해당 변경사항을 병합(Merge)한다
- 원격 저장소의 최신 변경 사항을 로컬 브랜치에 빠르게 동기화할 수 있다
- 이때 로컬 파일이 즉시 변경되기 때문에 원격과 로컬 사이 충돌이 발생하지 않도록 주의가 필요하다
- 로컬에서 작업 중인 브랜치에 커밋되지 않은 변경사항이 있을 경우, git pull 실행하기 전에 반드시 작업 내역에 대한 커밋(git commit) 또는 git stash가 우선되어야 한다
- git pull —rebase 옵션을 이용하면 merge 대신 rebase로 통합할 수 있다

참고자료:

https://www.freecodecamp.org/korean/news/git-fetch-vs-pull/

Git Fetch와 Git Pull 명령어의 차이점

Git pull과 fetch는 Git 사용자가 자주 사용하는 명령어입니다. 이 기사에서는 두 명령어의 차이점을 알아봅니다. 본격적인 이야기에 앞서 '클론'이란 무엇일까요? 클론 저장소(clone repository)는 원격

www.freecodecamp.org

[Git] 이미 올라간 PR 수정하는 방법 (commit--amend, push -f)

hisjeans — Wed, 24 Jun 2026 09:36:14 +0900

작업 중 PR을 올렸는데 아차 싶었던 경험

문제 상황

@PathVariable 로 List<UUID>를 받으려고 했지만 API 경로가 동일하게 매핑되어 “Ambiguous handler methods mapped” 에러가 발생했다

즉, 단건/다건 조회 메서드의 경로가 충돌하여 이를 해결하지 못하고 PR을 미완성으로 제출하게 되었다

다음 미션으로 넘어가서 다른 요구사항을 먼저 해결한 뒤, 코드를 수정해보니 바이너리 파일 업로드에 성공하였다

따라서 기존에 올린 PR의 내용에 변경이 필요한 상황이 되었다

현재 상황은 이미 다음 미션인 sprint5가 분기된 상태이다

하지만 이미 PR이 올라간 sprint4 브랜치에 수정이 필요하기 때문에 아래와 같이 해결해야 한다

✅ 해결 방법

1. 이전 PR을 올린 sprint4 브랜치를 체크아웃한다

2. 다음으로 수정이 필요한 파일을 고치고, 본인은 Postman에서 새롭게 export한 파일도 InteliJ에 추가해주었다

3. 이제 터미널에서 아래 명령어를 입력한다

git add [수정한 파일 "BinaryController.java"의 경로(예: src/main/..../BinaryController.java)]

git add [포스트맨에서 새롭게 export한 json 파일명]

git commit --amend --no-edit
# 새로운 커밋을 추가하는 대신 가장 최근 커밋에 덮어쓴다

이전 커밋인 "@Controller 를 이용해 API 구현" 에 덮어쓰는 것을 확인할 수 있다

다음으로 아래 명령어를 입력한다

git push -f origin sprint4
# --amend로 커밋 히스토리가 변경되었기 때문에 강제 push가 필요하다
# ⚠️ 혼자 작업하는 브랜치에서만 사용해야 한다 
# 협업하는 브랜치에서 사용할 경우 다른 사람의 작업 또한 덮어씌워지는 문제가 발생할 수 있다‼️

위 과정을 통해 이미 올라간 PR을 수정할 수 있었다

이제 다음 미션을 위한 브랜치인 sprint5로 체크아웃하여 작업을 이어나가면 된다

[Git] Atomic Commit과 좋은 커밋 메시지 작성법

hisjeans — Fri, 5 Jun 2026 18:13:41 +0900

Atomic Commit

Atomic commit은 작지만 완전한 하나의 기능을 포함하는 커밋을 의미한다

“Atomic”이란 원자처럼 분할할 수 없는 최소의 단위라는 뜻을 가지며,

이는 커밋도 마찬가지로 최소한의 변경 사항만을 담아야 함을 뜻한다

개념

Atomic commit 전략은 큰 변경사항을 작은 단위로 분리하여 커밋하는 것을 말한다

이렇게 함으로써 각 커밋이 하나의 완전한 변경사항을 나타내게 되며,

이는 코드 리뷰를 용이하게 하고 이해하기 쉬운 이력을 만든다

또한 Atomic commit을 사용하면 특정 변경 사항이 문제를 일으킬 경우

해당 커밋만을 쉽게 되돌릴 수 있어 문제 해결이 용이해진다

예시

예를 들어, 새로운 기능을 추가하고 버그를 수정했다고 가정해보자

이 두 가지 변경 사항을 한 번의 커밋에 포함시키는 대신,

각각을 별도의 커밋으로 만드는 것이 좋다

1. 새로운 기능 추가에 관한 커밋

git add new_feature_file
git commit -m "Add new feature"

2. 버그 수정에 관한 커밋:

git add bug_fix_file
git commit -m "Fix bug in existing feature"

각 커밋은 각각 하나의 완전한 변경 사항을 나타내므로,

이는 Atomic commit 원칙을 따른다

이렇게 하면, 나중에 문제가 발생했을 때 어떤 커밋이 문제를 일으켰는지 쉽게 파악할 수 있다

정리

Atomic commit은 코드의 변경 사항을 작은 단위로 분리하여 커밋하는 것으로,

코드의 이력을 이해하고 관리하게 쉽게 만든다

또한 문제가 발생했을 때 특정 커밋을 쉽게 되돌릴 수 잇어 문제 해결이 쉬워진다

좋은 커밋 메시지 작성하기

"please enter the commit message"

커밋 메시지는 반드시 작성해야한다

좋은 커밋 메시지는 코드의 이해를 돕고 프로젝트의 이력을 명확하게 만드는데 크게 돕는다

다음과 같은 원칙들을 따라 좋은 커밋 메시지 작성할 수 있다(권장사항)

1. 제목과 본문 분리하기

제목과 본문은 빈 줄로 분리해야 한다

이는 Git의 명령 줄 도구뿐만 아니라 많은 웹 기반 도구들도 이 형식을 사용하므로 중요한 원칙

2. 제목 줄은 간결하고 명확하게

제목 줄은 가능한 50자 이내로 작성하고, 큰 변화를 요약하는 것이 좋다

또한, 제목의 마지막에 마침표를 찍지 않아야 한다

3. 제목 줄에 명령문을 사용 - 과거시제 보다 현재시제로 작성

제목 줄은 명령문으로 작성하는 것이 좋다

(”Add feature” not “Added feature” or “Adds feature”)

이는 많은 Git 도구에서 사용하는 규약

4. 본문에는 “무엇을” “왜” 바꾸었는지 설명

본문에는 “무엇을” 변경했는지 보다 “왜” 변경했는지 설명하는 것이 좋음

코드는 “무엇을” 변경했는지를 설명해주지만, “왜” 변경했는지는 코드만으로 이해하기 어렵기 때문

5. 본문을 72자 정도로 제한

Git은 자동으로 메시지를 72자로 줄이지 않으므로,

직접 줄 바꿈을 추가하여 본문의 각 줄이 72자가 넘지 않도록 하는 것이 좋다

6. 이슈 트래커 ID 참조

관련된 이슈나 버그 트래커 ID를 참조하면, 커밋과 이슈 사이의 관계를 명확하게 할 수 있다

좋은 커밋 메시지를 작성하는 것은 프로젝트의 관리를 쉽게 하고,

다른 참여자들이 프로젝트를 이해하는 데 도움된다

이 원칙들은 좋은 커밋 메시지를 작성하는 기본적인 방법론을 제공하지만,

특정 프로젝트나 팀에서는 자체적인 규칙을 가질 수 있으므로

해당 규칙을 따르는 것이 중요

직전 커밋 수정: git commit —amend

git commit —amend 명령어는 가장 최근의 커밋을 수정하는 데 사용

이 명령어를 사용하면 커밋 메시지를 변경하거나,

실수로 누락된 파일을 추가하거나,

잘못된 변경사항을 수정할 수 있다

사용 예시

아래는 git commit —amend 명령어의 몇 가지 사용 예시

1. 커밋 메시지 수정

커밋 메시지를 수정할 수 있는 텍스트 에디터가 열린다

git commit --amend

기존의 커밋 메시지가 표시되어, 이를 수정한 후 저장하고 에디터를 닫으면 커밋 메시지가 변경된다

2. 커밋에 파일 추가

만일 커밋을 생성한 후에 추가로 커밋에 포함시키려는 파일이 있다면,

해당 파일을 스테이징한 후 git commit —amend 명령어를 실행하면 된다

git add forgotten_file
git commit --amend

새로 추가된 파일이 최근의 커밋에 포함되며,

커밋 메시지를 수정할 수 있는 텍스트 에디터가 열린다

3. 변경 사항 수정

또한, 이미 커밋한 변경사항에 오류가 있어 수정이 필요한 경우에도 git commit —amend 명령어 사용 가능

⚠️ 주의사항

git commit —amend 명령어는 현재 브랜치의 커밋 이력을 변경한다

따라서 이 명령어를 실행한 후에는 기존 커밋에 대한 참조를 잃게 된다

이는 혼자 작업하는 경우에는 문제가 되지 않지만,

다른 사람들과 협업하는 상황에서는 주의가 필요하다

다른 사람들이 이미 이 커밋을 기반으로 작업을 진행하고 있었다면,

그들의 작업과 병합하는 과정에서 문제 발생 가능하다

실습

1. 3개의 파일의 텍스트를 고쳐서 수정상태로 만들자

이 중에 2개만 add해서 staging

커밋을 하는데 의도적으로 커밋 메시지에 오타를 내자

‘git log —oneline’

2. 원래는 파일 3개를 staging 해야 했지만 2개만 했고 커밋메시지도 오타가 났다

이런 경우 amend 옵션을 사용해 직전 커밋을 수정할 수 있다

amend를 사용하면 커밋의 해시값이 변경되어 다른 사람의 작업을 방해할 수 있으니 주의!!!

e52549b ➡️ 4fe1bf9

참고자료

https://cbea.ms/git-commit/

How to Write a Git Commit Message

Commit messages matter. Here's how to write them well.

cbea.ms

Java 레이어드 아키텍처 설계 - Repository, Service 패턴 실습

hisjeans — Fri, 5 Jun 2026 10:42:57 +0900

스프린트 미션 2

디스코드 서비스를 활용해보며 각 도메인 모델에 필요한 정보를 도출하고

이를 Java Class로 구현해보았다

사용자, 메시지, 채널을 임의로 생성하였다

사용자, 메시지 수정 및 조회 (의도적으로 공백을 넣어 오류 메시지가 출력되도록 하였다)

채널 수정 및 조회 / 사용자, 메시지, 채널 삭제

구현하며 받은 코드 리뷰를 다음과 같이 정리했다

코드 리뷰 ➡️ 개선 코드

한번 선언된 후 변경되지 않는 값은 어떻게 표현하는 게 좋을까?

private UUID id; // 객체 식별

⬇️

final 키워드를 이용해 표현하자 ‼️

private final UUID id;

PR 올릴 때는 불필요한 로깅 삭제해야 한다

System.out.println("ESC...");

가독성이 좋은가?

if(newType!=ChannelType.PRIVATE&&newType!=ChannelType.PUBLIC) {

⬇️

띄어쓰기로 구분해 읽기 더 좋게 작성하자

if(newType != ChannelType.PRIVATE && newType != ChannelType.PUBLIC)

if문으로 오류 메시지를 리턴하는 게 현재 로직에서 적합한가?

    private String normalizeUserName(String newUserName){
        if(newUserName.isBlank()){
            return "조심하세요! 공백은 불가능합니다...(현재 입력이 \\""+newUserName+"\\" 입니다)";
        }
        return newUserName;
    }

⬇️

throws 통해 Exception 던지는 게 더 적합한 로직‼️

    private String normalizeUserName(String newUserName){
        if(newUserName.isBlank()){
            throw new IllegalArgumentException("사용자 이름은 공백일 수 없습니다...");
        }
        return newUserName;
    }

다른 유효하지 않은 값이 들어왔을 때 또한 throw를 통해 즉시 중단시켜 처리하자

    // 사용자 이메일 입력이 잘못 들어왔을 때
    private String normalizeEmail(String newEmail){
        if(!newEmail.contains("@")){
            throw new IllegalArgumentException("이메일 형식을 준수해주세요...");
        }
        return newEmail;
    }

    // 메시지
    // 메시지 내용이 공백일 때
        private String normalizeContent(String newContent){
        if(newContent.isBlank()){
            throw new IllegalArgumentException("메시지 내용은 공백일 수 없습니다...");
        }
        return newContent;
    }

	// 채널ID가 null일 때
    private UUID normalizeChannelId(UUID newChannelId){
        if(newChannelId==null) {
            throw new IllegalArgumentException("채널ID는 null일 수 없습니다...");
        }
        return newChannelId;
    }

	// 채널
    // 채널 이름이 공백일 때
        private String normalizeName(String newName){
        if(newName.isBlank()){
            throw new IllegalArgumentException("채널명은 1자에서 100자 사이여야 해요 채널 이름은 공백이 될 수 없습니다...");
        }
        return newName;
    }

	// 채널 타입이 PRIVE과 PUBLIC이 아닐 때
    private ChannelType normalizeChannelType(ChannelType newType){
        if(newType != ChannelType.PRIVATE && newType != ChannelType.PUBLIC) {
            throw new IllegalArgumentException("채널 타입은 PRIVATE과 PUBLIC만 사용 가능합니다...");
        }
        return newType;
    }

파일명+경로 표현

 private final Path channelPath =Path.of("data/channels.csv");

⬇️

파일명만 static하게 상수로 표현하고

경로를 포함한 파일명은 파일을 읽는 부분에서 처리하는 방법이 올바른 것이다

 private static final String channelFile = "channels.csv";
 // 파일명만 static하게 상수 표현

public Channel createOne(Channel channel) throws IOException{
	Path channelPath=Path.of("data", channelFile); 
    // 경로 포함한 파일명은 파일을 읽는 부분에서 처리

Repository 계층에서 read, create 키워드 선호할까?

@Override
public Message createOne(Message message) throws IOException{

@Override
public Optional<Message> readOne(UUID id) throws IOException{

@Override
public List<Message> readAll() throws IOException{

⬇️

Repository 계층에서는 read, create < find, save 키워드를 선호한다

@Override
public Message saveOne(Message message) throws IOException{

@Override
public Optional<Message> findOne(UUID id) throws IOException{

@Override
public List<Message> findAll() throws IOException{

서비스 계층에서 메서드명

@Override
public Channel editOne(UUID id, ChannelType newType, String newName, Long updatedAt)
	throws IOException{

⬇️

물론 edit도 좋은 동사로 사용될 수 있지만

보통의 서비스 계층에서는 createChannel, makeChannel 같은 메서드명을 사용하는 것이 좋다❕

다만 현재 생성 로직에서 create 키워드를 사용하고 있고 update로 필드를 수정하는 함수가 정의되어 있기 때문에

우선 editChannel로 변경하였다

@Override
public Channel editChannel(UUID id, ChannelType newType, String newName, Long updatedAt) 
	throws IOException {

➕ 코드 외 변경사항

불필요한 주석은 제거하고 PR 보내자 ‼️

불필요한 공백은 사용하지 않는다

잘 챙긴 부분

public interface ChannelRepository{

    Optional<Channel> readOne(UUID id) throws IOException;

정리

- PR 보낼 때는 필요한 부분만 정리해 보내야 한다(불필요한 주석, 로깅 삭제)

- 항상 변화는 존재한다 처음 만들었던 기능에서 변화나 수정은 항상 필요하다

다만 변경과 수정이 일어났을 때 최소한의 비용으로 코드를 구성하는 것이 좋다

- 변화가 있을 거라는 가정을 기반으로 코드 작성해야 한다

- 객체지향 SOLID 잘 이해해야한다 그만큼 많은 공부가 필요하다

Basic Git Workflow : Add, Commit

hisjeans — Wed, 20 May 2026 17:34:08 +0900

Git Status 명령어

git status 명령어는 Git 레포지토리의 상태를 확인하는데 사용되는 명령어

git status 명령어를 통해 어떤 파일이 수정되었는지,

어떤 파일이 아직 스테이징되지 않았는지,

현재 어떤 브랜치에 위치해 있는지 등의 정보 확인 가능

git에 의해 추적되지 않은 명령어… 알려줌

사용법

git status 명령어를 실행하면 현재 레포지토리의 상태 출력

git status

위와 같은 명령어를 실행하면 Git은 아래와 같은 종류의 정보를 출력

현재 체크아웃된 브랜치 이름
스테이징 영역에 추가된 파일 (Changes to be committed)
스테이징 영역에 추가되지 않은 수정된 파일들 (Changes not staged for commit)
Git에 의해 추적되지 않는 새로운 파일들 (Untracked files)

특징

git status 명령어는 “safe” 명령어로 간주

즉, 이 명령어는 레포지토리에 어떠한 변경도 가하지 않고 오직 정보만을 제공

따라서 언제든지 사용 가능한 안전한 명령어(언제든 입력해도 위험 없음)

정리

git status 명령어는 Git 사용자에게 현재 레포지토리의 상태에 대한 중요한 정보를 제공

이 명령어를 사용하면 현재 어떤 파일이 수정되었는지,

어떤 파일이 스테이징 영역에 있는지,

현재 어떤 브랜치에 있는지 등의 정보를 쉽게 파악 가능

이는 코드의 버전 관리를 더욱 효율적으로 진행할 수 있게 도움

Git에서 버전을 생성하는 흐름: add, commit

Git에서 소스코드의 변경사항을 추적하고 새로운 버전을 생성하는 기본적인 흐름은 git add와 git commit 명령어 사용

1. git add: 변경된 파일들을 스테이징 영역(또는 인덱스)에 추가하는데 사용

git add filename

또는, 현재 디렉터리의 모든 변경사항을 스테이징 영역에 추가하려면 아래와 같이 실행 가능

git add .

이렇게 스테이징 영역에 추가된 파일들은 다음 커밋에 포함될 준비가 된 것으로 간주

2. git commit: 스테이징 영역에 추가된 변경 사항들을 실제로 레포지토리에 저장(커밋)하는 데 사용

git commit -m "Your commit messge"

커밋 생성할 때는 해당 변경사항에 대한 설명을 담은 커밋 메시지를 함께 작성해야 함

Working Tree, Staging Area, Repository의 구조

기록하기 위해

깃은 저장소 총 3개의 영역으로 나눔

1. Working Tree (작업 트리):

실제로 파일을 수정하는 작업 공간

즉, 파일을 생성, 수정, 삭제하는 모든 작업이 이루어지는 공간

2. Staging Area (스테이징 영역 또는 인덱스):

git add 명령어를 사용해 변경된 파일들이 먼저 추가되는 임시 저장 공간

이곳에 추가된 변경사항들은 다음 git commit 명령어 실행 시 레포지토리에 저장

3. Repository (레포지토리):

git commit 명령어가 실행되면, 스테이징 영역에 있는 변경사항들이 레포지토리에 저장

히스토리로 남김

레포지토리는 프로젝트의 모든 버전과 이력 정보를 저장하는 공간으로, .git 디렉토리 안에 위치

이 세 가지 영역은 Git의 핵심적인 부분으로서, Git의 버전 관리 시스템에서 중요한 역할을 수행

이들을 통해, 개발자는 소스코드의 변경사항을 효과적으로 관리하고 특정 시점의 버전으로 쉽게 되돌아갈 수 있음

실습

1. 이전 챕터에서 만든 git repository에서 시작

cd 명령어로 이동

2. git status 명령어를 쓰면 아직 어떠한 변경사항도 없다고 나옴

git status

3. 새로운 파일 2개 생성

 touch MC-Info.txt Guest-Info.txt	# 텍스트 파일 생성
 ls

4. 다시 git status를 입력하면 추가된 파일 2개를 추적하고 있는 것을 확인할 수 있음

git status

5. 첫번째 파일을 Add해 Staging Area에 올림

그리고 난 뒤 git status를 다시 확인

git add MC-Info.txt
git status

6. 두번째 파일도 add하고 git status 확인

7. 스테이징된 2개의 파일 묶음을 하나의 버전으로 생성하기 위해 git commit 명령어를 입력

git commit -m "#1. 뮤직뱅크 MC정보와 출연진 정보를 기록할 파일 추가!"

8. git log 명령어로 생성된 버전정보 확인

git log
# 기록 확인

(참고) commit id 이용해 원하는 시점으로 이동 가능

9. MC-Info.txt 파일을 열어 내용을 작성하고 저장 후 종료한 뒤 git status 입력

git status

untracked 파일은 추적되지 않은 것

modified 파일이 수정됨

10. 2번째 파일도 수정한 후 git status를 쳐보면 수정된 것을 추적하는 것을 볼 수 있음

git status

11. git add, git commit 명령어로 2번째 버전을 생성하고 git log로 확인

 git commit -m "#2_엠씨정보와 출연진 정보 등록”

12. 이런 식으로 버전을 2개 더 만들어보자

그리고 ‘git log —oneline’ 을 입력해 로그를 1줄로 출력해보자

git log —oneline //로그 한 줄로 확인 가능

(참고)

head 현재 위치 시점

Exercise

1. Shopping 이름의 새 폴더를 만듦

2. Shopping 폴더 내에서 새로운 git 저장소를 초기화 (이미 Git 저장소 안에 있는지 확인)

3. yard.txt 라는 새 파일을 만듦

4. groceries.txt 라는 또 다른 새 파일을 만듦

5. 두 개의 빈 파일을 포함한 커밋을 만듦

메시지는 “create yard and groceries lists” 로 함

6. yard.txt 파일에 다음 변경 사항을 추가

- 2 bags of potting soil
- 1 bag of worm castings

7. groceries.txt 파일에 다음 내용을 추가

- 4 tomatoes
- 6 shallots
- 1 fennel bulb

8. groceries.txt 파일의 변경 사항만을 포함하는 새로운 커밋을 만듦

커밋 메시지는 “add ingredients for tomato soup” 로 함

9. yard.txt 파일의 변경 사항만을 포함하는 두 번째 커밋을 만듦

커밋 메시지는 “add items needed for garden box” 로 함

10. 다음 줄을 groceries.txt 파일의 끝에 추가함

- couple of seed potatoes

11. yard.txt 파일에서 첫 번째 줄을 “2 bags of potting soil” 대신 “3 bags of potting soil” 로 변경

- 3 bags of potting soil
- 1 bag of worm castings

12. yard.txt 파일과 groceries.txt 파일의 변경 사항을 모두 포함하는 커밋을 만듦

메시지는 “add items needed to grow potatoes” 로 함

Git 명령을 사용해 커밋 목록을 표시

총 4개의 커밋이 보여야 함

Git Repository

hisjeans — Wed, 20 May 2026 16:17:56 +0900

Git Repository

Git Repository(레포지토리)는 Git에 의해 관리되는 프로젝트 디렉터리

레포지토리 안에는 프로젝트의 모든 파일과 각 파일의 수정 이력을 담은 정보 포함

레포지토리를 통해 Git은 프로젝트의 상태를 특정 시점으로 되돌릴 수 있거나, 변경 이력을 조회하거나, 다른 브랜치로 전환하는 등의 작업 수행

레포지토리의 주요 요소

Working Directory: 현재 작업 중인 프로젝트의 파일들이 위치하는 디렉터리
Staging Area(Indedx): 커밋하기 위해 선택한 파일들의 정보를 저장하는 영역, 이 영역을 통해 원하는 파일들만을 커밋에 포함 시키는 것이 가능
.git Directory(Repository): Git의 메타데이터와 객체 데이터베이스를 저장하는 디렉터리, 이 디렉터리를 복사하면 프로젝트의 모든 정보와 히스토리를 복사하는 것과 같음

레포지토리의 유형

Git 레포지토리에는 크게 두 가지 유형 존재

로컬 레포지토리: 개발자의 컴퓨터에 저장된 레포지토리로 여기서 개발자가 코드를 수정하고, 커밋을 생성하며, 브랜치를 관리
원격 레포지토리: 인터넷 상에 존재하는 레포지토리로 여기서 개발자들은 코드를 공유하고 협업을 진행, GitHub, GitLab, Bitbucket 등의 서비스가 이에 해당

로컬 레포지토리 생성

git init 명령어, Git 레포지토리를 초기화하거나 새로운 Git 레포지토리를 생성하는데 사용되는 명령어

기본적으로 폴더 1당 저장소 1

새 폴더를 생성해보자

(참고) option+command+C: 주소 복사

cd	# option+command+C 폴더 이동
ls	# 폴더 안 파일 리스트 확인 현재는 아무것도 뜨지 않을 것
git status	# 에러 발생, 현재 git 저장소 아니기 때문

사용법

기본적으로 git init 명령어는 현재 작업 중인 디렉터리에 새로운 Git 레포지토리를 생성하거나 초기화

즉, git init 명령어를 실행하면 현재 디렉터리에 ‘.git’ 라는 새로운 하위 디렉터리가 생성되는데,

이 디렉터리는 레포지토리의 모든 메타데이터를 담고 있음

git init	# 깃 저장소 생성, '.'숨김 파일
		# ->command+shift+. 숨겨진 폴더 확인 가능, 추적 시 처음 한 번만 입력

git init는 또한 명령어 뒤에 디렉터리 이름을 추가하면,

해당 이름의 새 디렉터리를 생성하고 그 안에 새로운 Git 레포지토리를 생성 가능

예:

$ git init my_project

‘my_project’ 라는 이름의 새 디렉터리를 생성하고, 이 디렉터리를 Git 레포지토리로 초기화

특징

git init 명령어를 실행하면, 새로운 Git 레포지토리가 생성되지만 버전 관리가 이루어지는 파일은 없음

버전 관리를 시작하려면, 먼저 파일을 생성하거나 수정한 후

git add 명령어를 사용해 변경사항을 스테이징 영역에 추가하고,

git commit 명령어를 사용해 변경사항을 레포지토리에 저장해야 함

git init는 로컬에서 작업하는 레포지토리를 생성하는 데 사용되며,

원격 레포지토리(예: GitHub)에 올리려면 추가적인 작업 필요

실습

원하는 디렉토리에서 폴더를 하나 생성하고 해당 폴더로 이동

mkdir MusicBank && cd MusicBank

2. ‘git init’ 명령어를 입력해 해당 폴더를 git repository로 만들어 버전관리 시작

3. ‘ls -a’ 명령어를 입력해 숨김폴더인 ‘.git’ 폴더가 생성되었는지 확인

.git 폴더

.git 폴더는 Git 레포지토리의 핵심 부분

모든 Git의 메타데이터와 데이터를 저장하는 곳

.git 디렉토리가 존재하는 디렉토리는 Git의 관리 아래에 있는 것으로 간주

git init 명령을 통해 Git 레포지토리를 초기화하면, .git 디렉토리가 생성되고

그 안에는 아래와 같은 여러 하위 디렉토리와 파일들이 생성

1. HEAD:

현재 체크아웃된 커밋을 가리킴

2. config:

레포지토리 설정을 저장하는 파일,

이 파일에는 사용자 정보, 원격 레포지토리의 URL, 그 외의 레포지토리 관련 설정이 저장

3. description:

레포지토리에 대한 설명을 저장하는 파일

Git 웹 인터페이스에서 이 파일의 내용을 레포지토리 설명으로 사용하지만,

일반적으로 로컬 레포지토리에서는 이 파일이 사용되지 않음

4. hooks:

Git 훅(hook) 스크립트를 저장하는 디렉토리

이 스크립트들은 특정 Git 이벤트가 발생할 때 실행

5. info:

전역 .gitignore 파일 등의 일반적인 정보를 저장하는 디렉토리

6. objects:

모든 데이터(커밋, 트리, 블롭 등)를 저장하는 디렉토리

7. refs:

브랜치와 태그에 대한 참조(reference)를 저장하는 디렉토리

.git 디렉토리는 프로젝트의 모든 이력 정보를 담고 있기 때문에,

이 디렉토리를 복사하면 프로젝트의 모든 버전 정보와 히스토리를 복사하는 것과 같음

하지만 이 디렉토리는 직접 수정하거나 변경하는 것이 아니라 Git 명령어를 통해 관리해야 함

그렇지 않으면 레포지토리가 손상될 수 있음

⚠️ 주의사항!!

.git 디렉토리 직접 수정하거나 변경 금지

1. git init 명령어는 버전관리를 시작할 때 최초 1번만 입력할 것!!

이미 버전관리가 시작된 폴더를 다시 init하는 실수를 저지르지 말 것!

2. git init을 하면 .git 폴더가 생성되는데 이 폴더는 지우지 말자

.git 폴더가 삭제되면 그동안 버전 관리했던 이력이 모두 소실됨
그래서 안전을 위해 숨김 처리가 되어있는 것

3. git init을 했던 폴더의 하위 폴더에 또 다시 git init을 하지 말 것!!

git init을 하면 .git이 생기고 이것은 하위 폴더까지 전부 버전관리를 하겠다는 의미
하위폴더에서 또다시 git init 명령어로 .git 폴더를 생성하면 중첩으로 인해 문제가 발생
실수로 하위 폴더에서 git init을 실행했다면 .git 폴더를 rm -rf 명령어로 삭제하자

4. github와 같은 원격 저장소에서 clone한 저장소에는 gitinit 실행하지 말 것

원격저장소에서 내려받은 폴더는 기본적으로 버전관리가 되고 있는 상태
또 다시 init 할 필요가 없음

기본 터미널 명령어

hisjeans — Wed, 20 May 2026 15:13:26 +0900

간단한 리눅스 명령어

ls : 하위 폴더, 파일 보기
ls -l (ll) : 하위 폴더, 파일 자세히 보기
pwd : 현재 위치한 폴더 출력
cd : 원하는 경로로 이동
mkdir 폴더명 : 새 디렉토리 생성
rm -rf 폴더, 파일 : 폴더, 파일 삭제

pwd: 현재 위치한 디렉토리 경로 출력

pwd는 print working directory의 약어로 현재 내가 보고있는 폴더의 경로를 알려줌

( 참고 ) '~' 은 루트 디렉토리로 보통 사용자 계정 경로가 지정됨

ls: 현재 위치한 디렉토리 안에 있는 폴더와 파일 목록 보기

ls는 list의 약어이며 현재 위치한 폴더 내부에 있는 하위폴더, 파일들의 정보 출력

ls -l: ls 명령어 뒤에 -l 옵션을 주면 권한 같은 자세한 정보 표시

ls -a: -a 옵션을 주면 숨김폴더, 파일의 정보가 추가로 출력

cd: 폴더로 이동

cd 명령어는 change directory의 약어로 폴더를 이동할 때 사용
대개 ls 명령어로 하위 폴더를 확인한 뒤 사용

ls

cd Desktop
ls

cd .. : cd .. 으로 상위 폴더 이동

pwd //현재 위치한 디렉토리 경로 출력
cd .. //상위 폴더로 이동

cd + 탭키 :

이동 가능한 목록 출력

ls 명령어 없이 하위 폴더 목록 확인 가능해 유용

cd 
Display all 127 possibilities? (y or n) y

cd + 부분 입력 후 탭 :

cd 명령어 입력 후 특정 알파벳을 입력하고 탭키를 누르면 해당 알파벳으로 시작하는 목록만 출력

만일 특정 알파벳으로 시작하는 폴더가 1개라면 자동완성으로 단어 완성

cd D

clear: 현재 터미널 출력 내용 깨끗하게 지우기

화면 초기화

start . : 현재 위치한 폴더 열기 - for Windows

open . : 현재 위치한 폴더 열기 - for MacOS

현재 위치한 폴더를 운영체제 GUI로 열림
윈도우는 폴더가 열리며 Mac은 Finder가 열림

mkdir : 폴더 생성

mkdir은 make directory의 약어, 폴더 생성하는 명령어

mkdir -pv : -pv 옵션은 중첩구조로 폴더를 생성

mkdir -pv GirlGroup/NewJeans

touch : 파일 생성

touch OMG.txt
ls

rm 파일명 : 파일 삭제

ls

rm Ditto.txt
ls

rm -rf 폴더명: 폴더 삭제(⚠️ 주의 - 폴더 안에 모든 내용까지 함께 삭제)

cd ~Desktop/Artist
ls
rm -rf GrilGroup

(참고)

방향키: 이전 명령어로 이동 가능

git config --list //user name, user email 확인 가능

q 입력 → 나가기

Git Intro

hisjeans — Sat, 9 May 2026 13:58:33 +0900

#What is Git?

Git과 버전 관리 시스템(Version Control System)

Git이란?

Git은 소프트웨어 개발에서 사용되는 분산 버전 관리 시스템(Distributed Version Control System, DVCS) 중 하나

리너스 토발즈(Linus Torvalds)가 개발하였으며, 소프트웨어 개발에서 소스 코드 관리에 주로 사용

Git의 주요 목표는 속도, 데이터 무결성, 그리고 분산 시스템의 지원을 위한 완전한 분산을 포함해 비선형 작업 흐름을 지원하는 것

버전 관리 시스템(Version Control System, VCS)이란?

버전 관리 시스템(VCS)은 시간에 따라 문서나 소스 코드와 같은 정보의 변화를 기록하고, 특정 시점의 버전을 다시 불러올 수 있는 시스템

이런 시스템을 통해, 여러 개발자들이 동시에 같은 프로젝트에 작업을 할 수 있으며, 각 버전 간 차이점을 볼 수 있고, 이전 버전으로 되돌아갈 수 있으며, 원치 않는 변경을 쉽게 찾아낼 수 있음

VCS는 크게 두 가지 유형으로 나뉨

중앙집중식 버전 관리 시스템(Centralized Version Control System, CVCS): CVS, Subversion, Perforce 등, 이 시스템은 단일 서버가 모든 파일의 버전을 유지하고, 여러 클라이언트가 서버로부터 파일을 받아 사용
분산 버전 관리 시스템(Distributed Version Control Systems, DVCS): Git, Mercurial, Bazaar, Darcs 등, 이 시스템은 클라이언트가 서버의 파일을 ‘복제’, 이렇게 함으로써 네트워크에 접근할 수 없는 상황에서도 개발을 계속할 수 있고, 복잡한 브랜치 작업이 가능

VCS의 사용은 개발 팀의 효율성, 생산성을 크게 향상시키며, 코드의 안정성을 유지하고, 실수를 쉽게 복구할 수 있게 도움

Git의 중요성: 왜 개발자들은 Git을 사용해야 할까

Git은 개발 프로세스에서 중요한 도구

버전 관리: 개발 과정에서 지속적인 코드 변화를 추적하고 관리하기 위해 Git을 사용, 각각의 변경사항을 “커밋(commit)” 단위로 저장해 언제든지 특정 시점의 코드 상태로 돌아갈 수 있게 함, Git의 핵심 기능 중 하나는 프로젝트의 버전을 관리하는 것
협업 도구: Git을 통해 여러 개발자들이 동시에 같은 프로젝트 작업 가능, Git의 “브랜치(branch)” 기능은 개발자가 독립적으로 작업하는 동시에 프로젝트의 다른 부분에 영향을 주지 않도록 함, 개발이 완료된 후 이러한 변경사항들을 “병합(merge)”해 메인 코드에 반영하는 것이 가능
코드의 안정성 유지: 코드에서 심각한 오류가 발생할 경우, Git이 이전의 안정적인 상태로 쉽게 돌아갈 수 있도록 함, 이는 프로덕션 환경에서 큰 문제가 발생했을 때 빠르게 대응하는 것이 가능하게 하며, 프로젝트의 안정성을 유지하는데 중요한 역할
코드 리뷰 및 추적: Git을 사용해 어떤 개발자가 언제 어떤 변경사항을 만들었는지 추적하는 것이 가능, 이는 코드 리뷰 과정에서 매우 유용하고, 버그를 찾고 이해하는 데 또한 도움됨
배포 관리: Git으로 프로젝트의 여러 버전을 관리함으로써, 특정 버전에 대한 배포가 간편, 이는 Continuous Integration(CI) 및 Continuous Deployment(CD) 파이프라인과 함께 사용돼 효율적인 배포 관리 가능하게 함

즉,

Git은 개발자가 코드의 버전을 관리하고, 효과적인 협업과 코드의 안정성을 유지하며 코드 변경 사항을 추적하고 배포를 관리하는데 필수적인 도구

이러한 이유로 Git은 현대의 소프트웨어 개발 팀에서 필수적으로 사용하는 도구

Git은 기록을 남기는 것

#Git ≠ Github

Git:

분산 버전 관리 시스템(Distributed Version Control System, DVCS)

여러 개발자가 동시에 작업하는 것이 가능하도록 돕고, 오류가 발생했을 때 이전 버전으로 쉽게 되돌릴 수 있음

로컬 컴퓨터 관리, Git은 로컬 시스템에서 동작, 인터넷 없이 오프라인에서 또한 동작 가능

Github:

GitHub는 Git을 사용하는 프로젝트를 호스팅하는 웹 기반 서비스

개발자는 GitHub를 통해 소스 코드를 저장하고 공유하는 것이 가능

GitHub는 협업 도구를 제공해 다른 개발자들과 함께 코드를 개발하거나 수정할 수 있음

GitHub은 Git의 기능을 활용해 버전 관리하는 것이 가능하며 추가적으로 다음 같은 기능 제공

이슈 트래킹: 버그 리포팅, 기능 요청, 이 외 프로젝트와 관련된 문제들을 트래킹하고 관리
풀 리퀘스트: 개발자 자신이 수정한 코드를 원본 저장소에 병합(merge)하는 것을 요청할 수 있음
코드 리뷰 과정 용이하게 함
GitHub Actions: CI/CD(Continuous Integration/Continuous Deployment)와 같은 자동화 프로세스 쉽게 구현하도록 도움

즉,

Git은 소스 코드의 버전 관리를 위한 도구

GitHub은 Git을 사용하는 프로젝트를 온라인 상에서 공유하고 협업하는 서비스

Git은 로컬에서 동작하지만, GitHub은 인터넷 연결 필요

#Git 설치

Git 사용하는 2가지 방법

CLI: 명령어 기반 버전 관리, 터미널 작업
GUI: 그래픽 기반 버전관리 툴, 소스트리, GitHub Desktop, Git Kraken 등

Git 설치 for MacOS

대개 최신 맥북에는 git 설치되어 있음

터미널을 열어 git —version 확인

git --version

버전 확인 예

위처럼 버전 정보가 나온다면 설치된 것

처음 git 설치 후 필요한 설정

git의 버전관리 추적시스템에 의한 버전을 생성한 사람의 정보를 기록하기 위해서는

$ git config --global user.name "유저닉네임"	
# 닉네임은 github, gitlab에서 사용할 닉네임 추천

$ git config --global user.email "유저이메일"
# 이메일은 실제 github이나 gitlab 가입메일

if) 설치 시에 코드 에디터 설정을 vscode로 지정하지 않았거나 MacOS를 사용한다면

git config --global core.editor "code --wait" 
# vscode로 변경

MacOS에서 위 설정을 해도 vscode가 열리지 않는다면 직접 vscode를 실행시켜 “Command+Shift+P”를 입력하고 명령팔레트에 “shell command” 입력한 후 PATH code 명령 설치 선택
Github 원격 저장소를 가입할 때 로컬 저장소에 등록한 이메일로 가입하는 것 권장

browser의 동작

hisjeans — Wed, 29 Apr 2026 16:33:54 +0900

‍♀️ 들어가기 전…

웹을 통해 전달되는 데이터는 어딘가에서 해석되어야 함

서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 ‘Browser’

Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있음

이런 작업의 대부분은 브라우저 내부에서 이뤄지기 때문에 반드시 알아야 하는 것은 아님

하지만 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있음

학습 목표

HTML파일이 올 때 브라우저가 어떻게 렌더링과정을 거쳐서 화면에 보이게 되는지 간단히 이해

핵심 개념

Web Browser Rendering

학습내용

(참고)

브라우저 접속하면 소스 보기 가능

브라우저들이 알아서 해결해주었기 때문에 브라우저 동작 방식에 대해 개발자들도 잘 알 필요가 없다고 생각해옴

하지만 이제 브라우저 동작에 대해 궁금함을 갖게 된 이유는 브라우저의 동작이 대개 숨겨져있고 개발한 코드를 브라우저가 다르게 해석해 보여주는 것 같다는 느낌을 받게 됨

그리고 소스코드가 브라우저에서 빨리 실행되게 하려면 어떻게 해야 될까에 대한 관심을 갖게 되면서 브라우저의 동작에 대해 알고 싶게 됐고 브라우저가 어떻게 동작하는지에 대한 글들이 조금씩 소개되기 시작함

브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있음

자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해짐

브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정함

과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세 따름

브라우저의 사용자 인터페이스는 서로 닮아 있는데 일반적으로 다음 같은 요소들

URI를 입력할 수 있는 주소 표시 줄
이전 버튼과 다음 버튼
북마크
새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
홈 버튼

브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 수 년간 서로의 장점을 모방하면서 현재에 이르게 됨

HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았음

물론 파이어폭스의 다운로드 관리자와 같이 브라우저에 특화된 기능도 있음

브라우저의 기본 구조

브라우저의 주요 구성 요소는 다음과 같음

사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어, 소스코드 실행해 화면에 보여줄 수 있는 엔진, 브라우저 소프트웨어 동작시키는 핵심 엔진
렌더링 엔진 - 요청한 콘텐츠를 표시 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함, 위치를 잡고 색칠해주는 엔진
통신 - HTTP 요청과 같은 네트워크 호출에 사용됨 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
자료 저장소 - 이 부분은 자료를 저장하는 계층 쿠키를 저항하는 것과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있음 HTML5 명세에는 브라우저가 지원하는 ‘웹 데이터 베이스(https://web.dev/?hl=ko)’가 정의되어 있음

브라우저의 주요 구성 요소(출처: https://d2.naver.com/helloworld/59361)

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하는 것이 주목할만함

각 탭은 독립된 프로세스로 처리됨

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일

렌더링 엔진은 HTML 및 XML 문서와 이미지 표시할 수 있음

물론 플로그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있음

렌더링 엔진들

파이어폭스와 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작

파이어폭스는 모질라에서 직접 만든 게코(Gecko)엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 엔진을 사용

(참고)

크로미움은 V8+Blink을 포함한 구글 브라우저 오픈소스 애플리케이션 또한 크롬은 이 크로미움을 기반으로 만들어짐

크로미움은 여전히 렌더링 엔진으로 Blink를(webkit에서 fork된) 사용

Blink라는 용어보다도 보통 크롬의 크로미움을 주로 이야기하지만, Blink가 크로미움으로 바뀐 것은 아님

웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진인데 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 가함(https://webkit.org/)

동작 과정

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB 단위로 전송

렌더링 엔진의 기본적인 동작 과정

렌더링 엔진의 동작 과정(출처: https://d2.naver.com/helloworld/59361)

렌더링 엔진은 HTML 문서를 파싱하고 “콘텐츠 트리” 내부에서 태그를 DOM(https://web.dev/articles/howbrowserswork?hl=ko)노드로 변환

그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱 스타일 정보와 HTML 표시 규칙은 “렌더 트리(https://web.dev/articles/howbrowserswork?hl=ko)”라고 부르는 또다른 트리 생성

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시됨

렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미

다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정

일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정 시작 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것

웹킷 동작 과정 예 ⭐️

웹킷 동작 과정 (출처:https://d2.naver.com/helloworld/59361)

인터넷에서 특정 정보를 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함

서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행해 화면에 표현하기 위한 해석기(Parser)들을 가지고 있음

브라우저마다 서로 다른 엔진 포함

HTML을 해석해 DOM Tree를 만들고, CSS를 해석해 역시 CSS Tree(CSS Object Model)을 만듦

이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정

DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합

이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있음

이후에 이렇게 구성된 Render Tree 정보를 통해 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정 거치게 됨

파싱과 DOM 트리 구축

파싱 일반

파싱은 렌더링 엔진에서 매우 중요한 과정이기 때문에 더 자세히 다룰 필요 있음

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미

파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부름

예를 들면 2+3-1과 같은 표현식은 다음과 같은 트리가 됨

수학 표현식을 파싱한 트리 노드(출처: https://d2.naver.com/helloworld/59361)

HTML 파서

HTML 파서는 HTML 마크업을 파싱 트리로 변환

HTML 문법 정의

HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있음

현재 버전은 HTML4와 초안 상태로 진행 중인 HTML5

문맥 자유 문법이 아님

파싱 일반 소개를 통해 알게 된 것처럼 문법은 BNF와 같은 형식을 이용하여 공식적으로 정의할 수 있음

모든 전통적인 파서는 HTML에 적용할 수 없음

파싱은 CSS와 자바스크립트를 파싱하는 데 사용됨 HTML은 파서가 요구하는 문맥 자유 문법에 의해 쉽게 정의할 수 없음

HTML 정의를 위한 공식적인 형식으로 DTD(문서 형식 정의)가 있지만 이것은 문백 자유 문법이 아님

이는 언뜻 이상하게 보일 수도 있는데 HTML이 XML과 유사하기 때문

사용할 수 있는 XML 파서는 많음

HTML을 XML 형태로 재구성한 XHTM도 있음

차이점은 HTML이 더 “너그럽다”는 점

HTML은 암묵적으로 태그에 대한 생략 가능

가끔 시작 또는 종료 태그 등을 생략

전반적으로 뻣뻣하고 부담스러운 XML에 반하여 HTML은 “유연한” 문법

이런 작은 차이가 큰 차이를 만들어 냄

웹 제작자의 실수를 너그럽게 용서하고 편하게 만들어주는 이것이야 말로 HTML이 인기가 있었던 이유

다른 한편으로는 공식적인 문법으로 작성하기 어렵게 만드는 문제가 있음

정리하자면 HTML은 파싱하기 어렵고 전통적인 구문 분석이 불가능하기 때문에 문맥 자유 문법이 아니라는 것

XML 파서로도 파싱하기 쉽지 않음

DOM

“파싱 트리”는 DOM 요소와 속성 노드의 트리로서 출력 트리가 됨

DOM은 문서 객체 모델(Document Object Model)의 준말

이것은 HTML 문서의 객체 표현이고 외부를 향하는 자바스크립트와 같은 HTML 요소의 연결 지점 트리의 최상위 객체는 문서(https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html)

DOM은 마크업과 1:1 관계를 맺음

<html>
	<body>
		<p>Helllo World<\\p>
		<div><img src="example.png" /></div>
	</body>
</html>

이것은 아래와 같은 DOM 트리로 변환할 수 있음

예제 마크업의 DOM 트리

HTML과 마찬가지로 DOM은 W3C에 의해 명세(www.w3.org/DOM/DOMTR)가 정해져 있음

이것은 문서를 다루기 위한 일반적인 명세인데 부분적으로 HTML 요소를 설명하기도 함

HTML 정의는 www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definitions.html 에서 찾을 수 있음

트리가 DOM 노드를 포함한다고 말하는 것은 DOM 접점의 하나를 실행하는 요소를 구성한다는 의미

브라우저는 내부의 다른 속성들을 이용하여 이를 구체적으로 실행

파싱 알고리즘

HTML은 일반적인 하향식 또는 상향식 파서로 파싱이 안되는데 그 이유는 다음과 같음

언어의 너그러운 속성
잘 알려져 있는 HTML 오류에 대한 브라우저의 관용
변경에 의한 재파싱 일반적으로 소스는 파싱하는 동안 변하지 않지만 HTML에서 document.write을 포함하고 있는 스크립트 태그는 토큰을 추가할 수 없기 때문에 실제로는 입력 과정에서 파싱이 수정됨

일반적인 파싱 기술을 사용할 수 없기 때문에 브라우저는 HTML 파싱을 위해 별도의 파서 생성

https://html.spec.whatwg.org/multipage/parsing.html

알고리즘은 토큰화와 트리 구축 이렇게 두 단계로 되어 있음

토큰화는 어휘 분석으로서 입력 값을 토큰으로 파싱 HTML에서 토큰은 시작 태그, 종료 태그, 속성 이름과 속성 값

토큰화는 토큰을 인지해서 트리 생성자로 넘기고 다른 토큰을 확인하기 위해 다음 문자를 확인함

그리고 입력의 마지막까지 이 과정을 반복

HTML 파싱 과정(출처: https://d2.naver.com/helloworld/59361)

CSS 파싱

HTML과 다르게 CSS는 문맥 자유 문법이고 소개 글에서 설명했던 파서 유형을 이용하여 파싱이 가능

웹킷 CSS 파서

웹킷은 CSS 문법 파일로부터 자동으로 파서를 생성하기 위해 플렉스와 바이슨 파서 생성기를 사용

파서 소개에서 언급했던 것처럼 바이슨을 상향식 이동 감소 파서를 생성

파이어폭스는 직접 작성한 하향식 파서를 사용

두 경우 모두 각 CSS 파일은 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함

CSS 규칙 객체는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함

CSS 파싱(출처: https://d2.naver.com/helloworld/59361)

DOM 트리와 렌더 트리의 관계

렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아님

예를 들어 “head” 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않음

또한 display 속성에 “none” 값이 할당된 요소는 트리에 나타나지 않음(visibility 속성에 “hidden” 값이 할당된 요소는 트리에 나타남)

여러 개의 시각 객체와 대응하는 DOM 요소도 있는데 이것들은 보통 하나의 사각형으로는 묘사할 수 없는 복잡한 구조

예를 들면 “select” 요소는 ‘표시 영역, 드롭다운 목록, 버튼’ 표시를 위한 3개의 렌더러가 있다 또한 한 줄에 충분히 표시할 수 없는 문자가 여러 줄로 바뀔 때 새 줄은 별도의 렌더러로 추가

여러 렌더러와 대응하는 또 다른 예는 깨진 HTML

CSS 명세에 의하면 인라인 박스는 블록 박스만 포함하거나 인라인 박스만을 포함해야 하는데 인라인과 블록 박스가 섞인 경우 인라인 박스를 감싸기 위한 익명의 블록 렌더러가 생성

어떤 렌더 객체는 DOM 노드에 대응하지만 트리의 동일한 위치에 있지 않음

float 처리된 요소 또는 position 속성 값이 absolute로 처리된 요소는 흐름에서 벗어나 트리의 다른 곳에 배치된 상태로 형상이 그려지는 대신 자리 표시자가 원래 있어야 할 곳에 배치

렌더 트리와 DOM 트리 대응(3.1). “뷰포트”는 최초의 블록이다 웹킷에서는 “RenderView” 객체가 이 역할을 한다 (출처: https://d2.naver.com/helloworld/59361)

배치

렌더러가 생성되어 트리에 추가될 때 크기와 위치 정보는 없는데 이런 값을 계산하는 것을 배치 또는 리플로라고 부름

HTML은 흐름 기반의 배치 모델을 사용하는데 이것은 보통 단일 경로를 통해 크기와 위치 정보를 계산할 수 있다는 것을 의미

일반적으로 “흐름 속”에서 나중에 등장하는 요소는 앞서 등장한 요소의 위치와 크기에 영향을 미치지 않기 때문에 배치는 왼쪽에서 오른쪽으로 또는 위에서 아래로 흐름

단, 표는 크기와 위치를 계산하기 위해 하나 이상의 경로를 필요로 하기 때문에 예외

좌표계는 기준점으로부터 상대적으로 위치를 결정하는데 좌단(X축)과 상단(Y축) 좌표를 사용

배치는 반복되며 HTML 문서의 <html> 요소에 해당하는 최상위 렌더러에서 시작

배치는 프레임 계층의 일부 또는 전부를 통해 반복되고 각 렌더러에 필요한 크기와 위치 정보를 계산

최상위 렌더러의 위치는 0,0 이고 브라우저 창의 보이는 영역에 해당하는 뷰포트 만큼의 면적을 가짐

모든 렌더러는 “배치” 또는 “리플로” 메서드를 갖는데 각 렌더러는 배치해야 할 자식의 배치 메소드를 불러옴

더티 비트 체제

소소한 변경 때문에 전체를 다시 배치하지 않기 위해 브라우저는 “더티 비트” 체제를 사용

렌더러는 다시 배치할 필요가 있는 변경 요소 또는 추가된 것과 그 자식을 “더티”라고 표시

“더티”와 “자식이 더티” 이렇게 두 가지 플래그가 있음

자식이 더티하다는 것은 본인이 괜찮지만 자식 가운데 적어도 하나를 다시 배치할 필요가 있다는 의미

전역 배치와 점증 배치

배치는 렌더러 트리 전체에서 일어날 수 있는데 이것을 “전역” 배치라 하고 다음과 같은 경우에 발생

글꼴 크기 변경과 같이 모든 렌더러에 영향을 주는 전역 스타일 변경
화면 크기 변경에 의한 결과

배치는 더티 렌더러가 배치되는 경우에만 점증되는데 추가적인 배치가 필요하기 때문에 약간의 손실이 발생할 수 있음

점증 배치는 렌더러가 더티일 때 비동기적으로 일어남

예를 들면 네트워크로부터 추가 내용을 받아서 DOM 트리에 더해진 다음 새로운 렌더러가 렌더 트리에 붙을 때

점증 배치-오직 더티 렌더러와 그 자식만 배치된다(출처: https://d2.naver.com/helloworld/59361)

비동기 배치와 동기 배치

점증 배치는 비동기로 실행

파이어폭스는 점증 배치를 위해 “리플로 명령”을 쌓아 놓고 스케줄러는 이 명령을 한꺼번에 실행

웹킷도 점증 배치를 실행하는 타이머가 있는데 트리를 탐색하여 “더디” 렌더러를 배치

“offsetHeight” 같은 스타일 정보를 요청하는 스크립트는 동기적으로 점증 배치를 실행

전역 배치는 보통 동기적으로 실행

때때로 배치는 스크롤 위치 변화와 같은 일부 속성들 때문에 초기 배치 이후 콜백으로 실행

최적화

배치가 “크기 변경” 또는 렌더러 위치 변화 때문에 실행되는 경우 렌더러의 크기는 다시 계산하지 않고 캐시로부터 가져옴

어떤 경우는 하위 트리만 수정이 되고 최상위로부터 배치가 시작되지 않는 경우도 있음

이런 경우는 입력 필드에 텍스트를 입력하는 경우와 같이 변화 범위가 한정적이어서 주변에 영향을 미치지 않을 때 발생

만약 입력 필드 바깥쪽에 텍스트가 입력되는 경우라면 배치는 최상단으로부터 시작될 것

배치 과정

배치는 보통 다음과 같은 형태로 진행

부모 렌더러가 자신의 너비를 결정
부모가 자식을 검토
1. 자식 렌더러를 배치(자식의 x와 y를 설정)
2. (부모와 자식이 더티하거나 전역 배치 상태이거나 또는 다른 이유로) 필요하다면 자식 배치를 호출하여 자식의 높이를 계산
부모는 자식의 누적된 높이와 여백, 패딩을 사용하여 자신의 높이를 설정 이 값은 부모 렌더러의 부모가 사용하게 됨
더티 비트 플래그를 제거

파이어폭스는 “상태” 객체(nsHTMLReflowState)를 배치(”리플로”를 의미)를 위한 매개 변수로 사용하는데 상태는 부모의 너비를 포함

파이어폭스 배치의 결과는 “매트릭스” 객체(nsHTMLReflowMatrics)인데 높이가 계산된 렌더러를 포함

너비 계산

렌더러의 너비는 포함하는 블록의 너비, 그리고 렌더러의 너비와 여백, 테두리를 이용하여 계산

예를 들어 다음은 div 요소의 너비를 보자

<div style="width:30%"></div>

웹킷은 다음(RenderBox 클래스의 calcWidth 메서드)과 같이 계산할 것

컨테이너의 너비는 컨테이너 availableWidth와 0 사이의 최대값 이 경우 availableWidth는 다음과 같이 계산된 contentWidth clientWidth와 clientHeight는 객체의 테두리와 스크롤바를 제외한 내부 영역을 의미
clientWidth() - paddingLeft() - paddingRight()
요소의 너비는 “width” 스타일 속성의 값이다 이 컨테이너 너비의 백분률 값은 절대값으로 변환될 것
좌우측 테두리와 패딩 값이 추가

여기가지 “미리 획득한 너비”의 계산 이제는 최소 너비와 최대 너비를 계산해야 함

미리 획득한 너비가 최대 너비보다 크면 최대 너비가 사용됨 미리 획득한 너비가 최소 너비(깨지지 않는 가장 작은 단위)보다 작으면 최소 너비가 사용됨

배치할 필요가 있지만 너비가 고정된 경우 값은 캐시에 저장됨

줄 바꿈

렌더러가 배치되는 동안 줄을 바꿀 필요가 있을 때 배치는 중단되고 줄 바꿀 필요가 있음을 부모에게 전달

부모는 추가 렌더러를 생성하고 배치를 호출

그리기

그리기 단계에서는 화면에 내용을 표시하기 위한 렌더 트리가 탐색되고 렌더러의 “paint” 메서드가 호출

그리기는 UI 기반의 구성 요소를 사용

전역과 점증

그리기는 배치와 만찬가지로 전역 또는 점증 방식으로 수행

점증 그리기에서 일부 렌더러는 전체 트리에 영향을 주지 않는 방식으로 변경

변경된 렌더러는 화면 위의 사각형을 무효화 하는데 OS는 이것을 “더티 영역”으로 보고 “paint” 이벤트를 발생

OS는 몇 개의 영역을 하나로 합치는 방법으로 효과적으로 처리

크롬은 렌더러가 별도의 처리 과정이기 때문에 조금 더 복잡

크롬은 OS의 동작을 어느 정도 모방 프레젠테이션은 이런 이벤트에 귀 기울이고 렌더 최상위로 메시지를 전달

그러면 트리는 적절한 렌더러에 이를 때까지 탐색되고 스스로(보통 자식과 함께)다시 그려짐

그리기 순서

CSS 2는 그리기 과정의 순서를 정의(https://www.w3.org/TR/CSS2/zindex.html)

이것은 실제로 요소가 stacking contexts에 쌓이는 순서

스택은 뒤에서 앞으로 그려지기 때문에 이 순서는 그리기에 영향을 미침

블록 렌더러가 쌓이는 순서는 다음과 같음

배경 색
배경 이미지
테두리
자식
아웃라인

CSS 박스 모델

CSS 박스 모델(https://www.w3.org/TR/CSS2/box.html)은 문서 트리에 있는 요소를 위해 생성되고 시각적 서식 모델에 따라 사각형 박스를 설명

각 박스는 콘텐츠 영역(문자, 이미지 등)과 선택적인 패딩과 테두리, 여백이 있음

CSS2 박스 모델 (출처: https://d2.naver.com/helloworld/59361)

각 노드는 이런 상자를 0에서 n개 생성

모든 요소는 만들어질 박스의 유형을 결정하는 “display” 속성을 갖는데 이 속성의 유형은 다음과 같음

block - 블록 상자를 만듦
inline - 하나 또는 그 이상의 인라인 상자를 만듦
none - 박스를 만들지 않음

기본 값은 인라인이지만 브라우저의 스타일 시트는 다른 기본 값을 설정

예를 들면 “div” 요소의 display 속성에 대한 기본 값은 block

브라우저의 기본 스타일 시트 예제는 [www][45][.][45][w][45][3.][45][org][45][/][45][45][TR][45][/][45][CSS][45][2/][45][sample][45][.][45][html][45]에서 찾을 수 있음

위치 결정 방법

위치를 결정하는 방법은 다음과 같은 세 가지

Normal - 객체는 문서 안의 자리에 따라 위치가 결정 이것은 렌더 트리에서 객체의 자리가 DOM 트리의 자리와 같고 박스 유형과 면적에 따라 배치됨을 의미
Float - 객체는 우선 일반적인 흐름에 따라 배치된 다음 왼쪽이나 오른쪽으로 흘러 이동
Absolute - 객체는 DOM 트리 자리와는 다른 렌더 트리에 놓임

위치는 “position” 속성과 “float” 속성에 의해 결정

static과 relative로 설정하면 일반적인 흐름에 따라 위치가 결정
absolute와 fixed로 설정하면 절대적인 위치가 됨

position 속성을 정의하지 않으면 static이 기본 값이 되며 일반적인 흐름에 따라 위치가 결정

static 아닌 다른 속성 값(relative, absolute, fixed)을 사용하면 top, bottom, left, right 속성으로 위치를 결정할 수 있음

박스가 배치되는 방법은 다음과 같은 방법으로 결정

박스 유형(display, inline …)
박스 크기(width, height …)
위치 결정 방법(position, float)
추가적인 정보 - 이미지 크기와 화면 크기 등

박스 유형_CSS

블록 박스: 브라우저 창에서 사각형 블록을 형성

블록 박스 (출처: https://d2.naver.com/helloworld/59361)

인라인 박스: 블록이 되지 않고 블록 내부에 포함

인라인 박스

블록은 다른 블록 아래 수직으로 배치되고 인라인은 수평으로 배치

블록과 인라인 배치

인라인 박스는 라인 또는 “라인 박스” 안쪽에 놓임

라인은 적어도 가장 큰 박스만큼 크지만 “baseline” 정렬일 때 더 커질 수 있음

이것은 요소의 하단이 다른 상자의 하단이 아닌 곳에 배치된 경우를 의미

포함하는 너비가 충분하지 않으면 인라인은 몇 줄의 라인으로 배치되는데 이것은 보통 문단 안에서 발생

라인

위치 잡기

상대적인 위치

상대적인 위치 잡기는 일반적인 흐름에 따라 위치를 결정한 다음 필요한 만큼 이동

상대적인 위치 잡기

플로트

플로트 박스는 라인의 왼쪽 또는 오른쪽으로 이동한다 흥미로운 점은 다른 박스가 이 주변을 흐른다는 것

HTML을 다음과 같이 작성하면

<p>
<img src="http://helloworld.naver.com/image.gif" alt="image.gif" width="100" height="100" style="float:right">
Lorem ipsum dolor sit amet, consectetuer...
</p>

아래와 같이 보일 것

플로트

절대적인(absolute)위치와 고정된(fixed)위치

절대와 고정 배치는 일반적인 흐름과 무관하게 결정되고, 일반적인 흐름에 관여하지 않으며, 면적은 부모에 따라 상대적

고정인 경우 뷰포트로부터 위치를 결정

고정된 위치 잡기

(참고) 고정된 박스는 문서가 스크롤되어도 따라 움직이지 않음

층 표현

이것은 CSS의 z-index 속성에 의해 명시

층은 박스의 3차원 표현이고 “z축”을 따라 위치를 정함

박스는 (stacking contexts라고 부르는)스택으로 구분

각 스택에서 뒤쪽 요소가 먼저 그려지고 앞쪽 요소는 사용자에게 가까운 쪽으로 나중에 그려짐

가장 앞쪽에 위치한 요소는 겹치는 이전 요소를 가림

스택은 z-index 속성에 따라 순서를 결정

z-index 속성이 있는 박스는 지역 스택(local stack)을 형성

뷰포트는 바깥쪽의 스택(outer stack)

다음 예제를 보자

<style type="text/css">
div {
	position: absolute;
	left: 2in;
	top: 2in;
}
</style>
<p>
	<div style="z-index:3;background-color:red;width:lin;height:lin"></div>
	<div style="z-index:1;background-color:green;width:2in;height:2in"></div>
</p>

이 코드는 다음과 같이 보일 것

고정 위치 잡기

붉은색 박스가 초록색 박스보다 마크업에서 먼저 나오기 때문에 일반적인 흐름이라면 먼저 그려져야 하지만 z-index 속성이 높기 때문에 더 앞쪽에 표시

생각해보자

우리가 흔히 브라우저 탐색을 할 때 스크롤을 하거나, 어떤 것을 클릭하면서 화면의 위치를 바꿀 때, 브라우저는 어떻게 다시 화면을 그릴까?

ㄴ reflow, repaint

위에서 표현된 그림처럼 다시 렌더링 되지 않을까?

ㄴ 위치가 바뀌지 않는다면 다시 렌더링할 필요 없이 부분적으로 재배치하고 다시 그리는 방식

참고자료

https://www.boostcourse.org/web316/lecture/254256/?isDesc=false

웹 프로그래밍(풀스택)

부스트코스 무료 강의

www.boostcourse.org

https://d2.naver.com/helloworld/59361

ADsP 2과목 개념원리 필기

hisjeans — Wed, 29 Apr 2026 15:12:13 +0900

2과목의 접근 전략

<2과목> 데이터분석 기획	데이터분석 기획의 이해	분석 기획 방향성 도출
		분석 방법론
		분석 과제 발굴
		분석 프로젝트 관리 방안
	분석 마스터 플랜	마스터 플랜 수립
		분석 거버넌스 체계 수립

1과목 ‘Why?’ 2과목 ‘How to?’+’What?’

어떤 방법이 가장 좋은가?

어떤 방법이 분석과제(목표)를 찾는데 가장 좋은가?

분석 목표 수립 과정

<4가지 분석 주제 도출 과정>

#분석 대상과 그 방법에 따른 4가지 분석 주제 ⭐️⭐️⭐️

분석 대상이 무엇인지 알고 있고 그 분석 방법도 알고 있다면 최적화(Optimization)’ _Best
분석 대상이 무엇인지 알고 있지만, 그 분석 방법을 모른다면 ‘솔루션(Solution)’
분석 대상이 무엇인지도 모르고 그 분석 방법도 모른다면 있다면 ‘발견(Discovery)’
분석 대상이 무엇인지는 모르지만, 그 분석 방법은 알고 있다면 ‘통찰(Insight)’

[분석 대상과 그 방법에 따른 4가지 분석 주제]

<분석방법론#1_KDD 분석 방법론>

[KDD 분석 방법론(분석가의 관점) 프로세스]

데이터셋 선택 → 데이터 전처리 → 데이터 변환 → 데이터 마이닝 → 데이터 마이닝 결과 평가

<분석방법론#2_CRISP-DM 분석 방법론>

#CRISP-DM 분석 방법론(기획자의 관점 vs KDD 분석의 관점) 프로세스

: 6단계!!!

[1단계] 업무 이해	업무 목적 파악, 상황 파악, 데이터 마이닝 목표 설정, 프로젝트 기획 수립
[2단계] 데이터 이해	초기 데이터 수집, 데이터 기술 분석(EDA), 데이터 탐색, 데이터 품질 확인 _ KDD에서 데이터 선택하는 부분
[3단계] 데이터 준비	분석용 데이터셋 선택, 데이터 정제, 분석용 데이터셋 편성, 데이터 통합, 데이터 포매팅
[4단계] 모델링	모델링 기법 선택, 모델 테스트 계획 설계 모델 작성, 모델 평가
[5단계] 평가	분석 결과 평가, 모델링 과정 평가, 모델 적용성 평가
[6단계] 전개	전개 계획 수립, 모니터링과 유지보수 계획 수립, 프로젝트 종료 보고서 작성, 프로젝트 리뷰

<분석방법론#3_빅데이터분석방법론>

빅데이터 분석 방법론을 다 외워야 하나? ⭐️⭐️⭐️

중요한 것은 전체의 흐름을 파악하는 것이다 5가지 단계는 반드시 기억해야 한다 그리고 각 단계별로 태스크 정도까지만 외워둬도 된다 입력자료, 프로세스 및 도구, 출력자료들을 모두 외우는 것보다는 5단계와 그에 따른 태스크가 어떤 것들이 있는지는 확실히 알아두는 것이 좋다

분석 기획

비즈니스 이해 및 범위 설정
프로젝트 정의 및 계획 수립
프로젝트 위험계획 수립

→ 데이터 준비

필요 데이터 정의
데이터 스토어 설계
데이터 수집 및 정합성 검정

→ 데이터 분석 -피드백→ 데이터 준비

분석용 데이터 준비
텍스트 분석
탐색적 분석
모델링
모델 평가 및 검증
모델 적용 및 운영 방안 수립

→ 시스템 구현

설계 및 구현
시스템 테스트 및 운영

→ 평가 및 전개

모델 발전계획 수립
프로젝트 평가 및 보고

<분석 과제 발굴_개념도>

[분석 과제 발굴 방법론 개념도] ⭐️⭐️⭐️⭐️

하향식 접근법은 현황 분석을 통해서 또는 인식된 문제로부터 기회나 문제를 탐색하고, 문제를 정의, 해결 방안을 탐색, 데이터 분석의 타당성을 평가하는 과정을 거쳐 분석 과제를 도출하는 과정으로 구성되어 있다

Start 분석 대상이 무엇인지 알고 있는가?
Yes ⬇️		No ⬇️
하향식 접근법		상향식 접근법(discovery) 빅데이터 → 가치발견 → 과제 접근
가. 문제 탐색 단계	a. 비즈니스 모델 탐색 기법 사업을 기획할 때 9가지로 블럭으로 나눔 [비즈니스 모델 캔버스 9 Block] → 5개 영역으로 단순화(규제와 감사, 업무, 제품, 고객, 지원 인프라 5가지 측면에서 과제 분석) [9 Block 모델을 5개 영역으로 단순화]	가. 지도, 비지도 학습	a. 지도학습(정답 주고 알려주는 것, 학습시킴)
	b. 분석기회 발굴 및 범위 확장 기업 내부에서만 발굴하지 않는다는 의미에서 [분석 기회 발굴 범위의 확장]		b. 비지도 학습(정답 알려주지 않고 규칙 찾아가며 분류해나가도록 시키는 것)
	c. 외부 참조 모델 기반 문제 탐색	나. 프로토타입	시행착오 해결법(시간, 자원 허락할 때만 가능한 방법) 이지만 POC(proof of concept): 거대한 프로젝트 진행 전 미니 프로젝트, 토이 프로젝트 진행하는 특수한 경우도 존재
	d. 분석 유스케이스	.
나. 문제 정의 단계	식별된 비즈니스 문제를 데이터 문제로 변환하여 과제를 정의
다. 해결 방안 탐색 단계	과제 정의 후 어떻게 해결할 것인지 그 방안을 탐색(분석 기법, 시스템 등)
라. 타당성 검토 단계	경제적 타당성, 기술적 타당성 등 검토

<분석 과제 발굴 case>

항공사 고객 이탈 사례 발생

당신이 어느 항공사의 CEO라고 가정해보자
최근 들어 항공사의 고객 이탈수가 증가했다
이 문제를 해결하기 위해 하향식 접근법을 사용하자

[9 Block 모델을 5개 영역으로 단순화]

비즈니스 모델 기반 문제 탐색(search의 단계)

규제와 감사(외적 영역)

인프라-시스템 측면

2단계-문제 정의 단계

: 비즈니스의 문제를 데이터의 문제로 바꿔야 함

[1단계] 비즈니스 문제 탐색	→ [2단계] 데이터의 문제 ⭐️	→ [3단계] 해결 방안 탐색	→ [4단계] 타당성 검토(최종적 발굴)
업무: 고객이 항공권 발권에 너무 많은 시간을 소비하고 있다	→ 타 항공사 대비 항공권 발권에 소요되는 시간을 비교 분석	→ 분석 역량 확보, 기존 시스템 활용	→ 타당한 분석 과제
제품: 타 항공사 대비 항공권 가격이 비쌀 수 있다	→ 타 항공사 대비 동일 노선에 대한 항공권 가격 비교 분석	→ 분석 역량 확보, 기존 시스템 활용	→ 과제 선정 탈락
고객: 고객이 원하는 서비스에 변화가 생겼을 수 있다	→ 고객의 수요가 저렴한 티켓보다 안락한 좌석, 향상된 기내 서비스 등으로 변화하였는가? / 고객 니즈 분석(후기, 인터넷 평가 등 분석)	→ 분석 역량 확보, 기존 시스템 활용 / → 분석 역량 확보, 신규 시스템 도입(돈 들어감)	→ 타당한 분석 과제 / → 타당한 분석 과제
규제&감사: 보안상의 문제로 항공권 발권에 지나친 개인정보를 요구하고 있을 수 있다	→ 고객의 입장에서 발권 시 입력하기를 주저하는 항목이 있는가?	→ 분석 역량 확보, 신규 시스템 도입	→ 과제 선정 탈락
지원 인프라: 온라인 발권 시 IT 시스템 문제로 불편함이 발생할 수 있다	→ 고객 관점에서 온라인 발권 IT 시스템 점검 및 불편 사항 분석	분석 역량 미확보, 기존 시스템 활용	→ 타당한 분석 과제
동종 업계 1: 여러 노선의 최적화로 가능한 한 많은 고객이 원하는 시간을 맞추었다	→ 동종 업계 현황 분석: 현재 우리의 노선과 일정에 대한 고객의 만족 여부를 조사한다	분석 역량 미확보, 신규 시스템 도입( 거의 최악의 상황, 나중의 타당성 검토 단계에서 점수를 높게 받기 어려워 탈락할 가능성 높음)	→ 과제 선정 탈락
동종 업계2: 하나의 노선에 특화된 전략으로 하나의 노선을 독점할 수 있다	→ 우리 항공기를 이용하는 고객은 주로 어느 노선을 이용하는지 조사한다	분석 역량 확보, 신규 시스템 도입	→ 타당한 분석 과제

주로 탈락하는 과제는 역량 미확보, 신규 시스템 도입

분석 역량 확보, 기존 시스템 활용 - 이유가 있을 것, 임의의 예

<분석 마스터 플랜 수립 FraimWork>

[분석 마스터플랜 수립 프레임워크(일종의 틀 개념)]

분석 마스터플랜?

ㄴ 분석의 A~Z까지 모든 일련의 과정들에 대한 계획 수립

우선순위 고려요소(전략적 중요도, 비즈니스 성과/ROI, 실행 용이성) -적용 우선순위 설정→ 적용범위/방식 고려 요소(업무 내재화 적용 수준, 분석 데이터 적용 수준, 기술 적용 수준) Analysis 구현 로드맵 수립

[예제]

다음 중 분석 마스터플랜에 대한 설명으로 가장 부적절한 것은 무엇인가?

탐색한 문제에 대하나 해결 방안들을 총체적인 관점에서 적용 우선순위를 설정하기 위함이다
우선순위 결정을 위해서는 전략적 중요도, ROI 관점 등의 요소를 고려한다
적용 범위 및 방식을 고려하기 위해 실행 용이성과 기술 적용 수준의 요소를 고려한다
분석 마스터플랜은 분석 과제 도출, 우선순위 평가, 이행계획 수립 순서로 수행된다

<분석 거버넌스 체계 수립>

분석 거버넌스 체계 구성요소 ⭐️

분석조직, 분석전문인력, 분석개발/확산/평가 프로세스, 분석수준 진단, 분석 교육 5가지 영역의 체계(거버넌스 시스템)을 갖춤, 일종의 정부

분석 거버넌스 체계 수립하면 분석의 선순환이 잘 이루어지게 됨

조직(Organization): 분석 기획 및 관리를 수행
과제 기획 및 운영 프로세스(Process)
분석 관련 시스템(System)
데이터(Data)
분석 관련 교육 및 마인드 육성 체계(Human Resource)

<분석 준비도&성숙도 평가>

[분석 준비도 평가]

분석 업무 파악	분석 인력 및 조직	분석 기법
• 발생한 사실 분석 업무 • 예측 분석 업무 • 시뮬레이션 분석 업무 • 최적화 분석 업무 • 분석 업무 정기적 개선	• 분석전문가 직무 존재 • 분석전문가 교육 훈련프로그램 • 관리자 기본 분석 능력 • 전사총괄조직 • 경영진 분석 업무 이해	• 업무별 적합한 분석 기법 사용 • 분석 업무 도입 방법론 • 분석 기법 라이브러리 • 분석 기법 효과성 평가 • 분석 기법 정기적 개선
분석 데이터	분석 문화	IT 인프라
• 분석 업무를 위한 데이터 • 충준성/신뢰성/적시성 • 비구조적 데이터 관리 • 외부데이터 활용 체계 • 기준 데이터 관리(MDM)	• 사실에 근거한 의사결정 • 관리자의 데이터 중시 • 회의 등에서 데이터 활용 • 경영진 직관보다 데이터 활용 • 데이터 공유 및 협업 문화	• 운영 시스템 데이터 통합 • EAI, ETL 등 데이터 유통체계 • 분석 전용 서버 및 스토리지 • 빅데이터/통계/비주얼 분석환경

[분석 성숙도(기업의 문화 얼마나 발달했는가 느낌) 평가]

단계	내용	비즈니스 부문	조직, 역량 부문	IT 부문
[1단계] 도입	분석 시작, 환경과 시스템 구축	• 실적 분석 및 통계 • 정기 보고 수행 • 운영 데이터 기반	• 일부 부서에서 수행 • 담당자 역량에 의존	• 데이터 웨어하우스 • 데이터 마트 • ETL/EAI • OLAP
[2단계] 활용	분석 결과를 업무에 적용	• 미래결과 예측 • 시뮬레이션 • 운영 데이터 기반	• 전문담당부서 수행 • 분석 기법 도입 • 관리자가 분석 수행	• 실시간 대시보드 • 통계분석 환경
[3단계] 확산	전사 차원에서 분석 관리, 공유	• 전사성과 실시간 분석 • 프로세스 혁신 3.0 • 분석규칙 관리 • 이벤트 관리	• 전사 모든 부서 수행 • 분석 COE 운영 • 데이터 사이언티스트 확보	• 빅데이터 관리 환경 • 시뮬레이션, 최적화 • 비주얼 분석 • 분석 전용 서버
[4단계] 최적화	분석을 진화시켜 혁신 및 성과 향상에 기여	• 외부 환경 분석 활용 • 최적화 업무 적용 • 실시간 분석 • 비즈니스 모델 진화	• 데이터 사이언스 그룹 • 경영진 분석 활용 • 전략 연계	• 분석 협업환경 • 분석 SandBox • 프로세스 내재화 • 빅데이터 분석

분석 준비도, 분석 성수도 score → [분석 준비도 및 성숙도 진단 결과를 4분면으로 구분]***

‘준정확도 시계방향’

[분석 조직의 유형]***

집중구조: 별도의 독립적인 데이터 분석 팀에서 데이터 분석 업무하도록 함

기능구조: 별도의 분석가 없이 일반 부서에서 데이터 분석 업무 처리

분산 구조: 별도의 독립적인 데이터 분석 조직 있음(=집중구조), 각 부서에서도 데이터 분석 전문가가 있지만 이들은 각 부서 소속이 아닌 전문 분석 팀에서 파견 나온 것, 분석팀 소속(≠ 기능구조는 분석가들이 일반부서 소속, 집줓구조와 기능구조의 혼합 형태)

참고 자료

https://youtu.be/k2Yt1STulpk?si=82iIhkDteGo8zhVa

https://merlin-ict.eu/what-is-a-business-model-canvas/

What is a Business Model Canvas? | Merlin ICT

The Business Model Canvas (BMC) tool which helps to map existing business models, improve them and invent new ones. It has 9 building blocks, each of which is described in detail and using real life examples: The BMC itself has two stages – the front sta

merlin-ict.eu

ADsP 1과목 개념원리 필기

hisjeans — Thu, 23 Apr 2026 18:52:36 +0900

# 암묵지와 형식지⭐️⭐️

암묵지(Tacit Knowledge): ‘학습과 체험을 통해 개인에게 습득되어 있지만, 겉으로 드러나지 않는 상태의 지식’을 말한다 머릿속에 존재하는 지식으로, 언어나 문자를 통해 나타나지 않는 지식이다 또한 암묵지는 대개 시행착오와 같은 경험을 통해 체득하는 경우가 많다 지식이 드러나지 않고 ‘숨겨져 있다’
형식지(Explicit Knowledge): ‘암묵지가 문서나 매뉴얼처럼 외부로 표출돼 여러 사람이 공유할 수 있는 지식’을 말한다 교과서, 데이터베이스, 신문, 비디오와 같이 어떤 형태로든 형상화된 지식은 형식지라고 할 수 있다 문서나 ‘메뉴얼’처럼 외부로 표출돼 여러 사람이 공유할 수 있는 지식
암묵지와 형식지의 상호작용: 공유화되기 어려운 암묵지가 형식지로 표출되고 연결되면 그 상호작용으로 지식이 형성된다 개인에게 내면화된 암묵지가 조직의 지식으로 공통화되기 위해서는(형식지가 되기 위해서는) 표출화하고 이를 다시 개인의 지식으로 연결화하는 과정을 거치게 된다

[암묵지와 형식지의 상호작용]⭐️⭐️

암묵지	형식지
공통화	표출화
내면화	연결화

암묵지 -조직의 지식으로 공통화를 위한 표출화→ 형식지

형식지 -개인에게 연결 및 습득되는 내면화→ 암묵지

DIKW 피라미드⭐️⭐️⭐️

개별 각각의 데이터가 ‘의미’를 갖게 되는 것이 지혜를 얻는 과정

1. 데이터에서 지혜를 얻는 과정

데이터: A는 100원 B는 200원에 연필을 판매한다 →
정보: 연필이 더 저렴하다 →
지식: 더 저렴한 A로부터 연필을 사야겠다 →
지혜: A의 다른 물건도 저렴할 것이다(추측, 예상)

(참고) 빅데이터→통찰력(Insight가 wisdom이란 개념에서 출발)→기업 이윤

2. 데이터 단위

1바이드(byte)=8비트(bit)
1킬로바이트(KB)=1024바이트(byte)
1메가바이트(MB)=1024킬로바이트(KB)
1기가바이트(GB)=1024메가바이트(MB)
1테라바이트(TB)=1024기가바이트(GB)
1페타바이트(PB)=1024테라바이트(TB)
1엑사바이트(EB)=1024페타바이드(PB)
1제타바이트(ZB)=1024엑사바이트(EB)
1요타바이드(YB)=1024제타바이트(ZB)

TPEZY로 암기

[데이터베이스의 일반적인 특징] (필연적으로 데이터베이스가 가지고 있는 속성, 내적개념)

특징	내용
통합된 데이터	동일한 내용의 데이터가 중복되어 있지 않다(유일성과 관계)
저장된 데이터	컴퓨터 매체가 접근할 수 있는 저장 매체에 저장되어 있다
공용 데이터	여러 사용자가 공유할 수 있다
변화하는 데이터	삽입, 수정, 삭제를 통해 항상 최신의 정확한 데이터를 유지해야 한다

≠

[데이터베이스의 다양한 측면에서의 특성]⭐️⭐️⭐️(관점, 외적개념)

정보의 축적 및 전달 측면	• 기계 가독성: 대량의 정보를 일정한 형식에 따라 컴퓨터 등의 정보처리기기가 읽고 쓸 수 있다 • 검색 가능성: 다양한 방법으로 필요한 정보를 검색할 수 있다 • 원격 조작성: 정보통신망을 통해 원거리에서도 즉시 온라인으로 이용 가능하다
정보이용 측면	• 이용자의 정보요구에 따라 다양한 정보를 신속하게 획득할 수 있고 원하는 정보를 정확하고 경제적으로 찾아낼 수 있다
정보관리 측면	정보를 일정한 질서와 구조에 따라 정리 및 저장하고 검색 및 관리할 수 있게 하여 방대한 양의 정보를 체계적으로 축적하고, 새로운 내용 추가나 갱신이 용이하다
정보기술발전 측면	• 데이터베이스는 정보처리, 검색 및 관리 소프트웨어, 관련 하드웨어, 정보 전송을 위한 네트워크 기술 등의 발전을 견인할 수 있다
경제 및 산업적 측면	• 데이터베이스는 다양한 정보를 필요에 따라 신속하게 제공 및 이용할 수 있는 인프라의 특성을 가지고 있어 경제, 산업, 사회 활동의 효율성을 제고하고 국민의 편의를 증진하는 수단으로써의 의미를 가진다

(참고) 데이터베이스 트랜잭션 특성

트랜잭션(Transaction)이란 데이터베이스에서 명령을 수행하는 하나의 논리적인 기능의 단위, 데이터베이스에서 명령이 수행됨에 따라 변화가 생기는데, 잘못된 명령 혹은 여러 사용자에 의한 명령 등과 같은 다양한 상황에서 데이터를 보호하기 위해 트랜잭션에는 다음과 같은 4가지 특성이 있다

원자성(Atomicity): 트랜잭션이 데이터베이스에 모두 적용되거나 또는 모두 적용되지 않아야 한다
일관성(Consistency): 트랜잭션의 결과는 항상 일관성을 띠어야 한다
고립성(Isolation): 하나의 트랜잭션이 다른 트랜잭션에 영향을 주지 않아야 한다
지속성(Durability): 트랜잭션이 성공적으로 수행된 경우 그 결과는 영구적이어야 한다

[무분별 사회 기반 구조 데이터베이스]⭐️⭐️

물류 부문	• ‘실시간 차량 추적’을 위한 종합물류정보망 구축 • CVO 서비스, EDI 서비스, 물류 정보 DB 서비스, 부가서비스로 구성 • CALS(Commerce At Light Speed): 제품의 설계 및 개발, 생산에서 유통 및 폐기에 이르기까지 제품의 라이프사이클 전반에 관련된 데이터를 통합하고 공유 및 교환할 수 있게 한 경영통합정보시스템을 말한다 • PORT-MS: 항만운영정보시스템 • KROIS: 철도운영정보시스템
지리 부문	• GIS 응용에 활용하는 4S 통합기술 • 지리정보유통망 가시화: 지리정보통합관리소 운영, 지리벙보 수요자에 정보 제공 • GIS(Geographic Information System): 지리정보시스템 • LBS(Location-Based Service): 위치정보서비스 • SIM(Spatial Information Management): 공간정보 관리시스템
교통 부문	• 지능형교통정보시스템(TS), 교통정보, 기초자료 및 통계 제공, 대국민 서비스 확대
의료 부문	• 의료정보시스템: 처방전달시스템, 임상병리, 전자의무기록, 영상처리시스템, 병원의 멀티미디어, 원격의료, 지식정보화 • HL7 국내 표준화 작업에 따라 전국적인 진료 정보 공유 체계 구축 계획 수립 • U헬스 실현에 기존 의료정보 데이터베이스 기반 활용 • PACS(Picture Archiving and Communications System) • U-Health(Ubiquitous-Health)
교육 부문	• 첨단 정보통신기술(ICT)을 활용한 각종 교육 정보의 개발 및 보급, 정보 활용 교육 • 대학 정보화 및 교육행정 정보화 위주로 사업 추진 • 교육행정정보시스템(NEIS)은 학사뿐만 아니라 기타 교육행정 전 업무를 처리하는 시스템

	이름	성별	주민등록번호	전화번호	작업
(사람)1	장영실	남자	000101-1234567	010-1234-5678	발명가
(사람)2	홍길동	남자	000202-2345678	010-2345-6789	도적
(사람)3	임꺽정	남자	000303-3456789	010-3456-7890	백정

메타데이터: 사진 파일(에만 있는 것이 아니라 특정 파일에 숨겨져 있는 정보)의 속성 정보를 보면 사진 파일이 언제, 어디서 생성되었는지 알려주는 추가적인 데이터가 존재하는데, 이처럼 데이터를 설명하는 데이터를 메타데이터라 한다
인덱스: 데이터베이스에서 데이터를 저장할 때 내부에서 자동적으로 데이터의 이름을 지정하게 되는데, 이때 부여되는 이름들을 인덱스라 한다 인덱스는 사용자(임의 설정)의 질의에 신속하게 응답하고 정렬하고 탐색할 수 있도록 도와주는 책의 색인과 비슷한 역할을 한다

데이터의 집합인 데이터베이스는 엔터티, 속성, 인스턴스 등 여러 요소들로 구성되어 있다

#데이터 마트(DM)와 데이터 웨어하우스(DW)

데이터 마트와 데이터 웨어하우스는 일반적인 개념의 데이터베이스이지만 목적이 조금 다른 형태의 데이터베이스다

일반적인 데이터베이스는 데이터 유형에 상관없이 정보의 집합체를 의미하지만 데이터의 형태가 USB에 담긴 CSV 파일, HDD/SSD에 저장된 엑셀 파일, DBSM에 담긴 데이터 또는 클라우드에 업로드된 형태의 여러 가지 파일이 될 수 있다

그러나 데이터 웨어하우스(DW)는 이렇게 분산된 환경에 흩어져 있는 데이터들을 개인이나 조직이 총제적인 관점에서 의사결정을 위해 공통의 형식으로 변환해 관리하는 역할을 하며, 데이터 마트는 데이터 웨어하우스로부터 추출된 작은 데이터 베이스로서 특정 목표를 달성하는데 필요한 데이터를 제공하는 역할을 한다

⇒ DW 비용, 시간 많이 듦 ⇒ 다양한 정형 데이터를 모아 여러 곳에서 분석하게 하자, Lake에 담자

#데이터 레이크(Data Lake) “분류하지 말고 다 담을 수 없을까?”

빅데이터 시대에 접어들면서 나날이 증가하는 방대한 데이터와 새로운 포맷의 데이터를 수집하고 축적 및 활용해야 한다는 환경의 니즈가 증가하면서 기업들은 종전의 ETL과 DW 구축 및 관리만으로는 한계에 다다랐다 이러한 이유로 많은 기업이 정형 데이터로 구성된 전통적인 데이터 외에 수많은 비정형 데이터(소셜 텍스트, 센서 데이터, 이미지, 동영상 등)를 실시간으로 수집, 정제, 통합, 분석해 활용하기 위해 데이터 레이크라는 새로운 개념의 데이터 관리 플랫폼을 도입하고 있다

#더그 래니의 3V⭐️⭐️⭐️

가트너 그룹의 부회장인 더그 래니는 빅데이터를 데이터의 양(Volume), 데이터의 유형(Variety), 데이터의 생성 및 처리 속도의 증가(Velocity)로 요약하였다

데이터 → 데이터 양의 증가 Volume, 데이터 유형 증가 Variety, 데이터 수집 및 처리 속도의 증가 Velocity → 빅데이터

#빅데이터의 새로운 특징 4V***

일부 학자들은 더그 레니의 3V에 추가로 Value(가치) 혹은 Veracity(정확성)를 포함해 4V로 빅데이터의 특징을 설명하기도 한다 여기에 Visualization(시각화), Variability(가변성) 등을 추가하는 견해도 있다

Value(가치): 데이터 전체를 파악하고 패턴을 발견하기가 어렵게 되면서 가치(value)의 중요성이 강조된다
Veracity(정확성): 빅데이터 기반의 예측 분석 결과에 대한 신뢰성이 중요하게 되었다

(참고) 빅데이터의 출현 배경이 된 기술

고객 데이터 축적 및 활용 증가(CRM의 확대), 인터넷 확산, 무선통신의 발전(5G), 모바일 생태계 확산, 스마트폰의 보급 확대, 저장 기술의 발전과 메모리 가격 하락, 클라우드 컴퓨팅 기술 발전, SNS 확대, IoT(사물인터넷) 증가, 데이터 분석 툴의 발전 등
클라우드 컴퓨팅은 인터넷(’클라우드’)을 통해 서버, 스토리지, 데이터베이스, 네트워킹, 소프트웨어, 분석, 인텔리전스 등의 컴퓨팅 서비스를 제공하는 것을 말한다 클라우드 컴퓨팅을 통해 더 빠른 혁신과 유연한 리소스를 기업은 제공받을 수 있고, 경영의 이익 효과도 누릴 수 있게 됐다

#빅데이터의 기능과 변화

1. 빅데이터의 기능

빅데이터는 “산업혁명의 석탄 및 철”	제조업뿐만 아니라 서비스 분야의 생산성을 획기적으로 끌어올려 사회 및 경제, 문화, 생활 전반에 혁명적 변화를 가져올 것으로 기대된다
빅데이터는 “21세기 원유”	빅데이터도 원유처럼 각종 비즈니스, 공공기관 대국민 서비스, 그리고 경제 성장에 필요한 정보를 제공하여 산업 전반의 생산성을 향상시키고 새로운 범주의 산업을 만들어낼 것으로 기대된다
빅데이터는 “렌즈”	렌즈를 통해 현미경이 생물학 발전에 끼쳤던 영향만큼, 빅데이터도 렌즈처럼 산업 발전에 큰 영향을 줄 것으로 기대된다대표 사례) 구글의 Ngram Viewer
빅데이터는 “플랫폼”	플랫폼은 공동 활용의 목적으로 구축된 유무형의 구조물을 말한다 빅데이터는 플랫폼으로서 다양한 서드파티 비즈니스에 활용될 것으로 기대된다 대표 사례) 페이스북, 카카오톡 등

2. 빅데이터가 만들어내는 변화⭐️⭐️⭐️‘후-전-양-상’

사전처리→사후처리: 데이터를 사전처리하지 않고, 가능한 많은 데이터를 모으고 데이터를 다양한 방식으로 조합하여 숨은 인사이트를 발굴한다
표본조사→전수조사: IoT, 클라우드 기술의 발전으로 데이터 처리 비용이 감소하게 되면서 데이터 활용 방법이 표본조사에서 전수조사로 변화했다
질→양: 수집 데이터의 양이 증가할수록 분석의 정확도가 높아져 양질의 분석 결과 산출에 긍정적인 영향을 주었다
인과관계→상관관계: 특정한 인과관계가 중요시되던 과거와 달리, 데이터의 양이 급격하게 늘어나면서 상관관계를 통해 특정 현상의 발생 가능성이 포착되고 그에 상응하는 행동을 추천하는 등 상관관계를 통한 인사이트 도출이 점점 확산되고 있다

#7가지 빅데이터 활용 기본 테크닉⭐️⭐️⭐️

1. 연관 규칙 학습(Association rule learning)

어떤 변인 간에 주목할 만한 상관 관계가 있는지를 찾아내는 방법이다
연관 규칙 학습은 연관분석 혹은 장바구니 분석으로도 불리며 고객이 구매한 물품들을 분석하여 품목 사이에 어떠한 규칙이 있는지 찾아내는 분석 기법이다

예)

A를 구매한 사람이 B를 더 많이 사는가?

이것을 구매한 사람들이 많이 구매한 물품은?

장바구니 분석

상품 추천

2. 유형분석(Classification tree analysis)

새로운 사건이 속할 범주를 찾아내는 방법이다
‘이 사용자가 어떤 특성을 가진 집단에 속하는가?’와 같은 문제를 해결하는 방법이다

예)

문서를 어떻게 분류할 것인가?

조직을 어떻게 여러 그룹으로 나눌 것인가?

온라인 수강생들의 특성을 반영하여 어떻게 분류할 것인가?

(참고) 분류와 군집

여기서 언급한 ‘유형분석’은 그 개념이 정확한 ‘분류’인지 ‘군집’인지 약간 모호하게 기술되어 있다 조금 깊게 들어가자면 분류와 군집은 서로 다른 분석방법의 유형이다 영어로 표기할 때 분류는 ‘Classification’, 군집은 ‘Clustering’이라고 표기하며, 분류는 지도학습, 군집은 비지도학습에 속한다 자세한 내용은 3장에서 다룰 것

3. 유전 알고리즘(Genetic algorithms)

최적화가 필요한 문제의 해결책을 자연선택, 돌연변이 등과 같은 메커니즘을 통해 점진적으로 진화시켜 나가는 방법이다
‘최대의 시청률을 얻으려면 어떤 프로그램을 어떤 시간대에 방송해야 하는가?’와 같은 문제를 해결할 때 사용한다

⭐️ 예)

최적화된 택배 차량 배치, 최고의 시청률을 내기위한 방송 프로그램 배치

응급실에서 의사를 어떻게 배치하는 것이 가장 효율적인가?

연비가 좋은 자동차를 개발하기 위해 원자재와 엔지니어링을 어떻게 결합하는 것이 좋을까?

4. 기계학습=머신러닝(Machine learning)

컴퓨터가 데이터로부터 규칙을 찾고 이러한 규칙을 활용해 ‘예측’하는 데 초점을 둔 방법이다
‘기존 시청 기록을 바탕으로 시청자가 보유한 영화 중 어떤 영화를 가장 보고 싶어 할까?’와 같은 문제를 해결할 때 사용한다

예)

유튜브 및 넷플릭스의 미디어 추천 시스템

스팸메일 필터링

질병 진단 예측

(참고) ‘기계학습=머신러닝’에 사용하는 알고리즘

기계학습은 어떤 하나의 분석 방법이라기보다는 다양한 분석 알고리즘을 이용해 예측하는 분석모델을 아우르는 넓은 개념이다 따라서 기계학습에는 다양한 분석 알고리즘이 사용될 수 있으며, 실제로도 어느 하나의 방법만 사용하지 않고 다양한 분석 알고리즘을 두루 사용한다 기계학습에 사용되는 분석 알고리즘에는 의사결정나무, k-NN, 인공신경망, SVM, 군집, 딥러닝, 유전 알고리즘 등 다양한 분석 알고리즘이 있다

6. 감정분석(Sentiment analysis)

특정 주제에 대해 말하거나 글을 쓴 사람의 감정을 분석하는 방법이다
비정형 데이터 마이닝의 대표적인 기법 중 하나로, 텍스트 파일로부터 단어를 추출하고 추출된 단어의 긍정, 부정을 선별하여 글을 쓴 사람의 감정을 분석하는 분석 방법이다
‘새로운 환불 정책에 대한 고객의 평가는 어떤가?’와 같은 문제를 해결할 때 사용한다

예)

호텔에서 고객의 후기를 분석하여 고객의 니즈를 찾아낸다

제품의 사용기에 나타난 고객의 감정은 어떠한가?

[감정 분석의 프로세스]

6.25 전쟁의 아픔을 형제의 우애를 통해 너무 애절하게 잘 나타내었습니다 영화를 보는 내내 눈물이 멈추질 않았습니다… → 6.25 전쟁 아픔 형제 우애 애절 잘 영화 눈물…→긍정 50% 중립 50% 부정 10% → 좋은 호평을 받은 영화

예컨대 선거를 할 때 텍스트 마이닝 통해 사람들의 반응(긍정/부정…등) 분석하는 것(설문조사하지 않고 여러 웹사이트, 게시판 등 추적해 데이터 뽑아냄) + 자연어처리라고도 부름

(참고) 텍스트 마이닝 용어

스태밍(stemming): ‘가겠다’, ‘갈 것이다’, ‘간다’, ‘가야 한다’ 등의 단어들은 그 어원이 ‘가다’라는 단어이다 이처럼 감정분석과 같은 텍스트 마이닝을 수행할 때 단어의 원형을 통해 그 의미를 파악할 수 있는데, 이때 단어의 어원을 찾는 작업을 스테밍이라 한다
코퍼스(Corpus): 말뭉치란 뜻을 가진 코퍼스는 텍스트 분석을 위해 모아놓은 단어 혹은 문장을 보유한 저장소이다 특정 단어가 어떤 단어들과 주로 어울리는지를 파악하는 등 코퍼스는 다양한 목적을 갖고 사용될 수 있다
토큰화(Tokenization): 문장 또는 코퍼스를 여러 개의 뜻을 가진 가장 작은 단위의 단어들로 나누는 작업을 의미한다 한글에서는 -은, -는, -이, -가 와 같이 조사 때문에 띄어쓰기로 나눈다는 것이 토큰화가 될 수 없으므로 토큰화보다 상위개념인 형태소 분석을 수행해야 한다
임베딩(Embedding): 토큰화가 수행된 단어 집합에 대해서 일련의 벡터로 변환하는 작업을 의미한다

7. 소셜 네트워크 분석(SNA; Social Network Analysis)

사회 관계망 분석으로도 불리며, SNS 같은 온라인 공간에서 유저 사이의 팔로워, 팔로잉 관계를 분석하여 영향력이 있는 사람을 찾아내어 기업의 효율적인 마케팅이나 범죄 수사에서 공범을 찾는 등 다양한 분야에서 활용될 수 있다
오피니언 리더, 즉 영향력 있는 사람을 찾아낼 수 있으며, 고객 간 소셜 관계를 파악할 수 있다

예)

도시계획 및 지리학 분야에서 SNA를 활용하여 도시공간분석에 이용

특정인과 다른 사람이 몇 촌 정도의 관계인가?

이 사람이 어느 정도 영향력 있는 ‘인플루언서’인가?

(참고) 소셜 네트워크 분석 요소

소셜 네트워크 분석은 비정형 데이터 분석으로 ADsP의 3과목에서 다루지 않는 영역이지만 최근 소셜 네트워크 분석과 관련된 용어가 출제됨에 따라 아래의 용어 정도는 숙지하자

연결 중심성: 하나의 점에 얼마나 많은 다른 점이 연결돼 있는지 나타내는 척도로, 연결된 노드들의 수의 합으로 표현한다
근접 중심성: 노드 사이의 거리를 기반으로 측정한 척도다
매개 중심성: 네트워크 내에서 해당 노드가 어디에 위치하는지 파악함으로써 해당 노드의 영향력을 파악할 수 있다
아이겐벡터의 중심성: 네트워크 내의 노드와 다른 벡터의 중심성과 가중치를 활용하여 계산하는 방식으로, 해당 노드와 연결된 다른 노드들이 네트워크 내에서 얼마나 중요한지 파악하는 지표다

<빅데이터의 위기요인과 통제방안>

[빅데이터의 위기 요인과 그 예시]

사생활 침해 → 구글의 사용자 행동 패턴 예측

책임 원칙 훼손 → 범죄 발생 이전에 체포

데이터 오용 → 비행기 탑승 금지자 목록에 상원 의원이 포함

[빅데이터 위기 요인과 통제(극복) 방안]⭐️

사생활 침해 → 동의에서 책임으로(사용자 < 기업 책임)

책임 원칙 훼손 → 결과 기반 책임 원칙 고수

데이터 오용 → 알고리즘 접근 허용 → 알고리즘 리스트

(참고) 개인정보 비식별 기술⭐️

개인정보 비식별 기술이란 데이터 속에서 특정 개인을 식별할 수 있는 요인을 숨김으로써 특정 개인을 식별할 수 없도록 하는 기술이다 최근에 빅데이터로 인한 위기 요인이 발생함에 따라 개인정보의 비식별 기술이 더욱 각광받고 있다

데이터 마스킹: 데이터의 기존 형식을 유지한 채 식별할 수 없는 임의의 값(혹은 기호)으로 대체한다

플레이 데이터 -데이터 마스킹(가림)→ ***데이터

가명 처리: 데이터의 값을 다른 값으로 변경한다

홍길동 -가명 처리→ 임꺽정

총계 처리: 각각의 데이터 값이 아닌 전체 데이터에 대한 총합 또는 평균으로 데이터를 보여준다

70점 80점 90점 -총계 처리→ 평균 80점

데이터 값 삭제: 데이터 값의 일부를 삭제한다

서울시 서초구 -데이터 값 삭제→ 서울시

데이터 범주화: 데이터의 값을 범주화하여 특정 값이 아닌 범위를 제공한다

수학 80점 -데이터 범주화→ 수학 70~90점

[데이터 사이언티스트에게 요구되는 역량]

Hard Skill:

Analytics, IT 전문성(Data mgmt)

빅데이터에 대한 이론적 지식: 관련 기법에 대한 이해와 방법론 습득
분석 기술에 대한 숙련: 최적의 분석 설계 및 노하우 축적
통찰력 있는 분석: 창의적 사고, 호기심, 논리적 비판
설득력 있는 전달: 스토리텔링, 비주얼라이제이션
다분야 간 협력: 커뮤니케이션

Soft Skill:

비즈니스 분석

2. 가치 패러다임의 변화⭐️

현대는 크게 디지털화, 연결, 에이전시로 패러다임이 변화했다

[가치 패러다임의 변화]⭐️

과거 Digitalization → 현재 Connection → 미래 Agency

디지털화(Digitalization)	아날로그의 세상을 어떻게 효과적으로 디지털화하는가가 이 시대의 가치를 창출해 내는 원천 예) 운영체제, 워드/파워포인트 같은 오피스 프로그램
→ 연결(Connection)	디지털화된 정보와 대상들이 서로 연결되어 이 연결이 얼마나 효과적이고 효율적으로 제공되느냐가 이 시대의 성패를 가름 예) 구글의 검색 알고리즘, 네이버의 콘텐츠
→ 에이전시(Agency)	사물인터넷(IoT)의 성숙과 함께 연결이 증가하고 복잡해짐 복잡한 연결을 얼마나 효과적으로 믿을 만하게 관리하는가가 이슈 데이터 사이언스의 역량에 따라 좌우

5. 하둡 에코시스템

오픈소스지만 확장성과 호환성이 높아서 최근 많은 기업이 채용하는 하둡 에코시스템(Hadoop Ecosystem)도 다른 에코시스템과 마찬가지로 특정한 기술 및 프레임워크가 아니라 하둡을 비롯한 십수 종의 다양한 기술과 프레임워크, 개발언어, 솔루션으로 이루어진 거대한 프로젝트의 집합체다 마치 여러 대의 자동차가 합체하여 하나의 거대한 로봇이 되는 애니메이션 변신 로봇처럼 하둡 에코시스템은 다양한 빅데이터 기술이 집합된 결정체라고 할 수 있다

대용량의 빅데이터를 처리하기 위한 기술이 개발되었는데 그 기술이 ‘Hadoop’ 파일 시스템 기술 이것들을 활용하기 위해 다양한 오픈소스(보통 기업이 프로그램을 개발하면 라이센스비를 받지만 라이센스 없이 소스를 오픈함 즉, 무료 활용 가능) 개발 이들 중 엮어 하나의 거대한 플랫폼 만든 것이 하둡 에코시스템

[하둡 에코시스템]

참고자료

초보 비전공자를 위한 ADsP 1과목 개념원리 특강 | 미어캣 | adsp 독학 | 벼락치기

[프로그래머스] 특별한 이차원 배열 2 (Java)

hisjeans — Mon, 30 Mar 2026 16:52:52 +0900

문제설명

n × n 크기의 이차원 배열 arr이 매개변수로 주어질 때, arr이 다음을 만족하면 1을 아니라면 0을 return 하는 solution 함수를 작성해 주세요.

0 ≤ i, j < n인 정수 i, j에 대하여 arr[i][j] = arr[j][i]

입출력 예

arr	result
[[5, 192, 33], [192, 72, 95], [33, 95, 999]]	1
[[19, 498, 258, 587], [63, 93, 7, 754], [258, 7, 1000, 723], [587, 754, 723, 81]]	0

작성한 코드:

class Solution {
    public int solution(int[][] arr) {
        boolean answer = false;
        for(int i=0;i<arr.length;i++){
            for(int j=0;j<arr.length;j++){
                if(arr[i][j]!=arr[j][i]){
                    return 0;
                    //다른 쌍을 발견했을 때 바로 0을 반환
                }
            }
            
        }
        return 1; //모든 i,j 쌍 확인 통과하면 1 반환
        
    }
}

처음에는 arr[i][j]=arr[j][i] 와 같이 서로 같은 경우에 대해서만 생각하여 코드를 작성하였다

하지만 위 같은 방식으로는 모든 쌍에 대하여 조건을 비교하기 어려웠다

일치하는 하나의 쌍에 대해서만 처리한 뒤 종료되는 문제가 발생하였다

따라서 arr[i][j]≠arr[j][i] 으로 부정 조건을 사용해 다른 쌍을 발견했을 때 바로 0을 반환하도록 수정하였다❗️

Stream을 이용한 다른 사람의 풀이:

import java.util.stream.*;

class Solution{
	public int solution(int[][] arr){
		return IntStream.range(0, arr.length) //0부터 arr의 길이만큼 반복
			.allMatch(i->IntStream.range(i+1, arr.length)//모든 i에 대해
				.allMatch(j->arr[i][j]==arr[j][i])? 1:0; //모든 j가 arr[i][j]==arr[j][i] 조건을 만족하면 1, 아니면 0 반환
				
	}
}

allMatch(조건)
람다식 (매개변수)→실행코드

왜 i+1부터 시작할까?

예를 들어 i가 0일 때 arr[0][1] vs arr[1][0], arr[0][2] vs arr[2][0]을 비교하고

i가 1일 때 arr[1][2] vs arr[2][1]이 같은지 비교하고

i가 2일 때는 i=0, 1일 때 확인하였기 때문에 더이상 비교할 것이 없다

중복 비교를 하지 않기 위해 i+1부터 시작하도록 설정한 것

회고

모든 쌍이 조건에 일치해야 할 때 부정조건을 사용해 조건에 부합하지 않는 쌍에 대해 바로 처리해보자
조건 확인할 때 if 뿐만 아니라 allMatch()도 고려해보자
대칭적 구조에서 중복 비교를 피하기 위해 i+1부터 순회할 수 있다

참고 자료: 프로그래머스 코딩테스트 연습

웹 Front-End와 웹 Back-End

hisjeans — Fri, 27 Mar 2026 15:51:40 +0900

‍♀️ 들어가기 전…

웹은 프론트엔드(FE)와 백엔드(BE)로 나뉨

브라우저를 프론트엔드 또는 클라이언트라고 함

웹백엔드는 인터넷 사용자에게 보이지 않는 것

학습 목표

웹프론트엔드에 대한 역할과 기술적 구성
웹백엔드에 대한 역할과 기술적 구성

핵심 개념

HTML
CSS
JavaScript
클라이언트
서버

학습하기

웹프론트엔드?

사용자에게 웹을 통해 다양한 콘텐츠/리소스(문서, 동영상, 사진 등)를 제공

또한, 사용자의 요청(요구사항)에 반응해 동작

웹프론트엔드의 역할

웹콘텐츠를 잘 보여주기 위해 구조를 만듦(일종의 신문, 책) - HTML
적절한 배치와 일관된 디자인 제공(보기 좋게) - CSS
사용자 요청을 잘 반영해야 함(소통하듯이 반응 자체가 부드럽고 빠르게 이루어져야 함) - Javascript

‍ HTML 코드 예

원하는 문서의 구조를 프로그래밍 언어로 표현해야 하는데 HTML이라는 것이 그 구조를 잘 표현

<h1>우리집에 오신걸 환영합니다</h1>
<section>
	<h2>위치</h2>
	<p>경기도 시흥시 어딘가 위치하고 있어요~</p>
	<h2>특징</h2>
	<p>우리집은 마루가 아주 작아요~ 하지만 옹기종기 모여있기 좋은 구조에요</p>
</section>
<footer><email:crong@kdd123.com></footer>

‍ 스타일-CSS 코드 예

웹페이지 꾸미기 위해 각각의 HTML 태그(문서의 구조를 표현한 각 조각 단위) 꾸미기 위한 규칙 필요, CSS가 이를 표현할 수 있는 프로그래밍 언어

.window-header-icon{
left:-28px;
position:absolute;
top:8px
}

.window-header-inline-content{
cursor:default;
display:inline-block;
margin:4px 6px 0 0
}

‍ 동작-JavaScript 코드 예

HTML, CSS 를 이리저리 움직이고 변경할 필요 있을 것, JavaScript가 그걸 해줌

let aCardList=[];
for(var i=0;i<cardList.length;i++){
let str='${cardList[i]}번째 카드';
let id='list-${cardList[i]}';
aCardList.push(<li id={id} key={i} draggable-'true' onDragStart={dragStart}>{str}</li>)
}

백 엔드(Back-End)란?

프론트 엔드(Front-end)가 프로그램의 앞 쪽, 클라이언트의 입장에서 개발이 진행된다면 백 엔드(Back-end)는 프로그램의 뒷 부분, 즉 서버 입장에서의 개발이 진행

프론트 엔드를 다른 말로 클라이언트 사이드(Client side)라고 말한다면, 백 엔드는 서버 사이드(Server side)

backend는 정보를 처리하고 저장하며, 클라이언트의 요청에 따라 정보를 내려주는 역할

백 엔드 개발자가 알아야 할 것들

프로그래밍 언어(JAVA, Python, PHP, Javascript 등)
웹의 동작 원리
알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
운영체제, 네트워크 등에 대한 이해
프레임워크에 대한 이해(ex. Spring)
DBMS에 대한 이해와 사용방법(ex. MySQL, Oracle 등)

참고자료

부스트코스 웹 프로그래밍(풀스택)

웹의 동작(HTTP 프로토콜 이해)

hisjeans — Fri, 27 Mar 2026 15:01:50 +0900

‍♀️ 들어가기 전…

웹 브라우저와 웹 서버 간에도 서로 통신하기 위해 규약 필요

이때 필요한 규약이 HTTP

학습 목표

HTTP 프로토콜의 작동방식에 대해 알아보자
HTTP 프로토콜의 요청/응답 데이터 포맷에 대해 알아보자

핵심 개념

HTTP
Request 형식
Request Method
Response 형식
응답 코드

학습하기

인터넷(네트웍 통신)의 이해

인터넷 ≠ WWW(World Wide Web) 물리적 1의 컴퓨터에 여러 서버 동작, 각 서버는 포트라는 값으로 구분돼 동작
인터넷 기반의 대표 서비스 중 하나

이름	프로토콜	포트	기능
WWW	HTTP	80	웹서비스
Email	SMTP/POP3/IMAP	25/110/114	이메일 서비스
FTP	FTP	21	파일 전송 서비스
DNS	TCP/UDP	53	네임서비스
NEWS	NNTP	119	인터넷 뉴스 서비스

인터넷(Internet)
TCP/IP 기반의 네트워크가 전세계적으로 확대되어 하나로 연결된 네트워크들의 네트워크(네트워크의 결합체)

웹의 동작(HTTP 프로토콜 이해)

물리적인 1의 컴퓨터에 여러개의 서버 동작 가능

각 서버는 포트라는 동작

HTTP(Hypertext Transfer Protocol)란?

팀 버너스리(Tim Berners-Lee)와 그가 속한 팀은 CERN에서 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기술과 HTTP를 발명
문서화된 최초의 HTTP버전은 HTTP v0.9(1991년)
HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)
HTTP는 계속 발전하여 HTTP/2까지 버전이 등장한 상태
어떤 종류의 데이터도 전송 가능

HTTP 작동방식

HTTP는 서버/클라이언트 모델 따름
클라이언트 -요청→ 서버 -응답→ 클라이언트
장점
- 불특정 다수를 대상으로 하는 서비스에 적합
- 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있음
단점
- 서버는 응답 후 클라이언트와의 연결을 바로 끊어버리기 때문에, 서버가 클라이언트의 이전 상황 알 수 없음
- 이러한 특징을 무상태(Stateless)
- 이러한 특징 때문에 정보를 유지하기 위해 Cookie와 같은 기술 등장

URL(Uniform Resource Locator)

인터넷 상의 자원의 위치
특정 웹 서버의 특정 파일에 접근하기 위한 경로 혹은 주소

출처: 부스트코스 웹 프로그래밍(풀스택)

요청되는 데이터는 정해진 규칙 있음=요청 데이터 포맷

요청 메시지는 헤더/빈 줄/바디 세 부분으로 나뉨

첫번째 줄의 요청메소드는 서버에게 요청의 종류를 알려주기 위해 사용
두 번째 줄부터 여러 줄의 헤더 정보
각각의 줄은 헤더 명과 헤더 값이 콜론으로 구분
각 줄은 라인피드와 캐리지 리턴으로 구분
바디 요소는 POST나 PUT 통해 들어옴

응답 데이터 포맷도 요청 데이터 포맷과 마찬가지로 헤더/빈 줄/응답 바디부분으로 나옴

첫 줄에 반드시 응답 HTTP 프로토콜의 버전
다음은 응답 코드 그리고 응답 메시지 등 나올 수 있음
나머지 헤더 부분에 날자, 웹 서버 이름과 버전, 콘텐츠 타입, 캐시 제어 방식, 콘텐츠 길이 등의 값이 나오게 됨
빈 줄 다음 나오는 것이 실제 응답 리소스 데이터가 나오는 부분

하나의 물리적 컴퓨터에 여러 소프트웨어 서버 동작 가능(서버는 포트 값이 다르게 동작해야 하고 포트 값은 0보다 큰 숫자 값)
IP: 집주소 같은 개념, 1의 컴퓨터에 1의 IP
포트: 하나의 방 같은 개념, 단 각 서버는 하나의 방을 하나씩 차지해야 함(여러 서버 존재할 수 없음), 포트 번호 각각 달라야 함
요청 메서드: GET, PUT, POST, PUSH, OPTIONS 등의 요청 방식 옴
요청 URI: 요청하는 자원의 위치 명시
HTTP 프로토콜 버전: 웹 브라우저가 사용하는 프로토콜 버전 명시

*최초의 웹 서버는 GET방식만 지원

GET: 정보를 요청하기 위해 사용(SELECT), 요청 바디 없음
POST: 정보를 밀어넣기 위해 사용(INSERT)
PUT: 정보를 업데이트하기 위해 사용(UPDATE)
DELETE: 정보를 삭제하기 위해 사용(DELETE)
HEAD: (HTTP)헤더 정보만 요청 해당 자원이 존재하는지 혹은 서버에 문제가 없는지 확인하기 위해 사용
OPTIONS: 웹 서버가 지원하는 메서드의 종류 요청
TRACE: 클라이언트의 요청을 그대로 반환 예컨대 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용

생각해보기

HTTP에 S가 붙은 HTTPS는 어떤 용도로 사용? HTTP와 무엇이 다른가?

ㄴ HTTPS는 하이퍼텍스트 전송 프로토콜 보안으로 웹 브라우저와 웹 사이트 간 데이터를 전송하는 데 사용되는 기본 프로토콜인 HTTP의 보안 버전

참고자료

부스트코스 웹 프로그래밍(풀스택)

[프로그래머스] 배열의 길이에 따라 다른 연산하기 (Java)

hisjeans — Tue, 24 Mar 2026 21:14:13 +0900

문제 설명:

정수 배열 arr과 정수 n이 매개변수로 주어집니다. arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을, arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을 return 하는 solution 함수를 작성해 주세요.

입출력 예:

arr	n	result
[49, 12, 100, 276, 33]	27	[76, 12, 127, 276, 60]
[444, 555, 666, 777]	100	[444, 655, 666, 877]

제출한 코드:

class Solution {
    public int[] solution(int[] arr, int n) {
        
        if(arr.length%2!=0){//arr 길이=홀수
            for(int i=0;i<arr.length;i++){
                //짝수 인덱스 위치에 n을 더해야 하니 0도 포함되어야
                if(i%2==0){
                    arr[i]+=n;
                }
            }
        }
        else{//arr 길이=짝수
            for(int i=1;i<arr.length;i++){
                if(i%2!=0){
                    arr[i]+=n;
                }
            }
        }
        return arr;
    }
}

처음에는 단순히 for(int i=0; i<arr.length; i++)으로 설정했지만 짝수나 홀수 인덱스에 맞춰 2 또는 1부터 시작하는 것이 효율적일 거란 생각이 들었다

하지만 짝수 인덱스를 처리할 땐 0 또한 포함되어야 한다는 것을 놓쳐 i=2로 초기값을 설정하는 실수를 했다

짝수, 홀수 인덱스를 다룰 경우, 각각 초기값을 0과 2부터 시작하는 것으로 변경하여 0 또한 짝수 인덱스에 포함되도록 설정해야 한다‼️

다른사람 풀이:

class Solution{
	public int[] solution(int[] arr, int n){
    	for(int idx=arr.length%2==0?1:0; idx<arr.length; idx+=2){
        //arr 길이가 짝수->idx=1,3,5,7...(홀수 인덱스), 홀수->idx=0,2,4,6...(짝수 인덱스)만 순회
        	arr[idx]+=n;
        }
        return arr;
    }
}

for 반복문의 초기값을 arr의 길이가 짝수이면 1, 홀수이면 0으로 시작
arr 길이가 짝수일 땐 홀수 인덱스인 1부터 n을 더한다 이때 반복루프를 돌며 1, 3, 5... 와 같이 2를 더해 홀수 인덱스일 때만 더하도록 지정하였다

arr의 길이가 짝수, 홀수인 것에 맞추어 처음부터 시작값을 결정할 수 있다

idx+=2로 if 인덱스 짝수, 홀수에 대한 조건문 없이도 인덱스 갱신 가능

class Solution{
	public int[] solution(int[] arr, int n){
    	for(int i=arr.length-1;i>=0;i-=2){
        	arr[i]+=n;
        }
      	return arr;
    }
    
}

for 반복문을 내림차순으로 시작
즉, arr의 마지막 인덱스(arr.length-1)부터 첫번째 인덱스(i>=0)까지 i-=2로 배열 길이가 홀수/짝수일 때 짝수/홀수 인덱스 위치에 n을 더함

arr의 길이에 따라 마지막 인덱스의 짝수, 홀수가 결정되고 이 수부터 2씩 감소시키면 별도의 조건문 없이도 조건을 충족시킬 수 있다

회고

짝수 개수에 0 빠뜨리지 말기
for문을 작성할 때 생각없이 0부터 시작하지 말고 문제의 조건에 맞춰 실행할 수 있는 방법을 생각해보자
조건문으로 단순히 필터링하는 방식뿐만 아니라 초기값, 증가폭을 이용해 필요한 인덱스를 직접 순회할 수도 있다
내 풀이를 비롯한 다른 사람의 풀이는 모두 O(n)의 시간 복잡도로 동일하다 왜냐하면 모두 한 번씩 해당 인덱스를 방문해야 하기 때문이다

참고자료: 프로그래머스 코딩테스트 연습

[프로그래머스] 배열의 원소 삭제하기 (Java)

hisjeans — Tue, 24 Mar 2026 13:18:00 +0900

문제설명:

정수 배열 arr과 delete_list가 있습니다. arr의 원소 중 delete_list의 원소를 모두 삭제하고 남은 원소들은 기존의 arr에 있던 순서를 유지한 배열을 return 하는 solution 함수를 작성해 주세요.

입출력 예:

arr	delete_list	result
[293, 1000, 395, 678, 94]	[94, 777, 104, 1000, 1, 12]	[293, 395, 678]
[110, 66, 439, 785, 1]	[377, 823, 119, 43]	[110, 66, 439, 785, 1]

오답:

class Solution {
    public int[] solution(int[] arr, int[] delete_list) {
        int[] answer = new int[arr.length];
        for(int i=0;i<arr.length;i++){
            for(int j=0;j<delete_list.length;j++){
                if(arr[i]!=delete_list[j]) answer[i]=(arr[i]);
                //현재 이중 for문은 delete_list의 원소와 하나라도 다른 값이 있다면 추가하기 때문에 문제가 발생하는 것 
                //-> 한 번이라도 delete_list 원소와 같을 때 추가해야 한다!
                
            }
        }
        return answer;
    }
}

(참고) int != Integer

자바에서 int 는 기본 타입(primitive type) != Integer 대문자로 시작하는 참조 타입(class) 으로 인식하게 된다

ㄴ 자바는 대소문자 구분하기 때문에 int와 Integer는 전혀 다른 심볼이 되는 것

* 자바에는 Int가 없다 → Integer

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

실행한 결괏값 [293,1000,395,678,94]이 기댓값 [293,395,678]과 다릅니다.

현재상황: 이중 for문에서 arr 원소가 delete_list의 원소와 다를 때마다 출력할 정답 배열에 대입하고 있다
문제: 문제는 delete_list의 원소와 arr원소가 한 번이라도 같을 때 삭제해야 하는 것‼️
결괏값은 원소가 하나라도 다를 때가 아니라 원소 하나라도 같을 땐 제외하고 모두 다를 때만 넣어야 한다❗️

boolean 변수를 두자

import java.util.*;

class Solution {
    public int[] solution(int[] arr, int[] delete_list) {
        List<Integer> list = new ArrayList<>();
        for(int i=0;i<arr.length;i++){
            boolean deleteV1=false;
            //처음에는 지우지 않도록
            for(int j=0;j<delete_list.length;j++){
                if(arr[i]==delete_list[j]){ 
                	deleteV1=true;
                	break;
                    //delete_list 내의 값과 겹치는 arr 원소는 삭제해야 하는 값으로 인식하고 넘어가자
                }
            }
            if(!deleteV1) list.add(arr[i]);
            //delete_list에 겹치는 값이 없다면 출력값에 추가되도록
        }
        
        int[] answer=new int[list.size()];
        for(int i=0;i<list.size();i++)
            answer[i]=list.get(i);
        //리스트를 int[]로 반환
        
        return answer;
    }
}

* delteV1 대신 shouldDelete 로 변수명에 의미를 명시해주는 것도 생각해보자

다른 사람 풀이1:

import java.util.stream.IntStream;

class Solution{
	public int[] solution(int[] arr, int[] delete_list){
    	return IntStream.of(arr).filter(i->!IntStream.of(delete_list).anyMatch(s->s==i)).toArray();
		//delet_list의 값과 일치하는 값을 제외한 arr원소들을 반환
	}
}

anyMatch(s->s==i)는 delete_list에 i와 일치하는 값이 하나라도 있다면 true인데 delte_list에 없는 값만 남기기 위해 !(not)으로 어떠한 값도 일치하지 않을 때만 통과되도록 하고 있다
즉, 일치하는 값이 하나라도 있을 땐 버리고 없을 땐 남겨주는 것
arr 전체를 Stream으로 변환
filter(조건) 으로 delete_list에 존재하지 않는 값만 남김
toArray() → 배열 int[]로 변환

다른 사람 풀이2:

import java.util.*;

class Solution{
	public int[] solution(int[] arr, int[] delete_list){
    	List<Integer> list=new ArrayList<>();
        for(int n:arr){
        	list.add(n);
            //arr->list
        }
        for(int n:delete_list){
        	list.remove((Integer)n);
        	//delete_list 값 삭제
        }
        int[] answer=new int[list.size()];
        for(int i=0;i<list.size();i++){
        	answer[i]=list.get(i);
            //list->배열
        }
        return answer;
}

list.remove(num); vs list.remove((Integer)num);

list.remove(num): 컴파일러는 num을 인덱스로 인식해 해당 인덱스의 값을 지운다
list.remove((Integer)num): num이란 값으로 인식해 값 num을 지운다

ArrayList에서 remove(int index)와 remove(Object o)가 오버로드되어 int=index, Object=값으로 동작하기 때문에 int는 Integer로 명시해줘야 한다‼️

회고

대소문자 실수하지 말 것
입력 원소 중 특정 리스트의 원소를 제외하고 출력해야 하는 문제의 상황은 특정 리스트의 원소와 하나라도 다를 때 출력하는 것이 아니라 입력 리스트의 원소와 조건으로 주어진 리스트의 원소가 하나라도 같을 때를 제외한 조건 리스트의 원소와 모두 다를 때 출력하는 것은 다르다
조건이 주어질 때 boolean 변수를 생각해보자
remove(int index) != remove(Object o)
list.remove 이용해 값을 삭제할 땐 Integer로 값을 직접 명시해줘야 한다

참고자료: 프로그래머스 코딩테스트 연습

Xcode-GitHub 연동할 때 발생하는 에러 해결하기

hisjeans — Wed, 18 Mar 2026 16:55:04 +0900

no authors 문제

커밋을 하는데, 터미널에서 git authors를 설정했지만 no authors가 뜸

ㄴ Git 설정 범위(scope) 문제‼️

Git 설정 범위:

local(현재 저장소에만)
global(현재 사용자 계정의 모든 저장소)
system(모든 사용자 및 저장소)

→ "--global" 옵션 주어 이후 생성되는 모든 레포에도 설정되도록 하자

cd #Xcode에서 프로젝트 폴더를 터미널로 드래그(경로 이동)

git config --global user.name "깃허브 사용자명"
git config --global user.email "깃허브에 사용한 이메일"
#전역으로 사용자 정보 설정

# 커밋, 푸시 in 터미널

cd #Xcode에서 프로젝트 폴더를 터미널로 드래그(레포 루트 이동)

git add . 
#모든 변경사항 스테이징

git commit -m "커밋메시지"
#커밋 기록 생성

git push origin main
#원격(main) 브랜치로 전송

* git status: 변경 사항 확인

Xcode에서 파일 이름 변경할 때 "Make sure a valid repository exists at the specified location and try again." 메시지가 뜰 때

ㄴ Xcode에서 폴더 이름을 변경한 뒤 이를 Git에 전달하는데, 경로 변화를 추적하지 못한 일시적인 오류

Finder에서 폴더 이름 변경한 후 commit 했는데 "The repository could not be found" 메시지가 뜰 때

ㄴ Git 입장, 기존 파일 삭제된 후 알 수 없는 새 파일이 생긴 것으로 인식

ㄴ "The repository could not be found": Xcode에서 .git 폴더 위치 놓쳤다

Git 기준으로 터미널 상태 정리하자‼️

Xcode 완전 종료(Cmd+Q)
터미널 연 다음 프로젝트 루트로 이동(cd 폴더 드래그)

cd #폴더 드래그

git status
#현재 Git 상태 확인-> "deleted:...untracked:..." 삭제된 파일, 새로 만든 파일이 뜸

git add .
#최신 상태임을 Git에게 알려줌

git commit -m "커밋 메시지 작성"

⇒ 폴더 이름을 바꿀 땐 Finder에서 직접 바꾸지 말고 "git mv" 를 사용하자

git mv #이전에 설정되어 있는 폴더 이름 #변경하려고 하는 폴더 이름
git commit -m "커밋 메시지 작성"
git push origin main

! [rejected] main -> main (fetch first)

error: failed to push some refs to...

ㄴ 이미 GitHub 원격(main)에 커밋되었지만 로컬 main에 이 커밋이 없어 원격 main에 비해 뒤쳐진 상태‼️ 여기서 바로 push를 시도해서 에러가 생긴 것

⇒ 우선 원격 변경 사항을 가져온 뒤에 합치자 pull → push

cd #파일 경로

git status
git branch
#브랜치가 현재 main인지 확인

git add .
git commit -m "Local initial commit"
#커밋되지 않은 변경사항이 많을 경우, 먼저 커밋하는 것이 안전

git pull --rebase origin main
#원격 main 변경 먼저 가져오자
#원격 커밋을 먼저 가져온 후 로컬 커밋 다시 쌓기

git push -u origin main

* pull -rebase: 히스토리 깔끔하게 유지 가능

정리

git authors를 설정할 땐 global 범위로 설정하여 앞으로 생성할 모든 레포에 동일한 이름과 이메일을 자동으로 사용하도록 하자
기본적으로 cd 루트로 이동 → git status 변경사항 확인 → git add . 변경한 것 스테이징 → git commit -m "커밋 메시지 작성" → git push origin main 원격 브랜치로 푸시하는 흐름 기억하자
Xcode에서 폴더 이름을 직접 변경하거나 Finder에서 바꾸는 것 보다 << 안전하게 git mv 사용하자
히스토리 깔끔하게 유지하는 방법으로 pull --rebase 사용하자

git push, pull, fetch, init, add

hisjeans — Thu, 5 Mar 2026 17:40:04 +0900

git push: 원격 저장소로 내 작업 올림

로컬 환경에서 개발하며 여러 번 commit으로 버전 저장하고 난 후, 최종적으로 이 이력을 원격 저장소인 GitHub 에 업로드해야 함

이때 활용하는 git 명령어 = git push

git push: 로컬 저장소에 쌓인 커밋들을 원격 저장소의 해당 브랜치로 전송
수동 push ← because, 정교하게 push하기 위해서
push되면 로컬 환경에서 개발한 코드 뿐 아니라 개발하면서 중간중간 commit 했던 이력들 또한 업로드됨

git pull: 내 브랜치에 원격 변경 사항 반영

when, 로컬에서 개발 중인 다른 팀원이 먼저 본인의 작업물 push 함으로 원격저장소 내용 변화 발생

이때 원격저장소의 변경 사항을 현재 내 로컬 브랜치에 반영해 개발 계속하고자 함

이때 활용하는 명령어 git pull

git pull: 원격 저장소의 변경 이력을 가져온 후(fetch), 현재 브랜치와 자동으로 합치는 merge를 동시에 진행

git fetch, git pull 구분해 사용하는 이유

when, 로컬 환경에서 작업하던 중 원격저장소의 내용을 다른 팀원이 수정함

이때 내가 개발한 내용을 원격저장소에 push하려고 한다면 → 거절❗️

because, 원격저장소에 팀원의 수정사항이 이미 반영 되어 있고, 이때 우리의 push 를 받는다면 팀원의 수정사항이 overwrite 되는 상황 발생

⇒ pull 대신 → git fetch, merge 를 분리해 사용‼️

git fetch: 원격 저장소의 내용 -"가져오기만"→ 로컬 저장소
fetch 이후, 원격 브랜치와 로컬 브랜치 비교하며 충돌되는 상황 발생하지 않는지, 충돌한다면 어떻게 해결하면 좋을지 확인한 후, 문제가 없다고 판단되면 git merge → 두 브랜치 병합
작업 후 push하는 습관 들이자

command+shift+p > gc(git commit)

동기화: commit pull, push

/ github의 repository를 먼저 만들고 clone하는 과정을 거쳐 원격저장소로부터 로컬 저장소 구성할 수 있음

git init: 기존 폴더 → Git 저장소

이미 로컬에서 개발한 Git을 이용해 형상관리 원격저장소에 업로드할 수 있지 않을까?

이때 로컬저장소에 필요한 명령어 git init
git init → 로컬 저장소를 Git 통해 관리 가능

git add와 파일 상태

git commit은 버전 기록할 때 활용

commit 할 때 여러 파일 수정사항 기록해도 좋지만, 하나의 commit에 하나의 파일만 저장할 수 있다면 다른 팀원들이 commit history 볼 때 조금 더 수월하게 볼 수 있을 것

이때 활용하는 명령어 = git add

git add는 git commit에 포함될 파일 지정

git add → 하나의 파일 지정 → 해당 파일 stage에 올림

파일 상태:

워킹 디렉터리의 모든 파일은 크게 Tracked(관리대상)/Untracked(관리대상 아님)로 나눔

Tracked 파일: 이미 스냅샷 포함되어 있던 파일로 Git이 알고 있는 파일
나머지 파일 모두 Untracked 파일: 워킹 디렉토리에 있는 파일 중 스냅샷에도 Staging Area에도 포함되지 않은 파일

Tracked 파일은 세 가지 상태로 나뉨

Unmodified(수정하지 않음)
Modified(수정함)
Staged(커밋으로 저장소에 기록할)

처음 저장소를 git clone하면 → 모든 파일은 Tracked이면서 Unmodified상태

〰️ because, 파일 Checkout하고 나서 아무것도 수정하지 않았기 때문

마지막 커밋 이후 아직 아무것도 수정하지 않은 상태에서 어떤 파일 수정하면 Git은 그 파일 Modified 상태로 인식

실제 커밋 위해 이 수정한 파일을 Staged 상태로 만들고, Staged 상태의 파일 git commit하면서 라이프사이클(Tracked+Unmodified) 계속 반복

정리:

git init 또는 git clone으로 로컬 저장소 준비
코드 수정, 의미 있는 단위가 되었을 때 git add로 스테이징
git commit해 버전 기록 남김
if) 팀 작업인 저장소라면 git fetch/git pull 수시로 변경사항 반영
충돌 여부 확인 및 테스트 후, git push로 나의 변경 내용 공유

참고자료

boostcourse 「Github으로 따라하는 버전 관리」

GitHub: Repository, Commit, Issues, Config, Clone

hisjeans — Thu, 26 Feb 2026 10:38:24 +0900

Repository(저장소):

GitHub상 프로그램 담는 저장소

Repository에서 코드 저장할 수 있을 뿐 아니라 Commit 히스토리, Pull Request 등 협업 위한 여러 작업 가능

개발하는 프로젝트 담는 폴더

Commit(버전 저장):

"제출하다" 라는 뜻

Git에서 버전 저장하는 것 의미

Commit History → 시간순 확인 가능

Issues(소통 및 관리 도구):

개발하면서 소통 해야할 때 많음

버그 발생해 debug 해야 하거나 새로운 기능 만들어야 하는 것도 포함될 것

이런 상황의 대부분 코드를 보고 의견을 교환하여 해결해야 하는 경우 많음

ㄴ issues는 repository에서 이러한 기능을 수행

issues에서 “issue 생성” → 해결하고 싶은 문제 업로드, 의견 달 수 있음

이 때 해당 이슈가 어떤 것인지 알려주는 labels, 해당 이슈 처리할 사람이 누구인지 Assignee으로 지정할 수 있음

Clone:

GitHub의 Repository 내용 -복제→ 내 컴퓨터(로컬) 환경

⇒ 로컬환경에서 GitHub의 파일받아 개발 가능

Config:

로컬 환경에서 작업 후 commit 진행할 때, "누가 해당 커밋을 했는지" 기록하고 확인 필요

해당 작업 수행하는 git 명령어 = git config

git config -- global user.name egoing
git config -- global user.email egoing@gmail.com

git config에 --global 옵션을 더해 해당 값을 기본값으로 활용

사용자의 이름(user.name), 이메일 주소(user.email) 등록

참고자료

boostcourse 「Github으로 따라하는 버전 관리」

Git과 Github

hisjeans — Wed, 25 Feb 2026 15:36:56 +0900

Git과 Github란?

예: “dropbox”

in 개발자 세계, 검증 끝난 정보도구 → 일반인 사용 가능

“dropBox client” 컴퓨터에 설치하는 프로그램

⬆️ “dropbox.com” 정보 저장되는 인터넷 상의 서버

이와 비슷한 개념 Git

Git:

when 소프트웨어 개발, 여러 사람 참여 방식 → 개발 효율 ⬆️

이때 중요한 점‼️:

팀원들 개발 도중 수정된 내역 다른 팀원 바로 확인

서비스에서 배포된 소프트웨어의 버전 관리 통해 개발의 효율성 ⬆️

Git server & Git client:

git 여러 버전 관리 시스템 중 분산된 환경 → 소스코드 관리

분산 환경 시스템에는 중앙서버, 클라이언트 존재

코드 모아놓게 되는 원격 컴퓨터 = remote server

그 코드 사본 받아 개발하는 개인/지역 컴퓨터 = local client

Git에서 git server와 git client 존재

git client는 git server의 사본을 가지고 각자의 로컬 환경에서 개발 할 수 있음

“git server”: github.com, gitlab 등

⬆️ 작성 문서 ⬇️ 동기화

“git client”: git CLI(Command-line interface), Visual Studio Code에 내장된 git

⇒ 협업

참고자료

boostcourse 「Github으로 따라하는 버전 관리」

volatile 키워드

hisjeans — Wed, 25 Feb 2026 15:27:35 +0900

다음 내용은 C 언어 코딩 도장, Microsoft Learn의 내용을 바탕으로 작성되었습니다.

volatile 자료형 변수이름;

when 변수 선언, volatile 키워드로 컴파일러가 해당 변수를 최적화 대상에서 제외하고 항상 메모리에 접근하도록 함

예:

volatile int num1=10; //num1 변수 값이 바뀔 수 있으니 항상 메모리에서 직접 읽으라고 컴파일러에게 알려주는 것

어떤 변수는 왜 최적화하면 안 될까?

volatile:

컴파일러가 실행 속도를 향상시키기 위해 변수의 값을 레지스터에 캐싱해 재활용하지 못하도록 함

→ 프로그램이 매번 메모리에 접근해 최신 값 읽어와야 하는 것

예:

int i=0;
while(i<10)
	i++;
printf("%d\n", i);

코드 최적화 → while 반복문 없애고 i에 10 할당(Visual Studio의 /O2 옵션, GCC의 -O3 옵션 사용해 최적화)

↓

int i=10;
printf("%d\n", i);

컴파일러가 판단하기에 반복문을 수행한 결과 = 10 〰️ 따라서 반복문 필요 ❌, 컴파일러 최적화 ‼️

if) i를 volatile 로 선언하면 → 반복할 때마다 컴파일러가 항상 i의 메모리에 접근해야 하기 때문에 컴파일러는 while 반복문을 없애지 않음, 컴파일러 최적화 ❌

volatile int i=0; //volatile로 선언->항상 메모리 접근하도록 만듦
while(i<10) //항상 i의 메모리에 접근해야 하기 때문에 컴파일러가 반복문을 없애지 않음
	i++;
printf("%d\n", i);

즉, volatile 은

변화하는 값을 가지고 있으니 변화할 때 사용하자
측정하고자 하는 루프 or 변수 접근이 컴파일러에 의해 제거되지 않으므로 최적화를 의도적으로 막고 싶을 때 volatile 유용
필요할 때마다 반드시 읽어서 사용
컴파일러가 임의로 변수 값을 캐싱하지 못하게 함
volatile 키워드 각각의 변수에 적용, 최적화하지 않고 동작하도록 함
벤치 마크 테스트 등을 위하여 컴파일러 최적화를 의도적으로 배제해야 하는 경우 유용하게 사용 가능
인터럽트 서비스 루틴과의 통신에 사용되는 다중 처리나 전역 데이터 영역에서 접근할 수 있는 공유 메모리에서 개체 선언하는 데 유용
컴파일러가 프로그램에 액세스할 때마다 메모리에서 값을 다시 로딩하여 개체의 상당한 최적화 횟수를 줄일 수 있음
개체 상태 예기치 않게 변경되는 경우 예상 가능한 프로그램 성능 보장하는 유일한 방법
인터럽트, 멀티스레드, 하드웨어 접근 관련 코드에서 필수

참고자료: 코딩 도장, Microsoft Learn

[프로그래머스/Java] 분수의 덧셈

hisjeans — Tue, 24 Feb 2026 14:16:43 +0900

다음 내용은 프로그래머스 코딩테스트 입문 문제를 기반으로 작성된 글입니다.

문제 설명:

첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요.

입출력 예:

numer1	denom1	numer2	denom2	result
1	2	3	4	[5,4]
9	2	1	3	[29,6]

문제 이해:

두 분수의 분자(numer), 분모(denom)가 모두 주어졌을 때, 이를 더한 값을 기약분수로 나타낸다면

입력: numer1, denom1, numer2, denom2
출력: [분자, 분모] 형태 배열로 반환

분수 덧셈 공식:

두 분수를 통분해 더한 뒤, 분자와 분모의 최대공약수(GCD)로 나눠 기약분수로 만들어야 함

나의 풀이:

class Solution {
    public int[] solution(int numer1, int denom1, int numer2, int denom2) {
        int[] answer = new int[2]; //배열 초기화
        int den=denom1*denom2; //통분
        int num=numer1*denom2+numer2*denom1;
        int gcd=1;
        for(int i=1;i<=den&&i<=num;i++){
            if(den%i==0&&num%i==0)
                gcd=i; //최대공약수 갱신
            //반복문 작은 수 ~ 큰 수 진행되어 루프 마지막 최대공약수 저장
            //기약분수 만들기 위해 최대공약수 이용해야
        }
        den=den/gcd;
        num=num/gcd;
        answer[0]=num;
        answer[1]=den;
        return answer;
    }
}

시간 복잡도: O(N) _ 분자, 분모 가운데 더 작은 수까지 반복하기 때문에 선형 시간
배열 초기화, 단순히 분모가 같은 경우와 다른 경우를 나누어 처리하는 것 보다 기약분수를 통하여 계산하는 것이 효과적
최대공약수 즉, 분자와 분모의 GCD 구해야 함
기약분수 예: 1/4 + 1/4 = (1x4+1x4) / (4x4) = 8/16 = 1/2
분수 덧셈(통분 과정): (numer1 denom2 + numer2 denom1) / (denom1 * denom2)

문제는 최대공약수를 얼마나 빨리 찾는가

성능 개선 방법 1:

반복 범위 최소화

int limit=Math.min(den, num);
for(int i=1;i<=limit;i++);
//den, num 두 개의 조건을 모두 검사하지 않고, 두 수 가운데 더 작은 수까지만 반복해 반복 범위 최소화
{...}

성능 개선 방법 2:

GCD 구할 때 단순히 1부터 반복(if 분자, 분모 매우 큰 수라면 반복횟수가 커져 성능 저하 발생 가능)

- 성능↑, 숫자 기하급수적 증가할 때 발생하는 알고리즘적 한계 해결 필요

⇒ 유클리드 호제법 O(log N) 시간 복잡도로 원래 풀이 O(N) 보다 빠르게 최대공약수를 구할 수 있음

원리:

A, B 두 수가 있을 때(A>B), A를 B로 나눈 나머지를 R이라 함
A, B 최대공약수 = B, R의 최대공약수
나머지 값이 0이 될 때까지 위 과정 반복, 0이 될 때 나누는 수=최대공약수

풀이:

static int gcd(int a, int b){ //두 수 a, b 있을 때
	while(!=0){ //0이 될 때까지 반복
    	int r=a%b; //a를 b로 나눈 나머지=r
        a=b;
        b=r;
        //a, b 최대공약수 = b, r 최대공약수
    }
    return a; //0이 될 때 나누는 수 = 최대공약수
}

다른 사람의 풀이:

class Solution {
    public int[] solution(int numer1, int denom1, int numer2, int denom2) {
        int mother = num1 * num2; //분모
        int son1 = num1 * denum2; //첫 번째 분자
        int son2 = num2 * denum1; //두 번째 분자
        int totalSon = son1 + son2; //첫 번째 분자, 두 번째 분자의 합
        for(int i = mother; i >= 1; i--){ //내림차순으로 큰 수부터 공약수 찾기
            if(totalSon % i == 0 && mother % i == 0){
                totalSon /= i; //즉시 나누기
                mother /= i;
            }
        }
        int[] answer = {totalSon, mother};
        return answer;
}

mother(분모)~ 시작해 값 줄여가며 공약수 찾음
하지만 숫자가 크다면 유클리드 호제법 이 적합_왜냐하면 큰 수에서 시작해 내려오는 방식 또한 최악의 경우 O(N) 시간 소요되기 때문

정리 :

최대공약수를 구할 때 오름차순 < 내림차순 이 유리하기는 하나

유클리드 호제법 같은 수학적 알고리즘을 잘 활용한다면 시간 복잡도를 보다 획기적으로 단축 가능

Math.min() 함수로 연산 범위를 줄이는 습관 필요

참고 자료: 프로그래머스 코딩테스트 입문

[프로그래머스/Java] 콜라츠 수열

hisjeans — Mon, 23 Feb 2026 16:32:39 +0900

다음 내용은 프로그래머스 코딩테스트 연습 기반으로 작성된 글입니다.

콜라츠 수열: 수가 커졌다 작아지기를 반복하다 1에 수렴하는 모습을 우박에 빗대어 '우박수', '우박수열'이라 부름

자연수 n에 대해 다음 작업 반복

T(n) = n/2 (n이 짝수일 때)
T(n) = 3n+1 (n이 홀수일 때)

함수 T(n)을 자연수 n에 대해 반복한다면 1로 수렴한다는 추측

또한 다음과 같이 표현할 수 있음

T'(n) = n/2 (n이 짝수일 때)
T'(n) = 3n+1/2 (n이 홀수일 때)

위 과정에서 거쳐간 모든 수를 기록한 수열 = 콜라츠 수열
계산 결과 1,000 이하의 수에 대해 전부 1에 도달한다는 것
임의의 1,000 보다 작거나 같은 양의 정수 n이 주어질 때 초기값 n인 콜라츠 수열을 return 하는 solution 함수 완성

나의 풀이:

import java.util.ArrayList;
import java.util.List; //list, arraylist java.util 패키지에 있기 때문, 'import java.util.*;' util 패키지 전체 import할 수 있음
class Solution {
    public int[] solution(int n) {
        List<Integer> answer=new ArrayList<>(); //배열 크기 모를 때 사용하기 적합
        answer.add(n); //초기값 추가
        while(n!=1){ //1이 될 때까지 반복
            if(n%2==0) {
                n=n/2;
                answer.add(n);
            }
            else {
                n=3*n+1;
                answer.add(n);
            }
          //answer.add(n); //while문 밖에 작성하여 업데이트된 n값을 리스트에 추가하는 문을 한 번만 작성하여 처리할 수 있음
        }

        return answer.stream().mapToInt(Integer::intValue).toArray();

    }
}

List< Integer>: 길이 미리 예측할 수 없는 배열에 적합
수열 얼마나 길어질지 예측할 수 없기 때문에 동적 배열 이용
문제 반환 타입은 int[]이기 때문에 stream() 사용해 리스트 기본형 배열로 변환

다른 사람의 풀이:

import java.util.stream.IntStream;

class Solution{
  public int[] solution(int n){
    return IntStream.concat(
      IntStream.iterate(n, i->i>1, i->i%2==0? i/2:i*3+1), 
      //n에서 시작해 i>1인 동안 반복 짝수일 때 i/2 홀수일 때 i*3+1 계산(초기값, 계속조건, 다음값 계산)
      IntStream.of(1))
      .toArray();
  }
}

IntStream.iterate(초기값, 조건, 다음값): n부터 시작해 i>1인 동안 3번째 인자의 람다식(짝수 → /2, 홀수면 → *3+1) 반복 수행
IntStream.concat: iterate 조건 i>1이기 때문에 마지막 1이 포함되지 않기 때문에 IntStream.of(1)을 이용하여 마지막 수 1을 강제로 붙임

정리

Java의 기본 라이브러리 사용법 확인:
1. java.lang 패키지 내 클래스(int, String 등) → import 불필요
2. 같은 패키지 내 클래스 → import 불필요
3. 다른 패키지 클래스 → import 필요
⇒ List, ArrayList 등 java.util 패키지에 있는 클래스이기 때문에 import 필요(import java.util.*; 으로 한 번에 처리 가능)
배열은 크기 고정이지만 리스트는 가변 크기로 결과값 개수 예측하기 힘든 배열에 대해 ArrayList 활용하는 것이 효율적
반복 루프 전 초기값 추가 "answer.add(n)"
반복 조건은 n이 1이 될 때까지 반복되도록
n은 answer.add 사용해 업데이트

참고 자료: 프로그래머스 코딩테스트 기초문제

컴퓨터 과학 입문: 2진법부터 알고리즘, 스크래치까지

hisjeans — Mon, 23 Feb 2026 15:53:18 +0900

1. 2진법(Binary)

컴퓨터 과학은 문제를 해결하는 과정, 즉 문제 해결에 대한 학문이자 정보 표현 방법이 핵심

input → 문제 해결 중간 과정: '컴퓨터과학' → output

진법 원리

- 10진법: 0~9까지 총 10개의 기호로 표현 (일상에서 사용)

컴퓨터는 0과 1로 이루어져 있는데, 이 숫자로 어떻게 사진과 영상을 표현할 수 있을까?
ㄴ 2진법: 0과 1의 조합으로 글자, 사진, 영상, 소리 등을 저장 (컴퓨터에서 사용)

0과 1보다 큰 수는 어떻게 표현할까?
ㄴ 010은 숫자 2를 2진법 패턴으로 표현

ㄴ 100은 백이 아닌 4를 의미 (2²×1 + 2¹×0 + 1×0 = 4)

컴퓨터에는 많은 스위치(트랜지스터)가 있으며, on/off 상태로 0과 1을 표현

비트:

2진법에서 하나의 자릿수를 표현하는 단위 (0 또는 1, 두 가지 값만 가질 수 있는 측정 단위)

1 또는 0, 참 또는 거짓, 켜짐 또는 꺼짐 등 두 가지 상태를 사용해 정보를 표현

8bits = 1Byte

총 2⁸ = 256개의 서로 다른 바이트가 존재

Byte가 모이면
↓
KB (1,000 byte)
↓
MB (1,000 kilobyte = 100만 바이트)
↓
GB (1,000 megabyte = 10억 바이트)
↓
TB (1,000 gigabyte = 1조 바이트)
↓
페타바이트, 엑사바이트 등 더 큰 단위까지 표현 가능

트랜지스터: 컴퓨터 속 가장 작은 스위치로, 물리적으로 정보를 표현

2. 정보의 표현

문자 표현

- 문자를 숫자로 표현할 수 있도록 정해진 표준: ASCII(아스키코드)

- 아스키코드는 총 128개의 부호를 정의 (A:65 ~ Z:90)

예: 키보드

ASCII만으로 모든 문자를 표현하기에는 부족 →

- 유니코드(Unicode): ASCII의 상위집합으로, 더 많은 비트를 사용해 다양한 문자를 표현 가능 (이모티콘까지 0과 1의 패턴으로 표현)

이미지와 영상 표현

- 픽셀:

스크린에 표시되는 수많은 작은 점들 (빨간색, 초록색, 파란색)

세 가지 색상을 서로 다른 비율로 조합해 특정 색을 만듦

- RGB(Red, Green, Blue): 예를 들어 빨간색 72, 초록색 72, 파란색 33을 섞어 노란색을 만드는 숫자 표현 방식

- 사진은 파일에 저장되고, GIF는 사진을 연속으로 빠르게 보여주어 움직이는 것처럼 보이게 함

- 영상은 수많은 그림을 연속적으로 이어 붙여 숫자로 표현 가능 (2진수 → 10진수 → 글자, 색상 → 영상)

- 음악은 음표를 이용해 숫자로 표현 가능

3. 알고리즘(Algorithm)

알고리즘:

컴퓨터는 순서대로 필요한 동작을 수행하여 문제를 처리

input (숫자, 글자, 색깔 등 컴퓨터가 이해할 수 있는 2진법 표현) → 알고리즘: 입력 자료를 출력 형태로 만드는 처리 과정 → output

알고리즘 = 입력값을 출력값 형태로 바꾸기 위해 어떤 명령어가 수행되어야 하는지를 나타낸 규칙들의 순서적 나열

알고리즘을 평가할 때는 정확성과 효율성 (작업 완료까지의 시간, 노력 등)이 중요

의사코드:

필요한 행동과 조건을 잘 설정해 컴퓨터가 수행해야 하는 일을 절차적으로 파악하는 데 도움

컴퓨터가 수행할 작업을 사람이 사용하는 언어로 알고리즘의 논리적 절차를 작성

Pick up phone book
Open to middle of phone book
Look at page
If Smith is on page
Call Mike
Else if Smith is earlier in book
Open to middle of left half of book
    Go back to line 3
Else if Smith is later in book
Open to middle of right half of book
    Go back to line3
Else
Quit

파이썬, C언어 공통점: 함수(Functions)

함수(Functions):

컴퓨터에게 무엇을 할지 알려주는 동사

"Pick up", "Open to", "Look at", "Call", "Quit"

조건(Conditions):

여러 선택지 중 하나를 택함

"If", "Else if", "Else"

불리언(Boolean):

Yes or No, True or False와 같이 2진법에서 0 또는 1이 나오는 질문

"Smith is on page", "Smith is earlier in book", "Smith is later in book"

루프(Loop):

반복 순환

"Go back to line 3"

4. 스크래치: 기초

프로그래밍 언어를 사용하는 쉬운 방법 중 하나는 스크래치와 같은 그래픽 프로그래밍 언어를 사용해 알고리즘을 만드는 것

스크래치:

알고리즘의 구성 요소: 함수, 조건, 불리언 표현, 루프 등

그래픽 프로그래밍 언어

블록을 옮겨 붙이며 알고리즘을 만들 수 있음

화면 왼쪽: 함수, 변수 등의 퍼즐 조각들 → 화면 중간으로 이동

화면 오른쪽: 알고리즘의 결과

스크래치 블록:

블록의 종류 → 프로그램이 수행하는 일의 종류

입력 → 블록 → 출력

(예: "hello, world" 입력 → "말해라" 블록 → 고양이가 "hello, world" 말함)

입출력을 이어 붙여 여러 작업을 순차적으로 수행 가능

단, 컴파일은 스크래치에서 블록으로 구현할 수 없음

5. 스크래치: 심화

변수, 루프

변수를 사용해 정보를 저장하고 재사용 가능

(예: "count", 불리언 변수('참' or '거짓'))

조건문을 활용해 복잡한 프로그램 구현 가능

참고 자료

부스트코스 '모두를 위한 컴퓨터 과학(CS50 2019)'