본문 바로가기

전체 글

(134)
고양이 사진 검색 사이트1 :: 개요, Responsive web 순수 HTML, CSS, JS를 이용해서 웹 프론트앤드 작업을 하는 과제이다. Vanila JS로 하는 이 작업은 무언가 React와 많이 닮아있다. JS의 객체지향적 특성을 활용해 컴포넌트를 구성한다. 생성된 하나의 객체가 컴포넌트가 된다. 하나의 Class를 하나의 파일로 관리한다. 객체들은 HTML/DOM이 그렇듯 트리 구조로 관리된다. 하나의 Class에서 생성자로 자식 컴포넌트의 생성자를 호출하는 방식으로 생성체인을 관리한다. 생성된 자식 컴포넌트는 부모 컴포넌트의 상태로 관리된다. Class의 멤버변수는 해당 컴포넌트가 관리하는 상태가 된다. 상태는 지역적으로 관리되지만, 자식 컴포넌트로 전해줄수도 있다. 따라서 전역적으로 관리해야하는 데이터는 루트 컴포넌트에서 관리한다. Responsive ..
View port 뷰포트란 현재 화면에 보여지고 있는 영역을 의미한다. 기기별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 뷰포트는 랜더링된 페이지와 다르다. 랜더링된 페이지는 뷰포트를 넘어서 스크롤을 통해 접근가능한 형태로 되는 것이 일반적이다. 모바일과 같이 좁은 스크린을 가진 기기는 페이지를 virtual window나 veiwport를 통해 랜더링한다. 이때 window나 viewport의 크기는 모바일 기기의 화면보다 넓기 때문에 우리는 레이아웃이 무너진 콘텐츠를 보게 된다. 이러한 문제를 해결하기 위해서 Apple은 처음 meta테그를 이용해 viewport의 크기를 조절하는 방법을 제시했다. 해당 방식은 아직 어느 웹 표준으로도..
딥러닝 01::퍼셉트론에서 손실함수 까지 기계가 알고리즘을 짠다 = 머신러닝 데이터 + 출력 => 과정 지도학습: 데이터 + 라벨 => 판별 가능 비지도학습: 정답이 없다. 라벨이 없다. 유사도 클러스터링(군집화) -> 추천 강화학습: 정답에 대한 지도는 없다. 다만 결과가 0인지 1인지 예측모델 예측 모델은 수식으로 나타낼 수 있다. 선형으로 표현한다면 아래와 같다. y = w1*x1 + w2*x2 + ... + b 인풋(x1, x2, ...)에 가중치(w1, w2, ...)를 곱하고 편향(b)를 더해 아웃풋을 도출할 수 있고 이 아웃풋이 예측 모델의 예측 값다. 학습 학습을 위해서는 우선 실제(input, output)으로 구성된 데이터셋이 필요하다. 앞서 인풋으로 아웃풋을 도출했듯이, 실제 데이터를 모델에 넣으면 예측 값이 나온다. 실제 ..
2022-03-20::DP Dynamic Programming DP는 분할 정복의 한 형태이다. 분할정복 방식은 다음과 같은 형태로 진행된다. DP문제가 판별도 어렵고 그 방식이 다양하기 때문에 상당한 창의력이 요구되는 파트라고 생각한다. 특정 단계에 영향을 끼치는 단계가 무엇인지, 단계간 관계는 어떠한 형태인지 파악하는 것이 중요하다. 1. 한 번에 해결하기 힘든 문제를 잘게 자른다. 2. 잘게 자른 문제의 해답을 이용해 더 큰 문제를 해결한다. 3. 최종 답을 구한다. DP위와 같은 형태에 중간 값들을 저장해 중복되는 계산을 생략한다는 특징이 있다. DP문제 중 가장 처음 만나는 것 중 하나가 바로 피보나찌 수열 구하기이다. 피보니찌 수열의 N번째 요소를 구할 때, 메모이제이션을 사용해 시간효율이 더 좋은 알고리즘을 만들 수..
Docker를 이용해 AWS EB에 Webapp 배포하기 Docker를 통해 webapp을 배포하는 방법을 알아보자 Static Sites 가장 먼저 정적 사이트를 실행시키는 방법을 알아볼 것이다. 도커 허브로부터 이미지를 꺼낸 다음 컨테이너를 실행시켜 웹 서버를 실행시키는 것이 얼마나 쉬운지 보자. 아래 링크의 레지스트리에서 static-site 이미지를 실행시켜 보자. https://hub.docker.com/r/prakhar1989/static-site/ Docker Hub hub.docker.com 먼저 도커 이미지를 다음 명령어를 통해 remote registry에서 가져온다. $ docker pull prakhar1989/static-site 다음으로 해당 이미지를 실행시킨다. --rm 옵션을 통해 종료 이후 해당 컨테이너를 삭제한다. $ docke..
2022-03-02::DRF Class기반 view Rewriting our API using class-based views 앞서 작성한 함수 기반의 뷰를 클래스 기반 뷰로 변경한 모습이다. views.py from snippets.models import Snippet from snippets.serializers import SnippetSerializer from django.http import Http404 from rest_framework.views import APIView from rest_framework.response import Response from rest_framework import status class SnippetList(APIView): """ List all snippets, or create a new snip..
2022-03-02::DRF Requests and Responses Request Objects DRF는 기존 HttpRequest에서 발전된 형태인 Request객체를 제공한다. 이 새로운 객체는 HttpRequest객체 보다 더 유연한 request 파싱 기능을 제공한다. Request객체의 가장 중요한 기능 중 하나는 request.data 속성이다. request.POST가 POST 요청에만 유효한 반면 request.data는 PUT, PATCH 메서드에도 유효하다. Response Objects DRF는 TemplateResponse의 한 종류인 Response객체도 제공한다. Status Codes HTTP status code를 숫자로 일일히 입력하는 것은 직관적이지 못하다. DRF의 status 모듈 안에는 HTTP_400_BAD_REQUEST와 같은 직..
2022-03-01::DRF Serialization What is Serialization? 직렬화는 데이터를 관리할 때, 한 포맷에서 다른 포맷으로 데이터를 재구성하는 것을 의미한다. 오브젝트를 직렬화하는 것을 오브젝트를 마샬링 한다고도 한다. Rest API에서 서버와 클라이언트는 JSON 형식으로 데이터를 주고받는다. 이때, 서버에서 해당 데이터를 처리하기 위해서는 객체를 JSON형태(혹은 그 반대로)로 변경해 주어야 한다. 이 경우 파이썬 객체를 JSON 객체로 변환하는 것을 serialization 반대로 JSON 객체를 파이썬 객체로 변환하는 것을 deserialization이라고 한다. REST API에서 직렬화는 필수적이라고 할 수 있다. Django Rest Framework를 이용한 serialization Django로 Rest API..