elvia_choi.log

📌 Git 설치부터 Git 필수 명령어까지 한 번에 정리!

Wed, 16 Jul 2025 07:16:47 GMT

1. 🧩 Git이란 무엇인가?

Git은 분산 버전 관리 시스템(DVCS: Distributed Version Control System)으로, 여러 사람이 함께 개발할 때, 코드가 어떻게 바뀌었는지 기록하고 관리해주는 역할을 합니다. 문서의 '되돌리기' 기능처럼, 이전 상태로 쉽게 돌아갈 수 있어 실수를 줄일 수 있고, 협업을 원할하게 만들어줍니다.

✅ Git의 주요 특징

분산 저장: 인터넷이 없어도 작업이 가능
빠른 속도: 대부분 작업을 내 컴퓨터에서 처리
브랜치 기능: 여러 작업을 동시에 진행하고 나중에 합치기 쉬움
데이터 보호: 코드 변경 이력을 안전하게 기록

2. 🛠️ Git 설치하기

💻 windows 버전

1) https://git-scm.com/ 에 접속한 후, Windows용 Git 다운로드 2) 설치 시 기본 옵션은 대부분 그대로 진행한 뒤, 설치가 완료되면 PowerShell 또는 터미널에서 git --version 을 입력해서 확인한다.

🍎 MacOS 버전

1) Homebrew 설치

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2) 터미널 실행 후 Git 설치

brew install git

3) Xcode Command Line Tools 설치 후, 터미널에서 git --version을 입력하면 설치된 깃 버전이 나온다.

🌸 요즘에는 기본 브랜치 이름 설정을 master에서 main으로 바꿔주는 편으로 설치가 완료된 후에는 터미널에 아래와 같은 명령어를 입력하면 좋다.🌸

git config --global init.defaultBranch main

3. 🔑 Git 기본 설정

설치 완료 후, 터미널에 다음 명령어를 입력해 사용자 정보를 설정합니다. 이 정보를 등록하면 코드를 저장(commit)할 때마다 기록이 되어 누가 변경했는지 식별할 때 사용합니다.

## 전역 설정하기
git config --global user.name "내 이름"
git config --global user.email "내 이메일@example.com"


## 현재 저장소에만 설정하기
git config user.name "내 이름"
git config.user.email "내 이메일@example.com"


## 기본 에디터 VS Code로 설정
git config --global core.editor "code --wait"

설정 확인

## 전체 설정 보기
git config --list


## 특정 설정 보기
git config user.name
git config user.email

4.🧪 Git 기본 명령어 정리

1) 깃 도움말 보기

## 깃에서 제공하는 모든 도움말 보기
git help -all

## 특정 command에서 사용할 수 있는 도움말 보기
git [command] -help

2) 깃 세팅 및 초기화

## 로컬 저장소 초기화
git init

## 원격 저장소 복제
git clone https://github.com/user/repo.git

## 특정 브랜치만 복제
git clone -b 특정 https://github.com/user/repo.git

3) 파일 상태 확인

## 저장소 상태 확인
git status

## 간략한 상태 확인
git status -s

## 변경사항 확인
git diff

## 파일 추가(스테이징)은 했지만 커밋하지 않은 변경사항 확인
git diff --staged

4) 파일 추가 및 커밋

## 파일 추가 (스테이징)
git add 파일명

## 모든 변경 파일 추가 
git add .

## 커밋하기
git commit -m "커밋 메시지"

## 파일 추가(스테이징)과 커밋을 한번에 하기
git commit -am "커밋 메세지"

5) Git 실수했을 때 되돌리기 명령어 모음

## 1. 작업 중인 파일의 변경사항 되돌리기
git checkout -- 파일명.txt (# 예전 방식, 현재는 권장X)
git restore 파일명.txt (# 현재 권장되는 방식)

🔁 작업 디렉토리에서 수정한 파일을 마지막 커밋 상태로 되돌립니다.

## 2. 파일 추가(스테이징)한 올린 파일 되돌리기
git reset HEAD 파일명.txt   (# 스테이징 해제)
git restore --staged 파일명.txt (# 같은 기능, 권장 방식)

🔁 git add 한 파일 다시 작업 중인 상태로 되돌립니다.

## 3. 마지막 커밋 메세지 수정
git commit --amend -m "수정된 메세지"

🔁 방금 전 커밋 내용을 다시 작성하거나 메세지를 수정할 수 있습니다.

## 4. 특정 커밋 되돌리기 (기록은 남김)
git revert 커밋해시

🔁 해당 커밋의 '반대 작업'을 새 커밋으로 추가합니다. 기록을 보존하면서 실수를 되돌릴 때 사용합니다.

## 🚨 5. 특정 커밋 이전으로 되돌리기 (기록 삭제)
git reset --hard 커밋해시

🔁 해당 커밋 이후의 히스토리와 작업 내용을 모두 제거합니다. 주의해서 사용! 🚨

6) 히스토리 조회 하기

## 깃 커밋 히스토리 보기
git log

## 깃 커밋 히스토리 한 줄로 보기
git log --oneline

## 깃 커밋 그래프로 보기
git log --graph --oneline

7) 브랜치 관리

## 브랜치 목록 보기
git branch

## 새로운 브랜치 생성
git branch 브랜치이름 

## 생성한 브랜치로 이동(전환)
git switch 브랜치이름
git checkout 브랜치이름

## 브랜치 생성과 동시에 이동(전환)
git checkout -b 브랜치이름
git switch -c 브랜치이름

## 브랜치 삭제
git branch -d 브랜치이름

## 브랜치 강제 삭제
git branch -D 브랜치이름

## 브랜치 병합
git merge 병합할브랜치이름

## 브랜치 병합 취소
git merge --abort

## 현재 브랜치의 모든 커밋과 히스토리 확인
git log

8) 리베이스 (rebase)

🔀 리베이스란?

rebase 는 쉽게 말해 내 작업을 최신 상태 위에 다시 정리해서 붙이는 명령어입니다. merge처럼 브랜치를 합칠 때 사용되며, merge 보다 기록이 훨씬 깔끔하게 정리된다는 장점이 있습니다.

📌 아래는 리베이스에 대한 비유 (지피티한테 물어 봄)

친구와 함께 요리 레시피를 만들고 있는데 친구는 기본 레시피(main) 에 최신으로 업데이트하고, 나는 토핑이나 소스 같은 추가 아이디어(feature 브랜치) 를 따로 적고 있는 상황에서 친구의 기본 레시피가(main)가 바뀜
단순 병합(merge)의 경우, 그냥 두 레시피 노트를 붙여 버려서 겹치는 부분이나 충돌 기록이나 중복된 변경사항이 생겨 레시피 노트가 지저분해진다.
반면, rebase는 깔끔하게 정리해서 붙이는 방식으로 최신 레시피(main)을 먼저 보고, 그 위에 내가 추가한 아이디어들만 깨끗하게 다시 쓴다.

✅ 언제 쓰면 좋을까?

## 내 브랜치를 최신 main 기준으로 정리하고 싶을 때
git rebase main

## 최근 n개의 커밋 정리 (합치기, 메세지 수정 등)
git rebase -i HEAD~n

## 충돌 해결 후 리베이스 이어서 진행
git rebase --continue

## 리베이스 도중 취소
git rebase --abort

9) 임시 저장(stash)

🧠 Stash란? : git stash는 현재 작업 중인 변경 사항을 임시로 저장해두는 Git의 기능입니다. 작업 도중 다른 브랜치로 전환하거나 급히 다른 작업을 해야 할 때, 변경 내용을 커밋하지 않고도 안전하게 보관할 수 있습니다. 저장된 변경 사항은 이후에 다시 불러와 이어서 작업할 수 있어, 개발 도중 유연하게 상황을 전환할 수 있도록 도와줍니다.

## 작업을 스택에 임시 저장
git stash

## 스택에 임시 저장된 목록 보기
git stash list

## 가장 최근 stash 적용
git stash apply

## 임시 저장된 변경사항을 다시 현재 내 작업 내역에 적용하고 스택에서 삭제
git stash pop

## 스택에 임시 저장된 변경사항을 삭제
git stash drop

🌐 10) 원격 저장소 작업

- 원격저장소란? : GitHub 같은 온라인 저장소에 협업이나 백업을 위해 꼭 필요한 것으로 내가 작성한 코드를 저장하는 공간을 말합니다.

## 원격 저장소 추가
git remote add origin https://github.com/user/repo.git

## 원격 저장소 목록 보기
git remote -v

## 원격 저장소 주소 변경
git remote set-url origin https://github.com/user/new-repo.git

## 원격 저장소 삭제
git remote remove origin

- 푸시(push)와 풀(pull)

✅ 푸시(push)란? : 내 로컬 변경사항을 원격 저장소(GitHub 등)에 올리는 것

## 코드 올리기
git push origin main

## 처음 올릴 때 (upstream 설정 시)
git push -u origin main 
(-u 는 현재 브랜치 main를 원격 저장소 main 브랜치와 연결한다는 뜻)

## 모든 브랜치 올리기
git push --all origin

## 태그 올리기
git push --tags

✅** 풀(pull)이란?** : 원격 저장소에서 변경사항을 가져와 내 코드에 적용하는것

## 변경 사항만 받아오기
git fetch origin

## 받아오고 자동 병합하기
git pull origin main

## 받아오고 rebase로 정리
git pull --rebase origin main

- 🏷️ 태그(Tag) 관리하기 : 특정 커밋에 버전 이름 붙이기(예: v1.0.0)

## 태그 목록 보기
git tag

## 간단한 태그 생성
git tag v1.0.0

## 설명이 있는 태그
git tag -a v1.0.0 -m "버전 1.0.0 출시"

## 태그 삭제
git tag -d v1.0.0

## 원격 태그 삭제
git push origin --delete v1.0.0

5. 🛠️ 실무에서 유용한 Git 팁 모음

📄 1) .gitignore 파일 작성하기

: .gitignore는 Git이 추적하지 않을 파일이나 폴더를 지정하는 설정 파일입니다. 빌드 결과물, 비밀 정보, 캐시 파일 등은 보통 버전 관리 대상에서 제외합니다.

예시:

# 특정 파일 무시
secret.txt

# 폴더 전체 무시
node_modules/

# 확장자 패턴 무시
*.log
*.tmp

# 예외 처리 (무시하지 않음)
!important.log

🧾 2) 커밋 메세지 컨벤션

: 팀 프로젝트나 협업 시 일관된 커밋 메세지 형식을 쓰면 이력이 훨씬 깔끔해집니다. 대표적으로 자주 사용하는 컨벤션은 아래와 같습니다.

태그	설명
`feat:`	새로운 기능 추가
`fix:`	버그 수정
`docs:`	문서 변경
`style:`	포맷, 세미콜론 누락 등 코드 변경 없음
`refactor:`	코드 리팩터링 (기능 변화 없음)
`test:`	테스트 코드 추가
`chore:`	빌드 설정, 기타 업무성 작업

🔀 3) Git Flow 간단 소개

: Git Flow는 브랜치를 구분해 효울적으로 협업하기 위한 전략입니다. 모든 프로젝트에 그대로 적용하지 않지만, 기본 개념은 실무에도 널리 사용되고 있습니다.

✅ 1. Git Flow (전통적, 복잡하지만 명확한 역할 분리)

🔵 main: 배포(릴리스) 버전
🟠 develop: 개발 브랜치
🟢 feature/: 기능별 작업 브랜치
🔵 release/: 출시 준비 브랜치
🔴 hotfix/: 긴급 수정 브랜치

: 실무에서는 보통 main과 feature만 사용하는 간단한 형태도 자주 사용됩니다.

📌 장점: 역할이 분명해 협업 시 충돌 줄이기 좋음 📌 단점: 브랜치가 많아 복잡하고 작은 프로젝트엔 과함

✅ 2) GitHub Flow (단순하고 실용적, 소규모 팀에 적합)

🔵 main: 항상 배포 가능한 상태
🟠 feature or topic 브랜치: 기능 단위 작업

: 완료 후 Pull Request로 main에 merge

📌 장점: 단순하고 빠름, CI/CD와 잘 맞음 📌 단점: 대규모 프로젝트엔 통제가 어려울 수 있음

✅ 3) GitLab Flow (GitHub Flow + 이슈/배포 전략 결합형)

main + feature + production 브랜치 사용
이슈 트래커와 연동해 기능 기반 브랜칭
특정 커밋을 production에 직접 배포 가능

📌 장점: 실무에 맞춘 유연한 전략 📌 단점: 설정 방식에 따라 유동적이라 학습 필요

6. 🧯 Git 트러블슈팅 – 자주 발생하는 문제들

1️⃣ 병합(merge) 충돌 해결

git status      # 충돌 파일 확인

→ 충돌 파일을 열어 수동으로 수정한 뒤:

git add .
git commit      # 병합 커밋 완료

📌 충돌이 생긴 부분에는 <<<<<<<, =======, >>>>>>> 표식이 나타납니다. 표시된 충돌 표시는 수동 수정 후 반드시 삭제해야 합니다.

2️⃣ pull 오류 시 stash로 임시 저장

git stash                  # 변경 내용 임시 저장
git pull origin main       # 원격 저장소 내용 가져오기
git stash pop              # 임시 저장한 변경 내용 다시 적용

📌 로컬 변경사항과 pull 내용이 충돌할 경우, stash로 처리하면 안전하게 병합할 수 있습니다.

3️⃣ 잘못된 커밋 수정

** 1) 마지막 커밋 메시지만 수정하고 싶을 때 **

git commit --amend -m "올바른 메시지"

✏️ 방금 전 커밋 메시지를 다시 쓰는 명령어로, 코드 내용은 그대로 두고, 메시지만 고칠 때 사용

** 2) 파일을 깜빡하고 안 넣었을 때 → 커밋에 추가하기 **

git add 빠뜨린파일.txt
git commit --amend --no-edit

--no-edit 옵션을 쓰면 기존 커밋 메시지를 그대로 유지하고,
새로 추가한 파일만 포함해서 방금 전 커밋을 덮어쓰기 합니다.

⛔ 주의할 점

amend는 커밋 기록을 덮어쓰기 때문에, 이미 push한 커밋을 amend 후 다시 push하면 충돌이 생길 수 있어요.

👉 그래서 혼자 작업할 때나 push하기 전까지 쓰는 게 안전합니다.

7. 📚 Git 참고자료

📘 Git 공식 문서 (Pro Git Book) 👉 https://git-scm.com/book/ko/v2
🎥 Git & GitHub 무료 강의 (코딩애플) 👉 https://codingapple.com/course/git-and-github/

JavaScript 계산기 만들기 프로젝트

Sun, 18 May 2025 07:11:00 GMT

계산기 최종완성 화면

학원에서 자바스크립트 기초 과정을 마친 후, 4일간 진행된 계산기 만들기 프로젝트를 통해 실제로 JavaScript를 활용해보는 시간을 가졌다. 계산기 구현이 간단할 줄 알았지만, 경우의 수가 많고 생각보다 까다로웠다. 특히 배운 지 3주밖에 안 된 상황에서 코드를 직접 작성하는 건 꽤 어려운 일이었다.

HTML

CSS

.buttons {
    height: 430px;
    color: black;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;/*자식요소 줄바꿈*/
    gap: 8px;
}
.button {
    width: 23.3%; 
    height: 18%;
    font-size: 28px;
    border-radius: 50px;
    border: none;
    background-color: white;
    cursor: pointer;
}
.button:nth-child(1),
.button:nth-child(2),
.button:nth-child(3) {
    background-color: #dcdcde;
    color: #454242;
}
.button:nth-child(4n) {
    background-color: #bebec1;
    color: #272727;
}
.button:nth-child(8) {
    padding-top: 15px;
}
.button:nth-child(19) {
    background-color: #fb8181;
    color: #3b3b3b;
}
.button:hover {
    background-color: #d7e9fc;
}
.button:active {
    background-color: #7bb1f4;
    box-shadow: 7px 7px 20px #7b96ad;
}
.zero {
    width: 48.5%;
    border-radius: 35px;
    font-size: 28px;
}

HTML & CSS 구현

학원에서는 계산기 만들기 프로젝트를 총 5단계로 나누어 진행했다. 1, 2단계는 HTML과 CSS 구현, 3, 4단계는 JavaScript 기능 구현, 마지막 5단계는 완성된 계산기를 배포하는 단계였다.

팀원 각자가 계산기를 구현하며, 각 단계마다 자신의 코드를 설명하고 조교님의 질문에 통과하면 다음 단계로 넘어갈 수 있는 구조였다. 덕분에 기능 구현뿐 아니라 코드를 말로 설명하는 연습까지 병행할 수 있었던 경험이었다.

처음 1, 2단계를 진행할 때는 기본적인 구조만 구현했지만, 점차 진행하면서 CSS 디테일에도 신경을 쓰게 되었다. 버튼들을 하나의 div 안에 구성하다 보니 줄바꿈 처리가 필요했고, 나는 .buttons 클래스에 display: flex와 flex-wrap: wrap 속성을 사용했다.

nowrap은 한 줄에 무조건 배치되지만, wrap은 요소가 넘칠 경우 줄바꿈을 해준다.

줄바꿈 구현은 grid 방식이나 버튼 줄마다 div를 나누는 방식도 있었지만, 학원에서는 flexbox를 활용하라고 하셔서 그 방법을 선택했다. 아직 grid는 배운 적이 없지만, 나중에 꼭 공부해보고 싶다.

버튼 크기는 처음에는 가로 4개, 세로 5개 구성으로 가정하고 가로는 25%, 세로는 20%로 지정했었다. 0 버튼만 2배 크기로 지정해야 했기에 가로 50%를 할당했는데, 이후 전체 크기 조절과 gap 추가로 인해 비율이 다소 어긋나는 부분이 생겼다.

CSS 계산을 너무 꼼꼼히 하다 보면 개발이 느려질 수 있어, 이번에는 눈으로 봤을 때 자연스러운 정도로 비율을 조정했다.

배경에는 그라데이션 효과를 주고 싶어서 CSS Gradient 사이트를 활용했다. 하지만 색 조합을 고르기가 어려워 Pinterest에서 컬러 조합을 참고해 연보라와 분홍 계열을 사용했다. 버튼 색상도 Pinterest에서 계산기 UI를 검색해보고 적당한 조합을 선택했다.

JavaScript

//3-2단계 : 숫자를 디스플레이에 표시하기
//3-2-1. 모든 버튼 요소와 디스플레이 요소를 선택합니다.
//모든 버튼 요소를 선택
const buttons = document.querySelectorAll('.button');
//디스플레이 요소를 선택
const display = document.querySelector('.display');
//3-2-2. 각 버튼에 클릭 이벤트 리스너를 추가합니다.
buttons.forEach(function(btn){
    btn.addEventListener('click', function(e){
        const value = e.target.textContent;
        //각 버튼을 클릭했을 때 console에 각 버튼의 value가 나오도록 하기 (3-1단계)
        console.log(value); 
    //3-2-3. 버튼이 클릭되었을 때, 클래스가 `number`인 경우 디스플레이에 값을 표시한다.
    if (btn.classList.contains('number')){
        //디스플레이 화면에 숫자가 10자를 초과한 경우 더 이상 입력을 제한한다.    
        if (display.textContent.length >= 10) {
            alert('숫자를 더 이상 입력할 수 없습니다.')
            return
        }
        //3-2-4. 디스플레이가 `0`인 경우
        if (display.textContent === '0') {
        //클릭한 숫자 값으로 바뀌어야 한다.
            display.textContent = value;
        } 
        //3-2-5. 디스플레이가 `0`이 아닌 그 밖의 경우
        else {
        //클릭한 숫자를 뒤에 추가해준다.     
            display.textContent += value;
        }
        } 
        //3단계 추가 기능 1번) 소수점(.) 버튼을 클릭하면 디스플레이에 소수점을 추가하세요. (이미 소수점이 있는 경우 추가되지 않도록)
        else if (value === '.') {
            //이미 소수점이 있지 않으면
            if (!display.textContent.includes('.')){
            //디스플레이에 소수점을 추가한다.    
                display.textContent += '.';
            }
        }
        //3단계 추가 기능 2번) C 버튼을 클릭하면 디스플레이를 0으로 초기화하세요.
        else if (value === 'C') {
            display.textContent  = '0';
            //첫 번째 피연산자와 연산자는 초기화를 해준다.
            firstOperand = null;
            operator = null;
        }

JavaScript 기능 구현 (3~4단계)

3단계부터는 자바스크립트로 기능을 구현해야 했는데, 처음엔 막막했다. DOM을 직접 다뤄본 경험이 없다 보니 어디서부터 시작해야 할지 감이 안 잡혔다.

그럴 땐 검색이 답이었다. 구글과 유튜브는 물론, 이해가 잘 되지 않는 부분은 챗GPT에게 질문하기도 하며 하나씩 해결해나갔다. 지금 다시 보면 간단해 보이는 코드들도 당시엔 낯설고 어렵게 느껴졌다.

특히 그동안 글로만 학습했던 const, let, null의 차이를 이번 프로젝트를 통해 실감할 수 있었다. 값이 바뀌지 않는 건 const, 변화할 수 있는 건 let, 초기값을 비워두려면 null을 사용하는 이유가 실전에서 자연스럽게 체득되었다.

또한 조교님이 팀 미션 중 forEach와 map의 차이를 질문하신 적이 있었는데, 이 질문 덕분에 팀원들과 함께 해당 개념을 다시 공부해볼 수 있었다.

forEach()는 단순 반복 작업에 사용되고, map()은 원본 배열을 기반으로 새로운 배열을 반환할 때 사용된다.

map()은 반드시 값을 return하거나 변수에 할당해야 의미가 있다. 그 차이를 확실히 이해하고 나니, 앞으로 어떤 상황에 어떤 메서드를 써야 할지 기준이 생겼다.

*JavaScript *

//4-1단계: 디스플레이에 숫자를 입력한 다음 연산기호를 누르면 디스플레이에 있는 숫자를 `firstOperand`로 저장하고 연산기호를 기억하기
//4-1-1. firstOperand, operator 변수를 선언합니다.
let firstOperand = null;
let operator = null;
// 4-2단계: `calculate` 함수 구현 및 `=` 버튼 클릭 시 계산 수행
// 4-2-1. `calculate` 함수를 구현합니다.
function calculate(num1, operator, num2){
    // 매개변수로 받은 입력 값을 숫자로 변환해줍니다.
    num1 = Number(num1);
    num2 = Number(num2);
    switch (operator) {
        case '+' :
            return num1 + num2;
        case '-' :
            return num1 - num2;
        case '*' :
            return num1 * num2;
        case '/' :
            if (num2 === 0) {
                alert('0으로 나눌 수 없습니다.');
                return 0;
            } return num1 / num2; 
        default:
            return num2; // operator가 없는 경우 두 번째 숫자로 그대로 반환해줍니다.
    }
}

4단계에 들어서면서는 문자열로 입력된 값을 숫자로 변환해야 하는 상황이 많아졌다. 숫자 변환에는 parseInt, parseFloat, Number, +문자열 등 다양한 방법이 있는데, 나는 그중에서 Number를 선택했다. 이유는 단순하게 (.)소수점도 지원하고, 코드도 직관적으로 보였기 때문이다.

그리고 calculate 함수를 작성할 때는 처음에는 if-else 문으로 구성하려 했지만, 조건이 많아질수록 가독성이 떨어지는 느낌이 들어 switch문을 사용하기로 했다. 학원에서 과제로 이미 switch를 다뤄본 적이 있었기 때문에 조금은 익숙하기도 했다.

처음에는 case마다 break를 써서 구현했지만, 작동이 잘 안 되는 문제가 발생했다. 알고 보니 break는 단순히 블록을 빠져나가는 역할이어서, 반환값이 필요한 경우에는 별도로 변수를 따로 선언해서 저장해야 했다. 이 과정을 단순화하기 위해 return을 사용해 바로 값을 반환하는 방식으로 수정했고, 그 이후에는 문제없이 작동했다.

JavaScript

// 4-1-2. 연산기호 버튼이 클릭되면 현재 디스플레이 값을 `firstOperand`로 저장하고, 연산기호를 기억합니다.
        //클릭한 버튼이 연산자일 경우, 
        else if (btn.classList.contains('operator')) {
            // 첫 번째 피연산자가 null이면 현재 디스플레이 값을 firstOperand로 저장합니다.
            if(firstOperand === null) {
                firstOperand = display.textContent;
            }
            // operator 변수에 클릭한 연산기호를 값으로 할당합니다.
            operator = value;
            // firstOperand와 operator를 console에 출력합니다.
            console.log('First Operand:', firstOperand);
            console.log('Operator:', operator);
        // 4-1-3. 연산기호 버튼이 클릭된 후 디스플레이에 다른 숫자를 입력하면 새로운 숫자가 디스플레이에 입력되도록 합니다.
        // 연산기호 버튼이 클릭된 후 두 번째 숫자를 입력하면 디스플레이의 값이 새로 입력한 숫자로 바뀝니다.
            display.textContent = '';
        }
        // 4-2-2. `=` 버튼이 클릭되면 `firstOperand`, `operator`, `secondOperand`를 전달하여 계산을 수행하고 결과를 디스플레이에 표시합니다.
        else if (value === '=') {
            if (firstOperand !== null && operator !== null) {
                //디스플레이 화면에 표시되는 숫자를 두 번째 피연산자에 할당해준다.
                const secondOperand = display.textContent;
                //두번째 피연산자 secondOperand도 출력합니다.
                console.log(`Second Operand:`, secondOperand)
                //calculate 함수를 결과 값에 할당해줍니다.
                const total = calculate(firstOperand, operator, secondOperand);
                //디스플레이 화면에 결과 값을 보여줍니다. (소수점은 6자리까지만)
                display.textContent = Number(total.toFixed(6));
                //첫 번째 피연산자와 연산자는 초기화를 해준다.
                firstOperand = null;
                operator = null;
            }
        }

소수점 처리 & 디스플레이 제한 해결

계산기의 결과값을 디스플레이에 보여줄 때는 처음에 display.textContent = total;로 작성했다. 하지만 나눗셈 결과처럼 소수점 이하 자릿수가 긴 경우, 디스플레이 영역을 초과해 숫자가 잘려 보이지 않는 문제가 발생했다.

실시간 시간 강의 때 강사님이 toFixed() 메서드를 활용하면 된다고 알려주셔서, display.textContent = Number(total.toFixed(6)); 형태로 코드를 수정했다. 이렇게 하면 소수점 아래 6자리까지만 표시되어 시각적으로 깔끔하게 제한할 수 있었다.

toFixed는 참고로 숫자를 문자열로 형태로 반환해주는 메서드이기 때문에 다시 Number로 감싸주어야 일반적인 숫자 형태로 사용하거나 표시 할 수 있다.

JavaScript

// 계산기 전체를 선택합니다.
const calculator = document.querySelector('.calculator-container');
// 닫기버튼에 빨간색 버튼을 지정합니다.
const closeBtn = document.querySelector('.red-button');
// 다시 계산기를 보여주는 버튼을 할당합니다.
const reOpenBtn = document.querySelector('.reopen');
// 계산기 크기를 줄여주는 버튼을 노란색 버튼으로 지정합니다. 
const smallBtn = document.querySelector('.yellow-button');
// 계산기 크기를 키워주는 버튼을 초록색 버튼으로 지정합니다.
const bigBtn = document.querySelector('.green-button');
// 계산기 크기를 원본으로 변경해주는 버튼을 회색 버튼으로 지정합니다.
const originalBtn = document.querySelector('.gray-button')
//빨간색 버튼을 클릭하면 계산기를 숨깁니다.
closeBtn.addEventListener('click', function() {
    calculator.classList.add('hidden');
    reOpenBtn.style.display = 'block';
});
//버튼을 클릭하면 숨겨진 계산기가 나타나고 버튼은 사라집니다.
reOpenBtn.addEventListener('click', function() {
    calculator.classList.remove('hidden');
    reOpenBtn.style.display = 'none';
})
//노란색 버튼을 클릭하면 계산기 크기를 살짝 줄여줍니다.
smallBtn.addEventListener('click', function() {
    calculator.style.transform = 'scale(0.9)'; 
    calculator.style.transition = 'transform 0.3s ease'; // 0.3초간 진행, 처음에 느리게 시작 -> 빠르게 -> 천천히 종료
});
//초록색 버튼을 클릭하면 계산기 크기를 살짝 키워줍니다.
bigBtn.addEventListener('click', function() {
    calculator.style.transform = 'scale(1.1)'; 
    calculator.style.transition = 'transform 0.3s ease'; // 0.3초간 진행, 처음에 느리게 시작 -> 빠르게 -> 천천히 종료
});
//회색 버튼을 클릭하면 계산기 크기를 원본으로 변경해줍니다.
originalBtn.addEventListener('click', function() {
    calculator.style.transform = 'scale(1.0)';
    calculator.style.transition = 'transform 0.3s ease'; // 0.3초간 진행, 처음에 느리게 시작 -> 빠르게 -> 천천히 종료
});

🎛️ 계산기 상단 버튼 기능 추가하기

이 부분은 사실 학원 미션에는 없던 내용이지만, 왼쪽 상단의 색깔 버튼들이 단지 디자인 요소로만 있는 게 아쉬워 기능을 추가해보기로 했다.

초록색 버튼은 원래 맥북에서 창을 최대화하는 역할을 한다. 이를 구현하려다 보니 브라우저마다 처리 방식이 달라서 복잡했다. 그래서 기능을 간단히 바꾸어 노란색 버튼은 계산기를 작게, 초록색 버튼은 크게 조절하도록 구현했다. 이 작업은 JavaScript로 DOM에 접근해 style.transform만 설정해주면 되기 때문에 생각보다 수월했다.

기능을 추가하고 보니, 다시 원래 크기로 되돌리는 버튼이 있으면 좋겠다는 생각이 들었다. 그래서 오른쪽에 회색 버튼을 하나 더 만들고, 클릭 시 원래 크기 (scale(1.0))로 돌아가게 설정했다.

버튼을 색상만으로 구분하기보다는 안에 기호를 추가하면 더 직관적일 것 같아서 기호도 넣었다. 특히 회색과 노란색 버튼에 어떤 기호를 넣을지 고민이 많았는데, 이 부분은 챗GPT의 도움을 받아 깔끔한 기호를 찾을 수 있었다.

버튼 색상 역시 처음엔 ColorZilla 확장 프로그램으로 대충 따와서 썼지만, 회색 버튼까지 추가하면서 색 조합이 어색해 보여 GPT에게 추천을 받아 조정했고, 결과적으로 색상과 기능 모두 만족스러운 구성으로 완성할 수 있었다.

빨간색 버튼은 계산기 전체를 숨기는 기능을 하며, Calculator Open 버튼을 누르면 다시 계산기를 화면에 표시한다. 모달처럼 열고 닫는 인터랙션을 구현한 것이 포인트다.

버튼 디자인 참고에 도움이 되었던 사이트는 아래와 같다:

📝 프로젝트 회고 & 개선점

계산기 프로젝트를 마무리하면서 아쉬웠던 점도 몇 가지 있다:

1. 반응형 대응 부족: 모바일 화면에서는 계산기가 제대로 보이지 않고 버튼들이 줄바꿈되거나 잘리기도 했다. 반응형을 고려한 뷰포트 설정과 미디어 쿼리 적용이 필요함을 느꼈다. 2. toFixed()의 한계: 나눗셈 결과는 소수점 제한이 잘 적용되지만, 큰 수의 곱셈 결과는 디스플레이 영역을 넘어가 여전히 잘리는 현상이 있었다. 이 부분은 숫자 자릿수를 제한하거나 폰트 크기를 자동 조절하는 로직이 추가로 필요해 보인다. 3. 화살표 함수 사용 미흡: 이번 과제에서는 대부분 일반 함수 형식을 사용했는데, 앞으로는 => 함수 표현식도 많이 활용해보고 익숙해져야겠다는 생각이 들었다.

마무리...

처음에는 미션 요구사항 자체가 낯설고 어렵게 느껴졌지만, 단계별로 기능을 쪼개고 하나씩 구현하다 보니 어느새 하나의 프로그램을 완성할 수 있었다. 계산기 하나를 만들면서도 다양한 로직과 조건, 예외 처리들을 고려해야 했고, 그 과정을 통해 실력이 한층은 더 성장한 것 같다. 앞으로는 시간이 좀 더 지나면 팀 프로젝트도 경험하게 될 텐데, 그 전에 기초를 좀 더 탄탄히 다져야겠다는 다짐을 하며 이 프로젝트를 마무리해본다.

계산기

[PowerShell error] npx : 이 시스템에서 스크립트를 실행할 수 없으므로~ 에러 해결 방법

Mon, 05 May 2025 08:37:44 GMT

npx를 통해 앱 작업 파일을 하나 만들려고 하는데 오류가 떴다.

npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다. 자세 한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1

npx create-expo-app ~

  + FullyQualifiedErrorId : UnauthorizedAccess

구글링으로 검색해보니 원인은 PowerShell 실행 정책으로 인한 오류로 PowerShell이 보안상 스크립트 실행을 제한하고 있어서 생기는 현상이라고 한다. 오류 해결 방법은 간단하다.

먼저, window키로 PowerShell 프로그램을 키고 현재 실행되고 있는 정책을 확인해본다.

Get-ExecutionPolicy

현재 내 컴퓨터에서는 RemoteSigned 라고 나오지만, 오류 해결 전에는 Restricted 로 나왔다. 내친구 지피티에게 물어보니, Restricted는 Windows PowerShell의 실행 정책 중 가장 제한적인 수준이라고 한다.

🔒 Restricted란? PowerShell의 기본 실행 정책입니다 (일부 Windows 버전에서). 모든 스크립트 실행이 금지됩니다. 명령어만 실행 가능하고, .ps1 같은 스크립트 파일은 실행할 수 없습니다.

✅ 그 다음! 해결 방법 Restricted를 RemoteSigned 또는 Unrestricted로 변경하면 스크립트 실행이 가능하다.

Set-ExecutionPolicy RemoteSigned

위와 같이 입력하면 관리자 권한 필요하다고 승인을 위한 멘트가 나옵니다. "Y"를 눌러 승인합니다. 참고로 RemoteSigned와 Unrestricted는 이런 뜻이라고 합니다.

RemoteSigned : 로컬 스크립트 실행 가능, 외부 스크립트는 서명 필요
Unrestricted : 모든 스크립트 실행 가능 (주의 필요)

🔄 다시 잘 설정 되었는지 확인 방법

Get-ExecutionPolicy

RemoteSigned가 나오면 변경완료!

추가로, 스크립트 설정을 바꿔두면

🔐 보안 주의 신뢰되지 않은 스크립트를 실행하지 말고 프로젝트 폴더 내 .ps1 파일이 자동 실행되는 경우, 항상 내용을 확인해야 한다고 하네요...(전 잘 몰라서 왠지 놓칠 것 같지만..ㅎ)

이어서 VS 코드로 돌아와 npx create-expo-app 실행시키면 잘 작동이 되는 것을 볼 수 있었다.

npx expo start를 누르면 QR코드가 하나 나오는데 다운 받았던 Expo Go와 연결하여 마무리...

HTML 기초 요소

Sat, 12 Apr 2025 16:04:19 GMT

1. 프론트엔드 개발공부의 첫걸음

지난 목요일과 금요일은 오즈코딩스쿨 초격자캠프 프론트엔드 부트캠프를 강의를 들었다. 첫날은 OT 수업과 함께 K-디지털 트레이닝 규정을 들었다. 아무래도 국비로 운영되는 수업이다 보니 앞으로 출결 관리를 잘해야겠다는 생각이 들었다. 첫날 오후 시간과 금요일에는 HTML 강의를 듣고 그날그날 챌린지까지 완료했다. 금요일 오후 시간에는 2시간 정도 라이브 강의도 듣게 됐다. 아직은 첫 주라 html강의 밖에 안들었지만 일정을 보니 벌써 다음 주에는 Javascript 수업을 진행하는 것 같다. JavaScript는 아직 공부해 본 적이 없다 보니 약간의 기대도 되면서 내가 잘 소화 해낼 수 있지도 조금은 걱정된다...

수업을 듣다보니 아직은 기초적인 사용법도 헷갈리는 데 맥북도 처음 사용하다보니 개발자도구 단축키도 어떻게 하는지 몰랐다. 평소 윈도우를 사용하기도 하고 강의에서도 F12 버튼만 알려주셔서 일단은 수업하는 동안은 구글 사이트 우측 상단 버튼을 타고 들어갔다.

지금 맥북 개발자도구 단축키를 검색해보니 command + option + I 라고 한다. 기본적으로 윈도우의 ctrl 버튼이 맥에서는 command 였다.

command + C: 선택한 항목 클립보드에 복사
command + V: 클립보드의 콘텐츠 붙여넣기
command + X: 선택한 항목을 잘라서 클립보드에 복사
command + A: 모든 항목을 선택
command + T: 새 탭 열기
shift + command + 3 : 전체 화면 캡처하기
shift + command + 4 : 일부 화면 캡처하기

👉🍎 Mac 키보드 단축키 모음

2. HTML 공부 사이트

프론트엔드 과정에서는 텍스트 에디터로 일단 VSCode 만 사용한다고 합니다. 디스코드에는 간혹 인텔리제이를 사용해도 되냐는 문의가 있던데 백엔드쪽에서는 통합 개발 환경(IDE, Integrated Development Environment) 으로 인텔리제이 프로그램을 많이 사용하는 것 같다. 프로그램이 유료이던데 보통 회사에서 많이들 사용하는 프로그램으로 보인다. 다만, 나는 프론트엔드 과정이고 더군다나 아직은 부트캠프를 학생이여서 VSCode만 사용해도 된다고 한다.

💻 HTML을 학습할 수 있는 사이트

MDN : 웹 개발자들을 위한 문서 및 학습 자료 사이트
W3school : 온라인으로 웹 기술을 배우는 교육용 웹 사이트
Google : 모르는 것이 생기면 구글링은 역시 필수! 영어로 검색해야 검색양이 많다고 한다.
챗GPT : 개발 공부 시 모른다고 너무 의지하면 실력이 늘지 않는다. 정말 궁금한 내용은 물어볼 수 있지만, 챗GPT로 얻은 답은 먼저 왜 이 코드가 사용되었는지 충분한 이해와 논리도 같이 바탕이 되어야 한다.
Youtube (유노코딩 강의) : 유튜브에도 html 강의를 검색해보면 많은 양의 동영상을 볼 수 있다. 그중 지금 학원 듣고 있는 html 강사 분이 하는 강의가 유튜브에도 있어 사이트 대표적으로 이 주소만 가져왔다.

html 코드를 입력하기 전 가장 기본이 되는 문서구조를 만들 때에는 VSCode에 !면 작성하고 엔터를 누르면 손쉽게 기본구조를 만들 수 있다.

일단은 한국어 사이트 위주로 만들테니 en은 ko로 바꿔준다.

3.HTML 기초 태그

일단 학원에서 진도 나갔던 html 강의 내용을 복습할 겸 아래에 정리해 본다.

*3-1) 블록 레벨 요소, 인라인 요소 * 블록 레벨 요소는 자기가 속한 영역의 너비를 모두 차지하고 블록을 형성하는 요소이고, 인라인 요소는 자기에게 필요한 만큼의 공간만 차지하는 요소이다.

✨ 인라인 텍스트 요소 예

마크 텍스트 요소 - 형광펜 효과
스트롱 텍스트 요소 - 폰트 굵게 하는 효과
이엠 텍스트 요소 - 이탤릭체(기울임) 효과
큐 텍스트 요소 - 인용구 효과
에스 텍스트 요소 - 취소선 효과

👇 결과

3-2) 컨테이너 컨테이너는 콘텐츠나 레이아웃에 아무런 영향을 주지 않는다는 특징이 있으며, 다른 요소 여러개를 묶어 관리하기 위해 사용되는 요소이다. 콘텐트의 내용을 구분하거나 공통적인 스타일 적용할 때 많이 사용한다.

블록 레벨 컨테이너
인라인 컨테이너

전역속성: 모든 HTML에서 공통으로 사용할 수 있는데, 일부 요소는 아무런 효과가 없다. 아래는 자주 사용하는 전역 속성

id: 문서 전체에서 요소에 고유한 이름을 부여하는 식별자

class: 요소를 그룹 별로 묶어 사용하는 식별자
style: 요소에 적용할 CSS 스타일을 선언
title: 요소와 관련된 추가 정보를 제공하는 텍스트

더 많은 전역 속성은 MDN에 가면 확인할 수 있다.

3-3) img 태그 imng 태그는 이미지를 표시할 때 사용하는 태그이다. 단일 태그라 닫는 태그는 따로 필요하지 않다.

src 속성으로 표시할 이미지의 위치정보 및 파일명을 입력받고, = 뒤에 위치정보를 입력해준다.

alt는 alternative의 약자로 대체 텍스트 역할을 한다. width는 너비, heiht는 높이를 지정하고, 보통은 px 단위로 적용한다.

3-4) 링크 표시 링크는 현재 문서에서 다른 문서로 이동하는 수단을 말한다. a태그를 사용하고 다른 페이지, 전화번호, 이메일 주소 등 다양한 유형의 콘텐츠와 연결하는 역할을 하는 태그이다. a태그를 사용할 때에는 href도 필요하다.

 네이버로 이동 
 현재 탭에서 열기(기본 값)
 새 탭에서 열기

3-5) 목록 만들기 목록은 연관 있는 항목을 나열하는 것을 말한다. HTML 목록은 '순서가 없는 목록'과 '순서가 있는 목록'이 있다. 참고사항으로 모두 블록 레벨 요소를 만드는 태그라고 한다.

 순서가 없는 목록
 순서가 있는 목록
 목록에 들어가는 항목 하나 하나

지유
이솔
수이
하음
키야

```

지유
이솔
수이
하음
키야

지유
이솔
수이
하음
키야

```

지유
이솔
수이
하음
키야

3-6) 표 만들기 표는 행과 열로 이루어진 구조로 콘텐츠를 나타낸다.

table : 하나의 표를 나타내는 태그

tr : 표 안에 하나의 행을 나타내는 태그
th : 행 안에서 제목에 해당하는 셀을 나타내는 태그
td : 행 안에서 콘텐츠에 해당하는 셀을 나타내는 태그
table border : border 지정을 안하면 안 보인다. 테두리의 두께를 지정하는 태그
caption : table 태그 안쪽에 제목이나 표에 대한 설명을 나타낸다. 기본적으로는 표 가운데에 위치한다.

세계별 가수 명단
한국 가수	일본 가수	미국 가수
아이유	아이묭	테일러

```

**세계별 가수 명단**
한국 가수	일본 가수	미국 가수
아이유	아이묭	테일러

사용자는 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 그룹으로 묶어서 관리 할 수 있다. 그 태그들은 아래와 같다.

: 표의 제목이나 주제를 나타냄

: 표의 본문을 나타냄

: 표의 요약글이나 맺음말을 나타냄



    
      한국 바둑기사
      일본 바둑기사
      중국 바둑기사
  


  
      신진서
      이치리키 료
      커제
  

  
    세계 랭킹 1위
    세계 랭킹 12위
    세계 랭킹 4위

한국 바둑기사	일본 바둑기사	중국 바둑기사
신진서	이치리키 료	커제
세계 랭킹 1위	세계 랭킹 12위	세계 랭킹 4위

3-7) 입력 태그 그다음으로는 웹 브라우저 화면을 통해 사용자가 데이터를 입력할 수 있는 입력에 대해서 알아봅니다. 입력 요소의 대표 주자는 바로 input 태그가 있습니다. input은 속성을 지정해 줄 수 있는데 type= 다음에 ""안에 데이터 유형을 표시합니다.

어떤 타입을 지정했는지에 따라서 같은 텍스트라도 그 목적이 달라지게 됩니다. 대표적인 속성은 아래와 같습니다.

text: 기본 값으로 말 그대로 텍스트를 입력 받음

email: 이메일을 입력 받음
password: 비밀번호를 입력 받음
search: 검색할 텍스트를 입력 받음
date: 날짜와 시간을 지정

수치를 입력받는 type들

color: 색상 선택
number: 수치 선택
range: 수준(달성도)선택

label: 입력 요소에 라벨을 붙여 웹 사용자에게 좀 더 직관적인 입력 요소를 제공할 수 있고, 코드의 가독성과 명확성을 높여준다.

3-8) input외 다른 입력 태그들

select는 다수의 옵션을 포함할 수 있는 메뉴를 만들 수 있다. 메뉴 안에 포함할 옵션은option태그를 사용한다.

좋아하는 F1선수를 고르시오.

``` ![](https://velog.velcdn.com/images/elvia_choi/post/dff8ba5b-b373-4239-abbe-6a9a896d5402/image.jpg)

input 태그를 이용해 텍스트를 입력 받으면, 단 한줄만 입력이 가능하다. 그렇지만, textarea태그를 사용하면 여러 줄의 텍스트를 입력 받을 수 있다.

아래에 텍스트를 입력하시오.

``` ![](https://velog.velcdn.com/images/elvia_choi/post/f6c017a3-2af2-4c24-ba6b-3d1931822bfd/image.jpg)

progress 태그는 작업이 어느 정도 진행되었느지 나타낼 때 사용한다. max 속성은 작업 완료에 필요한 작업량을 지정하는 속성이고 value 속성을 통해 화면에 진척도를 표시한다.

작업 진행 중...거의 다 되어 가요...90%...

``` ![](https://velog.velcdn.com/images/elvia_choi/post/6261f703-2fa8-4925-8a7e-d7755d689f85/image.jpg)

button 태그는 클릭을 입력으로 받는 버튼 요소를 만드는 태그이다. input 태그에 type속성을 지정해서 만드는 버튼 방식과 그냥 button 태그 사이에 버튼에 표시할 텍스트를 적어주는 방식이 있다. 화면상으로는 아무런 차이가 없는게 특징이다.

``` ![](https://velog.velcdn.com/images/elvia_choi/post/7e86b49b-14c9-4539-af12-fd844e54ae53/image.jpg)

오즈코딩스쿨 웰컴 키트 후기

Thu, 10 Apr 2025 13:44:04 GMT

오늘 드디어 오즈코딩스쿨 초격차 캠프의 첫 수업이 있었다. 엊그제 도착한 맥북을 수업 전에 세팅하느라 꽤나 정신이 없었다. 맥북은 이번이 처음이라 간단한 단축키 하나도 익숙하지 않아 처음엔 조금 버벅 거리기도 했다. 참고로 아직까지는 맥북을 수업 시간에만 사용하고, 블로그는 원래 쓰던 노트북으로 작성 중이다.

아직 맥북이 익숙하진 않지만, 이틀 정도 다뤄보니 익숙해지기만 한다면 개발자 환경에서는 훨씬 안정적이고 편할 것 같다는 느낌도 받았다. 초격차 캠프 수업이 끝나면 맥북은 반납해야 한다고 생각하니, 이제 막 사용하기 시작했음에도 벌써부터 아쉬운 기분이 든다. 😂

그런데 엊그제 맥북과 블루투스 무선 마우스만 도착했을 땐, 오즈코딩스쿨 홈페이지에서 봤던 웰컴 키트는 없는 건가 하고 잠시 당황했다. 혹시 맥북을 대여하면 키트는 안 오는 건가 싶었는데, 다행히 오늘 점심시간에 웰컴 키트가 따로 도착했다. 맥북과는 다른 배송 경로로 오기 때문에 수령일이 다를 수 있다고 한다.

사실 얼른 열어보고 키보드를 사용해보고 싶었지만, 오늘은 첫 수업이라 새롭게 배울 게 많아서 결국 저녁 시간에야 열어보게 됐다.

뚜둥…! 박스를 열어보니 홈페이지에 안내된 대로 기계식 키보드와 멀티 허브가 들어 있었다. 그리고 귀여운 스티커는 덤! 🥰

학원에서 보내준 맥북과 마우스, 그리고 키보드를 연결한 모습은 제법 그럴듯했다. 다만 맥북 세팅을 해둔 책상이 평소 쓰는 책상보다 조금 낮아서, 노트북 받침대를 급히 주문했는데 그로 인해 키보드 높이가 높아져 처음엔 살짝 불편했다. 그래도 오늘 키보드가 도착했으니, 내일부터는 조금 더 나아질 것 같다. 옆에는 지난주에 프론트엔드와 백엔드 비교 강의를 듣다가 추천받은 책이 놓여 있다. 아직 시간이 부족해 챕터 3까지만 읽었는데, 이번 주말에는 많이 읽어두려고 한다.

참고로, 키보드는 타이핑할 때 LED 불빛이 들어와서 은근히 마음에 들고, 멀티 허브는 아직 뜯어보진 않았다. 마우스와 키보드가 블루투스로 잘 연결되다 보니 당분간은 사용할 일이 없을 것 같다.

이번 주는 목요일에 수업을 시작해서, 내일 하루만 더 들으면 주말이다. 오늘 점심엔 잠깐 편의점에 다녀오면서 바깥 공기를 쐬었는데, 벚꽃이 어제보다 훨씬 더 활짝 피어 있었다. 아쉽게도 이번 주말엔 비 소식이 있어서 꽃구경은 어려울지도 모르겠다. 이제는 꽃놀이보다 공부에 집중해야 할 때인 것 같기도 하다… 😭

내일도 화이팅!💪 6개월간의 공부를 무사히 마치고 싶다.

CSS 2-이론

Sun, 06 Apr 2025 16:21:21 GMT

학습-비기너 트랙

9. CSS 2-이론

📂 1. 오늘의 학습 키워드

이번에는 오즈코딩스쿨의 아홉 번째 시간으로 지난번에 이어 CSS 이론학습 두 번째 시간에 들어갔습니다. 지난주 금요일인 4일에는 베이스캠프 미션 마감일로 앞으로 더 이상 미션 진행을 해도 따로 미션 인정은 안 되지만, 며칠 바쁘다는 핑계로 공부를 못 했던 것도 마음에 걸리고 곧 있을 본 캠프 일정에 앞서 조금이라도 공부를 해두고자 오늘 학습을 진행하고 블로그에 글을 남겨봅니다.

📂 2. 오늘 학습 한 내용

✏️ css-이론(2)

1-1) CSS 박스 모델 (Box Model)

박스 모델(Box Model)은 모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념입니다.
각 박스는 다음의 네 가지 영역으로 이루어져 있습니다:
Content* 텍스트나 이미지 등 실제 콘텐츠가 들어가는 영역입니다.
Padding* 콘텐츠와 테두리(Border) 사이의 내부 여백입니다.
Border* 요소의 테두리로, 박스의 경계를 나타냅니다.
Margin* 요소 외부의 바깥 여백으로, 다른 요소와의 간격을 조절합니다.

1-2) 박스 모델 구조

┌───────────────────────────────┐
│            Margin           │
│  ┌───────────────────────────┐│
│  │         Border          ││
│  │   ┌─────────────────────┐ ││
│  │   │     Padding       │ ││
│  │   │   ┌───────────────┐ │ ││
│  │   │   │    Content   │ │ ││
│  │   │   └───────────────┘ │ ││
│  │   └─────────────────────┘ ││
│  └───────────────────────────┘│ 
└────────────────────────────────┘

2-1) CSS 우선순위 (Specificity) 인라인 스타일 :

→ 처럼 태그 내부에 직접 작성된 스타일은 가장 높은 우선순위를 가집니다. ▶ ID 선택자 (#id) : → 매우 높은 우선순위를 가짐 (ex: #title {}) (우선순위: 100) ** *▶ 클래스 선택자, 속성 선택자, 가상 클래스 (.class, [type], :hover 등) : * → 중간 우선순위 (ex: .box {}) **(우선순위: 10) ▶ 태그(요소) 선택자 (div, p 등) : ** → 가장 낮은 우선순위 **(우선순위: 1) ▶ !important 사용 : → 모든 우선순위를 무시하고 강제로 스타일을 적용합니다. (단, 너무 자주 사용하면 유지보수에 어려움)

3-1) CSS 단위 (Units)

CSS에서 요소의 크기, 간격, 위치를 설정할 때 다양한 단위를 사용할 수 있습니다.
주요 단위:
1. 고정 단위: px (픽셀) - 화면의 고정된 크기를 의미
2. 상대 단위:
  - em, rem - 글꼴 크기에 상대적인 단위
  - % - 부모 요소 크기에 상대적인 백분율
  - vw, vh - 뷰포트(화면) 크기에 비례하는 단위

3-2) 단위 비교 예시

.container {
  width: 50%;  /* 부모 요소 너비의 50% */
  padding: 1rem; /* 기본 글꼴 크기의 1배 */
  margin: 20px; /* 20 픽셀 */
  font-size: 2em; /* 현재 글꼴 크기의 2배 */
}

3-3)주요 단위 설명

px: 고정된 크기이며, 화면에 가장 일반적으로 사용되는 단위이다. 디바이스 화면 크기에 상관없이 일정하게 유지된다.
em: 부모 요소의 글꼴 크기에 비례한다. 예로, 부모 요소가 글꼴 크기 16px이면, 2em은 32px이다. (1em = 부모 글꼴 크기)
rem: 루트 요소(html)의 글꼴 크기에 비례하는 것으로 루트 요소()의 글꼴 크기에 상대적인 크기로 루트 요소의 글꼴 크기가 16px이면, 1.5rem은 24px가 된다.
%: 부모 요소의 크기에 비례 하며, 부모 요소 너비가 200px이면, 50%는 100px가 된다.
vw, vh: 각각 뷰포트의 너비, 높이에 대한 백분율이다.

📂 3. 실습 과제

아래의 과제를 수행한 후 과제를 제출 합니다.

아래 HTML 문서를 조건에 맞게 디자인하세요.






CSS 실습




박스 모델 실습
우선순위 실습


  이곳은 박스 모델이 적용된 콘텐츠입니다.

![](https://velog.velcdn.com/images/elvia_choi/post/f62dd225-a10c-4bf9-8df3-f24e1c8c349a/image.jpg)

### 👉 적용할 CSS 속성

1. 박스 안에 텍스트가 있고, **패딩(padding)**을 이용해 텍스트와 테두리 사이의 여백을 10픽셀로 설정합니다.
  ![](https://velog.velcdn.com/images/elvia_choi/post/c33e8eea-619b-4d4c-b2e6-bc1b1b411dc0/image.jpg)

2. **박스 테두리(border)**는 3픽셀 두께의 실선(`solid`)으로 설정하고, 색상은 파란색(`blue`)으로 합니다.
  ![](https://velog.velcdn.com/images/elvia_choi/post/d255de39-6c62-4fd1-ac52-f45265c7056e/image.jpg)

3. **박스 바깥쪽 여백(margin)**은 20픽셀로 설정합니다.
  ![](https://velog.velcdn.com/images/elvia_choi/post/c419def0-9725-43c4-af54-a39967ccb7b5/image.jpg)

4. `h1` 제목은 기본적으로 녹색(`green`)으로 설정하되, 클래스 `.highlight`가 적용된 경우 빨간색(`red`)이 되도록 스타일을 지정합니다. 
  ![](https://velog.velcdn.com/images/elvia_choi/post/950498ae-0846-4d5b-87d3-f123d5afeae9/image.jpg)

5. `id`가 `special`인 요소는 우선순위에서 무조건 노란색(`yellow`)으로 설정되도록 합니다.
  ![](https://velog.velcdn.com/images/elvia_choi/post/0bdbf348-42de-4e23-a0c6-4e2e544dd9cc/image.jpg)

6. **단위**로는 `px`, `em`, `rem`, `%`를 적절히 사용하여 박스의 크기와 글자 크기를 설정하세요.  


> **💡 최종화면**
![](https://velog.velcdn.com/images/elvia_choi/post/4a24f5e2-8368-4df9-963c-394e5b149429/image.jpg)

CSS 1-이론

Tue, 01 Apr 2025 14:56:13 GMT

학습-비기너 트랙

8. CSS 1-이론

1. 오늘의 학습 키워드

오늘은 오즈코딩스쿨의 여덟 번째 시간으로 CSS 이론 첫 학습에 들어갔습니다. 오늘 학습한 내용과 실습한 과제까지 작성하겠습니다.

2. 오늘 학습 한 내용

✏️ CSS 이론(1)

2-1) 웹 문서를 디자인하는 스타일시트 언어 CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 마크업 언어로 작성된 문서의 스타일을 지정하는 스타일 시트 언어입니다. HTML이 문서의 구조와 콘텐츠를 정의하면, CSS는 그 문서를 좀 더 시각적으로 보이게 꾸미고 레이아웃을 제어하는 역할을 합니다.

기본 구조 CSS는 주로 HTML 문서의 요소 안에서

*- 외부 스타일 시트(External Style Sheet) * : 별도의 CSS 파일을 생성하고, 이를 HTML 문서에서 태그를 사용하여 불러옵니다.

외부 스타일 시트는 사용하면 여러 HTML 문서에서 동일한 CSS 파일을 공유할 수 있어 유지 보수와 관리가 용이하다는 장점이 있습니다.

2-2) CSS의 주요 선택자(Selector)

전체 선택자(Universal Selector): 모든 요소를 선택합니다.

* {
    margin: 0;
    padding: 0;
}

태그 선택자(Type Selector): 특정 태그 이름의 모든 요소를 선택합니다. 아래 예시는 p 태그를 선택한 경우 입니다.

p {
    font-size: 16px;
}

클래스 선택자(Class Selector): 특정 클래스 속성을 가진 모든 요소를 선택합니다.
아이디 선택자(ID Selector): 특정 아이디 속성을 가진 요소를 선택합니다.

🔤 HTML

클래스 선택자 적용
아이디 선택자 적용

🎨 CSS

.section-title {
  color: blue;
  font-size: 20px;
}

#main-title {
  color: red;
  font-size: 28px;
  font-weight: bold;
}

🔍 결과

.section-title은 파란색이고 작고 일반적인 제목
#main-title은 빨간색에 크고 굵은 강조된 제목

클래스 선택자(.class)는 여러 요소에 동일한 스타일을 적용할 때 사용하며, 여러 번 사용이 가능합니다. 반면, 아이디 선태갖(#id)의 경우 고유한 하나의 요소에만 스타일 적용이 가능하여 한 페이지에서 한 번만 사용합니다.

✅ 주요 스타일 속성

CSS는 다양한 스타일 속성을 제공합니다. 몇 가지 주요 속성들은 다음과 같습니다:

color: 텍스트 색상 지정
background-color: 배경색 지정
font-family: 글꼴 지정
font-size: 글자 크기 지정
margin, padding: 요소 주위의 여백 및 안쪽 여백 지정
border: 테두리 지정
width, height: 요소의 너비와 높이 지정
display: 요소의 표시 방식 지정 (예: block, inline, flex 등)

** 📂 모든 CSS 속성을 암기해야 할까?** HTML 요소와 마찬가지로 현재 시점에 CSS 속성을 모두 암기할 필요는 없지만, 직접 다양한 CSS 속성을 사용해보면서 충분한 연습이 필요합니다.

w3school

3. 실습 과제

👉 아래의 과제를 수행한 후 과제를 제출 합니다.

아래 HTML 문서를 조건에 맞게 디자인하세요.




  
  
  HTML 실습
  
  


  
  
  
    오늘의 할 일
  
  
    HTML 예습하기
    MDN 사이트 접속하기
    w3school 사이트 접속하기
    실습 도전하기

적용할 CSS 속성

- - 이 태그가 무슨 뜻인지 알아보고 css파일을 추가하세요!** : CSS파일을 외부 스타일 형식으로 만든다는 의미입니다.

1. 배경색은 #f4f4f4로 지정하세요. 2. 폰트는 Arial로, Arial이 없는 경우 sans-serif로 지정하세요. 3. 제목(오늘의 할 일)이 하이퍼링크라서 자동으로 적용된 스타일(파란색 글씨, 밑줄)을 제거하세요. 4. 제목의 글자색은 #3498db로 지정하세요. 5. 할 일 목록의 글자 크기는 18px, 아래 마진(margin)을 10px로 지정하세요. 6. ‘실습 도전하기’만 bold처리 하세요.

💡 결과 화면

내일 학습 및 실습도 화이팅! 💪😊

HTML-이론

Mon, 31 Mar 2025 03:53:16 GMT

학습-비기너 트랙

7. HTML 의 기초

1. 오늘의 학습 키워드

오늘은 오즈코딩스쿨 학습-비기너 트랙 일곱 번째 시간으로 HTML 기초에 대해 학습했습니다. 사실 오늘 학습을 마치면... 치킨 쿠폰이 기다리고 있지 않을까 하는 소소한 기대감도 함께 가지고 있습니다😄 그런 마음 덕분인지 오늘도 더 집중해서 열심히 학습을 시작해 보겠습니다.

2. 오늘 학습 한 내용

HTML(HyperText Markup Language)이란? 웹 페이지를 만들기 위한 기본적인 마크업 언어를 말합니다. 이 언어를 사용하면 웹 페이지의 구조와 콘텐츠를 정의가 가능하여 HTML을 통해 텍스트, 이미지, 링크 등 다양한 요소들을 웹 문서에 배치하고 구성할 수 있습니다. HTML문서는 브라우저에 의해 해석되고 사용자들에게는 시각적으로 표현됩니다.




    
    
    문서 제목


    안녕하세요!
    이것은 간단한 HTML 문서의 예시입니다.

이 구조에서:

!DOCTYPE html : 문서가 HTML5로 작성되었음을 선언합니다.
html lang="ko" : 문서의 언어를 한국어로 지정합니다.
head : 메타데이터와 문서의 설정 정보를 포함합니다.
meta charset="UTF-8" : 문자의 인코딩 방식을 UTF-8로 설정하여 한글이 정상적으로 표시되도록 합니다.
title : 브라우저 탭에 표시될 문서의 제목을 지정합니다.
body: 사용자에게 직접적으로 보여지는 콘텐츠를 포함합니다.

** ✨ 여는 태그와 닫는 태그 **

요소는 여는 태그와 닫는 태그로 구성되어 있습니다. 여는 태그는 요소의 시작점을 의미합니다. 여는 태그란 요소의 시작점을 의미합니다.

h1 요소를 예로 들면,

은 여는 태그, 
은 닫는 태그입니다.

여는 태그와 닫는 태그 사이에는 텍스트를 넣을 수도 있고, 또는 자식 요소를 추가할 수도 있습니다.

** 🎯 그렇지만 HTML 요소를 모두 외워야 할까요?**

HTML 요소의 종류와 각각의 특징을 영어 단어 외우듯이 다 외울 필요는 없습니다. 필요할 때마다 검색해서 사용하는 습관을 먼저 들이는 것이 좋은 습관입니다. 자주 사용하다보면 자연스럽게 다 외울 수 있게 됩니다. 아래에는 HTML을 학습할 수 있는 대표 사이트입니다.

👉 MDN

👉 W3school

3. 실습 과제 및 느낀 점

👉 아래의 과제를 수행한 후 과제를 제출 합니다.

설치 해둔 VSCode에디터를 엽니다.
여러분이 cli 과제하며 만들어 두셨던 Beginner-track 폴더내부에 beginner.html 파일을 만듭니다.



  
    
    
    HTML 이론학습

beginner.html 파일에 위 코드를 붙여 넣습니다.
3~5번의 내용을 태그 내부에 작성 해 보세요.

요소를 사용해서 문서의 제목을 작성하세요.
1. 제목은 ‘오늘의 할 일’로 작성하세요.
요소로 만든 제목을 하이퍼링크로 변경하세요.
- URL은 https://ozcodingschool.com/을 사용하세요.
순서가 없는list를 4개 만들고 각 list를 아래 조건에 맞게 작성하세요.
1. HTML 예습하기
2. MDN 사이트 접속하기
3. w3school 사이트 접속하기
4. 실습 도전하기

✅ 과제 완성 화면

💪 실습한 후 느낀 점 오늘은 드디어 코드 에디터인 VSCode를 직접 사용해 HTML 파일을 작성해보는 시간을 가졌습니다. 너무 오랜만에 사용하는 프로그램이라, 간단한 HTML 파일 하나를 만드는 작업조차 새롭게 느껴졌습니다.

HTML은 겉으로 보기에는 쉬워 보여도, 막상 직접 작성하려고 하면 기본적인 문법조차 헷갈릴 때가 종종 있습니다. 이럴 때는 잠시 고민해보다가 모르는 부분은 과감히 검색하고,직접 작성해보며 익숙해지는 과정이 무엇보다 중요하다는 것을 다시금 느꼈습니다.

오늘은 비교적 간단한 HTML 문서 작성이기도 했고, 예전에 HTML 파일을 만들어본 경험 덕분인지 앞서 진행했던 ‘CLI 환경 알아보기’나 ‘Git & GitHub 설정’보다 조금 더 수월하게 학습을 마칠 수 있었습니다.

하지만 이제 다음 학습에서는 CSS와 JavaScript 학습이 시작됩니다. CSS는 이전에 접해본 적이 있어서 어느 정도 익숙하지만, HTML보다 조금 더 복잡하고 헷갈리는 부분이 많았던 것으로 기억합니다. JavaScript는 거의 처음 배우는 수준이라 다소 걱정도 되지만, 기초부터 차근차근 쌓아가다 보면 어느 순간 익숙해질 것이라 믿고 있습니다.

내일도 게을리하지 않고, 꾸준히 학습을 이어가야겠습니다. 💪🔥

git 과 github

Sun, 30 Mar 2025 13:40:26 GMT

학습-비기너 트랙

6. git 과 github

1. 오늘의 학습 키워드

오늘은 오즈코딩스쿨 학습-비기너 트랙 여섯 번째 시간으로 git과 github을 학습했습니다. git과 github 역시 예전에 컴퓨터에 다운받고 사용해 보려고 시도한 적이 있는 프로그램입니다. 그렇지만 사용 방법이 쉽지만은 않았고 독학으로 해본지라 의지력이 약해져 금세 사용을 안 하게 됐습니다. 오늘은 베이스캠프 학습으로 git과 github에 대해 학습하고 기존에 설치했던 프로그램은 삭제 후 다시 설치를 해보았습니다.

2. 오늘 학습 한 내용

2-1) Git과 GitHub은?

Git과 GitHub는 소프트웨어 개발에서 필수적인 도구로, 같은 것이라고 생각할 수 있지만 GitHub은 Git을 잘 사용할 수 있도록 만들어진 협업 도구입니다.

Git은 분산형 버전 관리 시스템으로 코드의 변경 이력을 추적하고 관리하는 데 사용하는 프로그램입니다. Git을 통해 개발자는 코드 변경 사항을 기록하고, 필요시에는 이전 버전으로 되돌릴 수 있습니다. Git은 로컬 환경에서 작동하여, 인터넷 연결 없이도 버전 관리가 가능하다는 특징을 가지고 있습니다.

GitHub은 Git을 사용한 코드 호스팅 플랫폼으로, Git으로 관리하는 코드를 온라인에 저장하고 공유할 수 있습니다. GitHub을 통해 여러 개발자가 같은 프로젝트에서 협업이 가능하고 소스 코드를 공유할 수 있으며, 수정 요청을 관리할 수 있습니다. 또한, GitHub은 오픈 소스 프로젝트의 주요 플랫폼으로 사용되어 전 세계 개발자들과도 협업이 가능합니다. 참고 사항으로 대중적으로 GitHub이 가장 많이 쓰이고 있지만, 프로젝트의 규모나 환경에 따라서 다른 프로그램을 대신할 수 있습니다. Git을 활용한 GitHub과 유사한 플랫폼은 아래와 같습니다.

1. 🐧 GitLab

GitHub 대안으로 가장 많이 사용되는 플랫폼
GitHub처럼 Git 기반
CI/CD 기능이 내장되어 있어 배포 자동화에 강함
자체 서버에 설치 가능 (자체 호스팅 = 기업에 인기)

2. 🧊 Bitbucket (by Atlassian)

Git & Mercurial 저장소 지원 (지금은 Git 중심)
Jira, Trello 등 Atlassian 제품과 잘 연동됨
소규모 팀이나 기업에서 많이 사용

3. 🏢 Azure DevOps (구 VSTS)

마이크로소프트에서 만든 협업 도구
Git 저장소 + 작업 관리 + 배포 도구 통합
MS 생태계(Azure, Office)와 연동 강력

4. 🏗️ SourceForge

예전부터 있던 오픈소스 프로젝트 공유 플랫폼
지금은 GitHub에 비해 덜 사용되지만 여전히 살아 있음

5. 🐿️ Gitea

가볍고 빠른 Git 저장소 서버
오픈소스 + 자체 서버 구축 가능
개인 개발자나 소규모 팀에 인기

2-2) Git과 GitHub 설치 및 설정

** * 주의사항** 해당 실습은 GUI와 CLI 환경에서진행됩니다.

🛠️ Git 설치하기

🍎 Mac에서의 Git 설치
1. 터미널 열기: 응용 프로그램 > 유틸리티 > 터미널을 실행합니다. 2. Homebrew 설치 확인: Homebrew가 설치되어 있지 않다면, Homebrew 공식 사이트에서 제공하는 명령어를 터미널에 입력하여 설치합니다. 3. Git 설치: brew install git 4. 설치 확인: git --version

💻 Windows에서의 Git 설치 1. Git 다운로드: Git 공식 사이트에서 'Download for Windows' 버튼을 클릭하여 설치 파일을 다운로드합니다. 2. 설치 실행: 다운로드한 설치 파일을 실행하고, 기본 설정으로 설치를 진행합니다. 3. 설치 확인: - Git Bash 또는 PowerShell 열기: 설치 후, Git Bash 또는 PowerShell을 실행합니다. - 버전 확인: git --version 위 명령어를 입력하여 Git 버전이 출력되면 설치가 완료된 것입니다.

⚙️ Git 초기 설정하기

Git을 설치한 후에는 사용자 정보를 설정하여 커밋 시 해당 정보가 기록되도록 해야 합니다.

*1. 사용자 이름 설정: *

git config --global user.name "Your Name"

*2. 이메일 주소 설정: *

git config --global user.email "your.email@example.com"

3. 설정 확인:

git config --global --list

위 명령어를 입력하여 설정한 사용자 이름과 이메일이 올바르게 등록되었는지 확인합니다.

🌐 GitHub CLI 설치 및 인증

GitHub는 원격 저장소를 제공하는 플랫폼으로, 로컬에서 작업한 내용을 온라인에 업로드하고 협업할 수 있도록 지원합니다. GitHub CLI를 설치하는 방법입니다.

1. GitHub CLI: 맥은 터미널에서 아래 명령어로 GitHub CLI를 설치합니다.

brew install gh

윈도우 사용자는 GitHub CLI 공식 페이지에서 Windows용 설치 파일을 다운로드하고 설치합니다.

2. GitHub과 GitHubCLI 연결 방법 (맥 & 윈도우 모두 동일)

1) 맥의 터미널 , 윈도우의 PowerShell을 엽니다. 설치 후 GitHub에 로그인하려면, 아래 명령어를 사용합니다: gh auth login

2) GitHub 호스트 선택 먼저 어떤 GitHub 호스트에 로그인할 것인지 선택하는 화면이 나타납니다. 기본적으로는 github.com을 선택합니다.

? What account do you want to log into?
> GitHub.com (<- 이부분을 선택하세요)
  GitHub Enterprise Server

3) 인증 방법 선택 다음으로, 어떤 방법으로 인증할 것인지 선택합니다. 기본적으로는 브라우저에서 인증하는 옵션이 제공되며, 그 외에 GitHub의 SSH 키 또는 토큰을 사용하여 인증할 수도 있습니다.

? What is your preferred protocol for Git operations?
> HTTPS (<- 이부분을 선택하세요)
  SSH

? Authenticate GitHub CLI using your GitHub credentials
> Login with a web browser (<- 이부분을 선택하세요)
  Paste an authentication token

4) 브라우저에서 로그인 Login with a web browser 를 선택한 경우, 브라우저가 자동으로 열리며 GitHub의 로그인 페이지로 이동합니다. 동시에 PowerShell과 터미널에서는 다음과 같은 메시지가 나타납니다:

! First copy your one-time code: XXXX-XXXX (<- 이부분을 입력하세요)
- Press Enter to open github.com in your browser...

5) 인증 코드 입력 브라우저에서 GitHub 계정으로 로그인하고, PowerShell에 표시된 1회용 코드(XXXX-XXXX)를 입력하거나 확인하는 페이지가 나타납니다.

6) 권한 부여 로그인 후, GitHub CLI에게 액세스 권한을 부여하는 화면이 나타납니다. 권한을 승인하면, 인증이 완료됩니다.

7) PowerShell로 돌아와 성공 메시지 확인 브라우저에서 인증이 완료되면, PowerShell에서는 다음과 같은 메시지가 출력됩니다:

✓ Logged in as

이제 GitHub CLI가 로그인되었으며, PowerShell을 통해 GitHub 관련 작업을 할 수 있습니다.

3. 설치 확인-공통 방법 (맥 & 윈도우 모두 동일) 맥의 터미널 , 윈도우의 PowerShell을 열어 아래의 명령어를 입력합니다.

gh --version

명령어 입력후 GitHub의 버전이 정상적으로 출력된다면 깃헙 CLI 설치가 완료된 것입니다. 이 과정을 마치면 Git과 GitHub를 사용 할 수 있습니다.

2-3) GitHub 잔디심기

GitHub에서는 '잔디 심기'로 개발자의 꾸준한 활동을 시각적으로 보여주는 지표가 있습니다. 정기적인 코드 작성, 프로젝트 기여, 커밋 등이 쌓이면, 프로필에 초록색 잔디밭처럼 기록이 남게 됩니다. 이는 개발자로서의 성실함과 성장 과정을 한눈에 파악할 수 있습니다.

🧠 Github에서 잔디 심는 과정

먼저 Github에 로그인 합니다.
우측 상단 아이콘을 클릭합니다.
Your repositories 를 선택합니다.
새로운 레포지토리를 생성하는 버튼(New)을 선택합니다.
빨간 포인트를 체크합니다. a. 첫번째는 새롭게 만드는 레포지토리의 이름을 작성합니다.(자유롭게 작성- 문서에서는 Test1 로 작성함) b. 두번째는 레포지토리의 공개 여부로 심은 잔디를 노출하기 위해서는 레포지토리가 Public으로 설정되어야만 합니다. c. 다작성이 되었다면 Create Repository를 선택해 생성합니다.
생성된 Repository의 첫 화면에서 CLI에서 사용할 수 있는 명령어를 제공합니다.
- 해당 명령어를 사용하면 ReadME 파일이 생성되며 작성된 명령어를 따라 잔디심기(commit과 push)가 이루어 집니다. 생성된 명령어를 복사해줍니다.
복사한 명령어 전문을 본인의 터미널에 붙여 넣습니다.
다시 GitHub의 Repository롤 돌아가보면 없었던 README.md 파일이 생긴것을 볼 수 있습니다.

3. 실습 과제 및 느낀 점

👉 아래는 오늘 직접 잔디심기가 완료된 OverView를 캡쳐한 화면

💪 실습한 후 느낀 점 오늘은 정말 오랜만에 GitHub에 로그인했습니다. 아마 오늘 과제 미션이 없었다면, 한참 더 방치해뒀을지도 모르겠어요.

실습을 시작하기 전에는 아이디나 비밀번호가 기억나지 않아서 로그인이 잘 안될까 봐 걱정도 됐고, GitHub을 예전에 설치해 두었던 터라 다시 다운로드하고 설정하는 과정에서 오류가 생기지 않을까 하는 조금은 조마조마한 마음도 있었습니다.

그런데 다행히 GitHub 로그인은 한 번에 성공했고, 오즈코딩스쿨에서 제공해 주신 학습 자료를 따라가다 보니 실습 중에도 특별한 오류 없이 잘 진행할 수 있었습니다.

오랜만에 해보는 ‘잔디 심기’! 예전에는 온라인 강의를 듣고 독학으로 GitHub을 해보려다 막히는 부분도 많았고, 그러다 보니 어렵고 멀게만 느껴졌는데, 오늘은 제공해 주신 자료를 따라가며 실습해 보니 한결 수월하게 느껴졌습니다.

더군다나 오래간만에 로그인해 보니 2020년에 심어두었던 잔디 기록이 그대로 남아 있었습니다. 벌써 5년 전이라니... 시간이 벌써 지나버렸다는 점이 정말 신기했습니다.

이번에는 다시 한번 프론트엔드 개발자에 제대로 도전해 보려 합니다. 5년 만에 다시 도전하는 프론트엔드 개발자! 올해는 수업을 꾸준히 따라가며 어엿한 프론트엔드 개발자로 성장하고 싶습니다.💪🌱

CLI 환경 알아보기

Fri, 28 Mar 2025 14:37:58 GMT

학습-비기너 트랙

5. CLI 환경 알아보기

1. 오늘의 학습 키워드

오늘은 오즈코딩스쿨 학습-비기너 트랙 다섯 번째 시간으로 CLI 환경 알아보기를 학습했습니다. CLI는 텍스트 기반의 명령어 인터페이스인데, 명령어를 직접 입력해 시스템을 제어합니다. 사용자가 마우스 없이 키보드를 통해 명령어를 입력하면 그 결과 값을 텍스트로 출력해 줍니다. CLI 환경은 가볍고 빠르다는 장점과 반복 작업의 자동화 기능이 있다는 장점이 있어 개발자에게 꼭 필요한 도구입니다.

2. 오늘 학습 한 내용

2-1) 터미널이란?

터미널은 컴퓨터와 사용자가 텍스트 명령어로 소통하는 명령줄 인터페이스(CLI) 환경을 말합니다. 터미널의 주요한 특징으로는 마우스 없이 키보드로 명령어를 직접 입력해 시스템을 제어하고 쉘(Shell)을 통해 입력된 명령이 운영체제에 전달되어 실행합니다. 파일 관리, 시스템 설정, 네트워크 작업 등을 강력하고 빠르게 수행할 수 있고 GUI(Graphic User Interface) 가 없던 시절 부터 사용되어 왔으며, 개발, 서버 관리, 자동화 작업 시 널리 사용되고 있습니다. 즉, 터미널은 키보드로 명령을 내리는 콘솔 환경이며, 개발자라면 반드시 익숙해져야하는 필수 도구입니다.

2-2) 운영체제 별 터미널

✅ Windows 1. 명령 프롬프트(CMD) 💻 실행방법: Win + R → cmd 입력 후 Enter 📌 특징: 기본적인 윈도우 명령어로 파일 및 디렉토리 관리, 네트워크 설정 등을 수행한다. ** 2. PowerShell** 💻 실행방법: 시작 메뉴에서 "PowerShell" 검색 후 실행 📌 특징: 윈도우 시스템 관리를 위한 강력한 기능 제공하고, 객체 지향 프로그래밍 지원으로 스크립트 작성과 자동화에 유리하다. 3. WSL (Windows Subsystem for Linux) 💻 실행방법: Windows 스토어에서 WSL(리눅스 배포판) 설치 후, cmd 또는 PowerShell에서 wsl 입력 📌 특징: 윈도우에서 리눅스 명령어와 패키지 관리자를 사용할 수 있는 환경 제공한다.

🍎 Mac 💻 실행방법: Command + Space로 Spotlight 검색 창 열기 → "터미널" 검색 후 실행, 또는 Finder에서 응용 프로그램 > 유틸리티 > 터미널로 이동하여 실행 📌 특징: 기본적으로 Bash 또는 Zsh 쉘 사용하고 유닉스 기반 명령어를 활용하여 효율적인 작업 가능하다.

🐧 Linux 💻 실행방법: Ctrl + Alt + T로 터미널 바로 실행, 또는 응용 프로그램 메뉴에서 터미널 검색 후 실행 📌 특징: 터미널 중심의 운영체제로, 대부분의 작업을 명령줄에서 수행하고 Bash 쉘 기본 제공하며, 다양한 패키지 관리 도구(예: APT, YUM)로 소프트웨어 설치 및 관리한다.

여러 터미널들이 존재하지만 비기너 트랙에서는 Windows 사용자는 PowerShell을 사용하고, Mac 사용자는 Bash (기본 터미널) 사용합니다.

저는 윈도우 사용자로 PowerShell 프로그램을 열었습니다.

2-3) 터미널 기초 명령어

1. 📂 파일 및 디렉토리 관리

ls: 디렉토리 내 파일 및 폴더 목록 보기

사용법: ls -l (상세 정보 표시)

cd: 디렉토리 이동

사용법: cd /path/to/directory

mkdir: 새 디렉토리 생성

사용법: mkdir new_directory

echo: 파일 생성 및 내용 추가

사용법: echo "Hello, World!" > example.txt

cp: 파일 복사

사용법: cp source.txt destination.txt

rm: 파일 삭제

사용법: rm file.txt
디렉토리 삭제 시: rm -r directory_name

2. 📝 파일 내용 보기 및 텍스트 처리

cat: 파일 내용 출력

사용법: cat example.txt

echo: 텍스트 출력

사용법: echo "Hello, World!"

3. 🛠️ 디렉토리 및 파일 정보

pwd: 현재 작업 중인 디렉토리 경로 표시

사용법: pwd

clear: 터미널 화면 지우기

사용법: clear

3. 실습 과제 및 느낀 점

아래는 수행한 과제 내용

터미널을 열어 /Desktop 으로 이동합니다.

Beginner-track 폴더를 생성합니다.

Beginner-track 폴더내에 .txt 확장자의 텍스트 파일을 만들며 내부 내용을 자유롭게 입력합니다.

만든 파일을 copy.txt 라는 이름으로 복사 합니다.

복사한 파일을 화면에 출력 합니다.

오늘은 CLI 환경 학습을 통해 처음으로 PowerShell에서의 파일 관리를 배워보았습니다. 처음 접하는 프로그램이다 보니 낯설고, 명령어 하나하나가 다소 어렵게 느껴졌지만 계속 사용하다 보면 자연스럽게 익숙해지고 실력도 늘 것 같다는 생각이 듭니다.

비록 쉽지만은 않았지만, 터미널이라는 새로운 도구와 조금씩 친해지는 과정 자체가 재밌었습니다. 오늘도 한 걸음 성장했다는 마음으로, 이 학습을 마무리합니다. 💪🔥

VSCode 설치

Thu, 27 Mar 2025 06:20:40 GMT

학습-비기너 트랙

4. VSCode 설치

1. 오늘의 학습 키워드

오늘은 오즈코딩스쿨 학습-비기너 트랙 네 번째 시간으로 VSCode 에디터를 설치하는 시간을 가졌습니다. 예전에 코딩 공부를 조금 한 경험이 있어 지금 주로 사용하고 있는 노트북에 VSCode가 설치되어 있지만 2~3년가량 사용하지 않아 기존에 설치했던 프로그램을 지우고 완전 초심자로 돌아가서 다시 다운로드 진행했습니다.

2. 오늘 학습 한 내용

Visual Studio Code(VS Code)는 마이크로소프트에서 개발한 가볍고 빠르면서 무료인 소스 코드 편집기입니다. Windows, macOS, Linux 등 다양한 운영체제에서 사용 가능하고, 가볍고 빠른 성능을 가지고 있어 전 세계 많은 개발자들에게 사랑받고 있는 코드 편집기입니다.

💻 Visual Studio Code 공식 다운드로드 👉 https://code.visualstudio.com/Download

VSCode 다운로드 방법은 공식 다운로드 페이지에 접속한 후 자신의 운영체제에 맞는 다운로드를 클릭하면 됩니다. 저는 다운로드를 진행하기 전 예전에 설치한 VS Code를 먼저 삭제했습니다.

1. 예전에 설치했던 VS Code 2. 제어판에 들어가 프로그램 선택 후 삭제 3. 내 노트북 운영체제에 맞는 버전으로 .exe 파일 설치 후 동의

🚀 VSCode 설치가 완료된 후엔 나만의 에디터를 만들기 위해 학습자료에 나온 익스텐션도 추가로 설치했습니다. 인스텐션을 설치하는 방법은 간단했습니다.

1. 먼저, VSCode를 열면 좌측 아이콘 하단에 네모 박스로 된 버튼을 눌러줍니다. 2. 다운로드하고 싶은 익스텐션을 검색한 다음, 3. Install 버튼을 눌러주면 설치가 완료됩니다.

파이선을 설치 한 후 학습자료에 추가적으로 설치하면 좋은 익스텐션이 있어 같이 설치해주었습니다.

첫 번째는 'Indent Rainbow' 였는데 이건 예전에 설치한 적이 있었는지 화면에 Disable과 Uninstall 버튼이 보여 다음으로 넘어갔습니다.

두 번째는 'Better Comments' 플로그인으로 카테고리별 색상을 구분해줍니다. 중요한 부분, TODO, 경고 등을 눈에 띄게 하여 코드 리뷰나 디버깅 시 가독성을 높여주는 익스텐션입니다.

세 번째 플로그인은 'Bracket Pair Colorizer' 을 추천되어있는데 중괄호, 대괄호, 소괄호 등의 짝을 색깔로 구분해주는 플러그인입니다. 복잡한 코드에서 괄호의 짝을 구분하기 쉽게 해주는 기능이 있다고 합니다. 다만, 더 이상 익스텐션으로 다운이 아닌 VSCode 내장기능으로 변경되어 설정으로 들어갔습니다. 설정은 에디터 왼쪽 하단 톱니바퀴 모양을 선택하면 들어갈 수 있고 Setting에서 bracket pair를 검색하여 원하는 대로 설정하면 됩니다. 다만, 이 기능은 아직 시작한 코딩 작업이 없다보니 어떤게 더 좋을지 몰라 오늘은 설정 경로만 알아두었습니다.

네 번째는 'colorize' 를 추천해주셨는데 이 익스텐션은 CSS의 색상 문자 코드에 배경색을 입혀서 색상을 알아볼 수 있게 해주는 플러그인이라고 합니다. 해당 익스텐션도 추가로 설치했습니다.

위에 추천된 익스텐션 외에도 VSCode에는 수많은 익스텐션이 있습니다. 앞으로 코딩 작업을 하면서 불편한 점이 생기면 더 많은 익스텐션을 활용해 보는 것도 좋은 방법입니다.

📚 VSCode 익스텐션 참고자료 https://marketplace.visualstudio.com/

3. 학습을 한 후 느낀 점

오랜만에 VSCode를 설치하고 실행하려고 하니, 시작 전에는 괜히 어렵게 느껴졌습니다. 한동안 사용하지 않았던 탓에, 혹시 에러가 나거나 설치가 잘 안 되면 학습에 차질이 생기지 않을까 하는 걱정이 먼저 들었습니다. 하지만 역시 백문이 불여일견이라는 말처럼, 직접 해보니 생각보다 수월했고 큰 문제 없이 설치도 잘 되었습니다. 다시 설치를 하면서 오히려 살짝 설레는 마음도 들었습니다.

물론, 이제 다시 시작하는 단계라 앞으로 걱정되는 부분도 있지만 매일 조금씩이라도 포기하지 않고 계속한다면, 나도 개발자가 될 수 있지 않을까? 하는 기대감도 생깁니다.

오늘은 이렇게 VSCode 설치와 필수 확장 프로그램 세팅으로 학습을 마무리해 봅니다.

웹 개발에 필요한 두 포지션

Wed, 26 Mar 2025 09:42:06 GMT

학습-비기너 트랙

3. 웹 개발에 필요한 두 포지션

1. 오늘 학습 키워드

오늘은 오즈코딩스쿨 학습-비기너 트랙 세 번째 시간으로 웹 개발에 필요한 두 포지션을 학습했습니다. 웹 애플리케이션은 클라이언트와 서버 간의 상호 작용을 기반으로 동작한다는 특징이 있습니다. 클라이언트를 주로 다루는 개발자를 프론트엔드(Front-end) 개발자, 서버를 주로 다루는 개발자는 백엔드(Back-end)개발자라고 부릅니다. 오늘은 프론트엔드와 백엔드의 차이점과 나에게 맞는 방향은 어떤 걸 선택하면 좋은지를 알아보겠습니다.

2. 오늘 학습 한 내용

웹 개발은 프로그래밍의 큰 범주 중에 하나로 모바일 앱 개발, 데이터 사이언스 및 인공지능, 데스크톱 앱 개발, 게임 개발, 클라우드 등과 함께 다양한 개발 분야 중 하나입니다. 간단히 말하면, 사용자가 브라우저를 통해 상호작용하는 소프트웨어인 웹 애플리케이션을 만드는 작업을 의미합니다. 인터넷 쇼핑몰, SNS, OTT 서비스, 음악 스트리밍 서비스, 여행 예약 서비스 등 모두 웹 애플리케이션에 포함됩니다.

웹 애플리케이션은 클라이언트와 서버 간의 상호 작용을 기반으로 동작하는 특징을 가지고 있는데 클라이언트는 프론트엔드와 서버는 백엔드를 담당합니다. 프론트엔드 개발자는 사용자가 직접 보는 웹 페이지의 레이아웃, 디자인, 인터페이스 등을 담당하여 HTML, CSS, Javascript를 이용해 버튼 클릭 시 동작을 하거나 페이지의 시각적 요소 등을 구현합니다. 백엔드 개발자는 서버 측 로직, 데이터베이스 관리, 인증 등 보이지 않는 부분을 담당하여 사용자가 요청한 데이터를 처리하고 그 결과를 프론트엔드로 전달하는 역할을 합니다.

예를 들면, 클라이언트는 크롬 브라우저에서 “www.naver.com”에 접속하면 클라이언트는 ”페이지를 보여줘! “라고 서버에 요청합니다. 이런 클라이언트에게 요청이 오면 네이버 서버는 네이버 홈페이지, 뉴스, 검색 결과 같은 가지고 있는 데이터를 요청에 맞게 데이터를 보내줍니다.

이런 과정을 🍔햄버거 가게로 비유 해보면,

👉 고객 = **클라이언트 📝 점원에게 주문 = 서버에 요청 🍔 점원이 햄버거를 만들어서 줌 = **서버의 응답

으로 볼 수 있습니다. 이런 식의 요청과 응답을 주고받으면서 웹 페이지가 작동됩니다. 개발 관점에서 보면 프론트엔드 개발자는 화면, 버튼, 사용자와 상호 작용 등의 클라이언트 쪽 개발을 담당하고, 백엔드 개발자는 데이터 처리 및 저장, 사용자 인증 등과 같은 서버 쪽 개발을 담당합니다.

프론트엔드 개발자가 되기 위해서는 '웹 페이지 디자인 감각, 보다 더 나은 사용자 경험을 제공하기 위한 창의성, 다양한 팀원들과 의사소통 능력, 사용자 경험(UX) 이해, 다양한 문제 해결 능력, 문제 해결 능력, 새로운 트렌드 및 프레임워크 등에 대한 지속적인 학습 의지' 등이 필요한 역량입니다.

백엔드 개발자의 경우에는 웹 애플리케이션 뒷부분인 서버 측에서 동작하는 부분을 다루다 보니 사용자에게 직접적으로 보이진 않아도 프론트엔드와 원활한 소통을 통해 전체적인 시스템을 원활하게 동작하도록 해야합니다. 따라서, 필요한 역량으로는 '논리적 사고, Java, Python, Ruby, Node. JS 등의 다양한 백엔드 프로그래밍 언어 습득, 데이터베이스 관리, 클라우드 서비스를 사용한 서버 관리, API 개발, 취약한 보안에 대한 파악과 예방, 팀원들과 협업, 대용량 데이터 서비스를 위한 성능 최적화, 새로운 기술들과 도구 및 트렌드에 대한 학습 의지' 등이 필요합니다.

이렇듯 프론트엔드와 백엔드는 서로 다른 전문성을 요구하지만 서로 보완적입니다. 각자의 경력과 성향, 흥미에 따라서 프론트엔드나 백엔드 분야 중 더 집중하고 싶은 곳을 선택할 수 있고 일부 개발자들은 두 분야 모두 경험하며 풀 스택(Full-stack) 개발자가 되기도 합니다.

3. 학습을 한 후 느낀점

오늘은 웹 개발에 필요한 두 가지 포지션, 프론트엔드와 백엔드의 차이를 살펴보고, 각 분야에 필요한 역량에 대해 학습하는 시간을 가졌습니다. 저는 예전에 웹 디자인을 조금 공부한 적이 있고 개발을 통해 즉각적으로 화면에 변화가 나타나는 프론트엔드 개발에 더 관심을 가지고 있습니다. 또한 새로운 것을 배우고 직접 경험해보는 것을 좋아하는 제 성향과도 프론트엔드가 잘 맞는 것 같습니다.

아래에는 프론트엔드와 백엔드로 고민이 될 때 체크 해 볼 수 있는 사이트를 몇 가지 남기며 오늘 학습을 마무리하겠습니다.

🔍 1. 오즈코딩스쿨 👉 https://ozcodingschool.com/mbti

🧭 2. 스모어 👉 https://smore.im/quiz/4kqogl1obk

🧠 3. 위니브 👉 https://mbit.weniv.co.kr

🎯 4. 동국대학교 멋쟁이사자처럼 팀 with9/10° 👉 https://with910dgree.netlify.app

🛠️ 5. Roadmap.sh (개발자 로드맵) 👉 https://roadmap.sh

문제를 해결하는 개발자

Tue, 25 Mar 2025 03:23:35 GMT

학습 -비기너 트랙

2. 문제를 해결하는 개발자

1. 오늘 학습 키워드

오늘은 오즈코딩스쿨 학습-비기너 트랙 두 번째 시간으로 지난 시간 개발자 그게 뭔데? 학습에 이어 문제를 해결하는 개발자에 대해 학습했습니다. 오늘 학습은 앞서 지난 시간에 개발자 그게 뭔데? 시간에서는 개발자는 프로그래밍 언어를 활용해 컴퓨터와 소통하고 다양한 문제를 창의적으로 해결하는 전문가라고 배웠습니다. 그러나 좋은 개발자가 된다는 단순히 코딩에 익숙해지는 것만이 아닌 이전에 없던 문제를 정의하고 해결했을 때 좋은 개발자로 성장했다고 말할 수 있다는 것을 배우게 됐습니다.

2. 오늘 학습 한 내용

프로그래밍을 처음 시작하게 되면, 가장 먼저 익숙해져야 할 것은 공식 문서입니다. 공식 문서는 특정 스택을 개발한 회사나 커뮤니티에서 직접 작성한 사용 설명서로, 그 기술에 대한 핵심 개념과 사용법이 체계적으로 정리되어 있습니다.

1) 공식 문서

📘 React 공식 문서

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

📘 Django 공식 문서

Django 공식 사이트

🔍 JavaScript 학습 시 참고할 문서

🐍 Python 학습 시 참고할 문서

2) 검색 (구글링)

그다음 개발자에게 가장 중요한 스킬 중 하나는 검색 능력입니다. 개발자가 아닌 경우에도 코딩을 배울 땐 구글링은 필수라는 말 한 번쯤은 들어보신 적 있지 않을까 싶습니다.

대부분의 문제는 이미 누군가 겪어왔던 문제들로 이미 해결된 경우가 많은데 검색을 통해 빠르게 해결 능력을 갖추는 것 역시 개발자의 중요한 능력입니다. 개발자는 이러한 과정을 흔히 "구글링"이라고 말합니다. 국내 포털 사이트보다는 구글에서 검색하는 것이 훨씬 더 정확하면서 다양한 정보를 제공합니다. 특히, 전 세계 영어 사용자가 많다 보니 영어로 자료를 검색하면 더 좋은 질과 양의 자료들을 얻을 수 있습니다. 여기서 영어가 어렵고 자신 없다면, 파파고나 구글 번역기의 도움을 받는 것도 좋습니다.

그리고 검색을 통해 문제가 해결됐다면, 웹상에 해결 과정을 기록해 두는 습관을 지니는 것이 본인과 다른 개발자들을 위한 좋은 문화 중 하나입니다.

3) ChatGPT 활용

ChatGPT가 2022년 11월에 공개되고 난 이후, ChatGPT는 프로그래밍 학습에 있어 강력한 도구로 자리 잡았습니다. 기존 개발자들은 구글링에 많이 의존했다면 이제는 좀 더 빠르고 원하는 정보를 쉽게 얻을 수 있고, 코드 예시까지 제공받을 수 있는 ChatGPT도 현업에서도 많이 사용하고 있습니다. 그렇지만 주의할 점으로 학습 중에 ChatGPT를 너무 많이 사용하게 되면 코드를 그대로 복사해서 사용하는 것이 되어 버릴 수 있기 때문에 그 코드가 왜 그렇게 작성되었는지에 대한 비교와 분석하는 과정을 통해 코드를 이해하는 것이 매우 중요합니다. 그리고 같은 실수를 반복하지 않기 위해서는 이 역시도 기록하고 정리해 두는 습관을 지니는 것이 좋습니다.

4) 커뮤니티 질의응답

그러나 공식 문서, 구글링, ChatGPT의 방법을 동원해도 문제 해결이 어려울 경우 다른 사람들에게 질문하는 것도 하나의 실력입니다. 앞으로 6개월간 초격차 부트캠프에서 학습을 하게 되면 동료, 멘토, 조교, 코치님들에게 자유롭게 모르는 부분을 질문할 수 있는 점도 부트캠프의 큰 장점입니다. 또한, 개발자들은 서로 모르는 부분에 있어 서로 돕고 배우는 문화가 있습니다. 그래서 앞으로 개발하면서 어려운 부분이 발생한다면 전 세계 개발자들이 많이 이용하는 대표 커뮤니티 StackOverflow 을 활용해 보는 것이 좋습니다.

다만, StackOverflow에 질문을 올릴 때는 다음 4가지 요소를 갖추는 것이 좋습니다.

사용 중인 개발 환경

전체 관련 코드

발생한 문제 상황

기대하는 결과

이 네 가지 요소를 빼고 설명한다면, 오히려 부정적인 답을 들을 수도 있습니다. 그렇지만 너무 두려워할 필요가 없다고 합니다. 명확한 질문을 하는 것은 답변자에 대한 예의와 배려로 좋은 질문을 남긴다면 좋은 답변도 얻을 수 있습니다.

✅ 마무리

개발자는 단순히 코드를 작성하는 사람이 아닌 문제를 정의하고 해결하는 사람입니다. 그 능력을 기르기 위해서는, 스스로 찾아보고, 질문하고, 분석하고, 기록하는 습관이 꼭 필요합니다. 이 모든 과정을 통해 더 나은 개발자로 성장할 수 있습니다.

3. 학습을 한 후 느낀점

오늘 학습을 통해 개발 스택 공식 문서 페이지와 커뮤니티 사이트 StackOverflow를 즐겨찾기 해두었습니다. 구글 검색과 ChatGPT는 평소에도 자주 사용하는 편인데 앞으로 개발자로서 공부량이 늘어나게 되면 더 자주 사용할 것 같은 느낌이 듭니다. 공식 문서의 경우 워낙 읽어야 할 자료가 많다 보니 앞으로 개발 공부를 하면서 개발 언어에 맞는 문서를 자주 찾아봐야 할 것 같습니다. 지난번 워밍업 칼럼인 메타인지 내용을 학습하면서 강하게 느낀 점은 모르는 부분을 아는 척하지 않는 것이 중요하다는 점입니다. 그렇게 정확한 문제를 직면하지 않은 채 넘어가게 된다면 개발자로서의 성장은 멈춰버린 채 시간만 버리게 되어 버립니다. 모르는 부분이 있으면 해결할 때까지 충분히 고민과 자료를 찾아보고 주변에 도움을 청하거나 커뮤니티를 적극 활용하고 그 문제 해결 과정들을 기록하여 단단하고 좋은 개발자로 성장해야겠다는 다짐이 듭니다.

개발자 그게 뭔데?

Mon, 24 Mar 2025 03:13:27 GMT

학습 -비기너 트랙

1. 개발자 그게 뭔데?

1. 오늘 학습 키워드

오즈코딩스쿨 베이스캠프 워밍업 칼럼은 2개 정도 남았지만 지금 미션 수행으로 따로 블로그 포스팅할 시간은 없어서 나중에 추가적으로 학습하려고 합니다. 오늘부터는 학습-비기너 트랙 학습자료를 진행하려고 합니다. 오늘은 그 첫 시간으로 개발자 그게 뭔데? 라는 학습 자료를 읽어보았습니다.

2. 오늘 학습 한 내용

개발자는 프로그래밍 언어를 사용해 소프트웨어로 문제를 해결하는 전문가입니다. 이때 프로그래밍 언어는 사람과 컴퓨터가 모두 이해할 수 있는 소통 수단을 말합니다.

대표적으로 소프트웨어를 통해 세상을 바꾼 사례가 있습니다. 바로 윈도우 GUI(Graphic User Interface)의 등장입니다. 윈도우가 등장하기 전에는 CLI(Command Line Interface)로 명령어를 입력하는 방식으로 컴퓨터를 사용해 왔습니다. 당연히 그 당시 컴퓨터도 고가였고 사용도 어려웠습니다. 그러나, 윈도우의 등장으로 직관적인 아이콘과 인터페이스로 바뀌면서 누구나 쉽게 컴퓨터 사용이 가능해졌습니다. 이때 윈도우 소프트웨어의 개발자는 바로 세계에서 가장 돈이 많은 기업과 인물이 된 '빌 게이츠' 입니다.

학습 자료에는 없는 내용이지만 개발자가 세상을 바꾼 사례로 조금 더 알아보았습니다. 첫 번째로 나온 인물로는 월드 와이드 웹(WWW)의 '팀 버너스 리' 입니다. 팀 버너스 리는 1989년 월드 와이드 웹을 발명한 인물로 그 당시 인터넷은 있었지만, 지금처럼 사이트를 보고 정보를 쉽게 검색하는 방식은 없었습니다. WWW의 탄생으로 이후 정보 접근 방식이 완전히 바뀌게 되었고, 전자상거래, 온라인 교육, SNS 등이 등장하게 되면서 현대 사회 대부분이 웹 기반으로 자리 잡았습니다.

두 번째로는 페이스북(현재 메타)의 개발자 '마크 저커버그' 가 있습니다. 마크 저커버그는 대학생들끼리 교류하던 작은 프로젝트에서 시작해 지금은 세계 최대 SNS로 성장하게 됩니다. 페이스북의 등장으로 사람들의 소통 방식에 많은 변화가 생겼고 정치 및 사회적으로도 SNS는 강한 여론을 형성하는 도구로 자리 잡게 됩니다.

3. 학습을 한 후 느낀점

빌 게이츠, 마크 저커버그, 일론 머스크와 같은 세계적으로 유명한 부자들은, 평소에 큰 관심이 없어도 누구나 한 번쯤은 들어본 이름입니다. 그동안은 단순히 돈이 많고, 큰 회사를 운영하는 대표라는 인식만 있었는데, 오늘 학습을 통해 이들 역시 개발자로서 시작했다는 사실을 알게 됐습니다.

나는 올해 프론트엔드 개발자를 목표로 열심히 공부할 계획입니다. 물론 현실적으로 빌 게이츠나 마크 저커버그처럼 큰 인물이 되기는 어렵겠지만, 일상에서 웹 사용에 있어 불편한 점이 보이면 이를 개선할 수 있는 방법을 고민해 보고 사용자에게 더 나은 경험을 주는 인터페이스를 만들 수 있는 개발자로 성장하고 싶습니다.

메타인지

Sun, 23 Mar 2025 03:58:26 GMT

위밍업 - 메타인지

To Do 2. 주 1회 칼럼 읽기 (2개 이상)

베이스 캠프 미션 칼럼 두 번째 시간

오늘은 오즈코딩스쿨의 베이스 캠프 워밍업 칼럼 두 번째 시간으로 메타인지에 관한 칼럼을 학습했습니다. 메타인지라는 말은 가끔씩 들어보긴 했지만 자세하게 잘 알지는 못 했습니다. 내가 어떠한 문제가 생겼을 때 그것을 어느 정도를 내가 알고 있고 해결 할 수 있는지에 대한 객관적인 인지 능력 정도로만 알고 있었는데 오늘 칼럼을 통해 메타인지에 관한 내용을 좀 더 알아 갈 수 있었습니다.

메타인지란?

메타인지는 많은 사람들이 '성적을 높이기 위한' 학습방법론으로 알고 있는 경우가 많다고 합니다. 높은 성적을 가진 학생이라고 해서 메타인지가 뛰어나다고 할 수 없고 반면에 성적이 낮다고 해서 메타인지 능력이 떨어진다고 할 수 없다고 합니다. 메타인지는 단순히 성적을 높이기 위한 학습 방법이 아닌 '성장을 위한 태도'로서 성장을 위해서는 '완벽하지 않은 나'를 정확히 바라보고 인정할 수 있는 태도가 필요하다고 합니다. 메타인지 칼럼에서는 세바시에서 컬럼비아대학교 바너드 칼리지 심리학과 교수 리사 손 씨가 메타인지에 관한 내용으로 강연한 영상을 보게 됐습니다. 리사 손 교수님은 대학교 1학년 때 발표가 끝나고 본인의 아이디어를 부정당한 경험을 알려줬습니다. 열심히 준비해서 보여준 아이디어가 인정도 못 받고 거절을 당했을 때는 평소 완벽하게 공부를 잘한다고 생각한 사람도 그런 순간에는 용기를 내기 쉽지 않다고 말합니다. 오히려 완벽주의 성향을 가진 경우 거절을 당하면 위축되기 쉽고 용기를 내기 어려울 수 있다고 합니다. 리사 손 교수님은 대학교 4학년 때 메타인지를 알게 되었다고 합니다. 메타인지란, 자기 자신을 보는 거울이고 스스로를 믿는 능력입니다. 마지막으로 제일 중요한 건 완벽하지 않은 나의 모습을 인정하는 것입니다. 대부분의 사람은 처음부터 아이디어가 완벽해야 한다는 착각에 빠져 있는데 이런 아이디어가 반박당할 경우 완벽하지 않다는 것을 깨닫고 부끄러워지고 숨어버리는 경우가 많아집니다. 결국 이런 일이 많아지면 새로운 것을 받아들이고 학습하고 성장하는 과정이 힘들어지는 상태가 되어버린다고 합니다. 그렇지만 '나'뿐만이 아닌 누구도 완벽하지 않다는 것을 알고 인정한다면 어려움이 발생했을 때 용기를 가지고 누군가에게 자신이 모르는 것을 솔직하게 말하고 도움을 받고 배울 수 있다고 합니다. 리사 손 교수님은 미국에서 자란 교포라 자신의 불완전한 한국어 실력으로 위축된 적이 있었다고 합니다. 그렇지만 메타인지를 통해서 불완전함을 인정하고 용기를 얻어 한국어 실력을 늘릴 수 있었다고 합니다. 지속적인 성장을 위해서는 '완벽한 나'를 보여주기보다, 어려움 앞에서 자신의 부족함을 솔직히 인정하고, 그 안에서 용기를 찾아가는 태도가 중요합니다. 그리고 이 모든 과정에서 메타인지는 강력한 힘을 발휘하게 됩니다.

메타인지의 관한 나의 생각

한국인들은 보통은 사람들 앞에 나서는 것을 좋아하지 않고 다른 사람들 앞에 모르는 것을 티 내지 않으려는 성향이 강합니다. 저 역시도 완벽주의 성향으로 인해 모르는 부분이 있어도 바로 질문하기보단 혼자 좀 더 공부하고 이해한 다음에 넘어가야지 하는 경향이 더 많았습니다. 그래서 혼자 고민해 보다가 쉽게 포기하거나 해결되지 않은 상태로 넘어가 버리는 경우가 많았습니다. 그 결과로는 제대로 된 학습이 이뤄지지 않은 상태로 시간이 지나버립니다. 이러한 상황들은 나이를 중시하는 한국 사회에서는 나이가 들수록 점점 더 심해지는 경향이 있습니다. 본인보다 어린 사람들 앞에서 본인이 모르는 부분을 인정하고 털어놓기는 쉽지 않습니다. 저 역시도 나이가 들어갈수록 그동안의 습관을 버리기란 쉽지 않다는 것을 느낍니다. 하지만 앞으로 개발자로서 더 잘 성장하기 위해서는, 누구나 완벽하지 않다는 사실을 인정하고, 용기를 내어 나의 부족함을 솔직히 받아들이는 태도가 필요하다고 느낍니다. 어려움이 생겼을 때는 도움을 요청하고, 이를 통해 제대로 학습해 나가면서 '아는 척하는 사람'이 아닌 ‘진짜 실력을 갖춘 견고한 개발자’로 성장해 가고 싶습니다.

마지막으로, 리사 손 교수님이 대학교 4학년 시절 처음 접한 메타인지 관련 책에 나오는 세 문장을 떠올리며 오늘의 학습을 마무리해 봅니다.

메타인지는 자기 자신을 보는 거울이다.

거울을 보면서, 자기 자신을 믿는 능력이다.

거울을 보면서, 나의 완벽하지 않은 모습을 인정하는 것이다.

뇌 가소성

Sat, 22 Mar 2025 05:34:23 GMT

워밍업 - 뇌 가소성

To Do 2. 주 1회 칼럼 읽기 (2개 이상)

베이스 캠프 초격자 캠프 미션 칼럼

이번에 오즈코딩스쿨 프론트엔드 11기 초격자 캠프에 지원하게 되면서 베이스캠프를 진행하게 됐습니다. 오즈코딩 베이스 캠프는 본 수업인 4월 10일에 앞서 25년 4월 4일 금요일까지 진행하는 온라인 학습 환경에 적응하는 준비 단계입니다. 베이스캠프에서는 수행해야하는 미션이 있는데 그건 학습한 내용을 블로그에 정리하는 것입니다. 칼럼 2편과 학습 자료 7회를 공부하여 미션 달성하게 되면 치킨 선물도 있다고 해서 오늘부터 열심히 시작하려고 해요. 오늘은 첫 시작으로 첫 번째 칼럼인 뇌 가소성에 대해서 학습했습니다.

뇌 가소성이란?

위키피디아에는 뇌 가소성에 대해서 '신경회로는 일생을 통해 끊임없이 변하는데, 새로운 언어나 운동기능의 습득이 왕성한 유년기때 사용되는 새로운 신경회로의 활동성이 최대치를 보인다. 성년기나 노년기에는 약간 감소하지만, 여전히 새로운 언어나 운동기술을 어느 정도의 수준까지는 습득할 수 있는 일정한 수준의 뇌신경 가소성을 일생동안 유지한다.'라고 말합니다. 목표를 정하고 내재적 동기와 꾸준함으로 일정기간동안 꾸준히 학습하고 반복 훈련을 하다보면 그 변화의 필요성을 인식하게 되고 뇌는 꾸준히 변화가 일어나게 됩니다. 칼럼에 담긴 뇌 가소성에 관한 영상을 보면 인간의 뇌는 20만년 전과 크게 다르지 않은데 뇌 가소성 덕분에 다양한 환경에 적응하며 지구상에서 가장 번성한 동물이 되었습니다. 뇌 가소성은 뇌 환경에 맞춰 신경회로를 스스로 재구성하게 되는 능력인데 빠른 성장과 전문성을 포기하는 대신 유연성을 얻을 수 있습니다. 넬슨 제독이 팔을 절단했던 사례를 살펴보면 신체 일부가 사라지면 그 부위를 담당하던 뇌 영역이 다른 부위를 담당하는 영역으로 잠식되거나 재편성 하는 역할을 한다는 점을 알 수 있습니다. 영상에는 세계적인 바이올리니스트 이츠하크 펄먼의 일화도 소개되는데 펄먼의 공연을 본 한 관객이 '그렇게 연주할 수 있다면 저는 평생을 바칠 수 있습니다'라는 찬사를 보냈다고 합니다. 이에 펄먼은 '저는 그렇게 했습니다'라고 대답합니다. 이를 뇌 가소성의 관점에서 바라보면 펄먼의 뇌는 끊임없이 훌륭한 바이올린 연주를 위해 변화하고 적응하기 위해 노력합니다. 그러나 그 과정 속에서 수 많은 고통과 지루함이 동반되기 때문에 모든 사람들이 그렇게 하기 어렵습니다. 이러한 지속적인 학습과 연습은 우리의 뇌를 특정 기술을 마스터하는데 신경회로를 재구성하고 강화하게 된다고 합니다. 이렇게 칼럼을 통해 뇌 가소성에 대해 알아보게 되니 과거에 저는 청소년기가 지나고 성인기가 되고 나중에 노인기로 접어들게 되면 뇌세포가 줄어들어 새로운 것을 학습하고 그것을 또 잘해내기는 점점 더 힘들거라고 생각하기도 했었습니다. 그러나 명확한 목표와 그것을 달성하게 위한 꾸준한 노력이 동반된다면 뇌는 언제든지 전문적인 역할을 할 수 있다는 사실을 깨닫게 되었습니다.

앞으로의 동기

작년까지는 직장 생활을 하면서 주말과 퇴근 후 저녁 시간을 활용해 영양학을 공부하며 영양사 시험을 준비하느라 바쁜 시간을 보냈다. 올해는 잠시 휴식기를 갖고 새로운 도전에 나서기로 했고, 그중 하나가 프론트엔드 개발을 체계적으로 공부하는 것이라 올해는 다음 달부터 10월 초까지 오즈코딩스쿨의 프론트엔드 온라인 개발 과정을 수강하기로 결정했다. 이 과정에 대부분의 시간을 투자해야 하는 만큼 많은 고민 끝에 내린 결정이지만, 끝까지 성실히 수행하여 좋은 결과를 얻고, 이번에는 꼭 프론트엔드 개발자로 취업하고 싶다.