웹개발공부
-
서블릿/JSP 공부#1웹개발공부 2020. 6. 28. 18:41
유튜브를 너무너무 좋아하는 지라 유튜브 강의를 자주 듣고 있다. 웹 관련으로 '뉴렉처' 채널에 있는 강의가 좋아서 이 걸 듣고 내용을 블로그에 정리하는 방식으로 공부하기로 하였다. 오늘 공부한 내용은 8강 객체 생성과 실행방법이다. 뉴렉처님은 처음에 툴을 쓰기보단 가장 간단한 에디터와 컴파일러만 이용해 코드를 만들고 실행하는 걸 보여준다. 불편함을 몸소 체험하라는 큰 뜻이 있으신듯하다. servlet의 기본 코드 구조는 외우는 걸 추천하심. Public class Name{ Public void Nmae extend HttpServlet{ Public void service(HttpServletRequest request HttpServletResponse response) throws IOExcepti..
-
프로젝트 ToDoList웹개발공부 2020. 5. 12. 23:58
edwith 부스트 코스 두 번째 프로젝트를 진행하고 있다. 페이지는 main과 todo list를 만드는 화면으로 구성되어 있고 todolist에 관한 정보를 mysql 데이터베이스로 연동을 시켜야 한다. https://hyungseonsong.github.io/web1/main 일단 화면부터 만들어 보았다. 만든 자료는 github에서 무료로 제공하는 호스트 서버에 올려서 홈페이지를 서비스하고 있는 상태이다. 상단에 TODO 리스트를 등록하는 버튼이 있고, 리스트를 추가하면 중단에 카드형으로 해야 할 일이 등록이 된다. ToDoList 프로젝트를 하기 전에 자기소개 페이지를 만든적이 있는데 그때보다 화면 구성이 조금 나아 보여서 다행이라고 생각하고 있다. 앞으로 계속 신경 써서 프런트 스킬을 갈고닦아..
-
CSS 선택자웹개발공부 2020. 5. 10. 16:27
css로 스타일을 지정할 때, 적용 범위를 지정해줘야 하는데 그걸 수행하는 게 선택자이다. 선택자에 관한 많은 글들을 한데 모아보았다. http://www.nextree.co.kr/p8468/ CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우저에 알맞게 보이는 것’이 중요하기 때문입니다. 그래서 웹 표준에서는 구조(Constructure)와 표현(Presentation)과 행위(Behavior)를 각각 분리해서 www.nextree.co.kr https://www.fun-coding.org/crawl_basic..
-
vscode로 자바스크립트 실행하기웹개발공부 2020. 5. 10. 15:08
지금까지는 웹 에디터를 사용해서 코딩을 했는데, 앞으로를 위해 전문 에디터 하나를 익혀둘 필요가 있다는 생각을 하였다. 여러 에디터 중에 가장 인기가 있는 'vscode'를 선택하였다. vscode를 실행시키고 간단한 자바스크립트 코드를 실행시키면 이런 창이 뜨면서 실행이 안된다. 자바스크립트를 실행시키려면 node.js라는 실행환경을 제공하는 프로그램이 필요하다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이곳에 들어가면 추천 다운로드가 보이니 다운을 받으면 된다. 그리고 설치파일을 실행시키면 이런 화면이 나타나고 지금부터 Next를 계속 눌..
-
자바스크립트 함수웹개발공부 2020. 5. 9. 23:04
자바스크립트의 함수를 선언하는 방식은 3가지이다. (ES6+ 기준) 함수 선언 function name(){ } 위 코드와 같이 작성하면 된다. 매개변수가 어떤 식으로 들어오는지 명시하는 게 사실 좋긴 한데 명시하지 않아도 argument라는 걸로 매개변수를 활용할 수 있다. fucntion test () { const len = argument.length; let sum = 0; if(len > 1) for(let i=0; i < len;i++){ sum += argument[i]; } return sum; } test(1,2,3,4,5); 이 코드는 인자 값으로 들어온 값을 모두 더해주는 코드이다. argument는 타입을 확인해보면 object로 나온다. 키 값이 정수이고 값은 인자 값으로 전달한..
-
자바스크립트 변수 타입웹개발공부 2020. 5. 9. 20:23
코드카데미로 간단하게 자바스크립트를 어떻게 쓰는지 대강 훑어봤고 edwith 강의를 듣기 시작하였다. 자바스크립트 1강에서는 변수 선언과 타입, 간단한 연산자에 대한 설명을 해준다. 강의 중간에 비교 연산자 '=='를 설명해주시면서 자바스크립트 내부적으로 비교하는 값들의 타입을 임의로 변경해서 비교를 한다고 하셨다. '1' == 1; null == undifined; 이런 것들이 모두 true로 나온다. 그래서 '===' 사용을 권장해 주셨다. 그러면서 변수의 타입을 정확히 확인하려면 'toString.call()'을 사용해야 한다고 하시며 관련 문서를 찾아보라고 하셨다. https://stackoverflow.com/questions/10394929/why-does-underscorejs-use-tos..
-
자바스크립트 비동기 처리웹개발공부 2020. 5. 8. 16:26
웹이란 환경은 무수히 많은 클라이언트와 서버들이 정보를 요청하고 응답을 하는 장소이다. 그러하다 보니 평소에 접하는 간단한 프로그래밍(개인 컴퓨터에서 어떤 통신도 없이 데이터를 계산하고 처리하는 프로그램)과는 많이 다르다. 지금까지 동기식으로 코딩을 해왔고 그것 밖에는 몰랐었다. 그래서 비동기 처리 문법을 공부하기에 앞서서 개념적 이해를 해야 할 것 같다. 동기식 처리 작업을 순차적으로 처리 비동기식 처리 비동기화된 작업이 끝날 때까지 기다리지 않고 다음 코드를 진행 자바스크립트는 어떻게 동작 하나? 자바스크립트는 기본적으로 싱글 스레드로 동작을 한다. 웹 환경에서는 동시적인 작업 처리가 필수인데 왜 싱글 스레드인가 약간 의아스럽긴 하였다. 단순하게 생각해서 5가지 일을 동시에 처리하려면 5명의 일꾼이 ..
-
자바스크립트 정적 메서드웹개발공부 2020. 5. 7. 12:05
자바스크립트에서 정적 메서드를 공부하였다. 유틸리티 함수를 만들 때 이걸 쓴다고 하는데 무슨 말일까? https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/static static static 키워드는 클래스의 정적 메서드를 정의합니다. developer.mozilla.org 대략적인 문법과 주의점은 위 문서를 통해 알 수 있었다. 그렇지만 아직 정적 메서드를 왜 쓰는지 잘 모르겠다. https://webclub.tistory.com/526 Static member of JavaScript 스태틱 멤버 스태틱 프로퍼티와 메서드란 인스턴스에 따라 달라지지 않는 프로퍼티와 메서드 를 말합니다. 클래스 기반 언어에서는 별도의 문법을 통해..