어린이날 연휴 그 즈음에 심심해서 야곰님의 유튜브를 보면서 따라 만들어봤던 up and down game이다. (https://www.youtube.com/watch?v=aVpSUBlZPxU&list=PLz8NH7YHUj_ZF2oja5rP4Sow5KK1zf2yk) // // ViewController.swift // UpDownGame // // Created by 허혜진 on 2022/05/02. // import UIKit class ViewController: UIViewController { var randomValue: Int = 0 var tryCount: Int = 0 @IBOutlet weak var slider: UISlider! @IBOutlet weak var tryCountLabel..

(2021.01.03) 공부는 거의 언제나 하기 싫었지만,, 오늘은 유독 하기 싫네,, 간단하게라도 기록하려고 남겨둔다 [맥북에서 express로 서버 구축하기] - 초간단 순서대로 터미널에 입력 $ sudo npm install -g express-generator $ express nodejsproejct 이 세가지 명령어를 입력해주면 끝~ $ cd nodejsproject $ npm install $ DEBUG=nodejsproject:* npm start 이제 크롬에다가 localhost:3000 에 들어가면 서버가 구축된 것을 확인할 수 있음

(2021.01.03) 참고 사이트: https://javafa.gitbooks.io/nodejs_server_basic/content/chapter3.html 3. 서버구축하기 - http basic · node.js 서버구축하기 javafa.gitbooks.io [실습과정] 서버 구축용 폴더를 만든다. (desktop/workspace/node_js/server_basic) 참고 사이트에 나와있는 코드를 바탕으로 server.js 를 만들었다 터미널에 node server 입력하고, $ node server http://localhost:8080/ 에 들어가면 서버가 구축된 것을 볼 수 있다 [코드 분석] var http = require('http'); http 모듈을 require 로 불러온다. ..

(2022.01.03) node.js 공부를 시작해보려고 한다. 일단은 node.js 교과서라는 책을 바탕으로 하여 구글링하면서 공부할 계획이다. 공부해둔거 기록하고, 나중에 보면 쉽게 떠오르도록 적어두는 것이라 자세하게 적지 않으려고한다. (사실 조금 귀찮기도...) 공식 홈페이지에 따르면, 노드는 자바 스크립트 런타임이라고 정의되어있다. 노드를 통해서 다양한 자바스크립트 애플리케이션을 실행할 수 있지만, 노드는 서버 애플리케이션을 실행하는데 가장 많이 사용한다. Node.js는 이벤트 기반, 논 블로킹, 싱글 스레드 모델이다. 1. 이벤트 기반 모델 이벤트가 발생하면 이벤트 리스너에 등록해둔 함수(콜백함수)를 실행한다. 호출 스택, 백그라운드, 테스트 큐를 돌면서 노드가 종료될 때까지 이벤트 처리를 ..

(2021.07.24) 이클립스에서 servlet 파일을 생성하면 servlet class 는 자동적으로 추상 클래쓰 HttpServlet을 상속받는다. 위 그림의 오른쪽 다이어그램에서 보듯이 HttpServelt은 다시 GernericServlet을 상속받는다. doGet과 doPost 모두 사용자에 요청에 의해서 응답하는 메소드이다. HttpServeltRequest와 HttpServeltResponse는 모두 자동적으로 생성되는 변수들이다. HttpServletRequest: 요청에 대한 정보를 가지고 있는 객체 request.getCookies(); request.getSession(); request.getAttribute(null); request.setAttribute(null); reque..

(2021.07.24) servlet path를 그대로 사용하면 URL이 복잡해지고, 보안에 취약하기 때문에 간결하게 servlet mapping을 해줄 수 있다. servlet mapping에는 두가지 방법이 있다. ① web.xml 파일을 이용한 mapping ② java annotation을 이용한 mapping web.xml 파일을 이용한 servlet mapping mapping 할 servlet의 이름, 그 경로를 태그에 넣어주고, 태그 안에 어떻게 mapping 할지 적어준다. 위의 예시에서는 com.servlet.ServletEx 를 /SE 로 mapping 해주었다. Java Annotation을 이용한 mapping @webServlet("/SE1") 은 WebServlet(name="..

(2021.07.20) yeah라는 dynamic web project 생성 yeah 안에 yeah servlet 이라는 servlet 파일 생성 servlet 파일 안에 doget 함수 안에 추가내용 작성 후 run as 서버 localhost:8090/yeah/ys 웹페이지에서 확인 아래의 경로로 servlet 파일위치 확인이 가능하다. C:\Users\USER\Desktop\jsp\yeah\build\classes\com\yeah

(2021.07.20) ohyeah 라는 dynamic web project 생성 ohyeah 폴더안에 WebContent에 hello라는 jsp 파일 생성 내용 작성 후, hello.jsp 를 run as > server 하고 localhost:8090/ohyeah/hello.jsp 로 들어가면 작성내용 확인 가능 world.jsp 도 만들어보고 똑같이 실행해보기 만들어준 jsp의 소스코드와 웹의 html 코드의 차이가 보인다. 생성해준 jsp 파일은 아래와 같은 경로를 통해 확인 가능했다. C:\Program Files\Apache Software Foundation\Tomcat 8.5\work\Catalina\localhost\ohyeah\org\apache\jsp 참고 https://www.inf..

(2021.07.20) 톰캣 오류 The server cannot be started because one or more of the ports are invalid. Open the server editor and correct the invalid ports. 위의 사항을 체크해주어 빠진게 없는지 확인해준다. 나는 Tomcat admin port가 -로 설정되어있는것을 8005로 수정했더니 오류가 해결되었다. HTTP/1.1 포트는 주로 8080이라고 설정하지만, 혹시나 데이터베이스랑 충돌할까봐 8090으로 설정해주었다.

(2021.02.24) 더보기 초심을 잃고 2월은 너무 놀아버렸다.. 겨울방학 마지막 웹개발 공부를.. 했다.. 1학기엔 더 열심히 해야지 | props 와 이벤트 전달을 이용해 해야할 일 입력 기능 개선하기 | TodoInput 컴포넌트와 TodoList 컴포넌트 수정하기 propsdata 로 바꿔주어서 새로고침을 하지 않고도 바로 목록이 갱신되도록 만들어줌 | 이벤트 전달을 이용하여 Clear All 버튼 기능 개선하기 1. 상위 컴포넌트 코드 수정하기 2. 하위 컴포넌트 코드 수정하기 | 이벤트 전달을 이용해 할 일 삭제 기능 개선하기

(2021.02.02) cd C:\Users\USER\Desktop\doit\vue-todo\vue-project npm run dev 서버 구동해주기 | 저장된 할 일 목록을 표시하는 TodoList 컴포넌트 할일 목록 만들기 이렇게 하면 텍스트 값을 하나하나 직접 입력해야해서 별로다. 로컬 스토리지의 데이터 개수만큼 목록에 추가해서 표시하는게 훨씬 좋다. 로컬 스토리지 데이터를 뷰 데이터에 저장하기 뷰 데이터의 아이템 개수만큰 화면에 표시하기 + style 태그 추가 요런식으로 리스트에 추가되는 것을 볼 수 있다 | TodoList.vue 에 할 일 삭제 기능 추가하기 할 일 목록 & 삭제 버튼 마크업 작업하기 할 일 삭제 버튼에 클릭 이벤트 추가하기 휴지통 버튼을 클릭하면 콘솔창에 clicked 라..

(2021.01.27) 컴포넌트 내용 구현하기가 이번 목표이다. TodoHeader: 애플리케이션 이름 표시 TodoInput:해야 할 일 입력 및 추가 TodoList: 해야할 일 목록 표시 및 늑정 할 일 삭제 TodoFooter: 해야할 일 모두 삭제 | 애플리케이션 제목을 보여주는 TodoHeader 컴포넌트 애플리케이션 제목 추가하기 CSS로 제목 꾸미기 | 해야할 일을 입력하는 TodoInput 컴포넌트 인풋 박스와 버튼 추가하기 텍스트를 저장하기 위한 버튼 이벤트 추가하기 입력받은 텍스트를 로컬 스토리지에 저장하기 인풋박스에 다시 문자 입력하고 추가버튼 클릭하면 크롬 개발자 도구 Application > LocalStorage > http://localhost:8080 에 값이 저장된다. a..

(2021.01.27) | 뷰 CLI를 이용한 프로젝트 생성 프로젝트 초기 구성을 위해서 뷰 CLI로 프로젝트를 생성한다. cd 명령어로 들어가주고 vue init webhack vue-project 로 프로젝트를 만들어줌 물어보는 질문들에 대해서 대답을 했다... 아니 책에는 license 랑 sass 이런거 물어보던데 나는 다른거 물어봐서 당황함 구글링해도 안나왔음.. 아무튼 대답을 하면 이제 프로젝트를 만들어준다. 쭉 설치가 진행되고, 이제 npm install 명령어를 입력해서 package.json 파일에 등록된 자바스크립트 라이브러리를 모두 다운받아준다. cd vue-project 명령어를 입력한다. npm run dev 명령어를 입력해서 실행해준다. | 프로젝트 초기 설정 반응형 웹 디자인 ..

(2021.01.23) | 뷰 CLI 설치하기 싱글 파일 컴포넌트 체계를 사용하기 위해서 CLI 도구를 이용할 수 있다. CLI 는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구이다. CLI 에서 제공하는 명령어를 이용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성할 수 있다. 크게 3가지 단계를 거쳐 뷰 CLI를 설치하여 편하게 프로젝트를 구성할 수 있다!! 1. node.js 설치하기 2. npm 설치하기 3. 뷰 CLI 설치하기 1. node.js 설치하기 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine...

(2021.01.19) 뷰 템플릿 뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성이다. 1. ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법 2. 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인딩 자바스크립트 표현식 디렉티브 이벤트 처리 고급 템플릿 기법 데이터 바인딩 : HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것 {{ }} - 콧수염 괄호 예전에 공부하던 책에서 {{ }} 를 이용했을 때도 맨날 이런 오류가 났는데 대체 뭐가 문제인지.... 모르겠다...... 밑에 있는 예시들에서는 또 실행이 잘된다.....