무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, _무게 제한_도 있습니다.예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면 2번째 사람과 4번째 사람은 같이 탈 수 있지만 1번째 사람과 3번째 사람의 무게의 합은 150kg이므로 구명보트의 무게 제한을 초과하여 같이 탈 수 없습니다.구명보트를 최대한 적게 사용하여 모든 사람을 구출하려고 합니다.사람들의 몸무게를 담은 배열 people과 구명보트의 무게 제한 limit가 매개변수로 주어질 때, 모든 사람을 구출하기 위해 필요한 구명보트 개수의 최솟값을 return 하도록 solution 함수를 작성해주세요.

2. 제한사항

무인도에 갇힌 사람은 1명 이상 50,000명 이하입니다. 각 사람의 몸무게는 40kg 이상 240kg 이하입니다. 구명보트의 무게 제한은 40kg 이상 240kg 이하입니다. 구명보트의 무게 제한은 항상 사람들의 몸무게 중 최댓값보다 크게 주어지므로 사람들을 구출할 수 없는 경우는 없습니다.

3. 해결전략

• 최대 2명, 혹은 1명씩 빠져나갈 수 있음

• 최대 2명을 기준으로 people의 원소의 수를 줄여나감
• return은 보트의 수

4. pseudo code

p = people
p의 원소의 개수가 0이 될 때 까지, 

if, max(p) + min(p) > L
    배열에서 max(p)만 제거 
    count ++

else if, max(p) + min(p) <= L
         배열에서 max(p) and min(p) 제거 
         count ++

else if, people의 원소가 1개 남으면, 제거 
         count ++

5. pseudo code대로 구현 & 문제점 발생

def solution(people, limit):
    count = 0
    while people: #O(n)
        if len(people) == 1:
            people.pop() 
            count += 1
        elif max(people) + min(people) > limit: #min(n), max(n)각각 O(n)
            people.remove(max(people))
            count += 1
        else:
            people.remove(min(people))
            people.remove(max(people))
            count += 1
    return count

- people을 순회할 때, 시간복잡도 $O(n)$
- min(people), max(people) 각각 $O(n)$
- 총, $O(n^2)$의 시간복잡도 (효율성에서 시간초과 남.)


## 6. 해결책 
> - people을 `sorted()`함수로 정렬 
- people의 index값 중 가장 낮은 값, 가장 높은 값을 min(people), max(people)로 치환하여 생각하면 됨
```python
def solution(people, limit):
    people.sort()  # 오름차순 정렬, O(n log n)
    i, j = 0, len(people) - 1
    count = 0
    while i <= j:
        if people[i] + people[j] <= limit:
            i += 1  # 가장 가벼운 사람 태움
        # 무거운 사람은 항상 태움
        j -= 1
        count += 1
    return count

• python sorted() 함수의 시간복잡도 $O(n \log n)$
• while 문 시간복잡도 $O(n)$
• $O(n \log n) + O(n) \rightarrow O(n)$

일단, Object equality를 비교하기 전에 Dart의 타입 시스템, 특히 final과 const의 차이를 명확히 이해하는 것이 중요하다. Dart 문법 공부 처음할 땐 대충 넘겼지만ㅎㅎ(뭐.. 하다보니 깨달을 수도 있는거죠..그냥 api 받아와서 UI그리면 그만인 줄 알았어요)

1.1 짚고 넘어가야하는 이유

• 외부에서 들어온 데이터를 List나 State로 관리할 때, 객체의 값은 같은데 == 비교가 false가 나오면?
• 불필요한 setState() 발생, 위젯 리빌드, 캐시 미스 등의 문제가 생긴다.
• 즉, 객체가 같다고 판단되게 하려면 단순히 값만 같아선 안 되고, 객체 비교 기준을 직접 정의해야 한다.

1.2 final과 const의 차이점 비교

다음과 같은 예제를 살펴보자

• 먼저 Person 객체를 정의한다.
• Person 클래스의 property는 id, name, email이다.

1.3 person.dart (person 객체 생성)

// ignore_for_file: public_member_api_docs, sort_constructors_first
class Person {
  final int id;
  final String name;
  final String email;

  Person({required this.id, required this.name, required this.email});

  @override
  String toString() => 'Person(id: $id, name: $name, email: $email)';

  Person copyWith({int? id, String? name, String? email}) {
    return Person(
      id: id ?? this.id,
      name: name ?? this.name,
      email: email ?? this.email,
    );
  }
}

person_page.dart

import 'package:dart_class/models/person.dart';
import 'package:flutter/material.dart';

class PersonPage extends StatelessWidget {
  const PersonPage({super.key});

  @override
  Widget build(BuildContext context) {
    final person1 = Person(id: 1, name: 'John', email: 'john@gmail.com');
    final person2 = person1.copyWith(id: 2, email: 'Johndoe@gmail.com');
    final person3 = Person(id: 1, name: 'John', email: 'john@gmail.com');

    print(person1);
    print(person2);

    print(person1 == person3);
    print(person1.hashCode);
    print(person3.hashCode);

    return Scaffold(appBar: AppBar(title: Text('Person')));
  }
}

*출력 결과: * false 949309463 581349880

• 현재 person1과 person3의 property는 같은 상태이다. 하지만 equality 연산자의 값이 false임을 확인할 수 있다.
• dart의 기본 equality는 referential equality이다. 즉, 두 object가 메모리상 같은 곳을 가르킬 때, equality -> true 라고 반환하게 된다.
• person1과 person3의 hash값이 다른걸 보아,, 다른 메모리에 할당되었음을 알 수 있다.
• 고로 다른 존재.

결론적으로, object의 프로퍼티가 같을 때 논리적 동등성을 가지기 위해서는 hash값을 override하던지, 아니면 처음부터 불변값으로 정해야한다.

2. 본론

2.1. Construct의 type을 const로 지정, const 인스턴스 사용

person.dart (const 생성자)

const Person({required this.id, required this.name, required this.email});

person_page.dart

import 'package:dart_class/models/person.dart';
import 'package:flutter/material.dart';

class PersonPage extends StatelessWidget {
  const PersonPage({super.key});

  @override
  Widget build(BuildContext context) {
    const person1 = Person(id: 1, name: 'John', email: 'john@gmail.com');
    final person2 = person1.copyWith(id: 2, email: 'Johndoe@gmail.com');
    const person3 = Person(id: 1, name: 'John', email: 'john@gmail.com');

    print(person1);
    print(person2);

    print(person1 == person3);
    print(person1.hashCode);
    print(person3.hashCode);

    return Scaffold(appBar: AppBar(title: Text('Person')));
  }
}

출력결과

true 423981177 // person 1 == person3의 논리적 equality

2.2. hash값 override

• vscode extension -> 객체 생성 도와주는 Tool

• Generate equality클릭

  // ignore_for_file: public_member_api_docs, sort_constructors_first
  class Person {
  final int id;
  final String name;
  final String email;
  
  const Person({required this.id, required this.name, required this.email});
  
  @override
  String toString() => 'Person(id: $id, name: $name, email: $email)';
  
  Person copyWith({int? id, String? name, String? email}) {
    return Person(
      id: id ?? this.id,
      name: name ?? this.name,
      email: email ?? this.email,
    );
  }
  
  @override
  bool operator ==(covariant Person other) {
    if (identical(this, other)) return true;
  
    return other.id == id && other.name == name && other.email == email;
  }
  
  @override
  int get hashCode => id.hashCode ^ name.hashCode ^ email.hashCode;
  }

2.3. equatable 패키지 사용

• pub.dev equatable 링크
• == 연산자와 hashCode를 직접 override하는 대신,Equatable을 상속받고 props만 정의해주면 된다.
• 내부적으로는 props 리스트에 들어간 값들을 기준으로 == 비교와 hashCode 생성을 자동 처리한다.
• 결국 hash값을 override하는 방식은 동일하지만, 훨씬 간결하다

import 'package:equatable/equatable.dart';

// ignore_for_file: public_member_api_docs, sort_constructors_first
class Person extends Equatable {
  final int id;
  final String name;
  final String email;

  const Person({required this.id, required this.name, required this.email});

  @override
  String toString() => 'Person(id: $id, name: $name, email: $email)';

  Person copyWith({int? id, String? name, String? email}) {
    return Person(
      id: id ?? this.id,
      name: name ?? this.name,
      email: email ?? this.email,
    );
  }

  @override
  List<Object> get props => [id, name, email]; 
}

• props 정의할 때

  @override
  List<Object> get props => [id]; 

  로 정의하면, id이 같지만 나머지 property가 다른 객체들의 동등성이 부여된다.!

3. 마무리

쉬운게 하나도 없다.

저번 포스팅에서 bs4를 간단히 다루었는데, 이번 포스팅에서는 bs4를 활용해 웹사이트에서 HTML을 가져오기, 페이지에서 원하는 내용 추출하기, 그리고 추출한 내용을 txt 파일로 저장하는 방법을 실습해보려 한다.

1. Introduction

• BeautifulSoup is a Python library used for web scraping.
• It extracts data from HTML and XML files.
• Dependencies: Requires requests for fetching web pages and an XML/HTML parser.

1.1 Installing

pip install bs4
pip install requests
pip install lxml

1.2 Import

from bs4 import BeautifulSoup
import requests

2. Steps before scraping a website

2.1 Fetch the pages (obtained a response object)

result = requests.get("www.google.com")

2.2 Page content

content = result.text

2.3 Create Soup (객체 생성)

soup=BeautifulSoup(content, "lxml")

2.4. HTML element 찾기

<article class="main-article">
    <h1> Titanic (1997) </h1>
    <p class="plot"> 84 years later ... </p>
    <div class="full-script"> 13 meters. You ... </div>
</article>

• ID로 element 찾기

element = soup.find(id="element_id")

• 클래스 이름으로 element 찾기

element = soup.find("tag_name", class_="class_name")

• tag 이름으로 element 찾기

h1_element = soup.find("h1")

• 여러 elements 찾기 : find_all() 메서드 사용

h2_elements = soup.find_all("h2")
for h2 in h2_elements:
    print(h2)

3. Scrape Examples

https://subslikescript.com/movie/Titanic-120338 → 예제 웹사이트

ex_6.py | Get the HTML from a website

from bs4 import BeautifulSoup
import requests

website = 'https://subslikescript.com/movie/Titanic-120338'
result = requests.get(website)
content = result.text

soup = BeautifulSoup(content, 'lxml')
print(soup.prettify())

• lxml 은 Python을 위한 고성능, 쉬운 사용법을 제공하는 XML 및 HTML 처리 라이브러리
• prettify()는 html 구조를 파악하기 쉽게 바꿔줌

ex_6_1.py | Scrape a single page

#https://www.udemy.com/course/web-scraping-course-in-python-bs4-selenium-and-scrapy/learn/lecture/27676578#learning-tools
#udemy 강의 예제 코드

from bs4 import BeautifulSoup
import requests

website = 'https://subslikescript.com/movie/Titanic-120338'
result = requests.get(website)
content = result.text

soup = BeautifulSoup(content, 'lxml')
# print(soup)

box = soup.find('article', class_="main-article") 
#underscore is used to avoid conflict with Python's built-in keyword 'class'

title = box.find('h1').get_text()  # get_text() is used to extract text from the HTML element
transcription = box.find('div', class_="full-script").get_text(strip=True, separator=' ')  # strip=True removes leading and trailing whitespace
print(title)
print(transcription)

• strip=True : 앞 뒤 공백 제거
• separator=' ': 구분자 Space

ex_6_2.py | Exporting data to a txt file

from bs4 import BeautifulSoup
import requests

website = 'https://subslikescript.com/movie/Titanic-120338'
result = requests.get(website)
content = result.text

soup = BeautifulSoup(content, 'lxml')
# print(soup)

box = soup.find('article', class_="main-article") 
#underscore is used to avoid conflict with Python's built-in keyword 'class'

title = box.find('h1').get_text()  # get_text() is used to extract text from the HTML element
transcription = box.find('div', class_="full-script").get_text(strip=True, separator=' ')  # strip=True removes leading and trailing whitespace

with open(f'{title}.txt', 'w') as file: #title + .txt
    file.write(transcription)

ex_6_2.py | 실행 결과

끝으로..

인강 완강을 목표로..

< 이전 글

• 웹크롤링 뜯어먹기 #1 (bs4, requests) 요소 추출
• 웹크롤링 뜯어먹기 #2 스크래핑 도구 비교 (bs4, selenium, scrapy)

1. with open() 읽기, 쓰기, 추가하기

📁 ex_3.py | 실행 전 프로젝트 구조

.
├── ex_1.py
├── ex_2.py
├── ex_3.py
└── txt_examples

📄 ex_3.py | 파일 생성 예제 코드

with open('txt_examples/ex_3.txt', 'w') as f:
    f.write('This is a test file.\n')
    f.write('It contains some text.\n')
    f.write('This is the third line.\n')

📁 ex_3.py | 실행 후 프로젝트 구조

.
├── ex_1.py
├── ex_2.py
├── ex_3.py
└── txt_examples
    └── ex_3.txt

• txt_examples/ex_3.txt 경로에 ex_3.txt 파일이 생성됨을 확인할 수 있다.
• ※ 주의: 디렉토리는 자동 생성되지 않으므로, 사전에 수동으로 생성해야 한다.

✏️ with open('파일경로', mode) 기본 문법

mode는 파일을 어떤 용도로 열 것인지 지정하는 옵션이다.

✏️ 파일 입출력 예제 코드

# 1. 파일 쓰기 예제
# - 기존 내용을 덮어쓰고 새 내용 저장
with open('txt_examples/ex_3.txt', 'w') as f:
    f.write('This is a test file.\n')
    f.write('It contains some text.\n')
    f.write('This is the third line.\n')

# 2. 파일 읽기 예제
# - 파일 전체 내용을 읽어 출력
with open('txt_examples/ex_3.txt', 'r') as f:
    content = f.read()
    print("File content:")
    print(content)

# 3. 파일 추가 예제
# - 기존 파일 끝에 새 줄을 추가
with open('txt_examples/ex_3.txt', 'a') as f:
    f.write('This line is added at the end of the file.\n')

# 추가 후 다시 읽어 확인
with open('txt_examples/ex_3.txt', 'r') as f:
    content = f.read()
    print("File content (with line added):")
    print(content)

💬 출력 예시

File content:
This is a test file.
It contains some text.
This is the third line.

File content (with line added):
This is a test file.
It contains some text.
This is the third line.
This line is added at the end of the file.

2. Pandas | Dataframe

📁 ex_4.py | 실행 전 프로젝트 구조

.
├── csv_examples
├── ex_1.py
├── ex_2.py
├── ex_3.py
├── ex_4.py
└── txt_examples
    └── ex_3.txt

📄 ex_4.py | Dataframe 예제 코드

import pandas as pd

states = ['California', 'Texas', 'Florida', 'New York', 'Illinois']
population = [39538223, 29145505, 21538187, 20201249, 12812508]

dict_states = {'State': states, 'Population': population}
df_states = pd.DataFrame.from_dict(dict_states)
df_csv = df_states.to_csv('csv_examples/states_population.csv', index=False)

print(df_states)

📁 ex_4.py | 실행 후 프로젝트 구조

.
├── csv_examples
│   └── states_population.csv
├── ex_1.py
├── ex_2.py
├── ex_3.py
├── ex_4.py
└── txt_examples
    └── ex_3.txt

3. try-except 구문

📄 ex_5.py | 에러발생 예제 코드

#Handling exceptions errors: Try-Except
#예를 들어, 
#List에 여러 개의 타입 values가 섞여 있을 때
#TypeError가 발생할 수 있음.

example_list = [2,4,6, "california", 8, 10]

for element in example_list:
    print(element/2)

ㄴ 💬 출력예시 | TypeError 발생

1.0
2.0
3.0
Traceback (most recent call last):
  File "/Users/choiwoojin/Developer/web-crawling-tutorial/ex_5.py", line 9, in <module>
    print(element/2)
          ~~~~~~~^~
TypeError: unsupported operand type(s) for /: 'str' and 'int'

📄 ex_5_exception.py | try-except 적용 예제 코드

#Handling exceptions errors: Try-Except
#예를 들어, 
#List에 여러 개의 타입 values가 섞여 있을 때
#TypeError가 발생할 수 있음.

example_list = [2,4,6, "california", 8, 10]

# try-except 구문을 사용하여 예외 처리
#try:
    # 예외가 발생할 수 있는 코드
#except 예외타입:
    # 예외가 발생했을 때 실행할 코드

for element in example_list:
    try: 
        print(element/2)
    except:
        print(f"Error: {element} is not a number, cannot divide by 2.")

ㄴ 💬 출력예시

2.0
4.0
6.0
Error: california is not a number, cannot divide by 2.
8.0
10.0

참고

• Udemy | Web Scraping in Python Selenium, Scrapy + ChatGPT Prize 2024

전체 비교

1. Beautiful Soup

자주 사용되는 메서드 정리

자주 사용되는 메서드 코드 예시

from bs4 import BeautifulSoup

html = """
<html>
  <head><title>Example</title></head>
  <body>
    <div class="content" id="main">
      <p class="text">First paragraph.</p>
      <p class="text">Second paragraph.</p>
      <a href="https://example.com" id="link">Visit Example</a>
    </div>
  </body>
</html>
"""

soup = BeautifulSoup(html, 'html.parser')

# 1. find(tag_name, attrs)  
# - 조건에 맞는 첫 번째 요소 반환
soup.find('p')  # <p class="text">First paragraph.</p>

# 2. find_all(tag_name, attrs)
# - 조건에 맞는 모든 요소 리스트 반환
soup.find_all('p')  # [<p>...</p>, <p>...</p>]

# 3. select(css_selector)
# - CSS 선택자를 이용해 요소 리스트 반환
soup.select('div.content p.text')  # [<p class="text">...</p>, <p class="text">...</p>]

# 4. select_one(css_selector)
# - CSS 선택자를 이용해 첫 번째 요소만 반환
soup.select_one('a#link')  # <a href="...">Visit Example</a>

# 5. get_text(strip=False)
# - 태그 내부의 모든 텍스트를 추출 (하위 태그 포함)
soup.find('p').get_text()  # "First paragraph."

# 6. get(attribute_name)
# - 특정 속성(attribute)의 값을 가져옴
soup.find('a').get('href')  # "https://example.com"

# 7. attrs
# - 태그의 모든 속성 정보를 딕셔너리 형태로 반환
soup.find('a').attrs  # {'href': 'https://example.com', 'id': 'link'}

# 8. parent
# - 현재 요소의 부모 요소 반환
soup.find('a').parent.name  # 'div'

# 9. children
# - 현재 요소의 자식 요소들을 generator로 반환
list(soup.find('div').children)  # [\n, <p>...</p>, \n, <p>...</p>, \n, <a>...</a>, \n]

# 10. string
# - 해당 태그의 텍스트를 직접 반환 (자식 태그 없이 텍스트만 있을 경우)
soup.title.string  # "Example"

2. Selenium

자주 사용되는 메서드 정리

자주 사용되는 메서드 코드 예시

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://example.com")

# 1. get(url)
# - 특정 웹 페이지로 이동
driver.get("https://example.com")

# 2. find_element(By.~, value)
# - 조건에 맞는 첫 번째 요소 찾기
driver.find_element(By.TAG_NAME, "h1")

# 3. find_elements(By.~, value)
# - 조건에 맞는 모든 요소 리스트 찾기
driver.find_elements(By.CLASS_NAME, "item")

# 4. send_keys(text)
# - 입력창에 텍스트 입력
search_box = driver.find_element(By.NAME, "q")
search_box.send_keys("Selenium")

# 5. click()
# - 클릭 이벤트 수행
button = driver.find_element(By.ID, "submit")
button.click()

# 6. get_attribute(attribute_name)
# - 요소의 속성값 가져오기
link = driver.find_element(By.TAG_NAME, "a")
href = link.get_attribute("href")

# 7. text
# - 요소 내부의 텍스트 추출
header = driver.find_element(By.TAG_NAME, "h1").text

# 8. is_displayed()
# - 요소가 화면에 보이는 상태인지 확인 (True/False)
driver.find_element(By.ID, "banner").is_displayed()

# 9. implicitly_wait(seconds)
# - 요소가 로드될 때까지 최대 몇 초 기다릴지 설정 (전역)
driver.implicitly_wait(5)

# 10. close() / quit()
# - close(): 현재 탭 종료, quit(): 전체 브라우저 종료
driver.close()
driver.quit()

3. Scrapy

자주 사용되는 메서드 정리

자주 사용되는 메서드 코드 예시

import scrapy

class ExampleSpider(scrapy.Spider):
    name = "example"
    start_urls = ['https://example.com']

    def parse(self, response):
        # 1. response.css() - CSS 선택자로 요소 찾기
        titles = response.css('h1::text').getall()

        # 2. response.xpath() - XPath로 요소 찾기
        paragraphs = response.xpath('//p/text()').getall()

        # 3. response.follow() - 상대 URL을 따라 새로운 요청 생성
        for href in response.css('a::attr(href)').getall():
            yield response.follow(href, callback=self.parse_detail)

        # 4. response.url - 현재 페이지의 URL
        print(response.url)

        # 5. response.status - HTTP 상태 코드
        print(response.status)

        # 6. response.body - 응답 바디 (bytes 형태)
        raw_html = response.body

        # 7. response.text - 응답 바디 (str 형태)
        raw_html_str = response.text

        # 8. response.meta - 요청 간 데이터 전달용 딕셔너리
        print(response.meta)

        # 9. scrapy.Request() - 커스텀 요청 만들기
        yield scrapy.Request(url='https://example.com/page', callback=self.parse_page)

        # 10. get(), getall() - 선택한 요소에서 텍스트 또는 속성 추출
        first_title = response.css('h1::text').get()      # 첫 번째
        all_titles = response.css('h1::text').getall()    # 전체 리스트

현재 수학 및 과학 타이핑 부업을 하고 있는데,, 아무래도 전공과는 무관한 부업이기도 하고 슬슬 웹크롤링으로 넘어가볼까?하는 막연한 생각으로..작년 여름부터 공부하자고 다짐하다가 1년뒤에 시작하는. 그런 인생을 살고 있어요

1. Web Crawling이란?

웹사이트의 데이터를 자동으로 수집하는 기술 또는 작업을 의미한다.

📌 예를 들어:

• 뉴스 사이트의 기사 제목과 날짜를 자동으로 모으고 싶다
• 쇼핑몰의 상품 가격 변동을 추적하고 싶다
• 명언 사이트에서 명언들을 수집하고 싶다

→ 이럴 때 웹 크롤러를 만들어 자동으로 정보를 수집할 수 있다.

📚 용어 정리

참고: 크롤링 = 방문 + 수집, 스크래핑 = 필요한 정보만 추출

2. HTML 요소 이해

3. 사용된 Python 모듈

💡 설치가 필요하다면:

pip install requests beautifulsoup4

ex 1) Quote.toscrape의 <body> 요소 추출

import requests
from bs4 import BeautifulSoup

# 1. 대상 URL
url = 'https://quotes.toscrape.com'

# 2. 페이지 요청
response = requests.get(url)
response.raise_for_status()  # 에러 발생 시 예외 처리

# 3. HTML 파싱
soup = BeautifulSoup(response.text, 'html.parser')

# 4. <body> 요소 추출
body = soup.body

# 5. 결과 출력
print(body.prettify())  # 보기 좋게 들여쓰기 출력

출력 결과

ex 2) class 값이 "quote"인 div 요소들의 텍스트 모두 추출

copy 용도 예시

• body > div > div:nth-child(2) > div.col-md-8 요소 안에 클래스 값이 "quote"인 div 요소들의 텍스트 출력

소스코드

import requests
from bs4 import BeautifulSoup

# 웹페이지 요청
url = "http://quotes.toscrape.com"
response = requests.get(url)
soup = BeautifulSoup(response.text, "html.parser")

# body > div > div:nth-child(2) > div.col-md-8 안의 div.quote 요소 선택
quote_container = soup.select_one("body > div > div:nth-child(2) > div.col-md-8")
quotes = quote_container.find_all("div", class_="quote")

# 텍스트 출력
for quote in quotes:
    text = quote.find("span", class_="text").get_text(strip=True)
    author = quote.find("small", class_="author").get_text(strip=True)
    print(f"{text} — {author}")

출력결과

🔗 참고자료

• [예제 사이트]: Quote to Scrape
• [참고도서]: 이게 되네? 챗GPT 미친 크롤링 24제

⚒️ 개발자 도구 열기

• macOS: 우클릭 > 검사
• Windows: F12 키

🤓 마무리 말

HTML 공부를 손에 놓은지 3년(..?)은 다되어가는 것 같은데 그동안 gpt의 무궁무진한 성장으로 공부해야겠다는 생각을 안하고 있다가.. 전혀 기억이 안나는 그런 사태가 발생했다. 정신체리.🍒🍒🍒

• 공식 웹사이트(https://www.cursor.com/)에 접속해 본인의 운영체제에 맞는 설치 파일을 다운로드합니다.
• 설치 후 프로그램을 실행하여 기본 환경을 준비합니다.

2. Figma 설치 (Optional)

Figma 데스크탑 앱은 선택 사항이며, 웹 버전만으로도 충분히 작업이 가능합니다.

1. Figma를 실행한 뒤, Plugin 메뉴에서 Cursor Talk to MCP를 검색합니다.

2. 해당 플러그인을 클릭하면 MCP 연동 설정 창이 나타납니다.

3. Cursor에 MCP 서버 설정

1. Cursor 앱을 실행하고 우측 상단의 ⚙️ 아이콘을 클릭해 설정 창을 엽니다.

2. 좌측 메뉴에서 MCP 탭을 선택합니다.

3. 우측 상단에 있는 Add new global MCP server 버튼을 클릭합니다.

4. Figma에서 복사한 MCP Configuration 내용을 mcp.json 파일에 붙여넣고 저장합니다.

5. Talk to Figma 서버 항목이 활성화되었다면 설정이 완료된 것입니다.

4. MCP WebSocket 서버 클론 및 실행

해당 GitHub 저장소는 Cursor에서 사용할 WebSocket 기반 MCP 서버입니다.

https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

클론한 프로젝트 디렉토리를 Cursor에서 열어줍니다.

터미널을 열어 현재 위치가 프로젝트 디렉토리인지 확인합니다.

5. bun shell 설치 및 실행

bun shell이 설치되어 있지 않다면 아래 명령어로 설치합니다:

curl -fsSL https://bun.sh/install | bash

설치가 완료되면 다음 명령어로 초기 설정을 진행합니다:

bun setup

WebSocket 서버를 실행합니다:

bun socket

3055 포트가 열렸다면 정상적으로 실행된 것입니다.

이제 다시 Figma를 실행합니다.

Use localhost 토글을 활성화하고 connect 버튼을 클릭하면, c02el96w 채널이 연결되었다는 메시지가 나타납니다.

Cursor에서도 동일한 채널 명칭과 함께 JSON 응답이 도착하면, MCP 연동이 성공적으로 완료된 것입니다!

주의 !

연결 중에 cursor-talk-to-figma-mcp plugin을 종료하면 연결이 종료됩니다!

• 출처
15 Advanced ChatGPT Prompts Every Developer Must Know - Medium

velog에 어떤 글을 작성하고, 정리하는게 도움이 될지 많이 고민을 하다가,,, 영어 공부도 할 겸 Medium에서 글을 읽고 내용을 정리해보기로 했다!

# # #

☺︎ 내용정리

개발자들은 흔히 ChatGPT에게 다음과 같은 단순한 질문을 많이 던진다.

"이 함수 구현해줘."
"에러난 거 설명해줘."

필자는 이러한 질문을 entry-level stuff라고 표현했다. 실제로 나도 빠른 답변을 원할 때 간단히 질문하는 편인데, 이는 ChatGPT의 능력을 100% 활용하지 못하는 방식이다.

뭐 대충 이런식으로..ㅎ

# # 이번 글에서는 개발자가 coding, debugging, optimization을 효율적으로 할 수 있도록 도와주는 ChatGPT 활용 전략 3가지를 정리했다. # #

1. Advanced Chain-of-Thought Prompting

LLM이 논리 추론, 산술 문제에 약하다는 점을 보완하는 전략

• 참조 링크: Chain-of-Thought Prompting Elicits Reasoning in Large Language Models 논문 (arXiv)
• 기술 가이드: Prompting Guide - CoT

⠀Chain-of-Thought (CoT) 기법은 LLM의 추론 능력을 향상시키기 위한 대표적 전략이다. 문제를 단계적으로 풀도록 유도함으로써, 더 깊이 있는 분석을 유도할 수 있다.

문제 해결 프레임워크 예시

1. 문제 정확히 파악하기:
   - 문제를 명확하고 구체적으로 서술

2. 제약 조건 및 요구 사항 정의:
   - 기술적 제약사항을 모두 나열

3. 가능한 전략 탐색:
   - 최소 3가지 접근법 제시

4. 최선의 전략 실행:
   - 주석이 잘 달린 깔끔한 코드로 해결

5. 되돌아보고 학습하기:
   - 효율성 분석, 엣지 케이스 고려, 개선점 제안

2. Interview Preparation for FAANG or MNCs

FAANG 또는 대형 기술 기업의 면접을 준비할 때 사용할 수 있는 Prompt

Step 1: 맞춤형 전략 생성을 위한 자기소개

I'm preparing for technical interviews at top-tier tech companies (FAANG).

Create a personalized preparation plan and coaching session based on my background:

• Experience level: Junior
• Technical background: Flutter, Kotlin, Mobile Development
• Target roles: Mobile App Developer
• Target companies: Kakao, Naver, Baemin 등
• Interview timeline: 2025년 6~12월 중
• Current preparation status: 3개의 포트폴리오 진행 중, CS 공부 병행
• Strengths: UI 구현, 문제 해결력
• Weaknesses: 코딩테스트, 행동면접

Step 2: 이력서 기반 계획 수립

1. 3개월 학습 계획 수립 (월간/주간 목표 포함)
2. 반드시 알아야 할 알고리즘 & 자료구조 리스트 정리 (난이도 포함)
3. 목표 기업 스타일에 맞는 실전 문제 3개 생성
4. 시스템 설계 접근 전략 (지원 레벨 기준)
5. 행동면접 시나리오 작성 (STAR 기법 활용)
6. 긴장 완화 전략 및 예상 질문에 대한 대응법
7. 기업 문화에 맞춘 면접 답변 전략

3. Iterative Refinement Through Targeted Feedback

대부분의 개발자는 초기 결과물을 그대로 사용하는 경향이 있다. 다음과 같이 피드백 기반 반복 개선을 유도할 수 있다.

Prompt 예시

I'll evaluate your solution based on these specific criteria:

1. Performance: Does it scale efficiently with large data sets?
2. Maintainability: Is the code well-structured and documented?
3. Error handling: Does it gracefully handle edge cases?
4. Security: Are there any potential vulnerabilities?
5. Test coverage: Can this solution be thoroughly tested?
For any areas that don't meet expectations, I'll provide specific feedback for improvement.

Initial task: [YOUR DEVELOPMENT TASK]

• 이런 식으로 응답에 대해 부족한 점을 재서술해서 결과를 보정할 수 있다.

끝으로

프롬프트 공부도 시간날 때 해야지..(특: 시간날 때 없음, *시간내서)

pubspec.yaml

flutter:
  assets:
    - assets/images/
  fonts:
    - family: GyeonggiBatang
      fonts:
        - asset: fonts/GyeonggiBatang_Bold.ttf
        - asset: fonts/GyeonggiBatang_Regular.ttf
    - family: GyeonggiTitle
      fonts:
        - asset: fonts/GyeonggiTitle_Light.ttf
          weight: 300
        - asset: fonts/GyeonggiTitle_Medium.ttf
          weight: 500
        - asset: fonts/GyeonggiTitle_Bold.ttf
          weight: 700
    - family: GyeonggiTitleV
      fonts:
        - asset: fonts/GyeonggiTitleV_Bold.ttf

-> 이런식으로 적용해서

code

Text(
                      '학부모 / 자녀 ',
                      style: TextStyle(
                        fontFamily: 'GyeonggiTitle',
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                        color: Color(0xff525152),
                      ),
                    ),

fontweight을 적용했더니, ios에서 적용이 안된다.

• 폰트 파일의 내부 Weight Class (예: 300 = Light, 400 = Regular)가 실제로 어떻게 적용되어있는지 파악하기 위해 https://fontdrop.info/ 를 접속해서 확인해봤더니, Weight class가 300으로 지정되어 있었음에도 불구하고 ios 디바이스에서는 font weight이 적용이 되지 않음을 확인 했다.
• 그래서 안드로이드 에뮬레이터에서도 돌려보니.. 안드로이드 에뮬레이터에서는 font weight이 적용이 되어있었다.
• 결론 = pubspec.yaml 문제는 아님
  • 그래서 구글링을 해서 좀 찾아보았다.
  • https://github.com/flutter/flutter/issues/75832

  • Font Weight Light이 weight < 400일 경우, ios 혹은 web 환경에서 렌더가 안되는 이슈가 있었다.

어쨌든, 해결은 해야한다. 결론, 폰트 family 클래스별로 분류하지 말고 폰트 단일 파일별로 분류를 해야했다.

수정한 pubspec.yaml

  fonts:
    - family: GyeonggiBatangBold
      fonts:
        - asset: fonts/GyeonggiBatang_Bold.ttf
    - family: GyeonggiBatangRegular
      fonts:
        - asset: fonts/GyeonggiBatang_Regular.ttf
    - family: GyeonggiTitleLight
      fonts:
        - asset: fonts/GyeonggiTitle_Light.ttf
    - family: GyeonggiTitleMedium
      fonts:
        - asset: fonts/GyeonggiTitle_Medium.ttf
    - family: GyeonggiTitleBold
      fonts:
        - asset: fonts/GyeonggiTitle_Bold.ttf
    - family: GyeonggiTitleVBold
      fonts:
        - asset: fonts/GyeonggiTitleV_Bold.ttf

code

                    Text(
                      '학부모 / 자녀 ',
                      style: TextStyle(
                        fontFamily: 'GyeonggiTitleLight',
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                        color: Color(0xff525152),
                      ),
                    ),

렌더링이 되긴 한다 ^^ 주먹구구식이지만,, 도움은 되셨길.

개요

REST, REST API, RESTful에 대한 정의와 특징

1. API란?

API(Application Programming Interface)는 소프트웨어 시스템 간에 기능이나 데이터를 주고받을 수 있도록 정해진 규칙, 명령, 프로토콜을 제공하는 인터페이스

• 한 프로그램이 다른 프로그램의 기능이나 데이터를 사용할 수 있도록 해주는 일종의 다리 역할을 한다.
• API는 운영체제, 라이브러리, 데이터베이스, 하드웨어 등 다양한 환경에서 동작할 수 있으며, 반드시 네트워크를 사용할 필요는 없다.
  • 예시 ) 운영체제 API(Windows API, macOS API), 라이브러리 API(파이썬 pandas 등)

2. REST란?

REST(Representational State Transfer)는 웹에서 자원의 상태를 표현(Representation)하여 전송(Transfer)하는 아키텍처 스타일

• REST는 HTTP 프로토콜을 기반으로 하며, 자원(Resource)에 대한 고유 식별자(URI)를 사용한다.
• 클라이언트는 서버의 자원에 접근하거나 상태를 변경할 때 JSON, XML 등으로 데이터를 주고받는다.

2.1 REST API와 RESTful의 차이

• REST API: REST 원칙을 따르는 API로, HTTP URI로 자원을 명시하고, HTTP Method(POST, GET, PUT, DELETE 등)로 해당 자원에 대한 CRUD(생성, 조회, 수정, 삭제)를 구현한다.
• RESTful: REST의 원칙을 잘 지키도록 설계된 API를 의미한다. RESTful하지 않은 API는 단순히 웹 API 또는 HTTP API로 부른다.

2.2 REST의 주요 특징

2.3 REST API 설계 기본 규칙

1. URI는 자원을 표현한다
   • 동사 대신 명사 사용 / 대문자 대신 소문자 사용
   • 단수 명사는 객체, 복수 명사는 컬렉션 표현
     • 예) /members/1 (O), Member/1 (X)
2. 행위는 HTTP Method로 표현
   • GET, POST, PUT, DELETE 등
   • URI에 동사나 행위가 포함되면 안됨
   • GET /members/1 (O), GET /members/delete/1(X)
3. 슬래시 (/)는 계층 관계 표현, 마지막에 사용하지 않는다.
   • /users/123/devices (O), /users/123/devices/ (X)
4. 하이픈을 사용하되, 언더스코어는 피한다.
   • 예: /user-groups (O), /user_groups (X)
5. 소문자 사용, 파일 확장자 사용 금지
   • 예: /users (O), /Users.json (X)

2.4 RESTful API 클라이언트 요청 / 응답 예시

• 가령, 사용자 관리(User Management)를 위한 RESTful API가 존재한다고 가정.
  • 클라이언트는 이 API를 통해 User를 생성하거나 조회할 수 있음
  • RESTful API의 설계에 따라 /users 라는 URI로 사용자 리소스를 나타내고, 다양한 HTTP 메서드를 적용 가능함

2.4.1 RESTful API 예시 - HTTP Method

CRUD란?

Create: 데이터 생성 (Post) Read: 데이터 조회 (GET) Update: 데이터 수정 (PUT, PATCH) Delete: 데이터 삭제 (DELETE)

2.5 REST API 설계 규칙

1. 슬래시 구분자 (/)는 계층 관계를 나타내는데 사용한다.
   • /users/123/devices는 “123번 사용자”의 “devices”라는 하위 리소스를 의미
2. URI 마지막 문자로 슬래시(/)를 포함하지 않는다.
   • REST API에서 URI의 마지막에 슬래시(/)를 붙이지 않는 것은, 혼란을 방지하고 일관성 있는 리소스 식별을 위해 지켜야 할 중요한 설계 규칙이다.
   • 식별자 일관성: URI의 모든 문자는 리소스의 고유 식별자에 포함된다. 즉, /api/items와 /api/items/는 엄밀히 따지면 서로 다른 URI이며, 다르게 인식될 수 있다
   • 웹 서버나 프레임워크에 따라 두 URI를 동일하게 처리하기도 하지만, 명확하고 예측 가능한 API를 제공하기 위해서는 마지막에 슬래시를 붙이지 않는 것이 표준

참조

RESTful API란 무엇인가요? - RESTful API 설명 - AWS

• 위젯에 배경 스타일, 배경색이나 모양, 크기 제한 등을 하고 싶을 때 사용
• 하위 요소 위젯 구성, 장식, 위치를 정할 수 있음

예시)

Text('Boring')

• 위와 같은 Text 위젯의 배경스타일, 모양, 크기 제한을 하고 싶을 때

Container(
    child: Text('Boring'),
    color: Colors.blue,
);

- 추가 작업 없이도 container의 크기는 자식 위젯의 크기에 맞춰짐
- padding 추가 가능
- `decoration` property를 통해 container의 shape을 추가할 수 있음


<div align="center">
  <img src="https://velog.velcdn.com/images/woojin-devv/post/0f01f194-ae84-4315-91d2-073578962371/image.png" width="400">
</div>

### 전체 코드

```dart
import 'package:flutter/material.dart';

class ContainerScreen extends StatelessWidget {
  const ContainerScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: const Text(
          'Container Example',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // 기본 텍스트 위젯 (Container 없음)
            const Text(
              'Boring',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),

            // 배경 색만 지정한 Container
            Container(
              color: Colors.blue,
              child: const Text(
                'Boring',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),

            // 패딩이 추가된 Container
            Container(
              padding: const EdgeInsets.all(20),
              color: Colors.blue,
              child: const Text(
                'Boring',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),

            // 회전(transform) 효과가 추가된 Container
            Container(
              transform: Matrix4.rotationZ(0.1),
              padding: const EdgeInsets.all(20),
              color: Colors.blue,
              child: const Text(
                'Boring',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),

            // 원형 모양으로 만들어진 Container
            Container(
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
              ),
              padding: const EdgeInsets.all(20),
              child: const Text(
                'Boring',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

참조

Container class - widgets library - Dart API

• A widget that displays its children in a vertical array
• 수직 방향 배열로 자식 위젯들을 나열하는 위젯
• 기본적으로 Column에 있는 자식 위젯들은 필요한 만큼만 공간을 차지함.

2. Row class

• A widget that displays its children in a horizontal array
• 수평 방향 배열로 자식 위젯들을 나열하는 위젯
• Column class와 마찬가지로 Row 의 자식 위젯들은 필요한 만큼만 공간을 차지함.

필요한 만큼 공간을 차지한다는 의미는?

예를 들어,

Column(
  children: [
    Text("Hello"),
    Text("World"),
  ],
)

Column 위젯의 자식 위젯들은 Text 위젯인데, 이 자식 위젯들은 자기의 고유한 공간 만큼만 차지함 (Widget Inspector로 보면 자식 위젯의 고유 크기를 가시적으로 볼 수 있음)

→ Column의 공간을 전부 사용하고 싶다면??

Expanded 사용

• 여러 개의 Expanded가 있으면 공간을 비율대로 나눔

→ Expanded는 가능한 남은 공간을 자식 위젯에게 주는 역할을 한다.

아래 코드의 예시는 3개의 Expanded가 존재하기 때문에 Column의 고유 Height 만큼을 각각 1/3 씩 나눠가짐

→ Expanded 가 4개라면?? → 1/4씩 나눠가짐

Column(
        children: [
          Expanded(
            child: Container(color: Colors.red), // 1/3 공간
          ),
          Expanded(
            child: Container(color: Colors.green), // 1/3 공간
          ),
          Expanded(
            child: Container(color: Colors.blue), // 1/3 공간
          ),
        ],
      ),

Row(
        children: [
          Expanded(
            child: Container(color: Colors.red), // 1/3 공간
          ),
          Expanded(
            child: Container(color: Colors.green), // 1/3 공간
          ),
          Expanded(
            child: Container(color: Colors.blue), // 1/3 공간
          ),
        ],
      ),

Row(
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.green,
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          )
        ],
      ),

lib
├── main.dart
└── screens
    ├── main_screen.dart
    └── splash_screen.dart

실행흐름

• 앱 실행 시 '/'에서 시작됨

  • '/' : (context) => const SplashScreen() 으로 설정되어 있어, 앱을 실행하면 SplashScreen UI가 첫 화면으로 초기화됨

  • splash_screen.dart에서는 다음과 같이 작성되어 있어, 2초 후에 '/main' 경로로 이동하도록 되어 있음:

      Future.delayed(const Duration(seconds: 2), () {
        Navigator.pushNamed(context, '/main');
      });

GIF

소스코드

main.dart

import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.pushNamed(context, '/main');
    });
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Splash Screen'),
      ),
    );
  }
}

main_screen.dart

import 'package:flutter/material.dart';

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MainScreen'),
      ),
      body: const Column(),
    );
  }
}

splash_screen.dart

import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.pushNamed(context, '/main');
    });
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Splash Screen'),
      ),
    );
  }
}

• Flutter 앱의 뼈대가 되는 위젯
• MaterialApp 위젯을 사용하면 구글의 Material Design 스타일을 쉽게 사용가능

주된 역할

1. 앱 전체 테마 설정 (색상, 글꼴등을 설정)
2. 라우팅 (화면 이동) 관리
3. 홈 화면 지정
4. 앱 이름, 아이콘 등 설정

-> Figma의 Material Design Icons를 사용하면,
Google 에서 지원하는 아이콘을 활용하여 UI를 구성할 수 있음

속성

예시 코드

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: {
        '/': (context) => SplashScreen(),
        '/main': (context) => MainScreen(),
      }
    );
  }
}

velog 첫 게시글의 내용을 고민하다가 일단 글이라도 써보자해서 쓰는 UI 뜯어보기 시작하겠습니다.~

1. 레퍼런스 준비

일단 figma에서 새 파일을 만들고, frame은 제가 현재 사용중인 폰과 규격이 맞는 프레임을 불러올게요 (왜냐하면 제 폰으로 홈화면을 캡처했기 때문입니다.)

프레임 안에 캡처한 이미지를 넣어주면

위와 같이 카드뷰의 규격을 딸 레퍼런스가 완성 됩니다 ㅎ <컬리앱 전부를 클론 코딩할 시간은 없어서 카드뷰만 뜯어보도록 하겠습니다.>

2. 레이아웃 분해

위와 같은 식으로 레이아웃을 크게 세 부분으로 나눌 수 있습니다. (이미지 - 카트 - 가격 및 정보) 레이아웃 딸 때는 보통 채도가 높은 색의 opacity를 줄여서 레이아웃을 따면 더 수월합니다

##3. 사용할 데이터 명세 하나의 카드뷰에서 필요한 데이터 클래스를 미리 표시해줍니다.

<data class> 

이미지 -> img
담기 버튼 ->그냥 frame레이아웃으로 구성 -> cart
품목이름 -> title
할인 전 금액 -> original_price
할인율 -> discount_rate
가격 -> price

아래 이미지와 같은 식으로 xml의 id를 네이밍 해줄거예요.

font는 정확히 뭔지 모르겠어서 가장 비슷한 'inter'로 하도록 합니다. !

figma의 스포이드로 자주 쓰일 것 같은 색들을 미리 따줍니다.

• 데이터 클래스 정의하기 위한 네이밍
• 반복적으로 사용하는 색상 -> 팔레트 만들기
• 카드뷰 horizontal 방향으로 스크롤 됨 (카드뷰간 spacing은 8dp임)

Q)여기서 알 수 있는 건 카드뷰 리소스를 만들 때, margin값을 얼마를 줘야할까요?

A) 정답은 4dp입니다~~ 리소스로 등록해둔 뷰가 수평 방향으로 반복적 사용되기 때문입니다.

4. res > values > colors.xml 에 색상 리소스 추가 (feat. GPT)

타이핑하기 매우 귀찮으므로, chatgpt에 팔레트 이미지와 프롬프트를 입력하고, 그걸 복사해서 colors.xml에 리소스로 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 원래 있던 색상 -->
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <!-- 카드뷰에서 사용할 색상 -->
    <color name="black_replacement_color">#2A2A2A</color>
    <color name="cart_stroke_color">#E2E7EB</color>
    <color name="original_color">#C0C9D2</color>
    <color name="discount_rate_color">#FE5307</color>
</resources>

일단, recyclerview를 만들기 위한 밑작업은 끝났습니다.