JavaScript

자바스크립트를 이용한 구글로 로그인 하기

우선 Google 클라우드 플랫폼을 접속한다. Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 그러면 왼쪽 상단에 MyFirstProject 부분을 클릭한다. 새 프로젝트를 클릭하면 프로젝트 이름은 원하는 것으로 지정하여 만들기 클릭을 한다. 그리고 다시 이 창을 띄운다. 이 후 OAuth 동의화면을 클릭하고 외부를 선택하여 만들기를 누른다. 원하는 URL을 적어주고 저장을 누른다. 그 후 저장후 계속을 클릭하여 마무리한다. 그 후 사용자 인증정보 만들기를 클릭한 후 웹 어플리케이션까지 클릭을 한다. 지금은 공부를 위해 http를 쓰지만 실무에서는 https로 보안을위해 쓰기로 하자 그 후 만들기 클릭! 클라이언트 비밀번호는 유출되면 안된다. ..

React 시작하기[Vscode]

우선 리액트는 Node 기반이기 때문에 Node를 설치 해야한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 접속을 하면 밑에 페이지가 뜰 것이다. 유저가 가장 많은 18.12.1LTS 파일을 다운받겠다. 다운을 받고 원하는 경로에 파일을 생성한다. 나는 create-react-app이라는 이름으로 생성했다. 아무이름이나 해라~ 그 후 vscode로 만든 파일을 연다. 밑에 파란줄 부분 드래그해서 끌어올려라~ 그러면 터미널 창이 올라온다. 그 후 npx create-react-app {projectName} 입력! 하지만.... 역시 맘대로 되..

JSX란?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바 스크립트 형태의 코드로 변환된다. 만약 컴포넌트를 렌더링 할 때마다 JSX코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용한다면 매우 불편할 것 같다. 하지만 JSX가 매우 편하게 UI를 렌더링이 가능하다!! 장점 o 보기 쉽고 익숙하다! JSX르 사용하는 것이 더 가독성이 높고 작성하기 쉽다. HTML로 코딩하는 것과 비슷하기 때문이다. o 더욱 높은 활용도! JSX에서 div, span과 같은 HTML태그를 사용할 수 있을 뿐 아니라, 컴포넌트도 JSX안에서 작성가능하다. 문법 정..

CRUD 게시판 만들기 [Node.js express]

팀 스터디로 무엇을 할지 고민하다가 팀원 모두가 Node.js에 관심을 가지고 있어 Node.js로 정하였다. 수업시간에 js와 jsp를 듣고있어 원활하게 진행되나 싶었지만 역시 착각이었다. 세팅부터 정말 애를 먹었다.(왜 내가하면 잘 안되는걸까...?) 정말 신기...ㅋㅋㅋㅋㅋㅋ 하지만 고비끝에 생활코딩 영상을 보면서 세팅을 완료했다.(세팅만 장난안치고 하루걸림....) 어쨋든 시작이 느린만큼 밤을 새면서 공부를 했다. https://github.com/web-n/Nodejs GitHub - web-n/Nodejs Contribute to web-n/Nodejs development by creating an account on GitHub. github.com 이 파일들을 다운로드 한 후 진행하면 된..

회원가입 페이지 만들기 (정규표현식 미사용)

[HTML] [JS] 정규표현식 미사용 function check(){ //변수에 담아주기 var userid = document.getElementById("userid"); var pw = document.getElementById("pw"); var repw = document.getElementById("repw"); var username = document.getElementById("username"); var useremail = document.getElementById("useremail"); var inter = document.getElementsByName("inter"); var introduce = document.getElementById("introduce"); var bi..

회원가입 페이지 만들기 (정규표현식 사용)

[HTML] [JS]-- 유효성검사 js function check(){ //변수에 담아주기 var userid = document.getElementById("userid"); var pw = document.getElementById("pw"); var repw = document.getElementById("repw"); var username = document.getElementById("username"); var useremail = document.getElementById("useremail"); var inter = document.getElementsByName("inter"); var introduce = document.getElementById("introduce"); var b..

계산기 만들기

아래 모양과 같이 계산기를 만들어 보았다. 이번 계산기 만들기에서 중요한 것은 누른 버튼의 기능을 스크립트의 함수로 구현하는 것이다. [결과] HTML 삽입 미리보기할 수 없는 소스 [소스코드]

실시간 가져오기[JavaScript]

setTimeout(showClock,1000) 로 재귀함수를 통해 1초마다 변경시켜준다 HTML 삽입 미리보기할 수 없는 소스 [소스코드]

글자 변환

Html CSS Javascript를 배우고 원하는 폰트의 크기 색상 모양(중복가능)을 선택한 후 미리보기 버튼을 누를때마다 변환이 되게 만들어 보았다. HTML 삽입 미리보기할 수 없는 소스 [소스코드] 미리보기 색상: 빨강 파랑 초록 검정 크기: 1 2 3 4 취소선 크게 작게 두껍게 기울임 위첨자 아래첨자 소문자로 대문자로