코딩 일지

참여수당 100만원! 비수도권 취준생을 위한 AI 일경험 프로젝트 <로컬 AI 메이커스랩> 모집

9unaaa — Thu, 23 Oct 2025 16:21:46 +0900

로컬 AI 메이커스랩 3차 모집!

로컬 AI 메이커스랩은 매 차수마다 실제 기업과 함께 새로운 프로젝트를 진행합니다.
AI를 배우고 싶거나, 실무형 프로젝트 경험을 쌓고 싶은 분이라면 지금이 기회입니다!

AI를 배우고 싶지만 어디서부터 시작해야 할지 막막했던 분들에게 꼭 추천하고 싶은 프로그램이 있습니다.
바로 로컬 AI 메이커스랩이에요.

이 프로그램은 단순히 인공지능 기술을 배우는 데 그치지 않고,
실제 기업과 함께 AI 프로젝트를 수행하면서 실무 감각을 키우는 과정입니다.
지역 청년들이 함께 모여 기업의 문제를 직접 정의하고,
데이터 분석과 모델링을 통해 해결책을 제시하는 진짜 ‘현장형 AI 프로젝트’예요.

로컬 AI 메이커스랩의 차별점

로컬 AI 메이커스랩이 특별한 이유는 ‘누구나 시작할 수 있다’는 점이에요.
AI나 데이터 분야가 처음인 사람도 단계적으로 배울 수 있도록 구성되어 있고,
현업 멘토, 기술 멘토, 사업화 멘토가 함께 피드백을 주며 프로젝트 전 과정을 함께합니다.

저는 이 프로그램을 통해 기술뿐 아니라 협업, 기획, 커뮤니케이션 능력까지 성장할 수 있었어요.
특히 실제 기업의 문제를 다루다 보니,
“AI를 이렇게 실무에 적용할 수 있구나” 하는 감을 자연스럽게 익히게 됩니다.

참여 후기

처음에는 막연했지만,
멘토분들의 조언과 팀원들의 협업 덕분에 프로젝트를 끝까지 완성할 수 있었습니다.
특히 내가 만든 결과물이 실제 현업에서 긍정적인 반응을 얻었을 때,
‘이게 진짜 일경험이구나’라는 확신이 생겼습니다.

단순히 기술을 배우는 걸 넘어,
AI로 사회 문제를 해결하는 경험을 할 수 있었던 값진 시간이었어요.

#로컬AI메이커스랩 #AI프로젝트 #AI교육 #지역청년 #데이터분석 #AI배우기 #청년프로그램 #부산청년 #AI메이커스랩3차 #AI실무

생활코딩 CSS 강의 / 핵심 정리본

9unaaa — Sun, 16 Feb 2025 20:50:44 +0900

CSS: 웹사이트를 아름답게 디자인하기 위한 언어

html을 정보에 전념하게 하기 위해
중복을 줄여 훨씬 효율적

CSS 사용방법

1. style 태그: css 문법으로 해석해서 처리해

<style>

태그 선택자

Selelctor(바꾸고 싶은 것) {

Property: Value;

}

class 선택자

.class명 {

Property:Value;

}

<태그명 class=“class명 class명2 ...”>

(가까이에 있는 class 명령이 더 우선)

id 선택자

#id명 {

Property:Value;

}

<태그명 id=“id명”>

****우선 순위: id 선택자 > class 선택자 > 태그 선택자

</style>

2. style 속성: 이 속성은 css 문법으로 해석

<태그명 style=“Property: Value;”>

선언(Declaration) 종류 – Property: Value;

 폰트 색상 변경: color:색상명;

 폰트 사이즈: font-size:크기;

 정렬: text-align: center/left/right;

 밑줄 만들기: text-decoration: underline;

 밑줄 없애기: text-decoration: none;

 테두리 만들기

테두리 전체 : border: 1px solid gray;
밑줄 : border-bottom:1px solid gray;
옆줄 : border-right:1px solid gray;

박스 모델

display, width

1) block level element: h1과 같이 화면 전체를 쓰는 태그

2) inline element: 자기 자신의 부피만큼을 갖는 태그

* block -> inline

display: inline;

* inline -> block

display: block;

* width:폭px;

height:높이;

padding(content와 테두리 사이의 여백)

padding:간격px;

margin(테두리 사이의 간격)

margin:간격px;

Grid(그리드)

옆으로 배열 - 부모 태그 사용

#grid{
   display:grid;
   grid-template-columns:1fr 1fr;   *** fr은 전체를 쓰게 자동으로 비율조정되는 단위
            }
<div id="grid">
   <div>내용1</div> 
   <div>내용2</div>
</div>

아무 의미 없고 디자인의 용도로만 쓰는 태그

1. div – block level

2. span – inline

반응형 웹/디자인

화면 크기에 따라 웹페이지 각 요소들이 반응해 최적화된 모양으로 바뀜

미디어 쿼리

ex) screen width > 800px 조건일 때, 수행

@media(min-width:800px){

수행할 것

}

CSS 파일(<style> 안의 내용이 들어감)

link 태그: 어떤 css 파일과 연결되어 있는지 알려줌

생활코딩 HTML 강의 / 핵심 정리본

9unaaa — Sun, 16 Feb 2025 20:36:37 +0900

태그(Tag): 중요한 내용을 감싼다

<!DOCTYPE html> : 이 문서는 html이 있다

<html>

본문을 설명하는 태그

<head>

1. 제목 (북 마크 및 타이틀 바에 표시됨)

2. 저장방식을 설명

-> utf-8로 문자를 읽어라

</head>

본문

<body>

1. 진하게 강조

<strong>강조하고픈 글자</strong>

2. 줄 바꿈

1) 한줄 띄우기

<br>

2) 단락

3) 수평선

<hr>

3. 이미지 삽입

-> 여기서 src, width 부분을 속성이라고 함, 순서는 상관없음

4. 목록 list

<ul>

<li>list내용</li>

</ul>

-> 항목들을 경계, 그룹핑하기 위한 부모 태그 ol(ordered list) 이나 ul(unordered list)을 항상 가짐 - ul 대신 ol일 경우 자동으로 list를 넘버링

5. 링크

6. 문단 제목

<h1~6>제목 내용</h1~6>

</body>

</html>

개발 설계를 위한 피그마 기초 공부/정리본

9unaaa — Sun, 16 Feb 2025 20:18:19 +0900

️ 피그마

: 벡터 기반의 협업 디자인 툴로

인터페이스 디자인, 웹 사이트 및 모바일 앱 디자인 등 다양한 디자인 작업에 사용

단축키

Space + 마우스 당기기 = 페이지 쉽게 옮겨다닐 수 있음, 끌어당기기
Alt + 마우스 당기기 = 복제
F = Frame 만들기
T = Text Layer 만들기
Shift = 정비율로 만들기
Ctrl + G = 그룹하기

️ 피그마 페이지, 섹션, 프레임, 레이어 이해하기

Layer(레이어)

: 그래픽을 만들 때 Z축으로 층을 쌓은 앞과 뒤의 개념

레이어의 순서를 통해 앞, 뒤 표현이 가능

Frame(프레임)

: 각종 디바이스의 해상도 반영된 작업 영역

프리셋 제공

Section(섹션)

: 여러 프레임을 담을 수 있는 것 = 프레임의 그룹

Page(페이지)

하나의 피그마 파일에 여러 페이지로 관리 가능

️ 레이아웃 그리드 설정

레이아웃과 그리드 시스템

웹과 앱의 다른점

그리드 시스템 요소

레이아웃 그리드 설정하는 방법

️ 도형과 텍스트로 UI 스타일링

이미지/동영상 넣기

도형 생성
Fill 설정

Plugins

Unsplash - 무료 이미지 제공
한글더미

️ 피그마로 작업 공유 및 실시간 협업

Share 버튼 →

대화, 스포트라이트(화면 공유) 기능 있음
/ 누르면 - 실시간 채팅 잠깐 표현 가능

️ 피그마로 에셋 또는 결과물 내보내기

코드로 구현할 수 없는 에셋, 그래픽, 아이콘, 배경이미지 같은거 → 내보내기
- - 해당 요소 선택 → Export
    - PNG - 아이콘
    - JPG - 비트맵 기반의 이미지
    - SVG - 웹/안드로이드
    - PDF - ios
  - Frame을 PDF 저장
    - File → Export Frames to PDF…
    - File → Export : 한방에 내보내기 가능

️ 알아두면 유용한 기능 4가지

텍스트 일괄 변경
- Edit → Find and Replace
비슷한 항목 빠르게 선택
- 해당 요소 선택 → Edit → Select All With → ..
Multi Editing : 비슷한 프레임이 여러개인 경우, 한 부분을 같이 변경
- 해당 요소 선택 → Select matching layers
History 사용
- 프로젝트 제목 화살표 → Show version history

️ 피그마 Dev Mode 이해하기

핸드오프 : 완성된 디자인을 개발자에게 넘기는 과정
- 개발자는 디자인의 특정 부분을 선택하고 그 부분의 색상, 폰트, 간격 등의 세부 정보를 쉽게 볼 수 있고, 이를 통해 개발자는 디자인을 정확하게 구현할 수 있음
핸드오프 도구 : 개발자들이 디자인을 손쉽게 구현할 수 있도록 설계된 기능

Dev Mode

</> 버튼 클릭 → Inspect 창에서 사용
코드로 변환해주는 Plugin 사용해서 변환
Figma for VS code라는 Extension을 사용
빠르게 코드를 짤 수 있음

️ 프로토타이핑

피그마 Dev Mode 이해하기 - 피그마 강좌 1-10 - YouTube

정보처리기사 비전공자 합격 후기 | 필기/실기 동차 합격 ☘️

9unaaa — Sun, 9 Feb 2025 18:48:09 +0900

2025 기사 실기 가 다가온다는 소식을 듣고

도움이 되고자 작성합니다 ㅎ ㅡ ㅎ

저는 거의 노베이스인 비전공자이고 SQLD, ADSP 자격증 딴 상태였습니다

정처기는 거의 낯선 내용이었지만, SQLD는 데이터베이스 과목에는 도움이 됐습니다!

필기는 2주, 실기는 3주 정도 준비했던 거 같아요

<필기>

강의

요약본부터 냅다 읽으면 이해도가 떨어질 거 같아서

요약강의 찾아보다가 다들 추천하는 흥달쌤 유튜브 무료강의 먼저 들었어요!

저는 계산식까지 듣긴했는데 필기 범위에서는 필기특강, 기출 문제풀이만 들으면 될거같아용

정보처리 필기 특강 - YouTube

정보처리 필기 특강

www.youtube.com

요약본

책은 수제비 많이 보시던데 저는 책 없이 요약본으로 시작했어요!

필기는 책 필요없다구 생각합니다!

저는 자격증 시험 전에 제일 먼저

제가 보기좋게 정리해둔 요약본을 찾아보는데 무료 버전은 마음에 드는 게 하나도 없었어요..

너무 분량이 많지 않고, 핵심 내용은 모두 들어간, 근데 또 이쁘게 정리해둔 ..

꿈꾸는라이언 정보처리기사 핵심 요약노트 (필기) : 꿈꾸는라이언 smartstore.naver.com

꿈꾸는라이언 정보처리기사 핵심 요약노트 (필기) : 꿈꾸는라이언

[꿈꾸는라이언] 꿈꾸는라이언 요약노트

smartstore.naver.com

이거 구매해서 봤습니다!

다른 요약본 쓰셔도 좋은데 너무 분량 긴건 무조건 비추입니다

필기는 기출이 중요하다고 생각하는데 빠르게 개념 훑어보고 기출푸는게 중요해요

이것도 15페이지이지만 노베이스가 어느정도 이해하면서 읽는데 생각보다 꽤 걸렸습니다 ㅠㅡㅠ

일단 저는 1번 요약본 이해하면서 읽어보고 바로 기출 풀었습니다

기출

일단 cbt 전자문제집 사이트에서 기출문제 풀 수 있어요

20년도부터 22년까지 8회분만 반복하면 충분하다고 생각합니다

최강 자격증 기출문제 전자문제집 CBT

필기는 어느정도 기출이랑 비슷하게 나오기때문에

저는 체감 60%는 기출이었던거같아요

시간이 얼마 없다면 정답, 풀이보고 진짜 욱여넣듯이 외우는 게 답입니다

프로그래밍 언어 파트나 정말 이해가 안간다 싶은 문제만 흥달쌤 풀이강의 찾아들었어요!

저는 전날 아침부터 밤새도록 기출 계속계속 돌리면서

선지, 풀이, 답을 달달 외웠어요 .. 이게 효율이 제일 좋습니당

Illustrator Travel Artwork (KR)

+ 기출 확실하게 하고도 시간이 남는다 하시면

저는 보지 않았지만 수제비 카페 예상문제 족보도 많이 보시더라구요 추천합니다!

<실기>

무조건 한 번에 붙어야한다는 맘에 실기는 한달 넘게 공부하려고 생각했었는데..

갑자기 인턴을 하게 돼서.. 시간이 촉박했어요 ㅜㅡㅜ

초반엔 적응한다고 공부 못했고 다행히 일 많지 않고 거의 독서실 인턴이여서

3주전부터 일과중엔 4시간 정도, 집와서 2-3시간, 주말엔 최소 6시간씩 공부했던 거 같아요

요약하자면,

프로그래밍 언어, 데이터베이스는 흥달쌤 강의 - 평일 저녁, 주말

나머지 이론 범위는 요약본 - 평일 인턴 일과 중 외우기

(+ 기출은 필기와 다르게 거의 겹치는 게 안나온다고 생각해서 비중 거의 두지 않았습니다

오히려 최근에 나왔던 건 안나와서 기출에 나왔던 거 빼고 공부하시는 분들이 많더라구요

실제로 친구는 기출만 보면서 공부했는데 떨어졌어요ㅜㅜ

저는 요약본으로 다범위하게 외우고, 2~3일 전 기출로 감만 잡는거 추천드립니다)

일단 프로그래밍 언어부터 보는게 중요하다고 생각합니다

이론은 마지막 일주일 빠르게 머리에 넣기

강의

일단 필기 공부할 때 잘 들었고 젤 유명했던 흥달쌤은 들어야겠다고 생각해서 바로 끊고

결론은 완전 추천입니다!!

1억뷰 N잡

[1회 연장 포함] 흥!나게 합격 달성! 2024 정보처리기사 실기 클래스

www.njobler.net

시간상 강의 전부는 못들었는데 저처럼 프로그래밍언어 베이스가 많이없으시면 강추

(파이썬, 자바는 유튜브 간단한 기초강의 들은 적 있었고 c언어는 대학 교양강의로 접한 적 있었지만 가물가물한 .. 노베이스로 봐도 되는 정도 였슴다)

강의 리스트

저는 강의 들을 시간이 주말이랑 저녁 잠깐 뿐이었어서

프로그래밍언어, 프로그램 특강, 데이터베이스 특강 3개만 들었어요

프로그래밍 언어는 시간을 많이 투자해서 이해하고 문제를 풀 수록 는다고 생각해요

데이터베이스는 저는 SQLD를 미리 따놔서 익숙하긴했지만 특강만으로 충분하다고 생각합니다

+ 계산식은 비중이 크지도 않고 요즘 없어지는 추세라 해서

필기공부할때 유튜브 흥달쌤 계산식 무료 강의 보긴했었는데 그 뒤로는 안봤습니다

시간 없으시면 빠르게 포기하고 선택과 집중 추천드림다 ㅎㅎ..

요약본

나머지 이론 범위는 요약본 필기와 마찬가지로

꿈꾸는라이언 정보처리기사 핵심 요약노트 (실기 - 이론편) : 꿈꾸는라이언

[꿈꾸는라이언] 꿈꾸는라이언 요약노트

smartstore.naver.com

여기서 구매해서 봤습니다!

저는 필기, 실기 요약본 따로 전부 여기서 구매해서 봤었는데 내용 겹치는 부분이 꽤 있어서

실기 요약본만 사서 같이 보는 거 추천드려요

분량은 20페이지 정도?? 근데 한 번 머리에 넣으면서 읽는데 생각보다 꽤 걸렸어요

읽을수록 시간은 줄지만 저는 일과중에만 하루 4시간 정도 처음엔 다 보는데 3,4일은 걸렸던 거 같아요

3번 최대한 머리에 넣듯이 읽고, 마지막 날 밤 새면서 단어 달달 외웠습니다

기출 책

2025 수제비 정보처리기사 실기 Final 실전 모의고사 : 네이버 도서

네이버 도서 상세정보를 제공합니다.

search.shopping.naver.com

저는 작년이라 2024 풀긴했지만, 이 책이 제일 유명했어요

기출에 비중을 조금만 둔 편이었지만, 그래도 최근년도는 다 풀었던 것 같아용

기출 나왔던걸 외우기보다 풀이 전체내용 한번 더 훑으면서 감 잡으면서 풀었습니다

다른 책들보다 난이도가 있는 편이라고 들어서,

저처럼 요약본으로? 다른 책으로 개념 다진 후 풀어주세요!

** 결론은 **

시험 3주 전~, 프로그래밍언어, 데이터베이스부터 먼저 강의 보고 문제 풀기

시험 일주일 전, 이론 달달 외우기 + 감 잃지 않게 최근 기출 조금씩 풀어주기

시험 전 날, 저는 밤새면서 프로그래밍언어 빠르게 복습하고 이론 + 데이터베이스 달달 외움 + 감 잃지않게 기출 풀기

시험치고 나오면 오픈채팅방, 네이버 카페에 다들 답 공유하고

대강 점수를 알 수 있습니다..ㅎㅎㅎㅎ

제가 가성비있게 딴 편이라고 생각해서 다들 제 공부법 보고 좋은 결과 있으면 좋겠습니다

행운을 빌어요 !!!!☘️☘️☘️

ADSP 비전공자 일주일컷 합격 후기 ☘️

9unaaa — Sun, 9 Feb 2025 18:39:23 +0900

정처기 필기 16일 시험, adsp 24일 시험..

벼락치기 장인 나는 일주일 동안 공부해서 adsp 붙어보기로 한다..

비전공자가 어떤 방법으로 합격했는지 보여드리겠습니다 ~!

저는 자격증 시험 준비하기 전

어떤 방법으로 공부해야 효율적인지 먼저 후기들을 열심히 찾아보고 공부에 들어갑니다

그래서 블로그 후기들을 보는데에만 하루를 쓴거같아요..

저는 자격증 벼락치기에 가장 중요한 점이 요약강의, 요약본, 기출반복 이라고 생각합니다

요약강의, 책 추천

여러 책이 있었지만 다른 책이랑 고민하다가

저는 비전공자가 이해하기 쉽게 되어있다는 '이지패스 미어캣'을 선택했어요 !!

저는 책을 인터넷으로 시켜서 받을 시간 조차 없었기 때문에..

아이패드에 '노팅'이라는 어플을 설치해서 바로 구매해서 봤어요 !

책 무겁게 들고다닐 필요없이 아이패드에서 바로 볼 수 있다는 점이 좋았고 노팅 어플 사용하면 위에 바로 필기도 할 수 있어서 추천드립니다

책 이론은 너무나 많았고 저는 빠르게 개념을 훑고 문제를 풀어야했기 때문에

ADsP 핵심요약 5시간 벼락치기 특강 | 미어캣 [무편집] | 23.02.16.Live | adsp 독학 - YouTube

이 강의로 빠르게 책 이론 훑어줬어요

중요한 게 뭔지도 알려주고 그 부분만 설명해주셨기 때문에 시간 없으신 분들은 무조건 요약 들으셔야합니다

자격증 따는 게 목표이신 분들은 안나올 내용 볼 필요 없잖아요 !

중요한 거 꼭 별표 백만개 .. 체크해 두시고 가져가세요!

2. 요약본

저는 책보다도 가장 중요한 게 요약본이라고 생각합니다

가장 효율도 좋고 큰 틀을 잡아놓기 좋은거같아요

책은 빠르게 개념 파악하기용, 그 후는 거의 요약본으로 공부합니다

요약본의 부족한 부분은 책으로 가서 한번 더 봐주고, 그 내용을 요약본에 필기해서 보는 게 더 효율이 좋더라구요!

요약본을 공부방법만큼 더 열심히 찾는데

보기 쉽고 이쁘게 정리해놔야 한 번이라도 더 보게 되잖아요 하핫

여러 개 보다가 제가 정착한 요약본은

ADsP(데이터분석준전문가) 3주 솔직 합격 .. : 네이버블로그

ADsP(데이터분석준전문가) 3주 솔직 합격 후기/ 이론(1과목~ 3과목) 요약·정리본·간편한 문제 풀기

시험 접수 및 정보 ADsP 시험 접수는 https://www.dataq.or.kr/ ↑에서 하시면 되구요. 시험 접수비는 5...

blog.naver.com

이 분이 올려주신거 왕 추 천 임미다

여기 있는 건 마지막까지 달달 외우려고 하구 갔어요

3. 기출 반복

어느정도 요약본으로 개념이 정리되고 외워지면

그 후는 기출 반복입니다

저는 벼락치기가 항상 디폴트라.. 마지막 날은 꼭 밤을 새고 시험을 보는데

전날, 새벽에 효율을 최대한 끌어올려야해서

마지막 전날까지는 기출 반복, 새벽엔 요약본, 미어캣 중요체크 해 뒀던 개념들 최대한 외우기

이지패스 좋은 점이 이지패스 어플 깔면

기출이랑 모의고사를 편하게 볼 수 있게 수록되어있어서 좋았어요!

저는 시간이 없기도 하고, 알바를 하기도 해서 짜투리 시간 외울 것들을 머리 속에 넣는 걸 좋아하는데

폰으로도 어플 다운받아서 기출보면서 달달 외웠습니다

전날 10개는 보고 간거같아요..

adsp는 문제은행식이 아니기 때문에 너무 기출에 집착은 하지마시고 개념이 더 안되어있으신 분들은 요약본부터 외우시길 추천드립니다 !

(참고루 책을 구매하셔야 문제 풀 수 있습니다 !

인증 번호 입력하셔야 해요 ㅜㅡㅜ)

올해 40회 시험부터는 전부 객관식으로 바껴서 걱정도 많았고 난이도가 체감상 올라간 거 같긴하지만

비전공자도 일주일이면 합격할 수 있습니다!

5만원 아깝잔하요 끝까지 최선을 다 해봐요 ㅎㅎ!

아슬아슬 했지만....

제 후기가 도움이 되길 바라며

다들 합격 기원합니다 ☘️☘️

협업을 위한 Git & GitHub 공부 / 명령어 정리본

9unaaa — Sun, 9 Feb 2025 17:36:15 +0900

버전관리 시스템

파일 변화(버전)를 시간에 따라 기록했다가 나중에 특정 시점이 버전을 다시 꺼내올 수 있는 시스템 ex) CVS, Git, Subversion…

CVCS(중앙 집중식 버전 관리)
- ex) CVS, Subversion
- 파일을 관리하는 서버가 별도로 존재
- 클라이언트가 중앙 서버에서 파일을 받아서 사용(Checkout)
- 단점: 중앙 서버에 문제가 발생하면 협업, 백업 불가능
DVCS(분산 버전 관리 시스템)
- ex) Git, Mecurial
- 저장소를 히스토리와 더불어 전부 복제 → 서버에 문제가 생기면 이 복제물로 다시 작업을 시작

Git

모든 파일 집합의 변경 사항의 추적을 위한 소프트웨어

일반적으로 소프트웨어 개발 중에 소스 코드를 공동으로 개발하는 프로그래머 간의 작업을 조정하는 데 사용

Git의 기초 개념

모든 명령을 로컬에서 진행
모든 변화를 파일의 스냅샷으로 취급
데이터를 추가할 뿐 삭제나 변경하지 않음

Git의 세가지 상태

Git Bash 명령어

git init
- 디렉토리 → Working DIrectory로 만들기
- .git이라는 하위 디렉토리 생성
git status
- 상태를 확인
git add 파일명
- git으로 관리할 파일을 추가함
  - Untracked → Staged
git commit 파일명
- Modified → Stage
- 커밋과 커밋 메시지를 한번에
  - git commit 파일명 -m “커밋메시지”
git log
- 커밋 내역 확인
비교
1. git diff
  - 최근 커밋 vs Working Directory 비교
2. git diff — staged
  - 최근 커밋 vs Stage 비교

GitHub와 연동하기

Git Hub : Git 저장소의 온라인 저장 사이트

GitHub Repository를 원격 저장소로 추가하기

토큰 지정 안함: git remote add origin [GitHub 주소]
토큰을 지정 : git remote add origin https://[토큰]@github.com/[닉네임]/[repository].git

Local Repository → GitHub Repository 푸시하기

원격 저장소 지정 - clone 원격지의 소스코드를 받아 Local로 동기화하는 Clone
- git clone [GitHub 주소]
local repository의 변경사항을 깃허브로 올리는 Push
- git push origin [master/main]
Checkout : 마지막 커밋으로 되돌아 가는 기능

GitHub Repository에서 내려받기

깃허브의 소스코드를 받아오기
- git pull origin [master/main]

Git용 Tool 사용하기

Sourcetree : GUI를 사용하여 Git을 편리하게 사용함

Commit

커밋 주의 사항
1. 반드시 한 번에 하나의 논리적 작업만을 커밋합니다
2. 커밋 메시지를 잘 작어야함 - 꼼꼼히 작성

Git 심화

변경 사항 되돌리기

Git의 3가지 트리

Branch

마음대로 작업할 수 있는 별도의 공간

기본은 master 브랜치
기존의 master 브랜치 내용은 그대로 보존하면서 새로운 작업을 추가하는 것
각 사용자별/모듈별 브랜치를 만들어 작업하고 통합하는 것이 좋음
머지(merge) : 브랜치 합치기
재배치(rebase) : 커밋 이력 정리

풀 리퀘스트

원격 저장소에 소유자가 아닌 사람이 변경사항을 추가하도록 요청하는 경우

순서
1. 저장소를 본인 계정으로 포크하기
2. 포크한 저장소 클론하기
3. 브랜치 생성 후 브랜치에서 작업
4. 작업 브랜치 푸시하기
5. 풀리퀘스트 보내기

팀프로젝트에서 각자의 담당 모듈을 개발, GitHub를 통해 하나의 소스코드로 통합 하는법?

Fork-Full Request
- 기본 Repository를 생성
- 개발자들이 각자의 Repository로 Fork
- 개발 후, 기본 Repository로 Full Request하여 반영
Collaborator로 협업
- 기본 Repository를 생성
- 각 개발자들을 Collaborator로 추가하여 작업

CI/CD

소프트웨어 개발 라이프사이클을 간소화하고 가속화하는 것을 목표로 하는 지속적 통합(CI) 및 지속적 제공/배포(CD)를 의미

지속적 통합(Continuous Integration)
- 코드 변경 사항을 공유 소스 코드 리포지토리에 자동으로 자주 통합하는 방식
지속적 제공 또는 배포(Continuous Delivery/Deployment)
- 코드 변경 사항의 통합, 테스트, 제공을 나타내는 프로세스로 지속적 제공과 배포, 두 가지 의미

개발 이후 빌드, 테스트, 릴리즈, 배포 과정에 자동화 도구를 활용하여 애플리케이션 배포 주기를 단축하여 서비스 요구에 신속하게 대응하도록 지원함

Unix 계열 기초 명령어 정리 (bash)

9unaaa — Sun, 9 Feb 2025 17:15:40 +0900

(1) `pwd`

-   `pwd`(print working directory): 현재 폴더의 경로

(2) `ls`

-   `ls`(list): 내용물을 출력

(3) `cd [폴더명]`

-   `cd`(change directory): 폴더를 변경
-   `cd ..` : 상위 폴더로 이동
-   `cd .` : 현재 폴더로 이동
-   `cd ~` : 홈 디렉토리(git bash 처음 열면 나오는 기본 폴더)로 이동
    -   Windows 기준 : /c/Users/사용자명
    -   Mac or Linux 기준 : /home/사용자명

(4) `mkdir [폴더명]`

-   `mkdir`(make directory): 폴더를 생성

(5) `rm [파일명]`

-   `rm`(remove): 파일을 삭제

(6) `rm -r [폴더명] `

-   `-r` : recursively(재귀적으로) 폴더를 삭제

(7) `touch [파일명]`

-   touch : 파일 생성

(8)`cp [파일명] [위치]`

-   `cp`(copy): 파일 복사

(9) `cp -r [파일명] [위치]`

-   폴더를 복사

(10)`mv [파일/폴더명] [바꿀파일/폴더명]`

-   `mv`(move): 파일/폴더명 변경
-   `mv [파일/폴더명] [위치]` : 파일 또는 폴더를 **이동**

## GIT 기초 명령어 정리

(1) Commit을 위한 Staging : `git add`

-   현재 코드 상태의 스냅샷을 찍기 위한 파일 선택 (==Staging Area에 파일 추가)

    ```bash
    # .은 모든 변경 사항을 staging area로 올림
    git add 파일명
    ```

(2) 버전 관리를 위한 스냅샷 저장 : `git commit`

-   현재 상태에 대한 스냅샷을 `commit`하여, 버전 관리를 진행한다.

    ```bash
    git commit -m "커밋 메시지"
    ```

(3) 원격 저장소로 코드 `git push`

-   최종적으로 Github 원격 저장소에 push한다.

    ```bash
    git push
    ```

(4) 그 외 명령어

-   .git이라는 비밀스러운 하위 디렉토리 생성

    ```bash
    git init
    ```

-   현재 `git`의 상태를 조회 `git status`

    ```bash
    git status
    ```

-   버전 관리 이력을 조회 [Author, Date, Message, Commit hash]

    ```bash
    git log
    ```

-   버전 관리 이력 한줄로 짧게 조회

    ```bash
    git log --oneline
    ```

-   현재 상태과 commit 버전과의 차이 확인

    ```bash
    git diff
    ```

<입출력 프로그래밍> 공부 정리본

9unaaa — Mon, 20 Jan 2025 20:41:09 +0900

InputStream / OuputStream

in → read
out → write

InputStream

System.in 등의 상위 클래스
데이터 읽기:

int data = in.read(); // 1 byte씩 읽음

OutputStream

데이터 쓰기:
1. 1 byte씩 기록:out.write(data); // 비효율적
2. 배열 사용:byte[] arr = msg.getBytes(); // 몇 개를 보낼지 알려줌? outputStream.write(arr); // 여러 byte를 한 번에 기록
3. 마지막 특별 신호: 줄바꿈(\\n) 사용 → nextLine() : String msg = "문자열 \\n"; byte[] arr = msg.getBytes(); outputStream.write(arr);

Stream 비유

Stream은 종이컵 전화기에 꽂은 빨대와 같음.
빨대를 얻는 방법:
1. 클래스를 사용: InputStream in = new FileInputStream("C:\\\\zzz\\\\copy.jpg");
2. 메서드의 리턴값 사용: URL url = new URL("사진 URL 주소"); InputStream in = url.openStream();

입출력 과정

1. 빨대 준비하기

//Menu m = new PizzaMenu();
InputStream in = new FileInputStream("C:\\\\zzz\\\\aaa.jpg");
OutputStream out = new FileOutputStream("C:\\\\zzz\\\\copy.jpg");

2. 읽기/쓰기 작업 (반복)

while (true) {
    int data = in.read(); // 1 byte씩 읽음, 데이터가 없으면 -1 반환
    if (data == -1) {
        break;
    }
    out.write(data); // 읽은 데이터를 1 byte씩 기록
}

3. 빨대 닫기

//모든 빨대는 사용 후에 닫는다. close
in.close();
out.close();

예외처리 기법

1. 직접 처리 try ~ catch ~ finally

성공 시 리턴, 실패 시 예외 처리.
- Lombok @Cleanup 어노테이션 사용 시, 자동으로 try catch finally 구문을 만들어줌
- Stream / Socket생성 시에 예외처리 해줘야하므로? 쓰임

2. 예외 보고 throws

호출한 메서드에서 예외를 처리하도록 넘김

3. 조치 후 보고 try ~ catch ~ throw

예외를 처리한 뒤, 다시 예외를 던짐

예외 vs 에러

예외 (Exception)

예상 가능하고 조치할 수 있는 문제.
1. 컴파일 타임 예외 (Checked Exception):
  - 예외 처리 필수.
  - 예: IOException, SQLException.
2. 런타임 예외 (Unchecked Exception):
  - 실행 중 발생.
  - 예: NullPointerException, ArrayIndexOutOfBoundsException.

에러 (Error)

개발자가 고칠 수 없는? 문제.
예: OutOfMemoryError, StackOverflowError.

<JavaScript & JQuery> 공부 정리본

9unaaa — Sun, 19 Jan 2025 18:37:00 +0900

CH11. Advanced JavaScript & JQuery

JQUERY

: 인기있는 자바스크립트 라이브러리

• 라이브러리, 프레임워크: 소프트웨어 개발자가 자기 소프트웨어에 활용할 수 있는 도구

표준적인 아이디어의 공통 구현을 제공함.
프레임워크가 엄청 유용한 단축키랑 간결한 방식들을 많이 제공

• 2가지 옵션

로컬에 호스팅된 라이브러리 파일을 연결하거나,
인터넷을 통해 구글, 마이크로소프트, jQuery 등 승인된 제3자 호스트를 이용함.

- 제3자 CDN(Content Delivery Network) 사용 장점:

1. 서버 부담 감소: 파일 대역폭이 분산되면서 서버에 대한 요구가 줄어듦.

2. 캐시된 파일로 성능 개선: 재다운로드 필요 없어 총 로딩 시간 단축 가능.

- 단점: 제3자 호스트 실패 가능성: 호스트가 다운되면 jQuery도 작동 안 할 가능성 있

Selectors

• jQuery Selectors

- querySelector(): CSS 선택자를 기반으로 DOM 요소를 선택할 수 있게 해줌.

• jQuery에서 사용할 수 있는 기본 선택자:

1. Universal selector $("*") : 모든 요소를 선택함 (속도가 느림).

2. Element selector $("tag") : 지정한 태그 이름의 모든 요소를 선택함.

3. Class selector $(".class") : 주어진 CSS 클래스가 적용된 모든 요소를 선택함.

4. Id selector $("#id") : 특정 HTML `id` 속성을 가진 요소를 선택함.

• More CSS 선택자들

5. attribute selectors

1. 속성 기반 선택 - [attribute]:

2. 속성과 값 지정 - [attribute=value]

3. 와일드 카드 사용

- [attribute^=value] // value로 시작하는 속성

- [attribute$=value] // value로 끝나는 속성

- [attribute*=value] // value를 포함하는 속성

6. pseudo-element selectors

: 가상 요소 선택자는 CSS에서 온 것으로, 콜론(:)과 함께 사용하여 선택자에 추가할 수 있

• 주요 가상 요소 선택자들:

:link : 아직 클릭되지 않은 링크 선택
:visited : 클릭한 적 있는 링크 선택
:focus : 포커스가 맞춰진 요소 선택 (예: 입력 필드)
:hover : 마우스를 올린 요소 선택
:active : 클릭한 상태의 요소 선택
:checked : 체크박스나 라디오 버튼이 선택된 상태의 요소 선택
:first-child : 부모 요소 내 첫 번째 자식 요소 선택
:first-line : 요소 내 첫 번째 줄 선택
:first-letter : 요소 내 첫 번째 문자 선택

7. contextual selectors

: 요소의 관계에 따라 선택을 할 수 있게 해줌.

• 주요 문맥 선택자:

후손 선택자 (space): 특정 요소 안에 포함된 후손 요소를 선택.
자식 선택자 (>): 특정 요소의 직계 자식만 선택
인접 형제 선택자 (+): 특정 요소 바로 다음에 오는 형제 요소 선택.
일반 형제 선택자 (~): 특정 요소 뒤에 오는 모든 형제 요소 선택.

- 후손 선택자 사용!!

콘텐츠 필터 (Content Filters)

: 지금까지 사용한 모든 선택자에 필터를 추가해서 특정 패턴과 일치하는 요소를 선택할 수 있게 해주는 유일한 jQuery 선택자임.

• 주요 콘텐츠 필터:

:has() : 특정 자식을 가진 요소를 선택
:empty : 자식 요소가 없는 요소를 선택.
:contains() : 특정 텍스트를 포함하는 요소를 선택.

jQuery 속성 (Attributes)

• jQuery에서는 attr() 메서드를 사용하여 선택한 요소의 속성 값을 얻거나 설정할 수 있음.

• prop() - 속성 값을 가져오고 설정하는 데 사용하는 추천 방법, - 얘는 true를 반환

attr() - 일부 속성 값을 반환할 수 있지만, 그 값이 덜 유용할 수 있음. - 괄호안 값 반환

Properties vs Attributes

- property: attribute를 통해서 초기값을 설정하고, 동적으로 값이 변할 수 있음

- attribute: 초기값 설정 이후에는 변하지 않고, property의 초기값을 제공하는 데 사용

jQuery로 CSS 변경하기 (Changing CSS)

jQuery Listeners

• $(document).ready(실행할 코드): 문서가 준비되었을 때 실행할 코드를 설정함.

• on()과 off() : 이벤트를 추가하거나 제거할 수 있으며

DOM 수정하기 (Modifying the DOM)

• DOM 요소 추가

- append() : HTML 문자열, DOM 객체, 또는 jQuery 객체를 매개변수로 받아, 선택한 요 소의 마지막 자식으로 추가함.

• DOM 요소 앞에 추가하기

- prepend()와 prependTo() : 둘은 비슷하게 작동하지만, 새로운 요소를 마지막 자식 대신 첫 번째 자식으로 추가한다는 차이가 있음.

AJAX (Asynchronous JavaScript and XML)

: 웹 브라우저가 서버에 메시지를 보내면서 브라우저에서 보여지는 흐름을 방해하지 않고 데 이터를 주고받을 수 있도록 하는 패러다임

- JavaScript와 XML을 사용하여 비동기적으로 정보를 교환하는 방법

- 서버의 처리가 완료될 때까지 기다리지 않고, 이후의 다른 작업을 수행할 수 있음

- 웹 페이지의 필요한 일부분만을 갱신할 수 있음

• load() : 전체 페이지를 다시 갱신하지 않고, 비동기적으로 로드

POST 요청 – jQuery AJAX를 통한

GET: 사용자 입력 값을 URL의 일부로 인코딩하여 서버로 전달
POST: 사용자 입력 값을 HTTP 헤더에 저장하여 서버로 전달\

> POST 요청이 더 선호됨

- 이유: 무제한의 데이터를 전송할 수 있고, 각 작업에 대한 URL을 보기 어려운 형태로 생성되기 때문. 반면, POST는 안전하지 않음

• serialize(): 폼 객체에서 호출하여 현재의 key-value 쌍을 &로 구분된 문자열로 반환하며, - 이를 사용하면, 사용자 입력 데이터를 쉽게 POST 요청에 포함하여 전송 가능