본문 바로가기

웹개발

(8)
REACT: JavaScript - 01 Why JS?js는 큰 커뮤니티를 가지고 있다.웹, 어플리케이션 등 개발 가능JS, HTML, CSSHTML: 요소들의 배치, 내용, 기본 구조 설정CSS: 요소들의 색상, 크기등 스타일 설정JS: 요소들의 동작, 기능 설정How it works?웹 브라우저에 탑재된 JS engine으로 실행된다. (개발자도구: f11 혹은 option+command+i)VScode 등의 편집기로 작성할 수 있음script 태그로 js 파일을 불러오는 index.html을 브라우저로 열면 실행해 볼 수 있다. (vscode liveserver expansion 활용)JS기초(새로 알게된 것만 정리)1. null 병합 연산자undefined, null이 아닌 것만 걸러냄let a;let b = 10;console.log(..
Django QnA-50 07.31 0-1. Django가 무엇인지 설명하세요. Django는 python 기반 풀-스택 웹 프레임워크로, '마감기한이 있는 완벽주의자를 위한 웹 프레임워크'이라는 모토를 가진 웹 프레임워크입니다. fully-loaded framework로서 다양한 기능들을 제공하여 빠르게 개발이 가능합니다. 0-2. Django를 백엔드 스택으로 선정한 이유는 무엇입니까? 웹 개발을 입문하는 입장에서 Django와 같이 기본 기능이 다양하게 제공되는 프레임워크를 사용해 기본기를 익히고 빠르게 생산성을 갖출 수 있기 때문입니다. 1. Django에는 어떤 장점이 있습니까? Django는 파이썬기반 웹 프레임워크이므로 파이썬에서 제공되는 강력한 라이브러리들, 특히 데이터처리나 시각화를 위한 라이브러리를 사용하여..
DRF + ML 1일차 DRF와 머신러닝 모델을 이용한 웹 서비스 개발 토이 프로젝트를 시작하였다.(23.05.22) 1일차에는 기획 및 SA 작성, 개발환경 구축에 사용하였다. SA 주제명: angry cat 인식된 사람 얼굴 옆에 화가나 때릴려고 하는 고양이 이미지를 넣어주고 해당 이미지를 공유하는 커뮤니티 서비스 구현 방법: 기본적인 DRF구현: 지난 토이 프로젝트 때 진행한API 응용 및 수정 + 구글 소셜로그인 구현 이미지 프로세싱+ 얼굴인식용 CV라이브러리 이용: 글 작성시 이미지 업로드 - 업로드 된 이미지에 대해 화난 고양이 추가하기 기능 화난 고양이 추가: 사물인식(사람 얼굴의 location) → 얼굴의 위치 주변에 고양이 이미지 합성 GPT 이용: 고양이가 화난 이유에 대한 설명을 GPT를 이용해 생성 역할..
ERD 강의 정리(04.27) ERD Entity Relationship Diagram 고연차, 숙련개발자인지 판단하는 척도 하지만 일단 ERD를 잘 그려서 프로젝트를 어필하는 자리에 넣으면 좋은 무기가 될 수 있다. 그리고 언젠가는 해야하니 배우는 게 이득이다. 0. 잘 작성하는 법 연습 많이 하기 추상화,논리,비식별관계 등의 단어에 겁먹지 말라: 이론과 실제는 다르다. 자신이 관심있는 서비스나 영역의 ERD를 그려보면서 연습 1. PK/FK 프라이머리-키는 중복된 값을 가지지 않는다.(unique) 따라서 한 레코드를 대표하여 식별할 수 있는 값을 가진 필드이다. 대개 정수형태며, 번호 혹은 유일한 값을 지정함. 외래키는 다른 테이블의 PK를 참조하는 필드이다. 즉 타 테이블의 PK 데이터를 확보한다. PK/FK를 활용하지 않으면..
장고와 MVT(23.04.25) 장고의 캐치프레이즈 마감을 맞추고 싶은 완벽주의자를 위하여 장고는 2005년 부터 시작된 파이썬 오픈소스 웹 프레임워크/풀 스택 프레임 워크로, 처음에는 뉴스 피드를 관리하기 위한 컨텐츠 관리 시스템으로부터 발전하였다. 장고의 장점 fully loaded. 웹개발에 필요한 다양한 도구들을 대부분 내장하고 있다. - 인증, 컨텐츠 관리, 사이트 맵, RSS 피드, 메일 보내기, form 등등 Admin(backoffice) - 재고변경, 계정복구/탈퇴, 통계 등을 위한 관리자 사이트가 이미 만들어져 있고 관련 API도 만들기 좋다. 많은 기능을 보유한 풀스택 프레임워크 강력한 ORM, 많은 사용자/커뮤니티 빠른 개발과 손쉬운 보안 MVT 패턴 JS의 MVC패턴과 유사하지만 이름이 다르다. Models: 데..
세션인증과 토큰인증 백엔드 개발자의 필수덕목 인증(가입,로그인,...) DB Request에 대한 Response처리: API개발. 예외처리 배포 세션인증이 무엇인가? django_session에 유저 정보와 세션 정보를 저장. 사용자 인증정보 서버에 전달. 인증처리 후 세션 생성 사용자는 쿠키로 세션 id를 받아온다. 이후 요청에 항상 세션 id 이용 전달받은 세선 id+저장중인 세션정보 이용해 인증 만료시 1부터 다시. 세션 인증의 문제 - 서버에서 정보를 관리한다. 매요청마다 인증을 위해 DB에 쿼리해야하고 DB가 두개 이상, 서버가 두개 이상인 경우 사용이 힘들다. 토큰 인증 DB에 저장하지 않아 자원이 절약된다. SECRET_KEY로 암호화된 토큰을 전달하면, 사용자는 토큰을 이용해 인증한다. ex - JWT(JS..
DRF 1강 - HTTP와 웹 동작 방식 0. 프론트와 백엔드의 분리 현재까지는 장고 템플릿을 이용해 프론트와 백의 구분이 모호하게 진행하였다. 템플릿에서 다루는 데이터는 모두 views.py에서 받아오는 데이터였기 때문이다. 서버에 요청을 보낸 뒤 페이지 자체를 새로고침하여 html, css, js등을 모두 다시 렌더링해야하는 불편함이 존재한다. Ajax(비동기 자바스크립트와 XML)의 등장으로 전체를 다시 렌더링할 필요없이 일부만 다시 업데이트 요청할 수 있게되었다. 앵귤러, 리액트 등 프론트에도 이러한 방식과 함께 사용할 수 있는 유용한 도구가 발전하며 점차 프론트와 백의 분리가 일어나게 된다. 그러므로 이제부터 DRF를 이용해 백엔드에서 API와 DB 등을 구성하는 것에 집중한다. 1. 포스트맨 사용해보기 포스트맨을 통해 프론트 구현 없..
ERD 설계 특강 내용 ERD는 Entity Relationship Diagram의 약자로, 데이터베이스에서 개체들의 관계를 나타내는 다이어그램을 의미한다. ERD를 이용한 데이터 베이스 설계는 다음과 같은 절차를 따라 진행한다. 1. 요구사항 파악하기 기술적인 요구사항, 비 기술적인 요구사항 등을 파악해서 표시/저장할 정보를 파악해야한다. 이때 와이어프레임을 구성 후 진행하면 좋다. 예를 들어 게시판을 만든다면 작성자, 제목, 태그, 좋아요, 작성/수정일 등의 데이터가 필요할 것이다. 2. 데이터 모델링 본격적으로 데이터베이스의 구조를 설계한다. 2-1. 개념적 모델링 이 단계에서 우리는 요구사항 파악에서 찾은 필요한 데이터들 간의 관계를 구상한다. 또한 각 개체간의 관계를 발견하고 표현해야한다. 이를 위해 간단하고 명료하게..