WEB

[React] Props (Memo, Props Types)

Intro 두 개의 같은 디자인의 버튼을 만듬 Props Memo Props Types Props 일종의 방식. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 text가 다른 여러 button에 같은 style을 주고 싶을 때, 버튼 컴포넌트마다 style을 복사하는 건 비효율적이다. 따라서 style의 설정들을 넘겨줄 수 있는 button 컴포넌트를 하나 만들어서 재사용하는것이 좋다. button 함수형 컴포넌트를 하나만들었다. 여기에 버튼마다 다른 text를 주려면 어떻게해야할까? 바로 여기서 사용하는 것이 Props이다. 커스텀 컴포넌트에 데이터를 전달시키기 위해 구문(syntax)를 이용한다. img 태그의 src="" 라던지, button에 EventListner을 붙여..

[React] State

Intro 버튼을 몇 번 클릭했는지 세는 어플 React.js의 state 컴포넌트에 state 추가 state 변경 시 UI 리렌더링 state란? 기본으로 데이터가 저장되는 곳. 이 어플에서는 버튼을 몇 번 클릭했는지 세는 counter. 즉 바뀌는 데이터를 state로 만들 수 있다. 컴포넌트나 JSX에 변수(데이터)를 추가하고 싶을 때 바닐라 JS => ${변수}로 전달 span.innerText = `Total clicks: ${counter}`; React JS => 단순히 중괄호에 변수를 넣어준다. Total clicks: {counter} 데이터가 변경되어, 사용자에게 변화된 내용을 보여주고 싶을 때 (리렌더링) 1. render 함수를 다시 호출해 UI 업데이트 데이터가 변경될 시, re..

[React] Component, JSX

Intro 버튼을 몇 번 클릭했는지 세는 어플을 바닐라 JS와 React JS를 사용해 구현해보고 비교 Component를 만들고 화면에 렌더링하기 ( JSX ) 바닐라 JS 로 구현하기 Total clicks: 0 Clcik me document.querySeletor(selectors); 제공한 선택자와 일치하는 문서 내 첫번째 엘리먼트 반환한다. const button = document.querySelector("button"); React JS 로 구현하기 React를 사용하기 위해서 두 개의 Javascript 코드를 import 한다. react와 react-dom인데 둘의 차이는 밑에서 설명한다. 1. React JS로 Component를 생성하는 (어려운) 방법 React 규칙 하나. H..

[Django] PyCharm Django(장고) 설치 및 실행환경 설정

1. 프로젝트 생성 및 가상환경 설정 장고프로젝트를 위한 가상환경을 만들어준다. 장고를 비롯한 외부 라이브러리를 가상환경에 설치해줄것임. File-Settings-Project:프로젝트이름에서 Python Interpreter를 확인한다. 처음에는 라고 되있을텐데, 옆의 톱니바퀴에서 add를 새로운 가상환경을 추가해줄것이다. 위치는 파이참에서 읽어들인 프로젝트 폴더에 venv 폴더를 새롭게 생성한다. 그럼 Package에 pip와 setuptools 라는 두 개의 패키지가 생성된것을 확인할 수 있다. (밑에 다른것들은 후에 설치한것들임) venv폴더도 잘 생성됨을 확인 2. 가상환경 실행 후 장고 설치 터미널에서 프로젝트 폴더에 들어가면 venv - Scripts - activate.bat 파일을 확인할..

[CSS] Layout 설정

Position 속성을 이용한 Layout position: static; /*기본값 */ posistion: relative; /*top과 left에 의해 원래있던 위치에서 상대적으로 움직임*/ posistion: absolute; /*기본 레이어의 관계에서 벗어나게된다. 혼자 공중에 떠있는 느낌.. 따라서 다른것들이 absolute를 무시하고 그 자리를 채워가는..*/ -> absolute 속성은 자신의 기준점을 찾는데 static이 아닌 것을 찾는다. 원래 기준인 div가 static이기때문에 div가 아닌 body가 기준이 됨. posistion: fixed: /*스크롤이 생길때 움직이지 않는다. 고정됨. static이 아닌 것을 기준점으로 찾는다.*/ css.test.html first seco..

[CSS] CSS color, font style 적용

1. color style 적용 color : red; color : rgb(255,0,0); color : rgb(255,0,0,0,5); /*희미해짐. 투명도 */ color : #ff0000; /*15진수로 표현*/ color : #f00; 2. font style 적용 font-size:1em; /*em 갖게되는 기본 상속값의 배수값으로.*/ background-color : red ; /* 배경색. color랑 비슷 */ font-family : monospace; /* 글씨체 지정*/ test => 이경우 body > div에 16px이 적용됐으므로 그 16px을 기준으로 2배인 32px로 글씨가 나오게됨

[CSS] CSS 기본개념과 렌더링원리

CSS를 HTML에서 사용하는 방법 CSS 기본사용법 span { color : red; } selector(선택자) property value 1. inline html 태그 안에다가 같은 selector로 동일한 속성값에 다른 value를 넣을 땐 inline이 "최우선"으로 적용됨 구조랑 css 태그가 섞여있어서 관리가 어렵고 유지보수가 어렵다. 2. internal 예제 css_test1.css div>p{ color:red; /*inline이 최우선으로 적용되기 때문에 이는 적용되지 않음*/ border: 1px solid slategray; } CSS에서의 상속개념 상위에 설정된 style을 하위에서도 쓴다. -> 재사용 측면에서 좋다. color, font-size같은 대부분의 속성은 상속을..

[CSS] HTML 웹 페이지에 style 주기

1. 웹 페이지 개요 레이아웃을 보통 수평으로 나누는 것이 좋음 큼지막하게 나누고 그 안에서 또 자잘하게 수직과 수평으로 세부적으로 나누기. 네비게이션바, 섹션, 어사이드 style 태그 하이퍼링크 설정 a {text-decoration:none} 네비게이션바 리스트 #header_nav { width:100%; overflow:hidden; background-color:#2d1152; } #header_nav ul{ overflow:hidden; } #header_nav li{ font-size:0.9em; color:#ffffff; margin-right:20px; list-style:none; float:left; } li 태그에 list-styl:none; 을 주면 리스트 옆에 동그라미를 없앨 ..