리액트바오

깃허브 계정 연동만 하면 클릭 몇번으로 배포를 할 수 있는 서비스가 있습니다. Netlify란 정적 웹 사이트를 편하게 배포할 수 있게 해주는 서비스다. 쉽게 배포를 도와줄 뿐 아니라 변경사항도 자동으로 적용해주기 때문에 수정또한 간편하게 할 수 가 있다. Netlify로 배포하는 순서 1. 가입하기 2.배포하기 3.도메인 수정 1.가입하기 로그인 또는 회원가입을 한다. 회원가입시, 원격 저장소 계정(ex: github) 으로 가입하는것을 추천한다. 2.배포하기 상단바의 Sites 선택후, Add new site 클릭! Add new site를 클릭하면 세가지 항목이 나오는데 Import an existing project를 선택한다. 저장소를 선택한다. 나는는 Github을 사용하기 때문에 Github..

카테고리 없음 2022. 9. 16. 15:06

swagger 스웨거(Swagger)는 API들이 가지고 있는 스펙(spec)을 관리할 수 있는 프로젝트다. 프로젝트에서 협업을 할때 또는 유지보수를 해야할때는 구축되어 있는 API서버가 어떤 스펙을 가지고 있는지 먼저 파악을 해야 한다. 이러한 스펙을 정리하는데에 도움을 주고 다른 사용자가 편리하게 API를 호출해보고 테스트 할 수 있도록 하기위해 swagger가 생겨난것이다. swagger란 그냥 한마디로 정리하면 REST API 문서화를 도와주고 API를 바로 실행해서 테스트를 가능하게 하는 협업 도구다. 그럼 swagger는 어떤 기능을 할까? 그건 다음시간에..

카테고리 없음 2022. 9. 7. 15:37

정규표현식은 어디에 쓸까? 정규표현식(Regular Expression)은 줄여서 정규식이라고 하는데 문자열에서 특정 내용을 찾거나 대체 또는 뽑아낼때 사용한다. - 많은양의 전화번호 데이터를 추출해야 할 때 - 로그인 또는 회원가입시 사용자가 입력하는 아이디, 이메일, 전화번호 등이 올바른지 검정할 때 - 코드를 짤때 특정 변수의 이름을 바꾸고 싶은데, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 - 문자열에 포함된 공백이나 특수문자를 제거하고 싶을때 정규표현식의 단점 가독성이 좋지 않다. 주석이나 공백을 허용하지 않으며 여러가지 기호를 붙여서 사용하기 때문이다.

Javascript 2022. 9. 7. 13:30

정규표현식은 어디에 쓸까? 정규표현식(Regular Expression)은 줄여서 정규식이라고 하는데 문자열에서 특정 내용을 찾거나 대체 또는 뽑아낼때 사용한다. - 많은양의 전화번호 데이터를 추출해야 할 때 - 로그인 또는 회원가입시 사용자가 입력하는 아이디, 이메일, 전화번호 등이 올바른지 검정할 때 - 코드를 짤때 특정 변수의 이름을 바꾸고 싶은데, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 - 문자열에 포함된 공백이나 특수문자를 제거하고 싶을때 정규표현식의 단점 가독성이 좋지 않다. 주석이나 공백을 허용하지 않으며 여러가지 기호를 붙여서 사용하기 때문이다. 자주 사용하는 정규표현식 숫자 ^[0-9]*$ 영문자 ^[a-zA-Z]*$ 한글 ^[가-힣]*$ 영어&숫자 ^[a-zA-Z0-..

Javascript 2022. 9. 1. 11:19

React가 작동하는 원리를 알기 위해서는 먼저 DOM에 대해서 알고 있어야 하기에 먼저 DOM에 대해 알아보자. DOM이란 무엇인가? DOM은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. React는 Vitual Dom을 활용해 실제 DOM이 아닌, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. React는 적으로 데이터가 변화했을 때 직접적으로 DOM을 조..

react 2022. 8. 30. 14:57

클로져(Closure)가 무엇일까? 클로저는 내부함수의 변수가 외부함수의 변수에 접근할 수 있는 것이다. 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합을 통해 만들어진 것인데 이 환경은 클로저가 생성된 시점의 유효 스코프 내에 있는 모든 지역 변수로 구성된다. 그래서 클로저가 포함된 내부 함수에서 외부 함수의 스코프에 접근할 수 있다. 일반적으로 함수가 실행될 때 생성된 컨텍스트는 함수가 종료될 때 가비지컬렉션의 수집대상이 되어 사라진다. 하지만 클로져 패턴이 사용된 경우에는 내부함수의 변수가 언제 외부함수의 변수를 참조할지 알 수 없기 때문에 외부함수가 종료되어도 가비지 컬렉션의 수집대상이 되지않고 메모리상에 남아있게 된다. 이런 이유로 클로저 패턴을 남발하게 되면 메모..

Javascript 2022. 8. 24. 09:47

스코프는 변수가 유효할 수 있는 범위이며 일반적으로 중괄호로 감싸진 영역을 말한다. 다른말로 스코프는 변수의 수명을 결정하고 확인할 수 있는 범위인 것이다. 스코프는 크게 Local Scope와 Global Scope로 나눌 수있다. Global Scope는 최상단의 스코프로써 이 곳에서 선언된 변수(전역 변수)는 어떤 영역에서든 접근이 가능하다. Local Scope는 Global Scope에 포함되어 있는 영역으로 이곳에서 선언된 변수(지역 변수)는 전역(Global)에서 선언된 변수보다 더 높은 우선순위를 가진다. let num = 10; function printNum(){ let num = 15; console.log(age); // 15 } 그리고 앞서 언급한 두 스코프에서의 변수들 간에는 반..

Javascript 2022. 8. 23. 14:52

removeChild() 노드를 삭제하는 것이 아니라, 메모리에 해당 노드는 그대로 존재하며, 부모 자식 관계를 끊어 DOM 트리에서 해제하는 것이다. 반환 값을 변수에 저장하지 않으면 DOM에서 제거되고 메모리에서도 곧 지워지지만, 반환 값을 변수에 저장하면 DOM에서 제거되더라도 다시 불러올 수 있다. remove() remove는 노드를 메모리에서 삭제하고 종료한다

Javascript 2022. 8. 23. 13:44