연의 기록 🪁

WEB50

[오류해결]Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. 요약 방법 1 cmd창 열고 "netstat -a -n -o -p tcp"명령어 입력 8080포트 사용하는 작업 PID번호 확인 "taskkill /f /pid 15176"명령어 입력(15176은 2번에서 확인한 피드번호) 방법 2(1로 해결 안될 때) window+R키 누르고 taskmgr검색해 작업관리자로 접근 방법 1-2번에서 확인한 PID번호와 일치하는 작업 강제종료 jdk와 톰캣을 연결한 후 서버를 실행시켜보면 아래와 같은 오류가 발생할 때가 있다. 이럴경우 보편적인 해결방법은 해당 포트를 사용하고 있는 작업을 확인한 후 강제종료 시켜주면 잘 돌아간다. 방법 1 상세설명 우선 cmd창을 열어서 아래 명령어를 입력한다. netstat -a -n -o -p tcp 그러면 아래와 같은 창이 뜬다. 여.. WEB/Server 2021. 5. 5.

[JavaScript] document.write()함수 위치 JS로 이것저것 해보다가 document.write()함수를 사용시 언제는 새로운 페이지에 출력되고, 언제는 현재 페이지에 작성되길래 궁금해서 알아봤다. document.write()와 document.writeln() 우선 document.write()함수에 대해 알아보자. 말 그대로 괄호 안에 들어가있는 것을 페이지에 "쓰는(출력하는)" 함수이다. 아래 예제를 보면 이해할 수 있다. 아래와 같이 글자를 써주는 함수이다. document.write()하면 document.writeln()함수도 있다. writeln()함수는 입력한 값에 "\n"을 추가하여 입력해준다. 그러나 실제로 사용해보면 줄바꿈이 아니라 한칸씩 띄어쓰기되어 출력되는 것을 볼 수 있다. 위 코드를 보면 를 사용해야만 줄바꿈이 된다는 .. WEB/HTML+CSS+JS 2021. 4. 9.

[CSS] 자식, 후손 선택자 차이점 CSS 선택자에 대해 공부하다 s1 s2 : s1요소에 포함된 s2요소를 선택한다. (후손 관계) s1>s2 : s1요소의 직계 자식 요소인 s2를 선택한다.(자식관계) 라고 나와있는 부분을 봤는데 문득 궁금해져서 찾아봤다. 결론부터 말하자면 자식(자손)이 더 작은 범위이다. 자손이라고 설명되어 있는 글도 있던데 자식이 더 직관적으로 받아들이기 쉬운 것 같다. 즉 자식은 바로 선택 태그 바로 아래 계층에 있는 것들, 후손은 선택 태그 안에 들어가 있는 모든 것 이라고 생각하면 될 것 같다. 바로 예제를 보도록 하자. hi hd sg 리스트 안 리스트1 리스트 안 리스트2 리스트 안 리스트3 he hello 위 코드를 실행시키면 아래와 같다. 이건 뭐 쉬운 내용이라 별로 어려울 것이 없을 것이다. CSS .. WEB/HTML+CSS+JS 2021. 3. 24.

Mysql 비밀번호 오류 해결 방법[ERROR 1045] mysql의 비밀번호를 잊어버려서 다시 설정을 하려고 하는데 아래와 같은 방법을 시도했었다. http://blog.daum.net/danus123/168 mysql 비밀번호 분실시 재설정 최종 해결책 https://toytvstory.tistory.com/1617 블로그에 들어가서 볼 것! 꼭 해야할것! [작업관리자에서 mysql과 관련된 mysqld와 같은 파일을 종료시켜준뒤 한다] 작업관리자 여는 법 : 마우스 오른쪽 클 blog.daum.net 그런데 이후 로그인을 하려하니 바뀐 비밀번호를 입력해도 자꾸 비밀번호가 틀릴 때 뜨는 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 오류가 발생했다. 오히.. WEB/Mysql 2021. 1. 16.

AWS EC2로 서버 구축하기 - 4[PHP웹 개발환경 구축] https://www.youtube.com/watch?v=j67VYsq0rdo&list=PLgtOJI-K1OGqhiFInA17Q3Oa9Q9HcXV_a&index=8 위 링크를 보고 블로그 글을 작성하였다. 1. Apache 설치하기 주피터 노트북에서 왼쪽 new버튼을 누르고 terminal로 들어간다. apache 설치를 위해 아래 명령어를 입력한다. sudo apt-get install apache2 그렇게 하면 설치가 완료된다. 2. index.html 생성하기 apache 설정 파일의 경로는 /etc/apache2/apache2.conf이다. cat명령어를 통해 해당 설정 파일을 읽어주도록 하자. cat /etc/apache2/apache2.conf 위 명령어를 입력하면 설정 파일이 쭉 뜨는데 중간.. WEB/Server 2021. 1. 16.

AWS EC2로 서버 구축하기 - 3 [Jupyter Notebook에 https적용하기] https://www.youtube.com/watch?v=Gzk3CA6mC2M&list=PLgtOJI-K1OGqhiFInA17Q3Oa9Q9HcXV_a&index=4 현재 우리가 주피터 노트북에 접속하면 http로 연결되어 있다. 지금 상태로는 데이터를 주고 받을 때 암호화를 하지 않고 데이터를 주고받게 된다. 따라서 이번 글에서는 https를 주피터 노트북에 적용하는 방법에 대해 기록하려고 한다. 1. 명령 프롬프트 창에서 서버 접속하기 먼저 명령 프롬프트창을 관리자 모드로 실행한 뒤 이전 글에서 한대로 서버에 접속해준다. 프라이빗 키 페어가 있는 폴더로 이동한 뒤 아래 명령어를 입력하면 된다. ssh -i "Tutorial.pem" ubuntu@ec2-13-124-212-229.ap-northeast-.. WEB/Server 2021. 1. 16.

AWS EC2로 서버 구축하기 - 2 [Jupyter Notebook설치 및 연결] https://www.youtube.com/watch?v=VrVJWwk1YyQ&list=PLgtOJI-K1OGqhiFInA17Q3Oa9Q9HcXV_a&index=3 이번 글은 위 영상에서 다루는 내용을 정리한 것이다. 1. 주피터 노트북 설치 주피터 노트북은 외부에서 해당 웹사이트에 접속해, 웹 환경에서 서버를 관리할 수 있게 해주는 도구이다. 기본적으로 파이썬 패키지 관리 프로그램 "파이프(pip)"를 이용하여 설치할 수 있다. 저번 글에서 해당 폴더로 이동해 명령어를 이용해 서버에 접속하는 방법을 적었는데, 이번 실습도 같은 환경에서 시작한다. 주피터 노트북을 설치하는 과정은 크게 3가지로 나뉜다. apt get업데이트 python3를 이용해 pip 설치 pip를 이용해 주피터 노트북 설치 명령어를 .. WEB/Server 2021. 1. 15.

AWS EC2로 서버 구축하기 - 1 [회원가입 + 명령프롬프트로 서버접속] https://www.youtube.com/watch?v=Wus-fC15elM&list=PLgtOJI-K1OGqhiFInA17Q3Oa9Q9HcXV_a 이번에는 AWS를 이용해서 나만의 서버를 구축해보려고 한다. 1. 회원가입 https://aws.amazon.com/ko/ 클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services 제조 AWS를 활용한 Siemens의 에너지, 의료 서비스, 제조 분야 혁신 Siemens가 AWS를 사용하여 어떻게 문화를 바꾸고 혁신을 장려하며 비즈니스 성과를 창출했는지 알아보세요. 자세히 알아보기 업종 aws.amazon.com 검색창에 aws를 검색해서 들어갈 수도 있다. 들어가면 오른쪽 위에 aws 계정 생성 버튼을 눌러 계정을 생성한다. 만약 .. WEB/Server 2021. 1. 15.

PHP 내용정리 - 4 https://opentutorials.org/course/3130/19385 WEB/Server 2021. 1. 15.

PHP 내용정리 - 3 WEB HTML CSS JavaScript 위 코드는 저번 시간에 만들어 놓은 코드이다. 반복문과 조건문을 이용하여 위 코드를 수정할 것이다. scandir함수 사용방법 scandir ( "폴더 위치" ) 리턴형은 array이다. 사용 예시는 아래와 같다. WEB WEB 여기서 1번과 2번의 ..을 없애기 위해 조건문을 사용하여 코드를 수정한다. WEB 함수의 사용 함수의 선언과 정의는 비슷하니 다른 프로그래밍 언어와 유사하다. 이를 이용해서 위 코드를 수정하면 아래와 같다. WEB WEB/Server 2021. 1. 14.

PHP 내용정리 - 2 https://opentutorials.org/course/3130/19335 WEB/Server 2021. 1. 14.

PHP 내용정리 - 1 https://opentutorials.org/course/3130 WEB2 - PHP - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 PHP에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 1억개의 웹페이지를 생산하면 opentutorials.org bitnami를 깔고 환경설정을 하는것은 아래 링크에 잘 나와있다. https://victorydntmd.tistory.com/192 [PHP 설치] Windows에서 PHP 설치 - Bitnami PHP는 LAMP 스택이라고 해서, Linux , Apache , MySQL , PHP 스택으로 개발을 하게 됩니다. LAMP 스택의 OS는 Linux인데, 제대로 PH.. WEB/Server 2021. 1. 14.

[HTML+CSS+JavaScript]타이핑 효과 랜딩 페이지 만들기 https://www.youtube.com/watch?v=e56H5n1SvEs&t=2s 위 강의를 보고 비주얼 스튜디오 코드를 통해 실습을 진행하였다. HTML 1. 파일 생성하기 index.html, main.js, style.css파일을 각각 생성한다. VScode에서는 !+키를 누르면 html의 기본 구조가 자동완성된다. 이와 같이 div.wrap을 body태그에 입력한 뒤 키를 누르면 로 자동 완성이 된다. 2. 아이콘 폰트 사용하기 구글에 material icon이라고 검색하면 맨 위에 아래와 같은 링크가 뜬다. https://material.io/resources/icons/?style=baseline Material Icons Get Material Icons material.io 들어가서 .. WEB/HTML+CSS+JS 2021. 1. 13.

바닐라 스크립트 - part 3정리 첫번째 영상을 보고 아래와 같이 현재 시간을 보여주는 코드를 작성했다. 00:00 //clock.js const clockContainer = document.querySelector(".js-clock"); clockTitle=clockContainer.querySelector("h1"); function getTime(){ const date=new Date(); const minutes=date.getMinutes(); const hours=date.getHours(); const seconds=date.getSeconds(); clockTitle.innerText=`${hours}:${minutes}:${seconds}`; } function init(){ getTime(); } init() 여태.. WEB/HTML+CSS+JS 2021. 1. 4.

바닐라 스크립트 - part 2 정리 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 - 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 이번에는 바닐라 스크립트를 공부할 것이다. 학습 도구는 Repl을 사용했다. 다운받을 필요가 없고 사용법도 간단하다. https://repl.it/~ Log In Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin, QBasic, F.. WEB/HTML+CSS+JS 2021. 1. 4.

JavaScript 내용정리 - 4 함수 다른 언어와 활용이 유사해서 실습만 해보고 넘어가도록 하겠다. Function Basic Parameter & Argument Return 함수 정의 방법 function(매개변수1, 매개변수2 ......){ 함수 내용; } 함수의 리턴형에 대해 살펴보자. Function Basic Parameter & Argument Return 이 코드에서는 주석처리한 부분만 눈여겨 보면 될 듯 하다. 자바 스크립트는 문자와 숫자를 더하면 숫자를 숫자를 문자로 간주하기 때문에 +를 덧셈이 아닌 문자결합연산자로 사용한다. 객체 이번에는 객체를 생성하고, 데이터를 저장하고, 또 그 데이터에 접근해 볼 것이다. 객체를 생성하는 방법 + 데이터를 저장하는 방법 var coworkers={ "programmer":"e.. WEB/HTML+CSS+JS 2021. 1. 4.

JavaScript 내용정리 - 3 https://opentutorials.org/course/3085/18879 조건문 예고 - 생활코딩 조건문 예고 2017-12-02 00:14:09 opentutorials.org 여기서 부터 공부 시작이다. 조건문 기초 조건문은 다른 프로그래밍을 해봤다면 내용이 같아서 실습만 해보고 넘어갔다. Conditional statements Program If-true If-false 조건문 활용 WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and inte.. WEB/HTML+CSS+JS 2021. 1. 3.

JavaScript 내용정리 - 2 데이터 타입 - 문자열과 숫자 숫자(Number) -연산 가능 + : 더하기 - : 빼기 * : 곱하기 / : 나누기 문자열(String) -따옴표로 묶어줘야함 -str.length -> 글자수 리턴 -str.toUpperCase() -> 모두 대문자로 바꿔줌 -str.indexOf('찾을 문자') -> 찾고자 하는 문자가 몇번째 자리에 있는지 알려줌 예시 'Hello world'.indexOf('O') //대문자 O // -1리턴 (값을 찾을 수 없기 때문) 'Hello world'.indexOf('o') //소문자 o // 4리턴 (첫번째 자리를 0으로 해서 소문자o가 4번째 자리에 있기 때문) 아래 링크에서 더 많은 자료를 볼 수 있다. https://developer.mozilla.org/ko/d.. WEB/HTML+CSS+JS 2021. 1. 2.

JavaScript 내용정리 - 1 https://opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상 opentutorials.org 자바 스크립트 강의는 위 링크에서 볼 수 있다. 자바스크립트를 사용하려면 내용을 태그로 감싸주어야 한다. 글을 쓰려면 아래와 같이 한다. HTML hello world 1+1 HTML은 1+1을 입력하면 그대로 출력하지만 자바스크립트는 자동으로 2라고 계산하여 출력한다. 이벤트 이렇게 위와 같이 웹 브라우저에서 특정한 일이 발생했을 때 그것을 .. WEB/HTML+CSS+JS 2021. 1. 1.

CSS 내용정리 - 선택자 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 이곳에서 선택자 게임을 진행 할 수 있다. A B : A안에 있는 모든 B를 선택한다. B는 다른 요소의 내부에 있기 때문에 자손이라고 부른다. -> #A B :와 같이 선택자끼리 자손 선택자로 묶을 수 있다. A.B : 모든 A중에서 클래스값이 B인 태그 선택 * : 전체 선택 A* : A안에 있는 모든 요소 선택 A+B : A에 인접한 B선택(하나만) A~B : A에 인접한 B선택(여러개 선택 가능) A>B : A하위의 모든 B선택 A:first-child : 이 웹페이지에서 첫번째로 등장하는 A선택.. WEB/HTML+CSS+JS 2020. 12. 31.

CSS 내용정리 - 4 오늘은 미디어 쿼리부분부터 공부 시작이다. https://opentutorials.org/course/3086/18323 반응형 디자인 - 생활코딩 반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항 opentutorials.org 미디어 쿼리 기본개념 반응형 웹에서 미디어 쿼리는 주로 기기의 화면 크기에 따른 배치를 할 때 사용한다고 한다. Responsive 처음에 이런 코드가 있다고 하자. 이 코드의 실행 결과는 다음과 같다. 이때 창의 크기가 작아지면 Responsive을 감싸고 있는 테두리를 없애보도록 하자. 중간에 아래 코드를 추가해준다. @media(max-width:880px){ div{ display:none; }.. WEB/HTML+CSS+JS 2020. 12. 31.

CSS 내용정리 - 3 div 와 span 태그 div태그는 block level element이고 span태그는 inline element이다. 아래 코드와 실행 결과를 보자. NAVIGATION ARTICLE 저기서 div를 span으로 바꿔주면? 아래와 같이 된다. grid 기본개념 정리 CSS의 grid기능을 이용하면 다양한 레이아웃들을 만들 수 있다. 저번시간에 우리가 만들고자 했던 사이트에서 CSS관련 글을 칸 옆에 나란히 배치하기 위해 이 기능을 사용할 것이다. grid기능을 사용하기 위해서는 먼저 배치할 아이템들(구성요소, 즉 배치하고 싶은 것들)을 그리드 컨테이너로 감싸줘야 한다. 직접 코드를 보도록 하자. 그리고 7번째 줄부터 {}로 묶여있는 부분들이 배치를 하는 부분이다. 먼저 그리드를 작성하기 위해 컨테이.. WEB/HTML+CSS+JS 2020. 12. 30.

이전 1 2 3 다음

티스토리툴바