코딩연습장

태그정리1 = https://codingpracticenote.tistory.com/125 221219 태그 정리 태그의 분류 block 태그 block태그는 새로운 라인에서 시작되며, block태그 다음에 오는 모든 태그들은 새 라인에서 시작 block태그들은 css 속성 중 height width margin padding을 작성할 수 있다. / inline 태그 codingpracticenote.tistory.com img 태그 이미지를 가져온 src 속성 : 가져올 이미지의 주소 alt 속성 : 이미지 불러오기 실패 시 보여줄 문자열 width 속성 : 이미지의 가로의 길이 height 속성 : 이미지의 세로의 길이 input 태그 입력창을 만드는 태그 속성 type에 따라 다양한 속성을 가진 입..

FormData란 ajax로 폼 전송을 가능하게 해주는 Form객체입니다. 보통은 ajax로 form을 전송할 일이 거의 없고 JSON구조로 데이터를 전송합니다. 하지만 이미지를 ajax로 업로드할 때 form전송을 필요로 합니다. 물론 base64, buffer, 2진data형식으로 서버로 전송해도됩니다. 보통 form을 제추랗면 action 속성에 의해 지정한 페이지로 이동하면서 데이터를 전송합니다. ajax는 반대로 제출버튼을 누르면 기본 폼 동작은 e.preventDefault()로 멈추고 페이지 전환 없이 데이터를 전송합니다. 페이지 전환 없이 폼 데이터를 제출하고 싶을 때 바로 FormData객체를 사용합니다. FormData객체는 window.FormData에 위치합니다. //payload로..

태그의 분류 block 태그 block태그는 새로운 라인에서 시작되며, block태그 다음에 오는 모든 태그들은 새 라인에서 시작 block태그들은 css 속성 중 height width margin padding을 작성할 수 있다. / inline 태그 inline태그들은 새 라인에서 시작하지 않고 현재 라인에서 시작 inline태그들은 css 속성 중 height width margin padding등의 속성을 적용할 수 없다. 쌍으로 된 태그 태그의 시작과 끝이 따로 있어 시작과 끝 사이에 코드를 넣는 태그 : 코드내용 / 등 쌍이 아닌 태그 태그의 시작과 끝이 따로 없는 태그 : 또는 / 등 p태그 단락을 나눌 때 사용 HTML에서는 엔터를 쳐서 여러문장을 입력하더라도 줄바꿈이 적용되지 않음 p태..

1. 브라우저 세션 기간 동안만 사용할 수 있고, 탭이나 창을 닫으면 삭제된다. 2. 새로고침을 해도 유지된다. 3. 변경된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용할 수 있다. //밸류를 세션스토리지에 저장 sessionStorage.setItem('name', 'minkyu'); //세션스토리지로부터 밸류값 가져오기 sessionStorage.getItem('name');//minkyu //세션스토리지 밸류 제거하기 sessionStorage.removeItem('name');//name값 제거 sessionStorage.clear();//모든 값 제거

1. 사용자 세션 데이터를 유지할 수 있다. 2. 브라우저를 닫고 다시 열 때에도 지속된다. 3. 탭을 여러개 열어도 공유된다. 4. 명시적으로 삭제될 때 까지 지속된다. 5. 변경사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다. ====>>>>> 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 만료날짜 없이 사용자 정보 데이터를 저장한다. //밸류값 local storage에 저장하기 localStorage.setItem('name','minsoo'); //local storage에 있는 밸류값 가져오기 localStorage.getItem('name')//'minsoo' //local storage에 있는 밸류 값 삭제하기 localStorage.removeItem('nam..

외부에서 폰트를 파일형식으로 가져와 적당한 위치에 놓는다. 같은 위치에서 css파일을 생성해 위와같이 @font-face에 대한 font-family와 src를 설정한다. 해당 css를 import해주고, 원하는 스타일드 컴포넌트에 font-family속성을 지정해준다.

환경변수란 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이다. 이름 자체에 어떤 변수값을 말하는데, os에서 자식프로세스를 생성할 때 참조하는 변수들 이라고 생각하면된다. env란 환경변수의 목록을 출력하거나 현존하는 환경을 수정하지 않고도 변경된 환경 내에서 다른 유틸리티를 실행하는데 사용할 수 있다. env를 사용함으로써 변수를 추가하거나 제거할 수 있으며, 기존 변수는 새로운 값을 이들에 할당함으로써 변경할 수 있다. dotenv는 환경변수를 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈이다. 이를 사용하는 이류로는 개발과정에서 사용되는 고유 api key값, DB 접근 비밀번호 등 민감한 정보의 보안을 위해서다. 깃헙같이 오픈소스에 공개될 경우 ..

UUID란 Universally Unique IDentifier의 약자로, 전 세계에서의 고유한 ID라는 뜻이다. 설치 //npm npm install uuid //yarn yarn add uuid UUID를 생성하는 데는 4가지 방법이 있다. v1 : MAC 주소 (시간 기준으로 생성) v3 : MD5 해시 (MD5 해시 기준으로 생성) v4 : 랜덤 (랜덤값을 기반으로 생성) v5 : SHA-1 해시 (SHA-1 해시 기준으로 생성) import import { v1 as uuid } from "uuid"; import { v3 as uuid } from "uuid"; import { v4 as uuid } from "uuid"; import { v5 as uuid } from "uuid"; 사용하는..

클래스형 컴포넌트의 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 this.props를 사용합니다. 데이터를 전달하고 화면 내용을 변경할 때에도 this.props를 사용합니다. 부모에서 자식의 state변경하기 자식에서 부모의 state변경하기 컴포넌트 내부 메소드는 꼭 바인드를 해주어야한다. bind로 this값을 주지 않으려면 화살표함수를 사용해도 된다. 화살표함수로 작성할 시 this값이 존재하지 않기 때문에 상위 스코프에서 this값을 찾아 바인딩 된다. 함수형 컴포넌트의 상태값은 useState훅으로 관리되기 때문에 컴포넌트의 this로부터 자유롭습니다. 또한 함수형 컴포넌트 안에서 선언한 함수들 모두 전역 객체를 this로 가지기 때문에 이벤트 핸들러에 콜백 함수를 넘기는 상황에도 ..

리액트 라이브러리를 사용하는 방법 중 한가지, 여기서는 babel을 사용하였습니다. 우리가 사용하는 CRA에도 babel이 들어있습니다. //div#root 태그 만들기 //type속성에 text/babel지정 리액트 라이브러리는 단순 JavaScript가 아닌 리액트를 위해 개발된 JavaScript 확장 문법을 사용합니다. 그러한 문법을 사용하기위해 바벨이라는 라이브러리를 사용하고, 바벨을 적용할 부분을 지정하기위해 script태그에 바벨을 적용한 모습입니다. 리액트에서 화면에 출력되는 요소를 컴포넌트라하고, 최상위 컴포넌트를 루트 컴포넌트라고 합니다. 1. h1태그를 사용한 컴포넌트 생성 2. 해당 컴포넌트를 출력할 div#root 불러오기 3. ReactDOM.render()메소드로 컴포넌트를 d..