개발자 꼬부기의 성장일기

03.LifeCycle Hooks (생명주기 훅):컴포넌트가 생성되고 소멸되기까지의 단계, 각 단계에서 실행되는 함수들을 라이프사이클 훅이라 부른다. 1) 컴포넌트 생성: vue컴포넌트 생성될때 초기화 과정을 거친다.  2) Created: 템플릿 및 Virtual DOM이 마운팅 혹은 랜더링 되기 전에 실행, 데이터와 이벤트가 활성화되어 접근할 수 있다. 3) Mounted: 컴포넌트가 초기 랜더링 및 DOM 노드 생성이 완료된 후, 코드를 실행하는데 사용할 수 있다. 4) Updated: 컴포넌트 데이터가 변경되어 DOM이 렌더링된 후 실행된다. 또한, Property가 변경된 후 DOM에 접근해야할 때 사용한다.1. Renderer에게 컴포넌트 처리해달라고 요청 2. Renderer에게 컴포넌트 처..

Vue : 프레임워크라이브러리 예를 들면 라이브러리가 목재 프레임워크가 가구라고 할 수 있다. Vue의 후발주자로는 스벨트가 있다. 01. Vue.js 구조1) SPA(Single Page Application) 단일 페이지 애플리케이션   (1) 여러 페이지가 존재하는데 다수의 페이지를 표시하는 데 있어서         과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술  (2) 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식        => 사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라,              화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠..

도커는 데이터 또는 프로그램을 격리 시키는 기능을 제공한다. 도커는 리눅스 컴퓨터에서 사용한다. 윈도우나 Mac에 구동할 수는 있지만 이경우 내부적으로 리눅스를 설치해야한다. 격리해야하는 이유 프로그램 마다 실행환경이 다를 수 있다. 예를 들어 한 프로그램이 파이썬 3.8로 사용되었고 다른 프로그램은 3.10을 이용한 프로그램이 있다면 버전이 다른 것이 영향을 줄 수 있기 때문에 다른 환경에서 실행되어야 할 수 있다. 이 경우 도커를 사용하면 관리하기가 편하다. 물론 같은 버전일지라도 구분해도 상관 없다. 도커 컨테이너(Docker Container) 이미지를 실행한 상태로 응용프로그램의 종속성과 함께 응용프로그램자체를 패키징 또는 캡슐화하여 격리된 공간에서 프로세스를 동작시키는 기술이다. 컨테이너는 응..

7차시 파이썬 변수와 입력 사용해보기(2) - 입력 input :입력받는 함수 split : 어떤 기호 또는 문자 기준으로 쪼개는 함수 input 사용방법 예제 1) 기본 x = int(input("첫번째 정수를 입력하시오:")) y = int(input("두번째 정수를 입력하시오:")) total = x + y print(x,"과", y,"의 합은", total, "입니다.") 2) 형변환 x = int(input("첫번째 정수를 입력하시오:")) y = int(input("두번째 정수를 입력하시오:")) total = x + y print(x,"과", y,"의 합은", total, "입니다.") input은 기본적으로 문자열로 인식한다. 그래서 정수형변수를 두가지 받아서 처리 하려면 강제캐스팅이 필요..

파이썬 웹 스크롤링 mongoDB 파이썬 1) 기초 2) 자료형 3) 함수 4) 조건문 5) 반복문 (for문) for 넣을개체 in 리스트 : (탭) 코드 탭(줄맞춤)을 하면 자동으로 for문 안이라고 간주하고 작성함. 탭을 안하면 별개로 처리함. 1. 가상환경 venv 1) 가상환경 설치해서 그 안에서 실행 가상환경 별로 라이브러리를 따로 설치하거나 함. 환경을 달리해서 다른 프로그램 작성. 2. 패키지 설치하기 1) venv 활성화하기(위와동일) 2) pip(python install package) 사용 venv 환경에서 'pip install 라이브러리 이름' 명령어 치고 Enter requests 라이브러리 설치: pip install requests 3. 라이브러리 사용하기 1) reques..

1. Javascript / 2. JQuery / 3. Fetch Javascript 는 웹을 움직이게 하는 코드 jQuery 는 html 뼈대를 선택해서 쉽게 조작할 수 있음 Fetch 는 짧은 코드로 요청을 보내고 받아올 수 있음 1. Javascript : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어 안에 내에 자바스크립트를 작성한다. 1) javascript 기본문법 console.log(변수) : 콘솔창에 찍어볼 때 let num = 20 : 변수선언하는 방법 리스트: 순서를 지켜서 가지고 있는 형태 ex) let a_list = [] / let b_list = [1,2,'hey',3] 딕셔너리: 키(key)-밸류(value) 값의 묶음 ex) let b_dict = {'nam..

HTML / CSS head / body head에는 참조되는 내용들, 스타일 등 body안에 내용이 들어간다. div는 영역을 나누는 역할 p는 문단을 나누는 역할 ul은 리스트 h1~h6는 큰 제목부터 작은 제목까지 span 특정글자를 꾸밀때 사용 a 하이퍼링크 img 이미지 넣을때 사용 input 입력받을때 사용 button 버튼 textarea 메모등 여러줄의 텍스트를 입력 받을때 사용 웹폰트 넣기 https://fonts.google.com/?subset=korean 사이트로 이동 import부분 복사해서 태그 시작부분에 붙여넣기 font-family 복사해서 그 아래에 *{ font-family~} 붙여넣으면 전체 적용 class로 명명된것들은 css에서 .클래스명{} 배경이미지로 넣기 url..