Web

Web_Basic 210723간략한 개념 정리HTMLHyper Text Markup Language하이퍼텍스트 -> 참조를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트마크업 언어 -> 문서의 구조를 표현하는 역할을 한다프로그래밍 언어(문제 해결, 명령문)

210726 JavaScript #1 HTML은 CSS와 JavaScript를 연결해주는 역할 JS의 variable const -> 바뀌지 않는 값 constant(상수) 값을 업데이트 할 수 없다 let -> 값을 바꿀 수 있다 ex) var 과거 초기의 J

210728 JavaScript #2

210730JavaScript querySelectorAll() 혹은 querySelector()를 사용한다면 아래와 같이 많은 요소들이 있다.title로 querySelectorAll을 하여 hello라는 이름의 h1태그 요소를 모두 가져왔다.title은 3개의 h1

210802JavaScript console.dir을 통해서 보는 property 중에서 사용 가능한 event를 찾을 수 있다.그 중 이처럼 이름 앞에 on이 붙어있으면 event listener이다.예를 들어 onabort의 경우에는 사용할 때 onabort 대신

210802JavaScript ex) click event1\. title.addEventListener("click",함수명) -> addEventListener(), click을 넘겨주기2\. title.onclick = 함수명같은 기능이다.window event\

210803JavaScript 지난 코드에서 title을 클릭시 색이 변하는 것을 바꿔보자.클릭시 파란색 -> 빨간색 -> 파란색 -> 빨간색 -> ....좀 더 읽기 편하게 바꿔보자이 코드에서의 style을 변경하는 부분을 JavaScript가 아닌 CSS로 해보자\

210803JavaScript 지난번 코드를 보자이 코드에선 className을 체크하고 변경할 때 "active"라는 string을 두번 사용하고 있다. 실수를 방지하기 위해서는 constant를 사용할 수 있다.className변경은 constant변수의 내용을 한

210803JavaScript 새로운 프로젝트 생성Log In 기능을 넣어보자\-index.htmlinput과 button태그를 div로 묶고 Id추가이로써 id인 login-form을 통해서 input과 button을 찾을 수 있다.\-app.js동일const log

210803JavaScript Log In 에서 username의 유효성 검사조건비어있다.너무 길다.\-app.jsusername에 loginInput의 value값을 넣어준다.username을 조건문에 활용하여 경고창으로 메세지가 나오도록 한다.혹은 html의 inp

210803JavaScript 지난번 내용을 이어서 form의 submit에 대해서 문제를 해결해야한다.내용 입력시 버튼을 누르거나 엔터를 누르면 자동으로 submit되고 새로고침이 된다.콘솔창을 확인하면 입력한 값이 나오고 순식간에 사라진다.(새로고침)브라우저는 엔터

210803JavaScript 지난번 코드를 실행시켜보면서 form의 기본 동작은 submit이라는 것을 알았다.링크의 기본동작?이와같이 링크가 생기고 클릭을 하면 해당 페이지로 이동한다.따라서 기본동작은 버튼 클릭 시 다른 페이지로 이동하는 것이다.\-app.js링크

210803JavaScript 유저가 아이디를 입력 후 로그인을 하고 나서의 동작css를 이용하여 로그인을 하면 해당 form을 없애도록 해보자\-style.cssclassname에 hidden이 들어가면 해당 요소가 사라진다.app.js입력 후 로그인을 하면 form

210803JavaScript 유저의 ID 저장하기기본적으로 제공되는 localStorage가 있다.\-local storage브라우저에 뭔가를 저장할 수 있게 한다. 나중에 가져다 쓸 수 있다.개발자도구를 통해서 local storage에 뭐가 저장되어있는지 볼 수

210803JavaScript 저장 후 새로고침을 하면 정보는 그대로지만 다시 form이 나오게 된다.로그인이 됐으면 다시 form이 나오지 않게 하려면 어떻게 해야할까?local storage 유저정보 유무 확인유저정보가 없다면 form을 보여주고 진행정보가 없다면

210803JavaScript clockclock.js를 생성indext.htmlinterval'매번' 일어나야 하는 무언가ex) 매 2회\-setInterval()2개의 argument를 받는다.첫번째 - 실행하고자 하는 function두번째 - 호출되는 functi

210803JavaScript 지난번 만든 시계의 출력 모양이 '01' 이 아닌 '1'로 출력이 된다. 좀 더 보기 좋게 '01'과 같은 형식으로 만들어보자padStart()제공되는 함수stringdml 길이가 기준 미만이면 원하는 문자로 채우도록 한다.사용 -> 문자

210804JavaScript 10개의 명언을 랜덤으로 나오도록 해보자\-quotes.js10개의 quote,author 를 만들어준다.randomness무작위성\-Math moduleJS에서 기본제공Math.random()0부터 1사이의 랜덤한 숫자를 반환한다.Mat

210804JavaScript 배경 이미지 만들기랜덤 배경이미지를 적용시켜보자background.js 생성 및 html에 적용img폴더에 이미지를 저장해둔다.지난번 랜덤한 명언을 보여주는 것 과 비슷한 방식이다.\-background.js랜덤으로 이미지를 선택한다.배경

210804JavaScript 랜덤으로 명언, 배경을 추가했다.to do list를 추가해보자먼저 html내 form으로 입력창을 만든다.\-index.html\-todo.js생성Id로 element를 가져온다이전에 form의 기본 동작은 submit event였다.기

210804JavaScript Todo Add위의 haha처럼 할 일을 입력하면 추가되도록 해보자\-todo.jsli 안의 span 내에 할 일 목록을 넣으려고 한다.li와 span을 createElement로 만들어주고li의 child로 span을 넣어주어 li내에

210804JavaScript todo List에 기능을 추가하자.1\. 삭제기능2\. 새로고침시 사라지지 않게삭제버튼 만들기\-버튼의 동작 추가하기button에 addEventListener를 해준다.\-deleteToDo()현재 코드에는 여러개의 button이 있는

210805JavaScript ToDo 저장하기local storage를 활용한다.입력한 값 local Storage에 저장local Storage에서 값을 불러와서 화면에 출력저장이 된다.이 값들을 array 처럼 보이게 해보자\-JSON.stringify()JS o

210805JavaScript \-todo.jsforEach로 array의 각 item에 paintToDo를 시킨다.새로고침을 해도 계속 paint해주기 때문에 사라지지 않는다.하지만 새로 입력을 하고 새로고침을 해주면 이전에 저장된 local storage의 값에 덮

210805JavaScript 다음 문제는 삭제를 해도 local Storage에서는 삭제가 되지 않아 내용이 그대로 남아있다는 것이다.지금의 코드에서는 toDo array는 지워졌지만 local storage에서는 남아있다.local storage에서 삭제를 위해서는

210805JavaScript filter말 그대로 필터, 거른다는 것forEach와 비슷하나 true 를 return한 값만 통과할 수 있는 것이다. 1,2,3.filter() -> 실행 시 array는 true를 반환한 값만 유지되는 것즉, 조건이 주어지면 해당하는

210805JavaScript 날씨 추가weather.js 생성사용자의 위치를 가져올 수 있다.success -> 위치를 반환이처럼 이용할 수 있다.이제 이 위도,경도를 지역으로 바꿔야한다.https://openweathermap.org/계정을 만든다.로그인

210806 JavaScript #27 마무리

210806JavaScript font & size & position글자 폰트, 사이즈, 위치변경을 해보자.내가 구상한 위치는 이렇다.위치현재는 모든 요소가 좌상단에 위치해 있다.위치 수정을 좀 더 수월하게 하기 위해 html내에서 순서를 바꾸었다.\-style.cs

210806JavaScript todolist 수정할일 목록에서 삭제버튼을 마우스를 올렸을때만 보이도록 하고싶다.처음에는 이전 greetings.js의 경우 처럼 display:none을 사용해보았으나 원하는대로 되질 않아 innerText수정으로 하였다.정상적으로 버

210806JavaScript 배경사진 변경사진이 대체적으로 밝아 눈에 확 들어오지 않는다. 텍스트 색상을 흰색으로 바꿀 예정이기에 어울릴 것 같은 배경으로 변경했다.각 요소들의 글자 색상을 white로 설정했다.이름 입력창과 할일 입력창을 박스모양을 없애고 로그인 버

210813Web_Basic 동적 / 정적 웹페이지\-Static Web Pages (정적 웹 페이지)HTML, CSS, JS 등의 파일이 서버에 업로드되면 개발자가 수정하기 전까지는 같은 파일을 브라우저에 전달하기 때문에 해당 페이지는 언제든 같은 응답을 보낸다. 회

210814 Web_Basic #3 React React(리액트)란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에

210816Web_React 개발환경 세팅React 공식 페이지https://ko.reactjs.org/시작하기사용자를 위한 여러 설명들이 있다.그중 툴 체인 부분홈페이지로 이동https://github.com/facebook/create-react-

210816Web_React 샘플 웹앱 실행해보기Visual Studio Code를 에디터로 사용할 것이다.vs code환경 내에서 상단의 메뉴 바를 보면 Terminal 버튼이 있다. 이 버튼을 클릭하면 Terminal을 사용할 수 있다. 이곳에서 여러 작업을 할 수

210816Web_React 현재 열린 폴더를 보면 크게 public, src 폴더가 있다.public에는 index.html이 있는데 지난번 열린 웹 페이지는 이 html파일이 열린 결과이다.여기서 <div id="root"></div> 를 보면 id가 r

210819Web_React React CSS 코딩index.js에서 import 부분에 index.css가 있다.\-index.css이 코드를 모두 지우고 수정을 하고 페이지를 보면 그대로 업데이트가 된 것을 확인할 수 있다.일반적으로 html과 css 적용과 크게

210819Web_React 빌드터미널에서 npm run build이와같이 build라는 없던 디렉토리가 생성된다.실제 서비스를 위해서는 build 안의 파일을 사용한다.\-왜?현재 create react app으로 만들어진 파일에서 많은 요소를 지우고 페이지는 달랑

210819Web_React \-React가 없다면 어떻게 작업을 할까?public 디렉토리에 pure.html을 생성현재 코드같이 적혀있다면 길이가 짧기 때문에 쉽게 관리할 수 있다. 하지만 이 코드가 아주 길어진다면?인지능력을 벗어나 혼란스럽고 관리가 힘들다.이 긴

210819Web_React 이 코드는 App.js의 코드이다.여기서 class App extends Component는 react가 가지고있는 Component 클래스를 상속해서 새로운 App이라는 class를 만드는 것이다. 아래의 render()라는 method를

210819Web_React 지난번 header태그를 Subject로 만든것에 이어 남은 nav,article부분을 만들어보자.남은 태그들을 Subject와 같이 각각 다른 이름의 클래스로 만들어준다.해당 태그들을 App클래스 내부에 넣어준다.이처럼 App태그 안에 h

210825Web_React 리액트 개발자 도구react developer toolshttps://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?h

210825Web_React dicegamereact 실습으로 주사위 게임을 만들어보자프로젝트 세팅public폴더의 index.html제외하고 삭제 및 내용 수정src폴더의 index.js제외 전체삭제 및 수정정상 실행 확인index.html웹브라우저에서 가장 먼저 실

210825Web_React JSX문법JS코드 안에 html태그를 사용하는 것을 보았는데 이를 JSX문법이라고 한다.다만 JS의 확장의 느낌이라 html문법을 그대로 사용할 수는 없다.html에서 태그의 class를 지정하려면 <p class="hello">이와같

210825Web_React 프래그먼트JSX문법으로 태그를 사용할 때 태그들은 하나의 태그로 감싸줘야한다.form 태그로 싸여있다.이 태그들을 빼면 오류가 발생한다.이처럼 정상적으로 반영되어 div태그가 있는 것을 볼 수 있다.만약 이런 태그를 굳이 만들길 원하지 않는

210825Web_React JSX에서 JS를 사용JS코드를 활용하기 위해서 중활호로 감싸주면 된다.정상작동변수 product의 값을 변경하면 다른 값을 출력할 수 있다.더하기 연산도 가능하다.이처럼 요소 내부에 JS를 사용할 수도 있지만, 중괄호를 활용하여 속성값에도

210825 Web_React #9 Create-react-app다시 해보기 프로젝트 생성 명령어 vscode terminal에 입력(리액트 프로젝트 생성) npm init react-app . 완료시 파일들 추가된 것을 확인 npm run start입력(개발

210826Web_React 지금까진 jsx 부분을 render에 그대로 담아서 사용했다.하지만 이 부분을 변수에 담아서 사용해도 정상적으로 작동한다.element에 담고 전달하였다.이 element를 콘솔에 출력시켜보자js객체가 출력되는 모습을 확인할 수 있다.Rea

210826Web_React 본격적으로 주사위 게임을 만들어보자\-src폴더 -> App.js 추가함수를 디폴트로 export하도록 한다.이 컴포넌트에 필요한 기능을 추가 할 예정이다.index.js에서 활용할 수 있도록 코드를 수정\-index.js\-주사위 컴포넌트

210826 Web_React #17

210826Web_React 가위바위보 게임에 지난번 props개념을 사용해서 이미지를 띄워보자\-index.jsApp.js를 import하여 render하도록 하였다.\-HandIcon.js로컬에 있는 이미지 파일의 주소를 import하고 배열에 저장 후 HandIc

210826Web_React 지난 가위바위보 게임에서 이미지를 보여지는 기능까지 구현했다.이번에는 이미지가 그려진 버튼을 클릭하면 콘솔에 클릭한 버튼 rock,scissor,paper에 따라 값을 출력하도록 해보자.HandButton.js 생성 및 App.js 수정버튼

210826Web_React children\-Button.jsbutton이라는 태그안에 text라는 prop을 보여주도록 한다.\-App.jsButton을 import 후 div태그 안에 Button 두개를 만든다.이처럼 단순히 보여지는 역할을 하는 건 prop보단

210826Web_React 가위바위보 게임에서 children사용'처음부터'버튼을 만들어보자.버튼 클릭시 콘솔에 처음부터를 출력.\-Button.js\-App.jsprops -> children, onClick버튼 클릭시 onClick -> App.js의 handle

210826Web_React Props(Properties)JSX문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 한다.컴포넌트에 속성을 지정하면 각 속성이 하나의 객체로 모여 컴포넌트를 정의

210906Web_React Statereact의 변수라고 할 수 있다.사용을 위해서는 import { useState } from 'react'가 필요하다.ustState함수를 살펴보자const \[num, setNum] = useState(1)파라미터로 초기값을 받

210907Web_React 주사위 게임 총점 계산, 기록 기능\-App.js1.총점 계산을 위한 state 생성2.handleRollClick에서 랜덤한 주사위 값을 sum state 값에 더해지도록 설정3.handleClearClick에서 sum의 값을 0으로 초기

응용 프로그램 개발을 위한 자바스크립트 플랫폼. Chrome V8 자바스크립트 엔진으로 빌드되어 서버의 역할을 할 수 있는 자바스크립트 런타임(프로그래밍 언어가 구동되는 환경)자바스크립트 실행 환경을 만들어주는 서버 엔진 프로그램자바스크립트를 서버에서도 사용할 수 있도

JavaScript를 사용하면서 아무 생각없이 따라 치던 fetch, async, await에 대해 궁금해졌다.리소스를 비동기 요청할 수 있다.주로 API를 호출하고 응답 데이터를 받아오는 역할기본적으로 첫 번째 인자에 요청할 url이 들어간다. 디폴트로 http메소드

Express 노드를 만든 패키지의 일종. 웹 서버를 만들기 위한 것이라고 할 수 있다. Application 익스프레스 클래스를 이용해 익스프레스 객체를 만든다. Request 콜백함수에서 전달해주는 1번째 파라미터 req이다. 요청 객체라고 함. 요청 객체는 말

웹과 네트워크에 대해서 알고 싶어 시작한 스터디. 시작 Chapter #1 HTTP? HTTP(HyperText Transfer Protocol) - 웹은 http로 나타낸다. > 클라이언트에서 서버까지 일련의 흐름을 결정하고 있는 것 웹은 HTTP라는 프로토콜을

Chapter#2

HTTP에서 교환하는 정보.복수 행의 데이터로 구성된 텍스트 문자열이다. 크게 메시지 헤더와 메시지 바디로 구성되어 있다. 둘의 구분은 최초로 나타나는 개행 문자로 한다.메시지 헤더 - 서버와 클라이언트가 꼭 처리해야 하는 리퀘스트와 리스폰스 내용과 속성 등메시지 바디

클라이언트가 서버로 리퀘스트를 보낼 때 서버에서 그 결과가 어떻게 되었는지 알려주는 것이 상태 코드의 역할이다.정상적으로 처리했는지, 에러였는지 알 수 있다.200 OK와 같이 3자리 숫자와 설명으로 나타낸다.숫자 첫 번째 자리는 리스폰스의 클래스를 나타내고, 나머지

HTTP/1.1 에서는 하나의 HTTP 서버에 여러 개의 웹 사이트를 실행할 수 있다. 1대의 서버에 여러 고객의 웹 사이트를 넣을 수 있다는 것.고객마다 다른 도메인을 가지고, 다른 웹 사이트를 실행할 수 있다. 이를 위해 사용하는 기능이 가상 호스트(Virtual

Chapter#7 HTTP의 약점

시스템에 액세스하는 권한을 가진 본인인지 아닌지를 확인하기 위해서는 '등록된 본인만이 알고 있는 정보' 혹은 '등록한 본인만이 가지고 있는 정보' 등으로 확인할 필요가 있다.<종류>패스워드원타임 토큰 (일회성 패스워드)전자 증명서바이오 매트릭스 (지문, 홍채 등

시대를 거치며 웹의 용도는 상당히 커지고 많이 변했다. 이에 따라 요구하는 기능이 많아졌다. HTTP의 기능이 부족하다고 한다면 그걸 보완하는 새로운 프로토콜을 만들 수도 있겠지만, 이미 웹 브라우저가 널리 퍼졌기에 HTTP라는 프로토콜을 무시할 수 없게되었다. 그래서

웹 페이지의 대부분은 HTML로 되어 있다.HTML(HyperText Markup Language)은 웹 상에서 하이퍼텍스트를 보내기 위해서 개발된 언어이다. \-> 하이퍼 텍스트 : 문서 시스템의 하나로, 뭇너 중에 임의의 장소의 정보가 다른 정보에 관련된 문서.\-