🔹 details 태그란?

details는 사용자가 클릭해서 열고 닫을 수 있는 토글 가능한 콘텐츠 박스를 만들 때 사용 자주 사용하는 경우는 FAQ 섹션이나, 추가 정보를 숨겨뒀다가 필요할 때 보여줄 때 사용 기본적으로 닫혀 있고, 사용자가 제목 부분을 클릭하면 내용이 펼쳐지는 구조다.

<details>
  <summary>더 보기</summary> // 제목
  <p>이 안에는 숨겨진 내용이 들어 있어요.</p> // 숨겨짐
</details>

"더 보기"라는 텍스트만 보이고, 클릭하면

태그 안의 내용이 펼쳐져 보인다.

🔸 주요 특징

summary 태그는 details 안에 있어야 하고, 요약(제목) 역할을 한다.

summary를 클릭하면 펼쳐지거나 접히게 됨.

CSS로 스타일링도 가능하고, open 속성을 주면 기본적으로 펼쳐진 상태로 시작 가능하다.

html

    <section name="accordion" >
        <details>
            <summary>첫 번째</summary>
            <p>첫 번째 내용입니다. 원하는 내용</p>
        </details>

        <details>
            <summary>두 번째</summary>
            <p>두 번째 내용입니다. 원하는 정보</p>
        </details>
    </section>

css

  body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f4f4f4;
    padding: 40px;
    }

details {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: .5rem;
    margin-bottom: 10px;
    transition: box-shadow 0.3s;
    position: relative;
}

details[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

  summary {
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding: 12px 40px 12px 20px;
  display: block;
  list-style-type: none;
  }


details p {
    margin: 0;
    padding: 15px 20px 20px;
    color: #444;
    line-height: 1.6;

}
summary::marker {
    display: none;
}

summary::-webkit-details-marker {
display: none; /* Chrome, Safari 등 */
}

/* 화살표 아이콘 */
summary::after {
    content: '▶';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}

까지만 해도

이렇게만 넣어줘도 되지만 이러면 클릭시 여닫히지만 해당제목 클릭시 다른제목도 열려있다. 이걸 하나만 열리게 하려면 쉽게 jquery를 사용하면 된다.

jq

$(document).ready(function () {
    $("details > summary").on("click", function () {
        const clicked = $(this).parent();
        setTimeout(function () {
        $("details").not(clicked).removeAttr("open");
        }, 1);
    });
});

완성

그럼 다른 제목 클릭시 보던 제목은 닫히고 클릭한 제목만 열린다.

wow 이제 드롭다운은 굳이 js, jq 를 안써도 된다는 말씀 ㅎㅎ

사실 굳이 setTimeout 안해도 되지만 그래도 에니메이션이 있는거와 없는건 차이가 크니까 ㅎㅎ

✅while

while (조건) { // 반복할 코드 } 💡 1부터 5까지 출력

let i = 1;
while(i<=3){
    console.log(i);
i++
}

1단계

1부터 100까지의 짝수만 출력하기 (while문 사용)

let i = 1;
while (i <= 100) {
    if (i % 2 === 0) {
        console.log(i);  // 짝수일 때만 출력
    }
    i++; // 반복문을 돌리기 위해 증가시킴
}

또는

let i = 2;
while (i <= 100) {
    console.log(i);
    i += 2;
}

2단계

사용자 입력까지 더하기

let sum = 0; // 합계 저장용
let input = prompt("숫자를 입력하세요 (종료하려면 Enter):");

while (input !== "") { // 입력이 비어있지 않은 동안 계속 반복
    sum += Number(input); // 입력값을 숫자로 바꿔 더하기 // 문자열을 숫자로 바꿔서 누적 합산
    input = prompt("숫자를 입력하세요 (종료하려면 Enter):");
}

alert(`총합: ${sum}`); // 반복이 끝나면 총합 알림창으로 보여주기

3단계

3의배수 합 구하기

let sum = 0; // 합계 저장용
let input = prompt("숫자를 입력하세요 (종료하려면 Enter):");

while (input !== "") {
    if(input % 3=== 0){
        sum += Number(input); // 입력값을 숫자로 바꿔 더하기
        input = prompt("숫자를 입력하세요 (종료하려면 Enter):");
    } else {
        input = prompt("숫자를 입력하세요 (종료하려면 Enter):");
    }
}

alert(`총합: ${sum}`);

더 간결하게

let sum = 0;
let input = prompt("숫자를 입력하세요 (종료하려면 Enter):");

while (input !== "") {
    if (Number(input) % 3 === 0) {
        sum += Number(input);
    }

    input = prompt("숫자를 입력하세요 (종료하려면 Enter):");
}

alert(`총합: ${sum}`);

4단계

짝수는 더하고 홀수는 빼기

let sum  =0;
let input = prompt("숫자만 입력");

while(input !== ""){
    const num = Number(input)
    if(num % 2 === 0){
        sum  += num;
        input = prompt("더하기 완료");
    } else {
        sum  -= num;
        input = prompt("빼기 완료");
    }
}
alert(`총합은 ${sum }`);

✅do...while

do {
    // 실행할 코드
} while (조건);

✅ 작동 흐름

1. do 블록 안의 코드를 무조건 한 번 실행하고
2. while(조건)을 검사해서
3. 조건이 참(true) 이면 다시 실행
4. 조건이 거짓(false) 이면 멈춤

✅ while vs do...while 구문 | 실행 순서 | 조건이 처음부터 false면? while | 조건 → 실행 | 아예 실행 안 됨 do...while | 실행 → 조건 | 한 번은 실행됨

1단계

짝수와 홀수 구분하기

let input; do { input = prompt("숫자만 입력하세요 (종료하려면 Enter):"); if (input === "") break; // 빈 문자열이면 종료 const num = Number(input); // 숫자로 변환 if (isNaN(num)) { alert("숫자가 아닙니다!"); continue; // 잘못된 입력이면 다시 루프 }

if (num % 2 === 0) { console.log(${num}는 짝수입니다.); } else { console.log(${num}는 홀수입니다.); }

} while (true);

2단계

1부터 100까지 FizzBuzz

let sum = 0; // 초기 합계는 0
do {
    let input = prompt("숫자를 입력하세요 (엔터시 종료):");

    // 엔터를 눌러서 종료하는 경우
    if (input === "") {
        break; // 빈 문자열 입력 시 종료
    }

    sum = Number(input); // 입력을 숫자로 변환

    if (sum % 15 === 0) {
        console.log("FizzBuzz");
    } else if (sum % 3 === 0) {
        console.log("Fizz");
    } else if (sum % 5 === 0) {
        console.log("Buzz");
    } else {
        console.log(sum);
    }

} while (true); // true일 때 반복

3단계

사용자 입력 값에 맞는 *별찍기

let rows = Number(prompt("몇 줄??"));
let i = 1;

do {
  let line = "";
  let j = 1;

  do {
    line += "*";
    j++;
  } while (j <= i);

  console.log(line);
  i++;
} while (i <= rows);

for의 3가지 규칙 for (초기값; 조건; 증감식) { // 반복할 코드 }

초기값: 반복을 시작하기 위한 변수 설정 (보통 let i = 0) 조건: 이 조건이 true일 때만 반복됨 (예: i < 5) 증감식: 한 번 반복이 끝난 후 실행되는 코드 (보통 i++로 숫자 1 증가)

🔄1단계

1부터 10까지 출력하기

for(let i = 0; i <= 10; i++){
    console.log(i);

}

🔄1.5단계(응용)

짝수만 출력하기 (1~20)

for (let i = 0; i <= 20; i += 2) {
    console.log(i);
}

🔄2단계

배열 출력하기

const animals = ['dog', 'cat', 'rabbit', 'hamster'];

for(var i = 0; i < animals.length; i++) {
    console.log(animals[i]);
}

💡 해설: animals.length: 배열의 길이 (4)

i는 0부터 시작해서 3까지 반복 (0, 1, 2, 3)

animals[i]는 배열에서 i번째 요소

🔄3단계

합계 구하기

let sum = 0;
for (let i = 0; i <= 100; i++ ) {
        sum += i ;
    }
console.log(sum + i);

💡 해설: let sum = 0: 합계를 저장할 변수

i는 1부터 100까지 반복

sum += i: 반복마다 i를 계속 sum에 더함

반복이 끝나면 sum에는 1~100까지의 총합이 저장됨

🔄4단계

구구단 2단

let dan = 2;
for (let i = 0; i <= 9; i++) {
  console.log(`${dan} * ${i} = ${dan * i}`);
}

🔄4.5단계(응용)

구구단 2~9단

이중for문 사용

for (let i = 0; i <= 9; i++) {
    for(let j = 0; j <= 9; j++) {
        console.log(`${i} * ${j} = ${i * j}`);
    }
}

🔄4.5단계(심화)

구구단 2~9단 가로 배치

for (let i = 2; i <= 9; i++) {
    line = ''; // 매 단마다 초기화
    for(let j = 1; j <= 9; j++) {
        line += `${i} * ${j} = ${i * j}  `;
    }
    console.log(line); // 한 줄 출력
}

switch 문은 여러 조건을 한 번에 비교하여 처리할 때 유용하게 사용 여러 if-else if 문을 사용하는 대신, switch 문을 사용하면 코드가 간결하고 읽기 쉽다. switch 문은 특정 변수의 값에 따라 실행할 코드 블록을 선택

switch (expression) {
    case value1:
    // expression이 value1일 때 실행되는 코드
    break;
    case value2:
    // expression이 value2일 때 실행되는 코드
    break;
    case value3:
    // expression이 value3일 때 실행되는 코드
    break;
    default:
    // 위의 case들이 모두 맞지 않으면 실행되는 코드
}

expression: 비교할 값이 들어가는 부분 예를 들어, 숫자, 문자열, 또는 변수

1단계

숫자에 따른 요일 출력

let day = prompt("1~7 입력 ");  // 1~7중 입력
day = Number(day);  // 입력값을 숫자로 변환
switch (day) {
  case 1:
    console.log("월요일");
    break;
  case 2:
    console.log("화요일");
    break;
  case 3:
    console.log("수요일");
    break;
  case 4:
    console.log("목요일");
    break;
  case 5:
    console.log("금요일");
    break;
  case 6:
    console.log("토요일");
    break;
  case 7:
    console.log("일요일");
    break;
  default:
    console.log("1~7 중 입력");
}

1.5단계(응용)

숫자일때 문자 일떄 if문 써서 맞게 나오게

let day = prompt("1 ~ 7 또는 일 ~ 칠 입력");

let dayNum = Number(day); // day를 숫자로 변환

if (!isNaN(dayNum)) { // 숫자일 때 처리
    switch(dayNum) {
        case 1:
            console.log("월요일");
            break;
        case 2:
            console.log("화요일");
            break;
        case 3:
            console.log("수요일");
            break;
        case 4:
            console.log("목요일");
            break;
        case 5:
            console.log("금요일");
            break;
        case 6:
            console.log("토요일");
            break;
        case 7:
            console.log("일요일");
            break;
        default:
            console.log("1~7 중 입력");
    }
} else if (typeof day === 'string') { // 문자열일 때 처리
    switch (day) {
        case "일":
            console.log("월요일");
            break;
        case "이":
            console.log("화요일");
            break;
        case "삼":
            console.log("수요일");
            break;
        case "사":
            console.log("목요일");
            break;
        case "오":
            console.log("금요일");
            break;
        case "육":
            console.log("토요일");
            break;
        case "칠":
            console.log("일요일");
            break;
        default:
            console.log("일, 이, 삼, 사, 오, 육, 칠 중 입력");
    }
} else {
    alert("숫자(1~7) 또는 문자(일~칠)를 입력하세요.");
}

1.5단계(심화)

코드 단축 객체화시키기

let day = prompt("1 ~ 7 또는 일 ~ 칠 입력");

// 숫자와 문자에 대한 요일 매핑 객체
const daysOfWeek = {
1: "월요일",
2: "화요일",
3: "수요일",
4: "목요일",
5: "금요일",
6: "토요일",
7: "일요일",
일: "월요일",
이: "화요일",
삼: "수요일",
사: "목요일",
오: "금요일",
육: "토요일",
칠: "일요일"
};

let dayNum = Number(day);// 입력을 숫자로 변환

// 숫자일 때 처리
if (!isNaN(dayNum) && daysOfWeek[dayNum]) {
  console.log(daysOfWeek[dayNum]);
} 
// 문자일 때 처리
else if (daysOfWeek[day]) {
  console.log(daysOfWeek[day]);
} else {
  alert("숫자(1~7) 또는 문자(일~칠)를 입력하세요.");
}

2단계

점수에 맞는 학점

let score  = prompt("점수 입력");

switch (true) {
  case (score >= 101):
    console.log("100이하로");
    break;
  case (score >= 90):
    console.log("A 학점입니다.");
    break;
  case (score >= 80):
    console.log("B 학점입니다.");
    break;
  case (score >= 70):
    console.log("C 학점입니다.");
    break;
  default:
    console.log("F 학점입니다.");
}

3단계

이벤트 티켓 가격 계산기

티켓 종류 ("학생", "일반인", "노인", "어린이") 학생: 10,000원 일반인: 20,000원 노인: 10,000원 어린이: 5,000원

회원 유형 ("단체", "VIP", "일반") 단체(10명 이상): 50% 할인 VIP: 30% 할인 일반: 할인 없음

let ticket  = prompt("학생, 일반, 노인, 어린이"); // 1차 종류 입력
let counter  = prompt("단체, VIP, 일반"); // 2차 유형 입력

let basePrice //기본 가격 설정

switch(ticket){ //1차 종류에 대한 처리
    case "학생":
        basePrice = 10000;
    break;
    case "일반":
        basePrice = 20000;
    break;
    case "노인":
        basePrice = 10000;
    break;
    case "어린이":
        basePrice = 5000;
    break;
    default:
        console.log("잘못된 티켓");
    break;
}

let final = basePrice; 1차에 대한 결과값에 유형 추가를 위한 처리

switch(counter){ //2차 유형에 대한 처리
    case "단체":
    final = basePrice * 0.5; 
    break;
    case "VIP":
    final = basePrice * 0.7;
    break;
    case "일반":
        // 일반은 기본 가격 그대로
    break;
    default:
        console.log("잘못된 회원");
    break;
}

// basePrice 값이 맞게 들어왔으면 실행하게
if(basePrice) {
    console.log(`최종가격은 : ${final}원`);
}

예시1) 티켓 종류: 어린이 회원 유형: 단체

최종 가격: 2500원 (5,000원에서 50% 할인)

예시2) 티켓 종류: 학생 회원 유형: 일반

최종 가격: 10000원

1-1 조건문 (if, else)

조건문은 어떤 조건이 맞으면 특정 코드를 실행하는 구조

1단계

ge가 18 이상일 때 "성인"라고 출력

let age = prompt("나이를 입력하세요: ");
if(age>= 18){
    alert("성인");
}else {
    alert("미성년자");
}

2단계

score가 70 이상일 때 "합격"라고 출력

let score = prompt("점수를 입력하세요: ");

if(score>=70) {
    alert("합격");
}else{
    alert("불격");
}

3단계

사용자의 아이디와 비밀번호를 비교하여, 둘 다 맞으면 "성공", 아니면 "실패"를 출력

let username = prompt("아이디를 입력하세요: ");
let password = prompt("비밀번호를 입력하세요: ");

if(username === "user" && password === "1234"){
    alert("성공");
}else {
    alert("실패");
}

4단계

숫자입력이 홀수면 "홀" 짝수면 "짝" 출력

let num = prompt("숫자를 입력하세요: ");
if(num % 2 === 0 ){
    alert("짝");
}else {
    alert("홀");
}

1-2 조건문 (else if)

1단계

score가 80 이상 90 미만일 때 "B"를 출력

let score = prompt("점수를 입력하세요: ");
if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else {
    console.log("C");
}

2단계

사용자가 입력한 점수별 출력

// 90점 이상: "A" // 80점 이상 90점 미만: "B" // 70점 이상 80점 미만: "C" // 60점 이상 70점 미만: "D" // 60점 미만: "F"

let score = prompt("점수를 입력하세요: ");

if(score>=90) {
    console.log("A");
}else if(score>=80){
    console.log("B");
}else if(score>=70){
    console.log("C");
}else if(score>=60){
    console.log("D");
}else{
    console.log("F");
}

3단계

사용자가 입력한 1~12월 사이의 숫자에 따라 계절을 출력

// 12, 1, 2월: "겨울" // 3, 4, 5월: "봄" // 6, 7, 8월: "여름" // 9, 10, 11월: "가을"

let month = prompt("월을 입력하세요 (1부터 12까지): ");
if(month == 12 || month == 1 || month == 2){
    console.log("겨울");
}else if(month >= 3 && month <= 5){
    console.log("봄");

}else if(month >= 6 && month <= 8){
    console.log("여름");
}else if(month >= 9 && month <= 11){
    console.log("가을");
}else {
    console.log("1~12까지만");
}

3단계 *tip

만약 여기서 절대값으로 조건을 한다면?

let month = prompt("월을 입력하세요 (1부터 12까지): ");  // 사용자로부터 월을 입력받음
month = Number(month);  // 입력값을 숫자로 변환

if (month === 12 || month === 1 || month === 2) {
  console.log("겨울");
} else if (month >= 3 && month <= 5) {
  console.log("봄");
} else if (month >= 6 && month <= 8) {
  console.log("여름");
} else if (month >= 9 && month <= 11) {
  console.log("가을");
} else {
  console.log("잘못된 월입니다. 1부터 12까지의 숫자를 입력하세요.");
}

4단계

18세 이하 10% 할인, 19세 이상 65세 이하 5% 할인, 66세 이상 15% 할인, 0세 이하 100세 이상잘못된 나이

var age = prompt("나이를 입력하세요");  // 나이 입력
var val = prompt("금액을 입력하세요");  // 금액 입력

val = Number(val);  // 입력된 금액을 숫자로 변환
age = Number(age);  // 입력된 나이를 숫자로 변환

if (age < 0 || age > 100) {  // 나이가 0세 이하이거나 100세 이상이면
    console.log("다시 입력");
} else if (age >= 66) {  // 66세 이상인 경우
    console.log("20% 할인");
    console.log("할인 금액: " + (val * 0.8));  // 20% 할인
} else if (age >= 19) {  // 19세 이상 65세 이하인 경우
    console.log("5% 할인");
    console.log("할인 금액: " + (val * 0.95));  // 5% 할인
} else if (age <= 18) {  // 18세 이하인 경우
    console.log("10% 할인");
    console.log("할인 금액: " + (val * 0.9));  // 10% 할인
}

2.찾은 노드 다루기

3. 자식 노드 찾기

<p>4. 부모 노드 찾기</p>

<table>
    <thead>
        <tr>
            <th>분류</th>
            <th>핵심 내용</th>
            <th>핵심 프로퍼티 및 메서드</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>부모 노드 찾기</td>
            <td>부모 노드 찾기</td>
            <td>$대상.parent()</td>
        </tr>
        <tr>
            <td>조상 노드 찾기</td>
            <td>조상 노드 찾기</td>
            <td>$대상.parents(["선택자"])</td>
        </tr>
    </tbody>
</table>

5. 형제 노드 찾기

6. 노드 생성 및 추가

7. 노드 제거

8. 노드 내용 읽기 및 변경

폴드에 대한 무상수리에 대해 완벽하게 정리해드립니다!

폴드 서비스 기간은 최대 '3년'

어떻게??

2년 + 무상수리 후 추가 1년

기준은 최초 통화일 예를 들어 최초 통화일이 2022년10월01일이면 무상수리 보증 기간은 2년인 2024년9월30일 만약 보증기간 중 수리를 받았아면 2024년05일 15일 무상수리 받음 추가적으로** 1년의 보증기간이 생긴다. **2025년05월14일까지 만약 보증기간 기간이 연장된 2025년05월14일이 지나면 완전 끝난다.

과실이 기계 결함이건 부주의던 상관없으 무조건** 유상수리**.. 된다..

왜? 해주고 싶어도 전산에서 막혀 어쩔 수 없는 부분.. 그러니.. 폴드 쓰시는분들은 기간 잘 확인하시구 꼭 받으세요...ㅜㅜ

저는 22년에 사서 1년 지난 시점인 23년 10월에 올갈이 한번 했더니.. 24년10월에 보증기간이 끝나서 70만원에 수리 해야 한다고 하더라구요.. 세상에.. 너모하자나... ㅜㅜ

2년 보증 기간인 24년에 올갈이 했더라면.. 25년 까지라 무상수리가 가능했을텐데... 정말 아쉽다ㅜㅜ

꿀팁

최대한 무료수리 기간인 2년 가까이 가서 한번 받고 1년 다될때 쯤에.. 한번 더 받자

그리고

많은 분들이 힌지에 기스 나면 안된다 라고 하는데 흠집 한두개 정도는 그냥 눈감아 준다고 하네요

현재까지 피그마로 작업한 프로젝트를 15개이상..

어느정도 작업을 하다보니 자주쓰는 플러그인을 추천하려고 한다. 저번에는 협업 개발자에게 알려주면 좋은 플러그인이지만 오늘은 작업시 쓰기 좋은 것으로 나를 위한 플러그인이다 ㅎㅎ🎉

1.Ghost🎈

로딩중일때 주로 쓰며 스피너나 로더 같은 ui를 사용하거나, 예상할 수 있도록 사용한다. 만드는게 어려운건 아니지만 플러그인으로 업무질을 높여줄 수 있다.

플러그인 한방으로 생기는 로딩 ui 진짜 잘썻다 물런 저거 하나만 있는건 아님

2. Random layout generator🎈

무한한 레이아웃을 무작위로 생성하는 플러그인 그냥 레이아웃 아이디어 참고용으로 사용하기 좋아서 올린다. 완전 꿀팁은 아니지만 한번씩 생각없이 보다가 좋은 배치가 나올 수 있기에 꿀팁에 넣었다 ㅎㅎ

억지 같아 보이지만 진짜 생각보다 유용하게 쓸 수 있다.

3. Figit - A massive library of UI Elements🎈

천개 이상의 UI 레이아웃으로 시간을 절약할 수 있는 플러그인

참고용으로 유용하다.. 솔직히 나는 관공사 플랫폼 개발이라 일반, 쇼핑몰 페이지 만들데 좀 더 활용도가 높을 것 같다! 이용권 있지만 솔직히 잘 안된다는 말이 많아 그냥 참고용으로 종종 썼다. *진짜 혹시나.. 사지말자

정리하면서 다시보니 2년정도 업뎃은 멈춘듯.. 레이아웃 및 배치에 많인 도움이 되었기에 꿀팁에 넣어본다!

4. iconify🎈

많은 아이콘이 다양하게 있어서 많이 사용 햇다. 라이브버리랑 유료 플랫폼 이용하면서 점점 안쓰지만 한번씩 들어가서 볼때가 있다.

단점이 존재하는데.. stroke 조절이 되는지 안되는지 눌러봐야 알아서.. 한번씩 빡쳐서 그냥 내가 만든다.. ㅎㅎ < 혹시 보는법 아시는분..?

5. Unsplash🎈.

이건 진짜 이쁜 그림이 많아 억지로(시안용으로)라도 한번씩 쓰는데 우리회사 특성상 공기업이( 공장사진.. 기계사진.. , 등) 많아 이미지는 유료 다운 플랫폼을 이용한다. 하지만 한번씩 일반적인 페이지도 존재할때 시안용으로 한번씩 쓴다. < 너무 좋당.

사진 구도나 색감이 너무 예뻐서 색추출용으로 사용도 한다.

6.Design Lint🎈

반복된 작업과 수정을 하다보면 생각보다 많은 컴포넌트가 해제되고 순서가 틀어지는 경우가 많다. 프레임 내 누락된 스타일을 찾아주는 플러그인 이 아이를 쓰면 누락된 아이를 한번에 정리 할 수 있지만 동일하다는 조건에서 좋다! 그렇기 위해선 컴포넌트 정리는 필수!

천천히하면 필요없지만 상황에 따라 급한 경우 던진 정리용으로 최고다.

7.Outline

디자인을 하다보면 자체적으로 간격을 확인 할 수있지만 그래도 하나하나 클릭하지 않아도 되기에 대부분 틀 완성하고 마무리, 전체 레이아웃 할때 종종 쓴다 수정을 하다보면 넣었다 빼면서 전체적인 패딩 마진이 달라질 때 있긴하다.. 진짜 정신없이 수정을 하다보면.... 그럴때 너무 좋다 색별로 구분 되지만 솔직히 그냥 큰 간격만 하면 되기에 괜찮은것 같다 ㅎㅎ

삭제는 좀 귀찮긴 하다...ㅎㅎ

8.A11y - Color Contrast Checker

WCAG(웹 콘텐츠 접근성 지침) 표준을 준수하여 사용자가 텍스트를 읽을 수 있도록 도와주는 플러그인 처음 컬러값 잡을 때 쓰기 좋으면 확실하게는 사이트를 통해 확인해보자

다양한 작업을 하다보면 조금더 편하게 할 수 없을까 하는 생각으로 6개월에 한번씩은 피그마 플러그인 검색을 해보는거 같다. 신입에 쓰면 좋을까 싶어 놔둿던 플러그인도 일단 같이 올려보겠다!

99.그외

원래는 디자인(초큼의 기획) > 퍼블리싱 > 프론트 살짝쿵 까지 완료 후 개발자에게 넘기지만 한번씩 다른 부서의 프로젝트에 웹디자인만 맡아 해주는 경우가 종종 있다.

'증말 바쁠때는 눈물난다..ㅜㅜ'

매일 부딪히는 개발자(바로 옆자리 뒷자리 등등) 은 경우 바로 바로 소통이 가능하고 3년째 합을 맞추고 있어 다른 설명 없이 국룰?적으로 셋팅해놓으면 뽑아쓰는 형식으로 큰 어려움이 없었다. 하지만.. 다른 부서는 초반에 엄청 많이 삐걱 거렸다..

어우 야.. 생각만 해도 아찔 했던 경험이였다.. 또한 처음에는 하나하나 설명해줘야햇다.

항상 코딩까지 해서 줬던 부분이라 생각지 못한.. 괭좡히 미흡했던 부분이기도 했다.>//< 심지어 피그마를 처음 해봐서 잘 하지도 못하고 버벅이던.. 그래서 어떻게 해줬는가.. 아래 플러그인을 협업 개발자에게 알려주며 빠른 업무를 할 수 있도록 도와주자.. 슬픈건 플러그인 깔고 어떤식으로 쓰는지 알려줘야한다^_^

※아래에 나오는 시안은 초기 시안이며, 이미지는 실제 공장 내부 사진이 아닌 유료 이미지 입니다.

1.Spectral

새로 디자인한 부분의 규격, 크기, 색상과 스타일, 등 인터랙션은 어떤지 상세하게 적은 필수.. 이걸 알기 전과 예시화면.. 수줍구나..ㅜㅜ 이전에는 일일이 손으로 적었지만, Spectral 플러그인을 사용하면 선택한 부분의 모든 디자인 정보를 한 번에 정리해 보여준다. 단점은 한 섹센 클릭시 한번에 나와서 약간 헷갈릴 수 있다는거??

2.Dimensions

요소 간격 표기 폰트 개발자가 직접 하나하나 확인해야하는 단점이 있지만 훨 직관적이라 현재는 Dimensions 쓰고 있다. 컬러를 보려면 2개 이상의 요소가 겹쳐 있으면 안되니 컬러는 아래 플러그인을 추천한다.

3.Color Extractly

즉각적으로 색상 추출을 할 수 있으며 쉽게 보여진다. 단점은 직관적으로 네임 설정을 해야 보기 편하며 하나 하나 설정을 해야 한다.

위에 3가지만 있으면 별로의 정리 없이 한번에 전달 할 수 있다.

여기서 제일 중요한건 혼자만 알 고 있으면 안된다. 무슨말이냐 당연히 알고 있을꺼라 생각하면 안되고 무조건 설명, 주석은 필수 나에게 스크롤은 컨텐츠가 넘어가면 당연한 스크롤이지만 표시를 하지 않으면 어디부터 어디까지 스크롤 영역인지 조차 상대방은 알 수 없다. 그러니 꼭 디테일하고 상세하게! 설명을 써놓자!!

어느때 다름없이 코딩을 하려고 start를 했는데 엥?? 갑자기 ?

'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

?? 아게 무슨일이람??

검색해보니 VSCode의 기본 터미널이 powershell로 설정되어 있기 때문이라고 해서 기본 터미널 종류를 바꿔줬다.

그리고 터미널 닫았다가 다시 실행하면 된다는데.. 엥?? 난안됨..;; 왜안되지? 다시 검색을 시작..

갑분 노드가 잘 깔려있는지 확인하라고..?? cmd를 키고 node -v을 검색 해보니..

오? 어디갓어..? 우리 노드 어디간거지..?

파일 폴더 안에는 노드가 있는데 이게 무슨일인가..? 무슨 다시 셋팅해주니

와우 20대에서 22로 올랏넹,..

그러고 vs자체를 껐다 키고 터미널 제거후 새로 실행하니 얏호 ~ 바로 된당..

잘 되던 노드가 왜 사라지는건지는 다음에 또 그러면 확실하게 알아봐야겠다.

간단한 댓글 컴포넌트를 만들어 실습해보자! 일단 Counter, CommentList 페이지를 생성한다.

Counter 페이지에서는 아래와 같이 생성

CommentList 페이지에서는 아래와 같이 Counter 불러온다.

index.js에 CommentList를 넣고 실행하면

아주 잘 받아 나온다.

간단하게 약간의 스타이링을 추가하면

아주 잘 만들어진 화면을 확인 할 수 있다.

하지만 이건 직접 코드에 넣은것이고

동적으로 받아오기 위해 props를 추가한다.

아직 name과 comment가 정의 되지 않아 아무것도 나오지 않는다.

CommentList로 가 Comment에 props name, comment을 정의해주면 아래 사진처럼 잘 나오는게 확인된다.

여기서 Commnet를 하나 더 추가해보면

아주 잘 받아 오는걸 알수 있다 그럼 각 별도의 객체로 분리하여 동적으로 받아오게 만든다면?

JavaScript 배열의 map함수를 써서 각 댓글 객체에 대해 comment 컴포넌트를 return하게 작성한다.

배열 내 있는 수만큼 커멘드가 렌더링 된걸 볼 수 있다.

오늘도 하나의 지식이 쌓여가는 나를 칭찬한다.. 후후

함수형 컴포넌트 (Function Component) 클래스형 컴포넌트 (Class Component)

※현재는 함수형을 많이 쓰지만 그래도 클래스가 무엇인지는 알고 있어야 하니 같이 작성한다.

1. 🛬클래스형 컴포넌트 (Class Component)

클래스형 컴포넌트 Class Component React의 초기 버전에서 사용되던 컴포넌트 작성 방법 ES6 클래스 문법을 사용하여 컴포넌트를 정의하고, React에서 제공하는 render() 메서드를 통해 UI를 렌더링 한다. 장점으로는 상태(state)와 생명주기 메서드를 사용할 수 있다. 하지만 React 16.8에서 훅(Hooks)이 도입된 이후로 함수형 컴포넌트(Function Component가 주로 사용된다. 예전 코드나 라이브러리에서는 클래스형 컴포넌트는 아직 사용되고 있으니 간단하게 이해는 하는게 좋을 것 같다.

특징

• 상태 관리: 클래스형 컴포넌트는 this.state를 사용 상태를 관리
• 생명주기 메서드: 클래스형 컴포넌트에서는 컴포넌트의 생명주기(마운트, 언마운트, 업데이트 등)를 관리할 수 있는 여러 생명주기 메서드를 사용할 수 있다.
• render() 메서드: React.Component의 하위 class에서 반드시 정의해야 하는 메서드
• 고정적: 컴포넌트 클래스를 선언하는게 아닌 합성을 주로 사용합

상태 관리 (this.state와 this.setState) 상태를 관리하려면, 클래스의 생성자(constructor)에서 this.state를 초기화하고, 상태를 변경할 때는 this.setState() 메서드를 사용

• this.state는 컴포넌트의 상태고 this.setState()를 사용하여 상태를 변경된다.
• setState()는 상태가 변경될 때마다 컴포넌트를 리렌더링 된다.

2. 🛫함수형 컴포넌트 (Function Component)

React 16.8부터 Hooks가 도입되면서 함수형 컴포넌트가 주로 사용된다. 상태(state)나 생명주기 메서드(lifecycle methods)를 다루기 위해 useState, useEffect 등의 훅을 사용있다. 이 방식은 JavaScript 함수로 작성 UI를 반환하는 간단한 구조를 가지고 있다. React 16.8이전에는 클래스형 컴포넌트가 사용되었지만, 현재는 함수형 컴포넌트가 훨씬 더 선호되고 있다.

특징

1)단순함: 함수형이 클래스형보다 읽시 쉽고 간결 2)상태와 이펙트 관리: useState, useEffect와 같은 React 훅(Hook)을 사용하여 상태 관리와 생명주기 관리 3)컴포넌트 재사용성 함수형 컴포넌트는 다른 함수나 컴포넌트와 쉽게 결합 및 재사용에 용이

장점

간결성: 코드가 간결하고 읽기 쉬우며, 시간 단축 및 유지보수가 용이. 성능: 함수형 컴포넌트를 최적화 Hooks를 통한 기능 확장: useState, useEffect, useContext, useReducer 등 다양한 훅을 통해 상태 관리, 사이드 이펙트 처리, 데이터 공유, 등 처리 가능

Hooks에 대해 자세히 알고 싶으면 아래 참고

💺Component 주의사항

1.이름규칙

• 소문자로 시작하는것은 컴포넌트를 DOM태그로 인식하기 떄문에 항상 대문자로 시작

소문자로 시작하면 html div 태그로 인식

const element = <div/>;

Welcome 이라는 컴포넌트를 사용자가 정의 대문자로 하여금 리액트 Component로 인식

cosnt element = <Welcome name="홍길동"/>

2.JSX 내 중괄호{} 사용

• JavaScript 코드 변수나 함수를 사용하려면 중괄호 {}를 사용

const name = 'mini';
return <h1>Hello, {name}!</h1>;  // "Hello, mini" 출력

3.상태(state) 변경은 비동기적

• 상태가 즉시 변경되지 않으므로 상태 변경 후 바로 상태를 읽을 때는 예상한 값이 아닐 수 있다.
• 상태 변경을 연속적으로 할 때는 함수형 setState를 사용한다.

4.컴포넌트는 단일

• 순수 함수형 컴포넌트는 입력값(props)에 의해서만 결정된 출력값(JSX)을 반환 컴포넌트 내에서 직접 상태를 변경하거나 외부에 의존적인 값을 변경하면 안된다. 예를 들어, 컴포넌트 내에서 외부 변수나 API 호출을 직접 다룬다면, 이는 컴포넌트가 순수하지 않게 되어 결과적으로 애플리케이션의 상태 관리가 복잡해질 수 있다.

5.렌더링 최적화

• 상태나 props가 변경될 때마다 자동으로 리렌더링을 한다. (불필요한 리렌더링을 피하는 것이 중요)

6.Props는 읽기 전용

• props는 부모 컴포넌트에서 전달된 값이므로, 자식 컴포넌트에서 직접 수정하면 안된다.
• props*를 수정하려면 부모 컴포넌트에서 상태를 변경하고, 그에 따라 자식 컴포넌트가 변경된 props를 받도록 해야 한다.

7.리스트 렌더링 시 key 사용

• 리스트 항목을 렌더링할 때는 각 항목에 고유한 key 값을 지정
• key가 없으면 리렌더링 시 React가 각 항목을 재구성하는 데 불필요한 비용이 발생

8.불변성 유지

상태나 props는 불변이어야 합니다. 즉, 객체나 배열의 상태를 직접 수정하는 것이 아니라 새로운 객체나 배열을 만들어야 합니다. 상태를 배열로 다룰 때 *push()** 대신 concat()을 사용해야 한다. 상태가 직접 변경되면 변화를 감지하지 못할 수 있기떄문

// 불변성 위반 (잘못된)
this.state.items.push(newItem);

// 불변성 유지 (올바른)
this.setState({ items: [...this.state.items, newItem] });

🚀결론

React 컴포넌트를 작성할 때 위와 같은 주의사항들을 지키는 것이 중요하며, 이를 통해 성능 최적화, 코드의 유지보수성 향상, 에러 방지 등을 할 수 있다. 컴포넌트를 잘 구조화하고 관리하는 것이 핵심!

• 기능 단위로 재사용 가능한 단위로 작성하는게 제일 좋다.
• 재사용 컴포넌트가 많을 수록 개발 속도가 빨라진다.

※ 본 포스팅은 인프런 강의와 리액트 페이지를 보며 정리한 내용입니다.
</p>

함수형 컴포넌트 내에서 상태(state)를 관리할 수 있게 해주는 Hook! 클래스형 컴포넌트에서 this.state와 this.setState를 사용하여 상태를 관리하는 것과 같은 기능을 제공하지만, 함수형 컴포넌트에서 더 간단하고 직관적인 방식으로 상태를 관리할 수 있다.

설명

useState(초기값)은 상태 변수(num)와 상태 업데이트 함수(setNomber)를 반환 num: 상태 변수로, 컴포넌트 내에서 관리되는 값입니다. setNomber: 상태를 변경하는 함수로, 이 함수를 호출하여 num 값을 업데이트합니다. useState의 매개변수로 전달되는 값은 상태의 초기값입니다. 위 예제에서는 0을 초기값으로 설정

비동기성

setState처럼 useState로 업데이트된 상태는 비동기적 즉, 상태 업데이트가 바로 반영되지 않고, React가 리렌더링 후에 새로운 상태 값을 적용한다.

예시

기본 셋팅은 아래와 같다.

import React, {useState} from "react"; 상단에 useState를 추가해준다함수기에 {} 안에 작성

const [num,setNomber]= useState(0); 를 셋팅 num은 0이라는 기본값을 가지는 변수며, const num = 0 << 와 동일 setNomber는 세트 함수이며, 0이라는 초기값을 num에 넣고 이 값을 변경시키기 위해 setNomber를 넣어준다.

const Counter = ()=> {
    const [num,setNomber]= useState(0);
    return(
        <div>
            <button>+1</button> // 증가버튼
            <button>-1</button> // 감소버튼
            <p></p> // 숫자 표시
        </div>
    )
}

클릭시 실행할 함수인 plus 를 넣어주고 const plus = ()=> { setNomber(num+1); //0 = num + 1 과 동일하다. }

버튼에 호출할 함수를 셋팅

<button onClick={plus}>+1</button>

💥 react 에서는onClick 꼭 대문자를 써야한다.

    return(
        <div>
            <button onClick={plus}>+1</button>
            <button>-1</button>
            <p>{num}</p> // << 여기에 변수인 num를 넣어준다. 
        </div>
    )

감소도 동일하게 해주면 완성된 코드는

import React, {useState} from "react"; //1.먼저 호출

const Counter = ()=> { 
    const [num,setNomber]= useState(0); //2.num변수를 선언하고 setNomber셋함수 셋팅
    const plus = ()=> {
        setNomber(num + 1); // 3. 버튼을 누르면 num변수에 1씩  증가
    }
    const minus = ()=> {
        setNomber(num - 1);// 4. 버튼을 누르면 num변수에 1씩 감소
    }
    return(
        <div>
            <button onClick={plus}>+1</button> // 증가 함수 넣고
            <button onClick={minus}>-1</button> // 감소 함수 넣고
            <p>{num}</p> // 보여줄 변수까지 넣어준다.
        </div>
    )
}

export default Counter; // 마지막 불러와주면.

기본인 0에서

증가를 누르면 감소를 누르면 (2번눌러봄)

이쁘게 완성된 아이를 볼 수 있다.

정리

리액트에서 동적인 값을 관리할때 1useState1를 사용한다. [변수명,set함수]= useState(초기값);

1. 초기값 변수명을 선언하고
2. 두번째 배열에서 변수에 대한 세트 함수 셋팅한다.
3. 셋함수를 통해서 변경을 해야 상태 관리가 되며 그 값이 동적으로 값이 반영이 된다.

오늘 복습하다 생각해보니 제일 중요한 hook에 대해 다루지 않은것 같아 부랴부랴 정리해서 올리게 되었다. 이런.. 리액트 ,, 훅 너란 녀석..

Hook 이란?

함수형 컴포넌트 내에서 상태(state), 부수 효과(side effect), 생명주기 메서드 등을 관리할 수 있게 해주는 특별한 함수이며 React 16.8 버전에 도입 되었다. 기존 클래스형에 있는 기능들을 함수형 컴포넌트에도 사용할 수 있는게 바로 Hook!

Hook 특징

1)상태 관리 useState를 사용하여 함수형 컴포넌트 내에서 상태를 관리할 수 있다.

2)부수 효과 처리 useEffect를 사용하여 컴포넌트의 생명주기 이벤트(마운트, 업데이트, 언마운트)에 맞춰 부수 효과를 처리할 수 있다. 3)컴포넌트 간 로직 재사용 useContext, useReducer, useMemo, useCallback과 같은 Hook을 사용하여 로직을 관리하고, 커스텀 Hook을 통해 로직을 재사용할 수 있다. 그밖에 useCallback, useMemo와 같은 Hook을 사용하면 불필요한 렌더링을 방지, 성능을 최적화 useMemo는 값 계산을 캐시하고, useCallback은 함수 인스턴스를 재사용 할 수 있게 한다.

장점 3가지

• 간결한 코드 💨 간단한 함수형 코드 대체

• 로직 재사용성 💨 커스텀으로 여러 컴포넌트 로직 재사용

• 함수형프로그래밍 💨 간단한 방식으로 코드 작성

  ---

1.useState

상태 변수와 상태 업데이트 함수를 반환 컴포넌트에서 상태를 관리

const [count, setCount] = useState(0);

count: 상태 변수 setCount: 상태를 업데이트하는 함수 0: 상태의 초기값

자세한 설명은 여기

2.useEffect

컴포넌트가 렌더링된 후에 특정 작업을 수행할 수 있게 함

useEffect(() => {
  // 이곳에 실행할 작업을 작성
  document.title = `You clicked ${count} times`;
}, [count]);

• useEffect는 렌더링 후마다 실행, 두 번째 인자에 전달된 배열 [count]에 지정된 값이 변경될 때만 실행 예)API호출, 이벤트 리스너 등록, 등

3.useContext

Context API와 함께 사용하여 컴포넌트 트리 내에서 데이터를 쉽게 전달

const value = useContext(MyContext);

• MyContext: 전달하고 싶은 데이터를 포함하는 Context 객체

4.useReducer

useState와 비슷하지만, 복잡한 상태 업데이트 로직을 처리할 때 유용 useState보다 강력한 관리

const [state, dispatch] = useReducer(reducer, initialState);

5.useCallback

함수가 렌더링될 때마다 새로 생성되는 것을 방지하고, 성능 최적화를 위해 특정 함수의 인스턴스를 재사용

const memoizedCallback = useCallback(() => {
  // function body
}, [dependencies]);

6.useMemo

값이 변경될 때만 계산된 값을 반환하여 불필요한 렌더링을 방지 useCallback와 비슷

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7.useRef

컴포넌트 내에서 DOM에 접근하거나, 값이 변경되어도 리렌더링되지 않는다.

const inputRef = useRef(null);

Hook 규칙

최상위에서 호출 컴포넌트 함수의 최상위에서만 호출되어야 합니다. 조건문이나 반복문 안에서 호출 불가

React 함수형 컴포넌트 안에서 호출 React 컴포넌트 함수 안에서만 사용해야 하며, 일반 JavaScript 함수나 클래스 안에서는 사용할 수 없다.

결론

Hook은 React에서 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 대체하고, 더 간결하고 효율적인 코드를 작성할 수 있도록 돕는 중요한 기능이다.

Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

라우터를 하다가 생긴 에러.. 어머.. 이건 뭐래..

복습 하는 과정에서 처음 보는 에러..

이런적은 처음이야.. ㄷㄷ 검색해보니

검색 확인

이유는?

link태그를 사용하는 컴포넌트가 라우터로 감싸져 있지 않아 생긴 문제..

혹시나 하고 본 index.js 에는 역시나..

불러만 놓고 감싸놓진 않았구나~

🤗해결

    <React.StrictMode>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </React.StrictMode>

오케이~ 감싸자 마자 바로 나오기~ 리액트를 해봤다고 만만하게 봤다가 새로운 오류를 발견하게 되었다.. 어찌 보면 실수이겠지.. 그래도 이렇게 알게 되었으니 다시는 반복하지 않으면 될 것 같다.

😱에러

Error: Can't resolve 'web-vitals' in 'C:\Users\ymku\min_app\src 어쩌구..

흠.. 이게 무엇인고 하니

새로운 라이브러리들을 다운받을 떄 종종 나는 오류인것 같다.. web-vitals 모듈이 설치 하면 되는 간단한 문제였고 npm create react-app으로 프로젝트를 생성했으니

😎해결

아래와 같이 터미널에 입력하면 해결 완료!

 npm add -D web-vitals 

arr라는 배열에 각 아이디 타이틀 설명이 있다.

const arr = [
    {id: 1, title: '홍길동',body:"1번임"},
    {id: 2, title: '홍길순',body:"1번임"},
    {id: 3, title: '홍길장',body:"1번임"},
];

위와 같이 하나씩 순서대로 불러와 보여주고싶다.

라고 할때 하는 방법

import User from './User'; // 1)배열이 들어있는 페이지 불러오기 먼저해주고 

function App() {

  return (
        <div>
            <User></User> <- 불러올 태크를 넣어준다.
        </div>
    );
}

export default App;

여기서 불러올 User.js 페이지를 생성한 후

function User(){
    const arr = [
        {id: 1, name: '홍길동',num:"1번임"},
        {id: 2, name: '홍길순',num:"2번임"},
        {id: 3, name: '홍길장',num:"3번임"},
    ];
}

여기서 arr에 담긴 각 배열을 하나씩 담아 다시 뽑아보자!

1. const UserList = []

배열을 뽑아 새로 담을 변수를 선언해주고

2. for(let i=0;i< arr.length;i++){}

for문으로 각 하나의 배열안의 순서대로 불러오고

3. let t = arr[i];

순서에 맞게 i에 담아주고

4.UserList.push()

UserList에 넣아주는데 이때 중요한 포인트가 나온다!

5. li안에 하나씩 넣어주기

   UserList.push(
            <li key={t.id}>  //id값은 key에 넣고 안넣으면 에러생김..
                안녕하세요{t.name} //보여지는 화면에 타이틀인 이름을 넣고
                <span>저의 순서는 {t.num}입니다.</span> 그아래 순서를 맞게 넣어준다.
            </li>
        )

6.순서대로 담은 {ArrList}를 넣어주기

return( //마지막으로 리턴
        <nav>
            <ol>
                {ArrList} //최종 완료된 li를 넣어주면!
            </ol>
        </nav>
    )

완성!!!

최종 코트는

보여지는 화면은

무수히 많은 배열이라 하더라도 순서가 있으면 맞게 뽑아 올 수 있다!

🔒 .gitignore?

프로젝트 내에서 불 필요하다고 느끼는 특정 파일 및 폴더에 대해서** 올리지 않기 위함** Git이 무시해야 하는 의도적으로 추적되지 않은 파일을 지정한다.

한마디로

용량이크거나, 보안문제, 불필요한 파일 및 경로를 올리지 않도록 설정

사용법

• /pattern/은 디렉토리 이름과 일치
• *, ?, [] 특수 문자 허용
• #으로 시작하는 줄은 주석이므로 무시
• /로 끝나는 패턴은 디렉터리를 지정
• ! 뒤에 오는 패턴은 일치 규칙을 무효화

예시)

모든 .log 파일을 무시

*.log

temp 디렉터리의 모든 파일 무시

temp/

node_modules 디렉터리의 파일 무시

node_modules/

특정 파일을 무시합니다.

config.ini

특정 파일이나 디렉터리가 무시되지 않도록 제외.

!important.txt

하지만 어느 파일이 불필요한지 모르겠으면 아래 사이트에서 간단하게 쓰는 언어를 검색하면 자동으로 만들어준다.

gitignore

현재 사이트 프로젝트에 사용하는 언어를 넣고 생성하면 이런식으로 추천해준다. 세상 이런 편한 사이트가 있다니🎉 하지만 모두 다 필요한게 아니니 검색을 하여 추려준다.

여기서 다시한번 파일은 확인해보면

idea/ 라고 앞에 붙는다

그럼 .idea가 뭘까?

🔒 .idea'

IntelliJ IDEA, PyCharm, PhpStorm, WebStorm 등과 같은 JetBrains IDE를 사용하여 개발된 프로젝트와 일반적으로 연결된 디렉터리이며, JetBrains IDE 환경에 맞게 조정된 프로젝트별 구성 파일과 설정이 포함하고 있다.

'.idea' 디렉터리에는 JetBrains IDE에 대한 프로젝트별 설정 및 구성이 포함되어 있으며, 프로젝트의 개발 환경과 워크플로를 정의하는 데 중요한 역할

구성파일

• workspace.xml: 작업공간 전체 설정을 저장(창, 탭, 도구 창 및 기타 UI 관련 구성의 배열)
• misc.xml: 기타 프로젝트 설정이 포함
• modules.xml: 모듈 종속성과 같은 모듈별 설정을 저장
• vcs.xml: 버전 관리 통합과 관련된 구성
• *.iml(모듈 파일): 모듈의 구조, 콘텐츠 루트 및 종속성을 설명

.idea 디렉토리는 JetBrains IDE가 프로젝트별 설정 및 구성을 유지하는 데 필수적이며, 일반적으로 팀 구성원 간의 일관된 개발 환경을 보장하기 위해 버전 제어 시스템에 포함되어야 한다. 단, 사용자별 설정이나 작업공간 구성 등 '.idea' 디렉터리 내의 일부 파일은 버전 관리에 적합하지 않을 수 있으므로 '.gitignore'에 추가할 수 있다.

검색하여 이렇게 추가하고 올려주면

끝~! 🎈

딱히 신경써본적 없지만, 간단하면서도 꽤 중요한 gitignore 추후 다른 프로젝트에서도 유용하게 사용 될 것 같다~!

*터미널 (ctrl + Alt + T) *

- git 저장소 생성

git init

- 저장소 상태 확인

git init

- 현재 상태 확인

git status

*- 전체 로그 확인 *

git log

- 디렉토리 생성

mkdir 디렉토리명

파일, 디렉토리 삭제 (디렉토리의 경우 -r을 붙여서 삭제)

rm 삭제 명

변경 내용을 현재 디렉토리로 가져오기 (pull)

git pull

- Stage에 파일 추가

git add 파일명
git add *

- 변경사항 한번에 모두 포함
git add -A

- 커밋 생성

git commit -m 커밋 내용

- 버전 이력 확인

git log

- stage에 추가된 파일 삭제

git reset 파일명

- 변경했던 파일을 최신 버전으로 되돌림

git checkout -- 파일명

- 커밋 취소 되돌림

1) 최신
git reset HEAD^
2) 특정
git reset --hard 원하는 버전 commit hash

Git Branch 관련

(생성, 확인, 푸쉬)

브랜치란?

독립적으로 관리되고 있는 분리된 버전

→ 이를 통해 병렬적인 작업이 가능하다.

*- github 주소와 연결 *

git remote add origin github 주소

- 브랜치 생성

git branch 브랜치명

- 브랜치 리스트 출력

git branch

- 브랜치 이동

git checkout 브랜치명

- 원하는 브랜치로 이동했는지 확인

git branch

- 브랜치 병합

git merge 브랜치명

→ 현재 있는 브랜치에 브랜치명의 브랜치를 병합함.

- 브랜치 삭제

git branch -d 브랜치명

- 파일 및 폴더 add

git add.

소스 코드를 관리하는 데 주로 사용되는 분산 버전 제어 시스템 Linus Torvalds가 Linux 커널 개발을 관리하기 위해 만들었으며, 유연성, 속도, 강력한 분기 및 병합 기능으로 인해 세계에서 가장 인기 있는 버전 제어 시스템이다.

한마디로

오픈소스 분산 버전 관리 시스템의 일종

Git 주요 기능

1) 버전 제어

Git은 시간 경과에 따른 파일 변경 사항을 추적 이를 통해 개발자는 이전 버전으로 되돌리고, 시간 경과에 따른 변경 사항을 비교하고, 누가 어떤 변경을 했는지 확인할 수 있다.

2) 분산형

Subversion(SVN)과 같은 중앙 집중식 버전 관리 시스템과 달리 Git은 분산형 즉, 모든 개발자는 전체 기록을 포함하여 저장소의 전체 복사본을 갖게 된다. 이를 통해 오프라인 작업이 가능해지고 보다 유연한 협업 워크플로가 가능하다

3) 리포지토리

리포지토리 또는 repo는 Git에서 관리하는 파일 및 폴더 모음 여기에는 누가, 언제 변경했는지 등의 메타데이터와 함께 해당 파일에 대한 전체 변경 내역이 포함

4) 커밋

커밋은 특정 시점의 저장소 변경 사항에 대한 스냅샷 각 커밋에는 고유 식별자(해시)가 있으며 변경 사항을 설명하는 커밋 메시지가 포함되어 있다.

5) 브랜치

Git은 브랜치를 사용하여 개발자가 별도의 개발 스트림에서 동시에 작업 가능 각 브랜치는 독립적인 개발 라인을 나타내며 한 브랜치의 변경 사항은 병합될 때까지 다른 브랜치에 영향을 주지 않는다.

6) 병합

한 분기의 변경 사항을 다른 분기로 결합하는 프로세스 Git은 변경 사항이 충돌하지 않으면 자동으로 병합할 수 있지만 충돌이 발생하는 경우(즉, 한 브랜치의 변경 사항이 다른 브랜치의 변경 사항과 충돌하는 경우) 충돌을 해결하려면 수동 개입이 필요하다.

7) 원격 저장소

GitHub, GitLab 또는 Bitbucket과 같은 서버에서 호스팅되는 원격 저장소 작업을 지원 개발자는 이러한 원격 저장소에 변경 사항을 푸시하여 자신의 작업을 다른 사람과 공유하고 변경 사항을 가져와서 다른 사람이 만든 업데이트를 통합할 수 있다.

8) 포크 및 풀 요청

오픈 소스 프로젝트에 기여하기 위한 일반적인 작업 흐름 GitHub와 같은 플랫폼에서 개발자는 저장소를 포크하여 자신만의 복사본을 만들고 독립적으로 변경한 다음 풀 요청을 제출하여 변경 사항을 원래 저장소에 다시 병합하도록 제안할 수 있다.

결론

프로젝트 관리 및 헙업을 효율적이고 체계적인 개발을 가능하게 한다.