pingu-.log

python 프로젝트 생성

Wed, 09 Nov 2022 10:07:28 GMT

$ django-admin startproject [생성될이름]

project/ ㄴmanage.py ㄴproject/ ㄴinit.py ㄴsettings.py ㄴurls.py ㄴasgi.py ㄴwsgi.py

manage.py: Django 프로젝트와 다양한 방법으로 상호작용 하는 커맨드라인의 유틸리티 이다.
project/ 디렉토리 내부에는 프로젝트를 위한 실제 Python 패키지들이 저장된다. 이 디렉토리 내의 이름을 이용하여, (project.urls 와 같은 식으로) 프로젝트의 어디서나 Python 패키지들을 임포트할 수 있다.
project/init.py: Python으로 하여금 이 디렉토리를 패키지처럼 다루라고 알려주는 용도의 단순한 빈 파일이다.
project/settings.py: 현재 Django 프로젝트의 환경 및 구성을 저장합니다. Django settings에서 환경 설정이 어떻게 동작하는지 확인할 수 있다.
project/urls.py: 현재 Django project 의 URL 선언을 저장합니다. Django 로 작성된 사이트의 “목차” 라고 할 수 있다.
project/asgi.py: 현재 프로젝트를 서비스하기 위한 ASGI-호환 웹 서버의 진입점이다.
project/wsgi.py: 현재 프로젝트를 서비스하기 위한 WSGI 호환 웹 서버의 진입점이다.

$ python manage.py runserver

$ python manage.py startapp polls

polls/ ㄴinit.py ㄴadmin.py ㄴapps.py ㄴmigrations/ ㄴinit.py ㄴmodels.py ㄴtests.py ㄴviews.py

polls/views.py

from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

뷰를 호출하려면 이와 연결된 URL 이 있어야 하는데, 이를 위해 URLconf가 사용된다. polls 디렉토리에서 URLconf를 생성하려면, urls.py라는 파일을 생성해야 한다.

polls/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

project/urls.py

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]

include()를 사용하면 URL의 그 시점까지 일치하는 부분을 잘라내고, 남은 문자열 부분을 후속 처리를 위해 include 된 URLconf로 전달한다.

path('route',view,[keyword],[name])

모의면접

Mon, 05 Sep 2022 00:25:13 GMT

리액트의 내부 작동 원리를 재조정(Reconciliation) 개념과 함께 설명하세요.

실제로 DOM을 제어하지 않고 중간에 가상의 virtual DOM을 두어 virtual DOM이 변경이 될 때, 실제 DOM을 변경하도록 설계한다. 이 작업을 Reconciliation (virtual DOM과 DOM을 비교해 DOM을 갱신하는 작업) 이라고 한다 이 때 virtual DOM을 갱신하는 방법은 setState() 메서드를 호출하는 방법과, Redux의 경우처럼 store가 변하면 다시 최상위 컴포넌트의 render() 함수를 호출해서 갱신하는 2가지 방법이 있다

virtual DOM이 무엇인가요? virtual DOM이 좋은 이유에 대해서 설명하세요.

Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 한다 virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아진다 Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달한다

리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.

componentDidMount() 는 최초로 컴포넌트 객체가 생성될 때 한 번 수행 componentDidUpdate() 는 컴포넌트의 속성 값 또는 상태값이 변경되면 호출 componentWillUnmount() 는 이 컴포넌트가 소멸될 때 호출 render() 는 초기에 화면에 그려줄 때, 그리고 업데이트가 될 때 호출

리액트 라우터같은 Client Side Routing 에 대해서 설명하세요.

웹 페이지의 렌더링이 클라이언트 (브라우저) 측에서 일어나는 것이다 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠르다는 장점이 있지만, SEO(검색최적화) 사용에는 SSR 방식에 비해 활용도가 낮다는 단점이 있다 보안 관련해서는 쿠키에 사용자 정보를 저장해야 해서 위험 요소가 될 수 있다

firebase CRUD

Thu, 01 Sep 2022 10:54:14 GMT

//firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    ...
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app)
export const auth = getAuth()

Create

collection 추가 ( setDoc, doc)

하위 문서 이름이 비어있으면 오류남
collection and 하위 문서 이름이 중복될때는 덮어씌어짐

//app.js
import { db } from './firebase'
import { doc, setDoc } from "firebase/firestore";

    await setDoc(doc(db, "collection 이름","하위 문서 이름"), {
      name: "Los Angele",
      state: "C",
      country: "US"
    });

    await setDoc(doc(db, "cities","LA"), {
      name: "Los Angele",
      state: "C",
      country: "US"
    });

하위 문서 추가 ( addDoc, collection )

하위문서 이름이 상관없을때 사용

//app.js
import { db } from './firebase'
import { addDoc, collection } from "firebase/firestore";

    await addDoc(collection(db, "cities"), {
      name: "Los Angele",
      state: "C",
      country: "US"
    });

Read

collection에 있는 값들을 전부 불러온다 ( getDocs, collection )

forEach를 써서 자료를 하나하나 불러와야 한다

import { db } from './firebase'
import { getDocs, collection } from "firebase/firestore";
      let list = [];
      try {
        const querySnapshot = await getDocs(collection(db, "users"));
        querySnapshot.forEach((doc) => {
          list.push({ id: doc.id, ...doc.data() });
        });
        setData(list);

Update

덮어씌우지 않고 특정값만 변경 ( updateDoc, doc )

import { db } from './firebase'
import { doc, updateDoc } from "firebase/firestore";

    await updateDoc(doc(db, "cities", "LA"), {
      name: "Busan",
    });

Delete

특정 id값을 삭제한다

import { db } from './firebase'
import { doc, deleteDoc } from "firebase/firestore";

 await deleteDoc(doc(db, "cities", id));

모의면접 1주차

Sun, 28 Aug 2022 14:23:29 GMT

Q. 일반적으로 CSS 태그를 태그 사이에 위치시키는 이유는?

HTML을 파싱하는 중간에 를 만나면 파싱은 병렬적으로 수행되어 HTML 파싱과 동시에 진행된다.
따라서 태그 안에 CSS 를 삽입하면, HTML과 CSS가 병렬적으로 파싱되어 CSSOM을 더 빠르게 완성할 수 있다. 따라서 사이트에 렌더링 되는 시간도 빨라진다.
를 HTML 중간이나 마지막에 삽입하면, 이전의 요소들을 렌더링하다가 를 만난 후에 CSSOM을 생성하고, 여기에 맞춰 다시 렌더링을 한다. 이렇게 되면 첫번째 렌더링을 할 때 사용자에게 스타일되지 않은 HTML 요소를 보여주게 되어 UX에 좋지 않고, 두번째 렌더링을 할 때 HTML 요소들이 재렌더링 되기 때문에 낭비가 심하다. 또한 의 삽입이 늦어진 만큼 CSSOM 생성도 늦춰져 렌더링 완료 시간이 늦춰진다.

Q. JS