haeng_9.log

[TIL | 240222] React - UI 구성하기

Thu, 22 Feb 2024 01:48:28 GMT

공부 자료 : https://react.dev/learn

Describing the UI

React는 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리

배울 내용 : React 컴포넌트 생성, 사용자 정의, 조건부 표시
UI → 버튼, 텍스트, 이미지와 같은 작은 단위로 구성
React를 사용하면 재사용 가능, 중첩 가능한 컴포넌트로 결합 가능

1. Your First Component

Component

markup으로 사용할 수 있는 JavaScript 함수
React application은 컴포넌트들로 구축되어짐.
button과 같은 작은 것일 수도 있고, 전체 페이지일 수도 있음.
재사용 가능한 UI 구성 요소
HTML 태그와 마찬가지로 컴포넌트를 작성하고, 순서를 정하고 중첩해서 전체 페이지를 디자인할 수 있음

1) Define Component

기존에는 웹 페이지를 만들 때 콘텐츠를 마크업하고 JS를 사용해 상호 작용을 추가했음. React를 사용하면 같은 기술을 사용하면서도 상호작용을 우선시 함.

React component는 마크업으로 뿌릴 수 있는 JavaScript 함수

2) How to build a Component

**Step 1: Export the component**

export default - 표준 JS 구문

**Step 2: Define the function**

function 함수명() {}

**Step 3: Add markup**

3) Using a component

다른 컴포넌트에 중첩하여 사용 가능

function Profile() {
  return (
    
  );
}

export default function Gallery() {
  return (
    
      Amazing scientists
      
      
      
    
  );
}

4) What the browser sees (브라우저에 표시되는 내용)

대소문자 차이에 주목
보통 소문자 태그는 HTML 태그
보통 대문자 태그는 컴포넌트

5) Nesting and organizing componets (컴포넌트 중첩 및 구성)

같은 파일에 여러 컴포넌트 포함, 및 분리 가능
한 번 정의 해놓고 필요할 때 마다 재사용 가능

Summary

React lets you create components, reusable UI elements for your app.
In a React app, every piece of UI is a component.
React components are regular JavaScript functions except:
1. Their names always begin with a capital letter.
2. They return JSX markup.

2. Importing and Exporting Componets

하나의 파일에 여러 컴포넌트를 선언할 수 있지만, 파일이 큰 경우 탐색이 어려우므로 컴포넌트를 자제 파일로 export 해서 다른 파일에서 컴포넌트를 import 하여 사용 가능

component를 조합해 또 다른 component 생성 가능
여러번 중첩하게 될 경우, 파일 분리를 통해 편의성을 높일 수 있음.

1) The root component file

function Profile() {
  return (
    
  );
}

export default function Gallery() {
  return (
    
      Amazing scientists
      
      
      
    
  );
}

위의 코드에서 Profile , Gallery 컴포넌트는 모두 Apps.js root componet 파일에 존재.

Create React App에서는 앱 전체가 src/App.js 에서 실행

2) Exporting and importing a component

컴포넌트 분리를 통해 모듈성 강화 및, 다른 파일에서 재사용 용이하게 할 수 있음

App.js

import Gallery from "./component/Gallery";

export default function App() {
  return (
    
  );
}

Gallery.js

function Profile() {
    return (
      
    );
  }

  export default function Gallery() {
    return (
      
        Amazing scientists
        
        
        
      
    );
  }

Gallery.js:
- Defines the Profile component which is only used within the same file and is not exported.
- Exports the Gallery component as a default export.
App.js:
- Imports Gallery as a default import from Gallery.js.
- Exports the root App component as a default export.

3) Exporting and importing multiple components from the same file

하나의 파일은 하나의 default export만 가질 수 있음.
하나의 파일에서 여러 컴포넌트 사용을 위해서는

1) 새 파일을 만들어 default export 하거나,

2) named export를 추가

named export

export function Profile() {
  // ...
}

import { Profile } from './Gallery.js';

중괄호를 사용해 import 할 수 있음

Summary

On this page you learned:

What a root component file is
How to import and export a component
When and how to use default and named imports and exports
How to export multiple components from the same file

3. Writing Markup with JSX

JSX

React Component는 JSX라는 구문 확장자를 사용해 마크업을 표현
HTML과 비슷하지만 더 엄격하고, 동적인 정보를 표시할 수 있음
JavaScript를 확장한 문법으로, JavaScript 파일 안에 HTML과 유사한 마크업을 작성할 수 있게 해줌

1) JSX: Putting markup into JavaScript

보통 웹을 만들 때 HTML⇒ 컨텐츠, CSS ⇒ 디자인, JavaScript ⇒ 로직. but interactive 해지면서 로직이 컨텐츠를 결정하는 경우가 많아져 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 있게 됨.

2) Converting HTML to JSX / The Rules of JSX

1. Return a single root element

컴포넌트에서 여러 엘리먼트를 반환할 때 하나의 부모 태그로 감싸야 함
ex)
, <>,
<>, - fragment, 브라우저상 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해줌

JSX태그를 하나로 감싸는 이유? ⇒ JSX는 HTML처럼 보이지만 내부적으로 JS 객체로 변환되기 때문에 하나의 배열로 감싸야 함.

2. Close all the tags

모든 태그를 닫는 태그로 사용해야 함
ex) ⇒

3. camelCase ~~all~~ most of the things!

변수명에 대시나 예약어 사용 불가

3) JSX 변환기 사용

HTML to JSX

Summary

Now you know why JSX exists and how to use it in components:

React components group rendering logic together with markup because they are related.
JSX is similar to HTML, with a few differences. You can use a converter if you need to.
Error messages will often point you in the right direction to fixing your markup.

4. JavaScript in JSX with Curly Braces

JSX를 사용하면 JS 파일 내에 HTML과 유사한 마크업 언어를 작성해 rendering logic과 content를 같은 위치에 둘 수 있음. JSX에서 중괄호를 사용해 마크업 안에 JavaScript 로직을 추가하거나 동적인 property를 참고할 수 있음.

1) Passing strings with quotes(””, ‘’)

JSX에 문자열 속성을 전달하려면, 작은 따옴표 혹은 큰 따옴표로 묶음

export default function Avatar() {
  return (
    
  );
}

{} : " " 대신 사용. 동적으로 지정해 JS 값 사용 가능

2) Using curly braces / 중괄호 사용 위치

{} 중괄호 사이에는 함수 호출을 포함한 모든 JS 표현식이 작동

1. JSX 태그 안에 직접 텍스트로 사용

`{name}'s To Do List`

⇒ O

<{tag}>Gregorio Y. Zara's To Do List ⇒ X

2. = 기호 바로 뒤에 오는 속성

src={avatar} ⇒ 아바타 변수

src="{avatar}" ⇒ 문자열 “{avatar}”

3) Using “double curlies”: CSS and other objects in JSX

{{ }} - JSX에서 JS 객체 전달, JSX 중괄호 내부의 객체
ex) 인라인 스타일이 필요한 경우 style attribute에 객체 전달 style={{ }}

export default function TodoList() {
  return (
    
      Improve the videophone
      Prepare aeronautics lectures
      Work on the alcohol-fuelled engine
    
  );
}

4) More fun with JavaScript objects and curly braces

여러 표현식을 하나의 객체로 이동해 중괄호 안에 있는 JSX에서 참조할 수 있음

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    
      {person.name}'s Todos
      
      
        Improve the videophone
        Prepare aeronautics lectures
        Work on the alcohol-fuelled engine
      
    
  );

Summary

Now you know almost everything about JSX:

JSX attributes inside quotes are passed as strings.
Curly braces let you bring JavaScript logic and variables into your markup.
They work inside the JSX tag content or immediately after = in attributes.
{{ and }} is not special syntax: it’s a JavaScript object tucked inside JSX curly braces.
따옴표 안의 JSX 속성은 문자열로 전달됩니다.
중괄호를 사용하면 JavaScript 로직과 변수를 마크업으로 가져올 수 있습니다.
중괄호는 JSX 태그 콘텐츠 내부 또는 속성의 = 바로 뒤에서 작동합니다.
{{ 와 }} 는 특별한 구문이 아니라 JSX 중괄호 안에 들어 있는 JavaScript 객체입니다.

5. Passing Props to a Component

1) Props

component 간 통신을 위해 사용
부모 component는 자식 component에 props를 전달해 정보를 줄 수 있음
HTML attributes, 객체, 배열, 함수, JSX를 포함한 JavaScript 값 전달 가능
JSX 태그에 전달하는 정보
- ex) className, src, alt, width, height 는 태그에 전달, 그 외 어떤 컴포넌트에도 props 전달 가능

2) Passing props to a component/ Step

Step 1: Pass props to the child component (자식 컴포넌트에 props 전달)

export default function Profile() {
  return (
    
  );
}

Step 2: Read props inside the child component (자식 컴포넌트 내부에서 props 읽기)

function Avatar({ person, size }) {
  // person and size are available here
}

🚨 props 선언 시 () 안에 { } 잊지 않기

3) Props - default value

변수 뒤에 = 기본값

  function Avatar({ person, size = 100 }) {
    // ...
  }

prop이 없거나 undefined인 경우 ( null, 0인 경우는 X)

4) JSX spread syntax

모든 props를 한번에 전달

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    
      
    
  );
}

function Profile(props) {
  return (
    
      
    
  );
}

5) component 중첩

JSX 태그 내 콘텐츠 중첩을 하면 부모 컴포넌트는 해당 컨텐츠를 children 이라는 prop으로 받음

Summary

To pass props, add them to the JSX, just like you would with HTML attributes.
To read props, use the function Avatar({ person, size }) destructuring syntax.
You can specify a default value like size = 100, which is used for missing and undefined props
You can forward all props with JSX spread syntax, but don’t overuse it!
Nested JSX like will appear as Card component’s children prop.
Props are read-only snapshots in time: every render receives a new version of props.
You can’t change props. When you need interactivity, you’ll need to set state.
- Props는 변경할 수 없습니다. 상호작용이 필요한 경우 state를 설정해야 합니다.

6. Conditional Rendering

if문 , && , ? : 와 같은 JavaScript 구문을 사용해 조건부로 JSX를 렌더링할 수 있음.

1) If / else 를 사용한 조건부 렌더링

if (isPacked) {
  return {name} ✔;
}
return {name}
;

아무 것도 반환하지 않을 때 null 사용
- return null;

2) Conditional(ternary) operator (`? :` ) - 삼항연산자

if (isPacked) {
  return {name} ✔;
}
return {name}
;

return (
  
    {isPacked ? name + ' ✔' : name}
  
);

con ? A : B ⇒ condition 이 true이면 A 렌더링, false이면 B 렌더링

3) 논리 AND 연산자 (`&&`)

return (
  
    {name} {isPacked && '✔'}
  
);

조건이 참일 때 렌더링, 그렇지 않으면(false), 아무 것도 렌더링 하지 않음

Summary

In React, you control branching logic with JavaScript.
You can return a JSX expression conditionally with an if statement.
You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
In JSX, {cond ? : } means “if cond, render , otherwise ”.

In JSX, {cond && } means “if cond, render , otherwise nothing”.

The shortcuts are common, but you don’t have to use them if you prefer plain if.

7. Rendering Lists

JavaScript의 filter() , map() 을 사용해 데이터 배열을 필터링하고 component의 배열로 변환할 수 있음. 각 배열 항목마다 key 를 지정해 목록이 변경되더라도 목록에서 각 항목의 위치 추적 가능

1) Rendering data from arrays

Move the data into an array

const people = [ 'Creola Katherine Johnson: mathematician', 'Mario José Molina-Pasquel Henríquez: chemist', 'Mohammad Abdus Salam: physicist', 'Percy Lavon Julian: chemist', 'Subrahmanyan Chandrasekhar: astrophysicist' ];

Map the data into a new array of JSX nodes

const listItems = people.map(person => {person} );

Return new array from the component

return {listItems} ;

2) Filtering arrays of items

Create a new array of some conditions, by calling filter() on the array filtering by conditions.

const chemists = people.filter(person => person.profession === 'chemist' );

map over new array

const listItems = chemists.map(person => {person.name}: {' ' + person.profession + ' '} known for {person.accomplishment} );

return the mapped array from the component

return {listItems} ;

👉 화살표 함수(`⇒`)는 바로 뒤에 표현식을 암시적으로 Reurn하므로 `return` 문이 필요하지 않음. 하지만 중괄호(`{}`)가 오는 경우는 `return` 문 필요.

3) About key

map각 배열의 항목들을 고유하게 식별할 수 있는 문자열 또는 숫자인 key를 부여해야 함.

key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 알려줘 매칭하도록 함.

따로 지정하지 않으면 기본적으로 Index를 Key로 사용하지만 새 항목 삽입, 삭제, 배열 순서가 바뀌면서 변경될 수 있음

key를 얻는 방법

Database 데이터 : 고유한 DB key/ID 사용

Local 데이터 : incrementing counter, crypto.randomUUID() , uuid 패키지 사용

key 규칙

같은 배열 JSX 노드에는 고유해야 함.

Key는 변경되지 않아야 함 (렌더링 중 생성 금지)

Summary

How to move data out of components and into data structures like arrays and objects.

How to generate sets of similar components with JavaScript’s map().

How to create arrays of filtered items with JavaScript’s filter().

Why and how to set key on each component in a collection so React can keep track of each of them even if their position or data changes.

8. Keeping Components Pure

Pure function

자신의 일만 처리 - 호출 전 존재했던 객체나 변수를 변경하지 않음

same inputs, same outputs - 동일 입력에는 항상 동일 결과 반환

버그나 예측 불가한 동작이 발생하는 것을 피할 수 있음.

1) Purity: Components as formulas

React는 모든 컴포넌트가 pure function 이라고 가정.

2) Side Effects: (un)intended consequences

컴포넌트는 JSX만을 반환해야 하고, 렌더링 전 존재하는 객체, 변수를 변경해서는 안됨

[순수성을 어기는 예시]

let guest = 0; function Cup() { // Bad: changing a preexisting variable! // 나쁨: 기존 변수를 변경합니다! guest = guest + 1; return Tea cup for guest #{guest}; } export default function TeaSet() { return ( <> ); }

[수정]

function Cup({ guest }) { return Tea cup for guest #{guest}; } export default function TeaSet() { return ( <> ); }

3) Local mutation: Your component’s little secret

렌더링 전에 존재하는 것을 변경하는 것은 안되지만 렌더링 하는 동안 ‘방금’ 생성한 변수와 객체를 변경하는 것은 가능

function Cup({ guest }) { return Tea cup for guest #{guest}; } export default function TeaGathering() { let cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } return cups; }

4) Where you can cause side effects

화면 업데이트, 애니메이션 시작, 데이터 변경과 같은 변경을 side effect라고 함. 렌더링 중이 아닌 ‘부수적으로’ 일어나는 일

event handler

대게 React에서 사이트 이펙트는 event handler에 속함

사용자가 어떤 동작 수행할 때, React가 실행하는 함수

컴포넌트 내부에 정의되어 있지만 렌더링 중에는 실행되지 않음

적절한 event handler가 없다면 useEffect 사용

Summary

A component must be pure, meaning:

It minds its own business. It should not change any objects or variables that existed before rendering.

Same inputs, same output. Given the same inputs, a component should always return the same JSX.

Rendering can happen at any time, so components should not depend on each others’ rendering sequence.

You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, “set” state instead of mutating preexisting objects.

Strive to express your component’s logic in the JSX you return. When you need to “change things”, you’ll usually want to do it in an event handler. As a last resort, you can useEffect.

Writing pure functions takes a bit of practice, but it unlocks the power of React’s paradigm.

9. Understanding Your UI as a Tree

React와 많은 UI 라이브러리는 UI를 트리로 모델링

Tree ⇒ relationship model ex)브라우저는 HTML(DOM), CSS(CSSOM) 모델링을 위해 트리 구조 사용

The Render Tree (렌더링할 때 사용하는 트리 개념)

React app을 rendering 할 때 render tree로 이 관계들을 모델링 할 수 있음.

컴포넌트의 주요 특징 : 다른 컴포넌트의 컴포넌트를 구성할 수 있음

컴포넌트 중첩 시 parent component, child component 개념이 생김

Root node = App의 Root 컴포넌트

node = component, branch = render

conditional rendering ⇒ 부모 컴포넌트가 전달된 데이터에 따라 다른 child component를 렌더링

import * as React from 'react'; import inspirations from './inspirations'; import FancyText from './FancyText'; import Color from './Color'; export default function InspirationGenerator({children}) { const [index, setIndex] = React.useState(0); const inspiration = inspirations[index]; const next = () => setIndex((index + 1) % inspirations.length); return ( <> Your inspirational {inspiration.type} is: {inspiration.type === 'quote' ? : } {children} ); }

The Module Dependency Tree

모듈간의 의존성 관계를 나타낼 때 사용하는 트리

컴포넌트를 분리하고 로직을 별도의 파일로 분리하면, 컴포넌트, 함수, 상수를 내보내느 JS 모듈을 만들 수 있음

Root node = root module, 일반적으로 루트 컴포넌트 포함하는 모듈

node = module, branch = import

module dependency tree는 컴포넌트가 아닌 모듈도 트리에 나타냄

Summary

Trees are a common way to represent the relationship between entities. They are often used to model UI.

Render trees represent the nested relationship between React components across a single render.

With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components.

Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance.

Dependency trees represent the module dependencies in a React app.

Dependency trees are used by build tools to bundle the necessary code to ship an app.

Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled.

[TIL | 240131] JavaScript - 코딩앙마 왕 초보 자바스크립트

Wed, 31 Jan 2024 05:02:20 GMT

Javascript

자료 : [코딩앙마] 왕 초보 자바스크립트

1. 변수

alert() : 경고창을 찍는 함수

console.log() : 로그를 찍는 함수

let : 최초로 선언하는 모든 변수에 붙여 중복을 방지, 변할 수 있음

const : 절대로 바뀌지 않는 상수

2. 자료형

문자형 : ' ', " ",

숫자형 : 사칙연산 가능 (0으로 나누면 무한대, 문자를 숫자로 나누면 NaN)

bool형 : true, false

null -> 존재하지 않는 값

undefined -> 할당되지 않은 값

객체형

심볼형

typeof 연산자 : 변수의 자료형 확인

숫자형 + 문자형 => 숫자형이 문자형으로 변환

3. alert, prompt, confirm

alert

알려줌

메세지를 띄우고 확인 용도

prompt

입력 받음

prompt("message", "default")

문자형으로

confirm

확인 받음

확인, 취소(null 할당) 버튼이 있음

사용자 액션 확인시 자주 사용

=> 장점: 빠르고 간단함 단점: 1. 스크립트 일시 정지 2. 스타일링 X

4. 형변환 (명시적)

자동 형변환

String()

문자형으로 변환

Number()

숫자형으로 변환

문자가 들어있으면 NaN

Boolean()

불린형으로 변환

0, 빈 문자열, null, undefined, NaN => false

!주의

Number(null) => 0 Number(undefined) => NaN
5. 기본 연산자

+, -, *, /

// - 나머지

** - 거듭제곱

++, -- - 증가연산자, 감소연산자

6. 비교 연산자, 조건문 (if, else)

비교 연산자 - <, >, <= , >=, ==(동등 연산자), !=

=== : 일치 연산자, 타입까지 비교 ( 1 == '1' -> true 로 출력됨)

조건문 - if, else, else if
if(조건){ 조건이 참일 때 실행될 부분 } else if (조건1) { 조건1이 참일 때 실행될 부분 } else { 조건을 모두 만족하지 못할 때 실행될 부분 }

7. 논리 연산자 (AND, OR, NOT)

|| - OR

&& - AND

! - NOT => 평가 시 성능 최적화(필터링)할 때 활용될 수 있음.

우선 순위 : AND > OR

🌟 여기서 기존에 알고 있던 논리 연산자의 사용이 예제 코드를 따라하다가 머리를 크게 맞은 느낌이었다

// or 연산자 활용 function sayHello2(name) { let newName = name || 'friend'; // 매개변수를 입력하지 않으면 true값인 'friend' 반환 let msg3 = `Hello, ${newName}` console.log(msg3); }

여기서 let newName = name || 'friend' 논리 사용자를 사용한 부분에는 당연히 true나 false가 반환값으로 나올 줄 알았는데 or 연산자의 경우 true가 되는 부분의 값이 출렸되었다. 파이썬을 쓰면서 이런 방식은 한 번도 쓰지 않아 이렇게 쓰이는 지 몰랐다🤣

아래 두 링크에서 이를 잘 설명해주고 있다!

https://velog.io/@proshy/JS%EC%9E%98%EB%AA%BB-%EC%95%8C%EA%B3%A0-%EC%9E%88%EC%97%88%EB%8D%98-%EB%85%BC%EB%A6%AC%EC%97%B0%EC%82%B0%EC%9E%90

https://ella951230.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-truthy-falsy-%EB%8B%A8%EC%B6%95%ED%8F%89%EA%B0%80%EB%8B%A8%EB%9D%BD%ED%9A%8C%EB%A1%9C%ED%8F%89%EA%B0%80

8. 반복문 (for, while, do while)

for문
for (초기값; 조건; 코드 실행 후 작업) { 반복할 코드 }

while문
while (조건) { 조건이 참일 동안 반복할 코드 }

do while문
do { 무조건 한 번 실행 후, 조건이 참일 동안 반복 } while (조건)

break : 멈추고 빠져나옴

continue : 멈추고 다음 반복으로 진행

9. switch문

case가 다양할 경우 사용
switch (평가) { case A: A일 때 코드 break; case B: B일 때 코드 break; default: case에 만족하는 게 없을 때 실행할 코드 }

10. 함수(function)의 기초

function 함수명(매개변수){ 함수 실행 코드 }

중복을 줄여줌

지역 변수를 외부에서도 사용하고 싶으면 밖으로 빼줘야 함

let은 같은 이름의 변수에 대해 한 번만 지정해야 하지만, 전역 변수와 지역 변수는 독립적으로 사용될 수 있음.

return을 함수 종료 목적으로 사용하기도 함.

11. 함수 표현식, 화살표 함수(arrow function)

함수 선언문 -> 기존의 함수, 어디서든 호출 가능 (호이스팅)

함수 표현식 -> 함수 이름을 짓지 않고 변수에 할당, 코드에 도달하면 생성

화살표 함수 -> =>를 사용해 함수를 간단히 정의, 함수 안의 return문은 소괄호로 변환 가능, 한줄일 경우는 이것도 생략 가능

12. 객체(Object)

객체명 = { key : value, key : value, ... }

접근 - 객체명.key, 객체명['key']

추가 - 객체명.key = value;, 객체명['key'] = value;

삭제 - delete 객체명.key

존재 여부 확인 - 존재하지 않는 property의 경우 undefined

for ... in 반복문
for (let key in 객체명) { console.log(key) console.log(객체명[key]) }

13. 객체(Object) - method, this

method : 객체 프로퍼티로 할당 된 함수

this => 객체를 가리킴

화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않아 함수 내부에서 this를 사용하면, 외부에서 값을 가져옴.

14. 배열(Array)

: 순서가 있는 리스트 []

문자, 숫자, 객체, 함수 등 포함 가능

.length - 배열의 길이 반환

.push() - 배열 끝에 추가

.pop() - 배열 끝에 요소 제거

.unshift() - 배열 앞에 추가

.shift() - 배열 앞에 요소 제거

for문 / for ... of문

[TIL | 240120] Django - 모델 변경, 글쓴이 표시

Mon, 22 Jan 2024 07:09:01 GMT

모델 변경

1. Question 속성 추가

: Question에 author(글쓴이) 속성 추가

pybo/models.py

from django.db import models from django.contrib.auth.models import User class Question(models.Model): author = models.ForeignKey(User, on_delete=models.CASCADE) (... 생략 ...)

User → django.contrib.auth 앱이 제공하는 사용자 모델. 회원 가입시 데이터 저장에 사용한 모델.ForeignKey로 적용해 선언

author 속성에 null 허용하려면 null=True

🚨 모델 변경 후 반드시 makemigrations, migrate 를 통해 데이터베이스 변경해야 함.

2. Answer 속성 추가

: Answer에 author(글쓴이) 속성 추가

pybo/models.py

(... 생략 ...) class Answer(models.Model): author = models.ForeignKey(User, on_delete=models.CASCADE) (... 생략 ...)

🚨 모델 변경 후 반드시 makemigrations, migrate 를 통해 데이터베이스 변경해야 함.

3. author 저장

: 질문과 답변 저장시 author도 함께 저장해야 함.

pybo/views.py

def answer_create(request, question_id): (... 생략 ...) if form.is_valid(): answer = form.save(commit=False) answer.author = request.user # author 속성에 로그인 계정 저장 (... 생략 ...) (... 생략 ...) def question_create(request): (... 생략 ...) if form.is_valid(): question = form.save(commit=False) question.author = request.user # author 속성에 로그인 계정 저장 (... 생략 ...)

request.user → 현재 로그인한 계정의 User 모델 객체

4. 로그인이 필요한 함수

request.user가 User 객체가 아닌 AnonymousUser 객체이므로 에러 발생

로그아웃 상태이면 AnonymousUser 객체가, 로그인 상태이면 User 객체가 들어있는데, 우리는 author 속성을 정의할 때 User를 이용하도록 함. ⇒ answer.author = request.user에서 User 대신 AnonymousUser가 대입되어 오류가 발생

⇒ request.user를 사용하는 함수에 @login_required 애너테이션을 사용 해 로그인 필요한 함수로 만듦

pybo/views.py

from django.shortcuts import render, get_object_or_404, redirect from django.utils import timezone from .models import Question from .forms import QuestionForm, AnswerForm from django.core.paginator import Paginator from django.contrib.auth.decorators import login_required (... 생략 ...) @login_required(login_url='common:login') def answer_create(request, question_id): (... 생략 ...) @login_required(login_url='common:login') def question_create(request): (... 생략 ...)

answer_create 함수와 question_create 함수 → 로그인이 필요하므로 @login_required 어노테이션 사용

로그아웃 상태에서 @login_required 어노테이션이 적용된 함수가 호출되면 자동으로 로그인 화면으로 이동.

@login_required 어노테이션은 login_url='common:login' 처럼 로그인 URL을 지정 가능

5. next

로그인 후 next 파라미터에 있는 URL로 페이지를 이동하려면 로그인 템플릿에 hidden 타입의 next 항목을 추가

common/login.html

(... 생략 ...)
{% csrf_token %} {% include "form_errors.html" %} (... 생략 ...)

6. disabled

pybo/question_detail.html

(... 생략 ...) 답변내용 (... 생략 ...)

{% if not user.is_authenticated %} (로그인 상태가 아닌 경우) textarea 태그에 disabled 속성을 적용 → 로그아웃 시 답변 작성 불가하도록 지정

→ 로그아웃 상태에서 답변 등록 클릭 후 로그인 시 발생하는 에러

로그인 시에 전달된 next 파라미터 때문에 로그인 후에 답변등록 URL인 /answer/create가 GET 방식으로 호출. (답변 등록시에는 POST가 아닌 경우 HttpResponseNotAllowed 오류를 발생하도록 설정해서 405 에러 발생)

해결 :

pybo/views.py 수정

(... 생략 ...) from django.http import HttpResponseNotAllowed (... 생략 ...) @login_required(login_url='common:login') def answer_create(request, question_id): question = get_object_or_404(Question, pk=question_id) if request.method == 'POST': form = AnswerForm(request.POST) if form.is_valid(): answer = form.save(commit=False) answer.author = request.user # author 속성에 로그인 계정 저장 answer.create_date = timezone.now() answer.question = question answer.save() return redirect('pybo:detail', question_id=question.id) else: form = AnswerForm() context = {'question': question, 'form': form} return render(request, 'pybo/question_detail.html', context) (... 생략 ...)

글쓴이 표시

1. 질문 목록

question_list.html

(... 생략 ...) 번호 제목 글쓴이 작성일시 (... 생략 ...) {% for question in question_list %} {{ question_list.paginator.count|sub:question_list.start_index|sub:forloop.counter0|add:1 }} {{ question.subject }} {% if question.answer_set.count > 0 %} {{ question.answer_set.count }} {% endif %} {{ question.author.username }} {{ question.create_date }} {% endfor %} {% else %} 질문이 없습니다. (... 생략 ...)

th 엘리먼트 가운데 정렬, 제목의 너비가 전체에서 50% 차지하도록 지정

{{ question.author.username }} → 질문 글쓴이 표시

질문이 없습니다. → 테이블 항목 개수 3에서 4로 증가

2. 질문 상세

question_detail.html

(... 생략 ...) {{ question.subject }} {{ question.content }} {{ question.author.username }} {{ question.create_date }} (... 생략 ...) {{question.answer_set.count}}개의 답변이 있습니다. {% for answer in question.answer_set.all %} {{ answer.content }} {{ answer.author.username }} {{ answer.create_date }} (... 생략 ...)

질문 목록과 같이 글쓴이 추가

[TIL | 240117] Django - 회원가입

Thu, 18 Jan 2024 03:24:20 GMT

1. 회원가입 링크

navbar.html

(... 생략 ...) {% if user.is_authenticated %} {{ user.username }} (로그아웃) {% else %} 로그인 {% endif %} {% if not user.is_authenticated %} 회원가입 {% endif %}

→ 로그아웃 상태에서만 “회원가입” 링크 보이도록 함

2. urls.py

common/urls.py

from django.urls import path from django.contrib.auth import views as auth_views from . import views app_name = 'common' urlpatterns = [ path('login/', auth_views.LoginView.as_view(template_name='common/login.html'), name='login'), path('logout/', views.logout_view, name='logout'), path('signup/', views.signup, name='signup'), ]

url 매핑 규칙 추가

3. forms.py

계정 생성시 사용할 UserForm 생성

common/forms.py

from django import forms from django.contrib.auth.forms import UserCreationForm from django.contrib.auth.models import User class UserForm(UserCreationForm): email = forms.EmailField(label="이메일") class Meta: model = User fields = ("username", "password1", "password2", "email")

UserForm을 따로 만들지 않고 UserCreationForm을 그대로 사용해도 되지만,

이메일 등의 속성을 추가하기 위해서는 UserCreationForm 클래스를 상속해야 함.

속성명 설명

username 사용자이름

password1 비밀번호1

password2 비밀번호2 (비밀번호1을 제대로 입력했는지 대조하기 위한 값)

4. views.py

common/views.py 수정

from django.contrib.auth import authenticate, login, logout from django.shortcuts import render, redirect from common.forms import UserForm def logout_view(request): logout(request) return redirect('index') def signup(request): if request.method == "POST": form = UserForm(request.POST) if form.is_valid(): form.save() username = form.cleaned_data.get('username') raw_password = form.cleaned_data.get('password1') user = authenticate(username=username, password=raw_password) # 사용자 인증 login(request, user) # 로그인 return redirect('index') else: form = UserForm() return render(request, 'common/signup.html', {'form': form})

POST → 화면에서 입력한 데이터로 사용자를 생성. GET → 회원가입 화면을 보여줌

form.cleaned_data.get : 폼의 입력값을 개별적으로 얻고 싶은 경우에 사용 (여기서는 인증시 사용할 사용자명과 비밀번호를 얻기 위해 사용)

authenticate, login 함수 → 신규 사용자생성 후 자동 로그인 될 수 있도록

django.contrib.auth.authenticate - 사용자 인증을 담당(사용자명과 비밀번호가 정확한지 검증)

django.contrib.auth.login - 로그인을 담당(사용자 세션을 생성)

5. signup.html

templates/common/signup.html 생성

{% extends "base.html" %} {% block content %} {% csrf_token %} {% include "form_errors.html" %} 사용자 이름 비밀번호 비밀번호 확인 이메일 {% endblock %}

{% include "form_errors.html" %} → 오류 표시

UserForm의 속성인 사용자이름, 비밀번호1, 비밀번호2, 이메일에 해당되는 필드들을 form 항목으로 추가

6. 회원가입

(1) 메인 페이지

(2) 회원가입 실패 화면

(3) 회원 가입후 /admin 접근

슈퍼유저가 아닌 계정으로 접근해 경고 메세지 발생

(4) 슈퍼유저로 로그인 후 사용자 확인

[TIL | 240116] Django - 로그인, 로그아웃

Thu, 18 Jan 2024 02:59:45 GMT

Django에서는 django.contrib.auth 앱을 활용하여 로그인, 로그아웃 구현 가능

Django 프로젝트 생성 시 자동으로 생성 (settings.py 에서 확인 가능)

1. common 앱

별도의 앱으로 생성

(1) django-admin startapp common

(2) common 앱 등록

config/settings.py

(... 생략 ...) INSTALLED_APPS = [ 'common.apps.CommonConfig', 'pybo.apps.PyboConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] (... 생략 ...)

(3) url 등록

config/urls.py 수정

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('pybo/', include('pybo.urls')), path('common/', include('common.urls')), ]

→ http://localhost:8000/common/ 으로 시작하는 URL은 모두 common/urls.py 파일을 참조

common/urls.py 생성

app_name = 'common' urlpatterns = [ ]

2. 로그인

templates/navbar.html

(... 생략 ...) 로그인 (... 생략 ...)

→ 로그인 버튼 클릭시 화면 이동

1) 로그인 뷰

common/urls.py 수정

from django.urls import path from django.contrib.auth import views as auth_views app_name = 'common' urlpatterns = [ path('login/', auth_views.LoginView.as_view(), name='login'), ]

→ 매핑 규칙 추가. 뷰를 따로 만들지 않고 내장된 LoginView 사용

2) 로그인 템플릿

(1) common/urls.py 수정

from django.urls import path from django.contrib.auth import views as auth_views app_name = 'common' urlpatterns = [ path('login/', auth_views.LoginView.as_view(template_name='common/login.html'), name='login'), ]

LoginView는 registration이라는 템플릿 디렉터리에서 login.html 파일을 찾지만 common앱에서 구현하므로 경로를 common/login.html 로 수정 및 생성

(2) templates/common/login.html 생성

{% extends "base.html" %} {% block content %} {% csrf_token %} {% include "form_errors.html" %} 사용자ID 비밀번호 {% endblock %}

username , password 는 django.contrib.auth 앱이 요구하는 필수항목

(3) templates/form_errors.html 작성

{% if form.errors %} {% for field in form %} {% if field.errors %} {{ field.label }} {{ field.errors }} {% endif %} {% endfor %} {% for error in form.non_field_errors %} {{ error }} {% endfor %} {% endif %}

로그인 실패시 오류 사항 확인 페이지

field.errors : 사용자 입력 필드 값에 대한 오류(값 누락, 필드 형식 불일치 등)

form.non_field_errors : 필드 값 상관없이 다른 이유로 발생하는 오류

3) 로그인 수행

→ 오류 메시지 표시

→ 슈퍼유저 계정으로 로그인

(1) config/settings.py 수정

(... 생략 ...) # 로그인 성공후 이동하는 URL LOGIN_REDIRECT_URL = '/'

django.contrib.auth 패키지는 디폴트로 /accounts/profile/ 이라는 URL로 이동하지만 성공시 / 로 이동하도록 변경

(2) config/urls.py 수정

from django.contrib import admin from django.urls import path, include from pybo import views urlpatterns = [ path('admin/', admin.site.urls), path('pybo/', include('pybo.urls')), path('common/', include('common.urls')), path('', views.index, name='index'), # '/' 에 해당되는 path ]

/ 페이지에 대응하는 URL 매핑 규칙 추가

3. 로그아웃

로그인 후 “로그인” 링크가 “로그아웃” 링크로 바뀌고, “로그아웃” 링크일 때 “로그인” 링크로 바뀌도록

(1) templates/navbar.html 수정

(... 생략 ...) {% if user.is_authenticated %} {{ user.username }} (로그아웃) {% else %} 로그인 {% endif %} (... 생략 ...)

{% if user.is_authenticated %} → 현재 사용자가 로그인 되었는지 판별

(2) common/urls.py

from django.urls import path from django.contrib.auth import views as auth_views from . import views app_name = 'common' urlpatterns = [ path('login/', auth_views.LoginView.as_view(template_name='common/login.html'), name='login'), path('logout/', views.logout_view, name='logout'), ]

URL 매핑 추가

(3) common/views.py

from django.contrib.auth import logout from django.shortcuts import redirect def logout_view(request): logout(request) return redirect('index')

logout_view 함수 호출시 django.contrib.auth 모듈의 로그아웃 함수를 사용해 로그아웃 수행 후 ‘index’ 페이지로 리다이렉트하도록 설정

[ 로그인 완료 후 화면 ]

[TIL | 240111] Django - 템플릿 필터(filter) + 답변 개수 표시

Thu, 11 Jan 2024 01:01:43 GMT

템플릿 필터 (Template filter)

템플릿 태그에서 | 문자 뒤에 사용하는 필터

1. 게시물 번호 오류

현재 사이트는 어떤 페이지를 들어가도 게시물 번호가 1부터 시작되는 문제 발생

2. 게시물 번호

페이지별로 게시물의 번호를 역순으로 정렬하기 위한 공식

번호 = 전체건수 - 시작인덱스 - 현재인덱스 + 1

django에는 빼기 필터가 없으므로 직접 만들어야 함.

|add:-3 과 같은 경우 add 필터는 인수로 숫자만 받을 수 있어 변수 적용이 안됨.

3. 템플릿 필터 작성하기

1) pybo/templatetags directory 생성 (반드시 templatetags 디렉터리는 앱 디렉터리 하위에 생성)

2) pybo/templatetags/pybo_fileter.py

from django import template register = template.Library() @register.filter def sub(value, arg): return value - arg

@register.filter 에너테이션을 적용해 템플릿에서 해당 함수를 필터로 사용

4. 템플릿 필터 사용하기

1) 템플릿 상단에 필터 파일 로드

템플릿 상단에 extends문이 있으면 load문은 extends문 아래에 위치

2) question_list.html 수정

{% extends 'base.html' %} {% load pybo_filter %} {% block content %} {% if question_list %} {% for question in question_list %} (... 생략 ...) 번호 제목 작성일시 {{ question_list.paginator.count|sub:question_list.start_index|sub:forloop.counter0|add:1 }} {{ question.subject }} {{ question.create_date }} 공식 코드 전체건수 question_list.paginator.count 시작인덱스 question_list.start_index 현재인덱스 forloop.counter0 [ 결과 ] 답변 개수 표시 + 답변 개수 표시 질문 목록에 해당 질문에 달린 답변 개수 표시 question.html 수정 (... 생략 ...) {{ question.subject }} {% if question.answer_set.count > 0 %} {{ question.answer_set.count }} {% endif %} <...>
[TIL | 240109] Django - 페이징(Paging) Thu, 11 Jan 2024 00:22:55 GMT 페이징 (paging) 1. 대량 테스트 데이터 생성 장고 셸 활용해 데이터(게시물) 대량 생생 > python [manage.py](http://manage.py) shell from django.utils import timezone from pybo.models import Question for i in range(300): q = Question(subject='테스트 데이터입니다 : [%03d]' %i,content='내용무', create_date=timezone.now()) q.save() 300개 이상의 데이터가 한 페이지에 보여짐 2. Paginator 페이징을 위해 사용하는 클래스 pybo/views.py from django.shortcuts import render, get_object_or_404, redirect from django.utils import timezone from .models import Question from .forms import QuestionForm, AnswerForm from django.core.paginator import Paginator def index(request): page = request.GET.get('page', '1') # 페이지 question_list = Question.objects.order_by('-create_date') paginator = Paginator(question_list, 10) # 페이지당 10개씩 보여주기 page_obj = paginator.get_page(page) context = {'question_list': page_obj} return render(request, 'pybo/question_list.html', context) (... 생략 ...) page = request.GET.get('page', '1') - http://localhost:8000/pybo/?page=1 처럼 GET 방식으로 호출된 URL에서 page값을 가져올 때 사용. http://localhost:8000/pybo/ 처럼 page값 없이 호출된 경우 디폴트값 1 paginator = Paginator(question_list, 10) - (게시물 전체, 페이지 당 보여줄 게시물 개수) page_obj = paginator.get_page(page) - 페이지에 해당되는 페이징 객체 페이징 객체 속성 | 항목 | 설명 | | --- | --- | | paginator.count | 전체 게시물 개수 | | paginator.per_page | 페이지당 보여줄 게시물 개수 | | paginator.page_range | 페이지 범위 | | number | 현재 페이지 번호 | | previous_page_number | 이전 페이지 번호 | | next_page_number | 다음 페이지 번호 | | has_previous | 이전 페이지 유무 | | has_next | 다음 페이지 유무 | | start_index | 현재 페이지 시작 인덱스(1부터 시작) | | end_index | 현재 페이지의 끝 인덱스(1부터 시작) | 3. 템플릿에 페이징 적용하기 & 페이지 리스트 question_list.html 에 페이징 객체(question_list)가 전달됨 question_list.html 페이징 처리 (... 생략 ...) {% if question_list.has_previous %} 이전 {% else %} 이전 {% endif %} {% for page_number in question_list.paginator.page_range %} {% if page_number >= question_list.number|add:-5 and page_number <= question_list.number|add:5 %} {% if page_number == question_list.number %} {{ page_number }} {% else %} {{ page_number }} {% endif %} {% endif %} {% endfor %} {% if question_list.has_next %} 다음 {% else %} 다음 {% endif %} 질문 등록하기 {% endblock %} 이전 페이지가 있는 경우 “이전”링크 활성화, 없으면 비활성화 | 페이징 기능 | 코드 | | --- | --- | | 이전 페이지가 있는지 체크 | {% if question_list.has_previous %} | | 이전 페이지 번호 | {{ question_list.previous_page_number }} | | 다음 페이지가 있는지 체크 | {% if question_list.has_next %} | | 다음 페이지 번호 | {{ question_list.next_page_number }} | | 페이지 리스트 루프 | {% for page_number in question_list.paginator.page_range %} | | 현재 페이지와 같은지 체크 | {% if page_number == question_list.number %} | 부트스트랩의 pagination 컴포넌트 이용 {% if page_number >= question_list.number|add:-5 and page_number <= question_list.number|add:5 %} - question_list.number (현재 페이지) 보다 5만큼 크거나 작은 값만 표시 [TIL | 240108] Django - 내비게이션바 Mon, 08 Jan 2024 06:00:49 GMT 내비게이션바 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트 부트스트랩 반응형 웹 기능을 통해 브라우저의 크기가 작아지면 내비게이션 바의 링크들은 햄버거 메뉴 버튼이 생성됨. 1. 내비게이션바 1) 모든 페이지에서 보여야 하므로 base.html에 추가 base.html {% load static %} Hello, pybo! Pybo 로그인 {% block content %} {% endblock %} 2) 부트스트랩 자바스크립트 파일 추가 부트스트랩 파일 중 bootstrap-5.1.3-dist\js\bootstrap.min.js 파일을 static 폴더로 복사 사용할 수 있도록 base.html의 태그 바로 위에 추가 (... 생략 ...) {% block content %} {% endblock %} 2. Include 템플릿의 특정 위치에 다른 템플릿을 삽입할 수 있는 태그 보통 템플릿에서 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용 1) templates/navbar.html 생성 Pybo 로그인 2) base.html 수정 {% include "navbar.html" %} 앞서 base.html 작성한 네비게이션바 부분을 한 줄로 삽입할 수 있음 (유지 보수에 용이) [TIL | 240107] Django - 폼(Form) Sun, 07 Jan 2024 10:46:32 GMT 폼 (Form) 1. 질문 등록 1) 버튼 생성 question_list.html (... 생략 ...) 질문 등록하기 {% endblock %} 2) URL 매핑 pybo/urls.py (... 생략 ...) urlpatterns = [ (... 생략 ...) path('question/create/', views.question_create, name='question_create'), ] 3) 폼(Form) 페이지 요청시 전달되는 파라미터들을 쉽게 관리하기 위해 사용하는 클래스 필수 파라미터의 값이 누락되지 않았는지, 파라미터의 형식은 적절한지 등을 검증할 목적으로 사용 HTML을 자동으로 생성하거나 폼에 연결된 모델을 이용하여 데이터를 저장하는 기능도 있음 pybo/forms.py from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: model = Question #사용할 모델 fields = ['subject', 'content'] # QuestionForm에서 사용할 Question 모델의 속성 모델 폼(forms.ModelForm) : 모델(Model)과 연결된 폼으로 폼을 저장하면 연결된 모델의 데이터를 저장할수 있는 폼 Meta 클래스 : 모델 폼 사용시 필수. 사용할 모델과 모델의 속성 작성 4) 뷰 함수 pybo/views.py from django.shortcuts import render, get_object_or_404, redirect from django.utils import timezone from .models import Question from .forms import QuestionForm (... 생략 ...) def question_create(request): form = QuestionForm() return render(request, 'pybo/question_form.html', {'form': form}) 5) 템플릿 templates/pybo/question_form.html {% extends 'base.html' %} {% block content %} 질문등록 {% csrf_token %} {{ form.as_p }} {% endblock %} {{ form.as_p }} : 폼에 정의한 subject, content 속성에 해당하는 HTML 코드를 자동으로 생성. form은 question_create 함수에서 전달한 QuestionForm의 객체 form 태그에 action 속성을 지정하지 않으면 현재 페이지의 URL이 디폴트 action으로 설정 ⇒ 동일한 템플릿을 여러 기능에서 함께 사용할 경우, form의 action 속성을 비워두는 트릭을 종종 사용 6) 답변 저장 ( GET, POST) pybo/views.py 수정 def question_create(request): if request.method == 'POST': # 저장하기 form = QuestionForm(request.POST) if form.is_valid(): # 폼이 유효하면 question = form.save(commit=False) # 임시 저장해 question 객체 리턴 question.create_date = timezone.now() # 실제 저장을 위해 작성일시 설정 question.save() # 데이터를 실제로 저장 return redirect('pybo:index') else: # 질문 등록하기 form = QuestionForm() context = {'form':form} return render(request, 'pybo/question_form.html', context) "질문 등록하기" 버튼을 클릭한 경우에는 /pybo/question/create/ 페이지가 GET 방식으로 요청되어 question_create 함수가 실행 ⇒ href 와 같이 링크 페이지를 통해 요청할 경우 무조건 GET 방식 사용 request.POST에는 화면에서 사용자가 입력한 내용들이 담겨있음 request.POST를 인수로 QuestionForm을 생성할 경우 → request.POST에 담긴 subject, content 값이 QuestionForm의 subject, content 속성에 자동으로 저장되어 객체가 생성 question = form.save(commit=False) → form에 저장된 데이터로 Question 데이터를 저장하기 위한 코드 commit=False → 임시 저장 ( DB 저장 X) 7) 폼 위젯 forms.py 수정 from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: model = Question #사용할 모델 fields = ['subject', 'content'] # QuestionForm에서 사용할 Question 모델의 속성 widgets = { 'subject' : forms.TextInput(attrs={'class': 'form-control'}), 'content' : forms.Textarea(attrs={'class': 'form-control', 'rows':10}), } {{ form.as_p }} → HTML 코드를 자동으로 생성해 부트스트랩을 적용할 수 없음 widgets 속성을 지정 → subject, content 입력 필드에 form-control과 같은 부트스트랩 클래스를 추가할 수 있음 8) 폼 레이블 forms.py from django import forms from pybo.models import Question class QuestionForm(forms.ModelForm): class Meta: model = Question fields = ['subject', 'content'] widgets = { 'subject': forms.TextInput(attrs={'class': 'form-control'}), 'content': forms.Textarea(attrs={'class': 'form-control', 'rows': 10}), } labels = { 'subject': '제목', 'content': '내용', } 9) 수동 폼 작성 {{ form.as_p }} → HTML을 빠르게 생성할 수는 있지만 디자인 측면에서 제한이 많음. question_form.html {% extends 'base.html' %} {% block content %} 질문등록 {% csrf_token %} {% if form.errors %} {% for field in form %} {% if field.errors %} {{ field.label }} {{ field.errors }} {% endif %} {% endfor %} {% endif %} 제목 내용 {{ form.content.value|default_if_none:'' }} {% endblock %} |default_if_none:' → form 데이터가 없을 경우 None 대신 공백으로 표시 2. 답변 등록 forms.py from django import forms from pybo.models import Question, Answer (... 생략 ...) class AnswerForm(forms.ModelForm): class Meta: model = Answer fields = ['content'] labels = { 'content': '답변내용', } views.py (... 생략 ...) from django.http import HttpResponseNotAllowed from .forms import QuestionForm, AnswerForm (... 생략 ...) def answer_create(request, question_id): """ pybo 답변등록 """ question = get_object_or_404(Question, pk=question_id) if request.method == "POST": form = AnswerForm(request.POST) if form.is_valid(): answer = form.save(commit=False) answer.create_date = timezone.now() answer.question = question answer.save() return redirect('pybo:detail', question_id=question.id) else: return HttpResponseNotAllowed('Only POST is possible.') context = {'question': question, 'form': form} return render(request, 'pybo/question_detail.html', context) question_detail.html {% extends 'base.html' %} {% block content %} (... 생략 ...) {% csrf_token %} {% if form.errors %} {% for field in form %} {% if field.errors %} {{ field.label }} {{ field.errors }} {% endif %} {% endfor %} {% endif %} {% endblock %} [TIL | 240106] Django - 부트스트랩, 템플릿 상속 Sat, 06 Jan 2024 07:47:39 GMT 부트스트랩(Bootstrap) 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트 웹 페이지를 꾸밀 수 있는 프레임워크 1. 부트스트랩 설치 1) https://getbootstrap.com/docs/5.1/getting-started/download/ 에서 파일 다운 2) 다운로드한 zip 파일 압축을 풀고 bootstrap.min.css 파일을 static 폴더로 copy 2. 부트스트랩 적용 1) 질문 목록에 부트스트랩 적용 question_list.html {% load static %} {% if question_list %} {% for question in question_list %} {% endfor %} {% else %} {% endif %} 번호 제목 작성일시 {{ forloop.counter }} {{ question.subject }} {{ question.create_date }} 질문이 없습니다. → 테이블 구조로 변경 {{ forloop.counter }} - for문의 현재 순서 class="container my-3", class="table", class="table-dark" - bootstrap 스타일에 정의된 클래스 [ 질문 목록 화면 ] 2) 질문 상세 템플릿 수정 부트스트랩 클래스 설명 card, card-body, card-text 부트스트랩 Card 컴포넌트 badge 부트스트랩 Badge 컴포넌트 form-control, form-label 부트스트랩 Form 컴포넌트 border-bottom 아래방향 테두리 선 my-3 상하 마진값 3 py-2 상하 패딩값 2 p-2 상하좌우 패딩값 2 d-flex justify-content-end 컴포넌트의 우측 정렬 bg-light 연회색 배경 text-dark 검은색 글씨 text-start 좌측 정렬 btn btn-primary 부트스트랩 버튼 컴포넌트 question_detail.html {% load static %} {{ question.subject }} {{ question.content }} {{ question.create_date }} {{question.answer_set.count}}개의 답변이 있습니다. {% for answer in question.answer_set.all %} {{ answer.content }} {{ answer.create_date }} {% endfor %} {% csrf_token %} 답변내용 [ 부트스트랩 적용 전 ] [ 질문 상세 - 부트스트랩 적용 후 ] 템플릿 상속 1. 표준 HTML 구조 Django Practice (... 생략 ...) html, head, body 엘리먼트가 있어야 함 CSS 파일 링크는 head 엘리먼트 안에 있어야 함 head 엘리먼트 안에는 meta, title 등이 포함되어야 함 2. 템플릿 상속 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법 base.html {% load static %} Hello, pybo! {% block content %} {% endblock %} {% block content %} , {% endblock %} → base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역 question_list.html {% extends 'base.html' %} {% block content %} (... 생략 ...) {% endblock %} question_detail.html {% extends 'base.html' %} {% block content %} {{ question.subject }} (... 생략 ...) {% endblock %} 1. 표준 HTML 구조 Django Practice (... 생략 ...) html, head, body 엘리먼트가 있어야 함 CSS 파일 링크는 head 엘리먼트 안에 있어야 함 head 엘리먼트 안에는 meta, title 등이 포함되어야 함 2. 템플릿 상속 기본 틀이 되는 템플릿을 먼저 작성하고 다른 템플릿에서 그 템플릿을 상속해 사용하는 방법 base.html {% load static %} Hello, pybo! {% block content %} {% endblock %} {% block content %} , {% endblock %} → base.html을 상속한 템플릿에서 개별적으로 구현해야 하는 영역 question_list.html {% extends 'base.html' %} {% block content %} (... 생략 ...) {% endblock %} question_detail.html {% extends 'base.html' %} {% block content %} {{ question.subject }} (... 생략 ...) {% endblock %} → 소스 코드를 보면 보여지는 것은 같지만 상속된 것을 확인할 수 있음 3. style.css 부트스트랩 적용으로 인해 style.css의 내용은 필요가 없어졌으므로 기존 내용을 모두 삭제 → 소스 코드를 보면 보여지는 것은 같지만 상속된 것을 확인할 수 있음 3. style.css 부트스트랩 적용으로 인해 style.css의 내용은 필요가 없어졌으므로 기존 내용을 모두 삭제 [TIL | 240105] Django - 데이터 저장, Static Fri, 05 Jan 2024 01:13:33 GMT 데이터 저장 1. 답변등록 폼 question_detail.html {{ question.subject }} {{ question.content }} {% csrf_token %} {% csrf_token %} - 보안 관련 항목으로 Post 요청시 form 태그에 csrf_token이 없으면 장고는 에러 2. URL 매핑 pybo/urls.py from django.urls import path from . import views app_name = 'pybo' urlpatterns = [ path('', views.index, name='index'), path('/', views.detail, name='detail'), path('answer/create/', views.answer_create, name='answer_create'), ] → 매핑 등록 3. 뷰 함수 pybo/views.py from django.shortcuts import render, get_object_or_404, redirect from django.utils import timezone from .models import Question (... 생략 ...) def answer_create(request, question_id): question = get_object_or_404(Question, pk=question_id) question.answer_set.create(content=request.POST.get('content'), create_date=timezone.now()) #답변 생성 (FK 이용) return redirect('pybo:detail', question_id=question.id) answer_create 함수 추가 redirect → 페이지 이동을 위한 함수 4. 답변 저장 5. 답변 조회 등록된 답변을 상세 화면에 표시 pybo/question_detail.html {{ question.subject }} {{ question.content }} {{ question.answer_set.count }}개의 답변이 있습니다. #답변의 개수 {% for answer in question.answer_set.all %} {{ answer.content }} {% endfor %} {% csrf_token %} 스태틱(Static) 화면에 디자인 적용하기위한 스타일시트 생성, 스타일시트는 static 디렉터리에 저장해야 함. 1. static directory static 폴더 생성(mkdir static) 후 config/settings.py에 등록 settings.py (... 생략 ...) STATIC_URL = 'static/' STATICFILES_DIRS = [ BASE_DIR / 'static', ] (... 생략 ...) 2. Stylesheet static/style.css textarea { width:100%; } input[type=submit] { margin-top:10px; } 3. 템플릿에 스타일 적용 question_detail.html {% load static %} (... 생략 ...) {% load static %} - 최상단에 삽입해 {% static ... %}와 같은 템플릿 태그를 사용할수 있도록 함. [TIL | 240103] Django - 관리자, 템플릿, URL별칭 Thu, 04 Jan 2024 14:19:04 GMT 장고 관리자 Super User 생성 python [manage.py](http://manage.py) createsuperuser 장고 관리자 화면 http://localhost:8000/admin/ 모델 관리 Question 모델을 관리자에 등록 pybo/admin.py from django.contrib import admin from .models import Question # Register your models here. admin.site.register(Question) - 관리자 화면에서 Question 모델 질문 생성, 조회, 수정, 삭제 가능 모델 검색 관리자 화면에서 subject로 질문 데이터 검색하기 *admin.py** (수정) from django.contrib import admin from .models import Question # Register your models here. class QuestionAdmin(admin.ModelAdmin): search_fields = ['subject'] admin.site.register(Question, QuestionAdmin) 조회와 템플릿 질문 목록과 질문 상세 기능 구현 1. 질문 목록 메인 페이지 수정 views.py from django.shortcuts import render from .models import Question #from django.http import HttpResponse # Create your views here. def index(request): question_list = Question.objects.order_by('-create_date') #order_by : 조회 결과 정렬, - : 역방향 정렬 context = {'question_list': question_list} return render(request, 'pybo/question_list.html', context) #render: 파이썬 데이터를 템플릿에 적용하여 HTML로 반환 템플릿 파일 - HTML파일과 비슷하지만 파이썬 데이터를 읽어서 사용할 수 있는 HTML 파일 템플릿 디렉터리 render 에서 사용한 pybo/question_list.html 파일 작성 전, 템플릿 저장 디렉터리 설정 settings.py (... 생략 ...) TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], # 추가 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] (... 생략 ...) 디렉터리 생성 mkdir templates 하나의 웹에서 여러 개의 앱을 사용할 수도 있을므로 경로를projects/mysite/pybo/templates이 아닌 /projects/mysite/templates/pybo 디렉터리를 사용 공용 템플릿 - projects/mysite/templates django_prac1/templates/pybo/question_list.html* {% if question_list %} {% for question in question_list %} {{ question.subject }} {% endfor %} {% else %} 질문이 없습니다. {% endif %} 템플릿 태그 1. 분기 {% if 조건문1 %} 조건문1에 해당되는 경우 {% elif 조건문2 %} 조건문2에 해당되는 경우 {% else %} 조건문1, 2에 모두 해당되지 않는 경우 {% endif %} 2. 반복 {% for item in list %} 순서: {{ forloop.counter }} {{ item }} {% endfor %} 3. 객체 출력 # 객체 출력 {{ 객체 }} # 객체 속성 출력 {{ 객체.속성 }} 2. 질문 상세 pybo/urls.py from django.urls import path from . import views urlpatterns = [ path('', views.index), path('/', views.detail), ] pybo/views.py # detail 함수 추가 def detail(request, question_id): question = Question.objects.get(id=question_id) context = {'question': question} return render(request, 'pybo/question_detail.html', context) question_detail.html {{ question.subject }} {{question.content}} 3. 오류 페이지 존재하지 않는 데이터 요청시 500 에러 발생 → 404 에러 페이지를 리턴하는 것이 좋음 views.py from django.shortcuts import render, get_object_or_404 from .models import Question #from django.http import HttpResponse # Create your views here. def index(request): question_list = Question.objects.order_by('-create_date') context = {'question_list': question_list} return render(request, 'pybo/question_list.html', context) def detail(request, question_id): question = get_object_or_404(Question, pk = question_id) context = {'question': question} return render(request, 'pybo/question_detail.html', context) 200 - 성공 500 - Internal Server Error 404 - Resource Not Found Error URL 별칭 1. URL 하드코딩 question_list.html {{ question.subject }} → url 리팩토링이 빈번해 구조 변경이 일일이 템플릿을 찾아가 수정해야 함 → 따라서 실제 링크 대신 링크 주소가 매핑되어 있는 별칭 사용하기 2. URL 별칭 URL 매핑에 name 속성 부여 pybo/urls.py from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('/', views.detail, name='detail'), ] question_list.html {% if question_list %} {% for question in question_list %} {{ question.subject }} {% endfor %} {% else %} 질문이 없습니다. {% endif %} 3. URL 네임 스페이스 하나의 프로젝트에 여러 앱을 사용할 때 동일한 URL별칭이 생길 수 있으므로 app_name 변수 지정 pybo/urls.py from django.urls import path from . import views app_name = 'pybo' urlpatterns = [ path('', views.index, name='index'), path('/', views.detail, name='detail'), ] question_list.html {% url 'pybo:detail' question.id %} [TIL | 231229] Django - 모델(Model) Tue, 02 Jan 2024 00:18:39 GMT 데이터 베이스 처리 python [manage.py](http://manage.py) migrate - 앱이 필요로 하는 데이터베이스 테이블 생성 models.py from django.db import models # Create your models here. class Question(models.Model): subject = models.CharField(max_length=200) content = models.TextField() create_date = models.DateTimeField() class Answer(models.Model): question = models.ForeignKey(Question, on_delete=models.CASCADE) content = models.TextField() create_date = models.DateTimeField() 테이블 생성 pybo 앱을 settings.py의 INSTALLED_APPS 항목에 추가 INSTALLED_APPS = [ 'pybo.apps.PyboConfig', #추가 -> pybo/app.py 에 있는 클래스 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] python [manage.py](http://mange.py) makemigrations - 모델 신규 생성, 변경시 migrate 보다 먼저 수행 python [mange.py](http://mange.py) migrate - 모델 속성 변경시 필요,메서드 추가시에는 필요 없음. python [manage.py](http://manage.py) sqlmigrate {앱이름} {작업번호} - 어떤 쿼리가 실행되는지 확인만 Shell로 모델 사용하기 python [manage.py](http://manage.py) shell from pybo.models import Question, Answer # 질문 생성 (Question) from django.utils import timezone q = Question(subject='pybo가 무엇인가요?', content='pybo에 대해서 알고 싶습니다.', create_date=timezone.now()) q.save() q.id # 질문 조회 Question.objects.all() # -- filter를 활용한 조회 : 조건에 해당되는 데이터 모두 return # -- get을 활용한 조회 : 유일 값. 조건 만족 데이터가 없을 시 오류 발생 Question.objects.filter(id=1) Question.objects.get(id=1) Question.objects.filter(subject__contains='장고') # 질문 수정 q = Question.objects.get(id=2) q.subject = 'Django Model Question' q.save() # 반드시 해야 반영됨. # 질문 삭제 q = Question.objects.get(id=1) q.delete() # 답변 작성 q = Question.objects.get(id=2) from django.utils import timezone a = Answer(question=q, content='네 자동으로 생성됩니다.', create_date=timezone.now()) a.save() # 답변 조회 a = Answer.objects.get(id=1) a.question #객체 a를 사용해 답변에 연결된 질문도 조회 q.answer_set.all() #질문에 연결된 답 가져오기 속성__contains= ' ' - 속성에 특정 값이 있는지. 연결모델명_set - 자주 쓰임, 연결된 것 가져오기 [TIL | 231228] Django - 기본세팅, 앱(App) Sat, 30 Dec 2023 13:54:37 GMT 공부 자료 : https://wikidocs.net/book/4223 점프 투 장고 Django 기본 세팅 [참고] Visual Studio Code에서 Django 프로젝트 기본 셋팅 하는 법(파일 생성부터 Git 설정까지) Django 설치 pip install django DRF 설치 pip install djangorestframework Django 프로젝트 생성 디렉토리 생성 후 django-admin startproject config . 서버 구동 python [manage.py](http://manage.py/) runserver Django 기본 요소 🔥 장고 개발 흐름 (1) 브라우저에서 로컬 서버로 http://localhost:8000/pybo 페이지를 요청 (2) urls.py 파일에서 /pybo URL 매핑을 확인하여 views.py 파일의 index 함수를 호출 (3) 호출한 결과를 브라우저에 반영 앱(App) 프로젝트에 기능 추가 django-admin startapp 앱이름 [ urls.py ] 페이지 요청이 발생하면 가장 먼저 호출되는 파일 from django.contrib import admin from django.urls import path from pybo import views # 추가 urlpatterns = [ path('admin/', admin.site.urls), path('앱이름/', views.index), # 이 부분 추가하기. view.py 파일의 index 함수 ] [ views.py ] index 함수 추가 from django.http import HttpResponse def index(request): return HttpResponse("안녕하세요 pybo에 오신것을 환영합니다.") URL 분리 1) urls.py 파일 수정 from django.contrib import admin from django.urls import path, include #수정 urlpatterns = [ path('admin/', admin.site.urls), path('pybo/', include('pybo.urls')), #수정 ] 2) pybo/urls.py 생성 from django.urls import path from . import views urlpatterns = [ path('', views.index), ] [GenAI] DreamGaussian (1)- CUDA, Pytorch 설치 Mon, 09 Oct 2023 07:59:41 GMT 🌜DreamGaussian🌜 https://dreamgaussian.github.io/ 최근에 나온 기술 (수정 중... ) 다음 유튜브 링크로 들어가면 Local에서 어떻게 사용하는지 나와있다. 따라서 하던 중 해당 에러가 발생했고 환경이 맞지 않아 발생하는 에러임을 알 수 있었다. Github를 보면 Tested on: Ubuntu 22 with torch 1.12 & CUDA 11.6 on a V100. Windows 10 with torch 2.1 & CUDA 12.1 on a 3070. 이렇게 되어 있고, 현재 노트북이 Windows10에 3070이기 때문에 torch 2.1, CUDA 12.1 을 설치했다. CUDA 12.1 설치 🔧 로컬에 CUDA 12.1 설치 1. 내 로컬 환경 확인 기존에 11.7 버전이 설치되어 있다. 2. CUDA Toolkit 12.1 설치 https://developer.nvidia.com/cuda-toolkit-archive 2. cuDNN 설치 https://developer.nvidia.com/rdp/cudnn-download CUDA 12.1을 설치했기 때문에 위에서 보는 것처럼 이에 맞추어 v8.9.5 윈도우 버전으로 다운 받았다. 그리고 위의 CUDA 설치 경로에 bin, include, lib에 맞게 다운받은 파일들을 넣어주면 끝. cmd에서 nvidia-smi 를 입력하면 다음과 같이 CUDA Version이 12.1이 된 것을 확인할 수 있다:) 2. Torch 2.1 설치 🔧 https://pytorch.org/get-started/locally/ 위의 링크에서 본인 환경에 맞추어 선택 후, Run this Command에 나와있는 명령어로 설치할 수 있다. pip 설치할 경우 pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu121 conda 가상환경에 설치할 경우 conda install pytorch torchvision torchaudio pytorch-cuda=12.1 -c pytorch -c nvidia Pytorch 설치 확인 [cmd] [conda 가상환경] => 모두 정상적으로 설치된 것을 확인할 수 있다 😄 [프로그래머스]코딩테스트 연습 | 문자열 내 마음대로 정렬하기 Sat, 26 Aug 2023 12:52:02 GMT 문제 | 문자열 내 마음대로 정렬하기 https://school.programmers.co.kr/learn/courses/30/lessons/12915 문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 제한 조건 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 입출력 예시 [입출력 예 1] "sun", "bed", "car"의 1번째 인덱스 값은 각각 "u", "e", "a" 입니다. 이를 기준으로 strings를 정렬하면 ["car", "bed", "sun"] 입니다. [입출력 예 2] "abce"와 "abcd", "cdx"의 2번째 인덱스 값은 "c", "c", "x"입니다. 따라서 정렬 후에는 "cdx"가 가장 뒤에 위치합니다. "abce"와 "abcd"는 사전순으로 정렬하면 "abcd"가 우선하므로, 답은 ["abcd", "abce", "cdx"] 입니다. 나의 풀이 **[시도 1] ** def solution(strings, n): answer = [] # 1. 위치 바꾸기 str_list = [list(word) for word in strings] for w in str_list: w.insert(0, w.pop(n)) # 2. 정렬하기 str_list.sort() # 3. 제자리 돌려놓기 for w in str_list: w.insert(n, w.pop(0)) answer.append(''.join(w)) return answer 나는 크게 3단계로 나누어서 풀었다. 각 단어의 n번째 인덱스를 기준으로 정렬해야 하므로 각 리스트 안의 문자열을 리스트로 만든 후 .insert()와 pop()을 이용해 n번째 인덱스에 있는 문자열을 가장 앞(0번 인덱스)으로 가져온다. 바뀐 문자열 리스트를 기준으로 정렬을 한다. 단어의 순서를 정렬 후 원래의 단어로 바꾸기 위해 다시 .insert()와 pop()을 사용하고 다시 문자열로 => 처음 풀 때는 n번 인덱스의 문자열만 가장 앞으로 가져와야 하는데, 0번 인덱스와 n번 인덱스 문자열을 서로 바뀌게 해서 정렬이 제대로 되지 않아 조금 헤맸다...🥲 다른 풀이 def strange_sort(strings, n): return sorted(strings, key=lambda x: x[n]) [특정 키를 기준으로 정렬] sort(), sorted() 에 있는 key 변수를 사용한다. key 인자에 lambda 함수를 넘겨 각 요소의 함수 반환값에 해당하는 값을 비교해 정렬되도록 설정한다. => 지금까지 쓴 적이 없어서 모르고 있었는데 당황스럽게도 아주 간단한 방법이 있었다😭 [프로그래머스]코딩테스트 연습 | 3진법 뒤집기 Tue, 22 Aug 2023 02:10:27 GMT 📜문제 | 3진법 뒤집기 https://school.programmers.co.kr/learn/courses/30/lessons/68935 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요. 입출력 예시 나의 풀이 def solution(n): n3 = "" while n // 3 != 0: n3 += str(n % 3) n //= 3 n3 += str(n) answer = 0 for i in range(len(n3)): answer += int(n3[i]) * (3**(len(n3)-1-i)) return answer 종종 쓰이는 8진법이나 16진법이 아닌 3진법의 변환은 익숙하지 않아 10진법을 2진법으로 만드는 식으로 바꿨다. while문과 for문을 모두 사용해 그닥 깔끔하지는 않은 코드 같다. while문을 사용한 결과는 문자열에 담기는데 순서가 이미 뒤집어진 3진법으로 나온다. 그리고 for문을 통해 3진법으로 만든 문자열을 10진법 숫자로 변환했다. 다른 풀이 def solution(n): tmp = '' while n: tmp += str(n % 3) n = n // 3 answer = int(tmp, 3) return answer -> while문을 사용해 빈 문자열에 값을 추가하는 부분은 비슷했고, (차이가 있다면 위의 풀이는 while문의 조건을 n으로 해서 n의 값이 0이되면 False가 되도록했다.) int(n, 3)을 사용하면 간단하게 3진법의 수를 10진법으로 변환할 수 있었다😂 [ n진수 -> 10진수 변환 ] : int(string, base) 그 외의 다른 풀이도 찾아보았는데 while문과 for문을 둘 다 쓰는 사람이 많았다. [Error] OMP: Error #15: Initializing libiomp5md.dll, but found libiomp5md.dll already initialized. Thu, 17 Aug 2023 05:25:49 GMT 😥 에러 상황 YOLOv8를 사용해 카메라로 영상을 입력받아 Tracking 하는 실습 중 에러 발생. 처음에는 modulenotfounderror: no module named 'lap' 해당 에러가 발생했으나 가상 환경 설정시 파이썬 버전을 3.11로 설정해서 생긴 오류로 3.9로 다시 세팅하니 해결 되었다. [코드] import cv2 from ultralytics import YOLO model = YOLO('yolov8n.pt') cap = cv2.VideoCapture(0) while cap.isOpened(): ret, frame = cap.read() if ret : results = model.track(frame, persist=True) frame = results[0].plot() cv2.imshow('tracking', frame) if cv2.waitKey(1) & 0xFF == ord('q'): break cap.release() 실행 중 이번에는 OMP: Error #15: Initializing libiomp5md.dll, but found libiomp5md.dll already initialized. OMP: Hint This means that multiple copies of the OpenMP runtime have been linked into the program. That is dangerous, since it can degrade performance or cause incorrect results. The best thing to do is to ensure that only a single OpenMP runtime is linked into the process, e.g. by avoiding static linking of the OpenMP runtime in any library. As an unsafe, unsupported, undocumented workaround you can set the environment variable KMP_DUPLICATE_LIB_OK=TRUE to allow the program to continue to execute, but that may cause crashes or silently produce incorrect results. For more information, please see http://www.intel.com/software/products/support/. 이러한 에러가 발생했다. 해결 설치된 라이브러리들 간에 충돌이 생겨 발생하는 에러이다. 아래의 코드를 추가한 뒤 실행하면 문제 없이 실행되는 것을 확인할 수 있다. import os os.environ['KMP_DUPLICATE_LIB_OK']='True' [프로그래머스]코딩테스트 기초 트레이닝 | 0떼기 Sun, 16 Jul 2023 09:48:05 GMT 문제 정수로 이루어진 문자열 n_str이 주어질 때, n_str의 가장 왼쪽에 처음으로 등장하는 0들을 뗀 문자열을 return하도록 solution 함수를 완성해주세요. 제한 사항 2 ≤ n_str ≤ 10 n_str이 "0"으로만 이루어진 경우는 없습니다. 입출력 예시 풀이 방법 방법 1 def solution(n_str): return str(int(n_str)) 생각보다 엄청 간단하게 풀 수 있었는데 복잡하게 생각하느라 for문, while문까지 생각했었다...😢 문자열을 int()를 사용해 정수형으로 바꾸면 앞에 0들이 사라진다. 그리고 다시 str()을 써서 문자열로 return하면 된다. 방법 2 def solution(n_str): return n_str.lstrip('0') lstrip()은 왼쪽 공백만 제거한다고 생각했는데 인자값으로 문자를 넣으면 해당 문자를 string 왼쪽에서 제거할 수 있다. [백준] 1920 수 찾기 Mon, 10 Jul 2023 05:54:36 GMT 문제 | 수 찾기 N개의 정수 A[1], A[2], …, A[N]이 주어져 있을 때, 이 안에 X라는 정수가 존재하는지 알아내는 프로그램을 작성하시오. 입력 첫째 줄에 자연수 N(1 ≤ N ≤ 100,000)이 주어진다. 다음 줄에는 N개의 정수 A[1], A[2], …, A[N]이 주어진다. 다음 줄에는 M(1 ≤ M ≤ 100,000)이 주어진다. 다음 줄에는 M개의 수들이 주어지는데, 이 수들이 A안에 존재하는지 알아내면 된다. 모든 정수의 범위는 -231 보다 크거나 같고 231보다 작다. 출력 M개의 줄에 답을 출력한다. 존재하면 1을, 존재하지 않으면 0을 출력한다. 제출 코드 시도 1 a = int(input()) n_list = map(int, input().split()) b = int(input()) m_list = map(int, input().split()) for i in range(b): if m_list[i] in n_list: print(1) else: print(0) -> 시간 초과 시도 2 int(input()) n_list = set(map(int, input().split())) int(input()) m_list = list(map(int, input().split())) for i in range(len(m_list)): print(1) if m_list[i] in n_list else print(0)

속성명	설명
username	사용자이름
password1	비밀번호1
password2	비밀번호2 (비밀번호1을 제대로 입력했는지 대조하기 위한 값)

공식	코드
전체건수	question_list.paginator.count
시작인덱스	question_list.start_index
현재인덱스	forloop.counter0

번호	제목	작성일시
{{ forloop.counter }}	{{ question.subject }}	{{ question.create_date }}
질문이 없습니다.

부트스트랩 클래스	설명
card, card-body, card-text	부트스트랩 Card 컴포넌트
badge	부트스트랩 Badge 컴포넌트
form-control, form-label	부트스트랩 Form 컴포넌트
border-bottom	아래방향 테두리 선
my-3	상하 마진값 3
py-2	상하 패딩값 2
p-2	상하좌우 패딩값 2
d-flex justify-content-end	컴포넌트의 우측 정렬
bg-light	연회색 배경
text-dark	검은색 글씨
text-start	좌측 정렬
btn btn-primary	부트스트랩 버튼 컴포넌트

haeng_9.log

[TIL | 240222] React - UI 구성하기

Describing the UI

1. Your First Component

Component

1) Define Component

2) How to build a Component

3) Using a component

Amazing scientists

4) What the browser sees (브라우저에 표시되는 내용)

5) Nesting and organizing componets (컴포넌트 중첩 및 구성)

Summary

2. Importing and Exporting Componets

1) The root component file

Amazing scientists

2) Exporting and importing a component

Amazing scientists

3) Exporting and importing multiple components from the same file

Summary

3. Writing Markup with JSX

JSX

1) JSX: Putting markup into JavaScript

2) Converting HTML to JSX / The Rules of JSX

3) JSX 변환기 사용

Summary

4. JavaScript in JSX with Curly Braces

1) Passing strings with quotes(””, ‘’)

2) Using curly braces / 중괄호 사용 위치

{name}'s To Do List

3) Using “double curlies”: CSS and other objects in JSX

4) More fun with JavaScript objects and curly braces

{person.name}'s Todos

Summary

5. Passing Props to a Component

1) Props

2) Passing props to a component/ Step

3) Props - default value

4) JSX spread syntax

5) component 중첩

Summary

6. Conditional Rendering

1) If / else 를 사용한 조건부 렌더링

2) Conditional(ternary) operator (? : ) - 삼항연산자

3) 논리 AND 연산자 (&&)

Summary

7. Rendering Lists

1) Rendering data from arrays

2) Filtering arrays of items

3) About key

Summary

8. Keeping Components Pure

Pure function

1) Purity: Components as formulas

2) Side Effects: (un)intended consequences

Tea cup for guest #{guest}

Tea cup for guest #{guest}

3) Local mutation: Your component’s little secret

Tea cup for guest #{guest}

4) Where you can cause side effects

Summary

9. Understanding Your UI as a Tree

The Render Tree (렌더링할 때 사용하는 트리 개념)

The Module Dependency Tree

Summary

[TIL | 240131] JavaScript - 코딩앙마 왕 초보 자바스크립트

Javascript

1. 변수

2. 자료형

3. alert, prompt, confirm

4. 형변환 (명시적)

5. 기본 연산자

6. 비교 연산자, 조건문 (if, else)

7. 논리 연산자 (AND, OR, NOT)

8. 반복문 (for, while, do while)

9. switch문

10. 함수(function)의 기초

11. 함수 표현식, 화살표 함수(arrow function)

12. 객체(Object)

13. 객체(Object) - method, this

14. 배열(Array)

`{name}'s To Do List`

2) Conditional(ternary) operator (`? :` ) - 삼항연산자

3) 논리 AND 연산자 (`&&`)

3) About `key`

4) **Where you can cause side effects**