본문 바로가기
반응형

분류 전체보기514

이클립스 git 연동하기 및 커밋하기 1-1. Window 탭 > Show View > Git Reposiroties 선택 1-2. Clone a Git repository를 선택한 뒤 주황색부분에 깃허브 URL을 넣고 초록색부분에 깃허브 아이디와 패스워드를 입력한다. 1-3. next를 누르면 로컬저장소 Directory가 나타난다. 수정이 끝났다면 Finish를 눌러준다. 2-1. JAVA Perspective로 돌아오자. 그리고 커밋할 프로젝트 > Team > Share Project 클릭 2-2. 1-3에서 지정한 로컬저장소 Directory로 Create해주고 Finish를 눌러준다. 2-3 커밋할 프로젝트 > Team > Commit을 선택하면 2-4. 하단에 G.. 2019. 7. 9.
[웹기초 BE_Servlet] 10. Request, Response 객체 이해하기 Request, Response 객체 이해하기 들어가기 전에 이번 파트를 학습하다 보면 '요청', '응답'이라는 용어가 많이 등장합니다. 이번 학습에서는 클라이언트가 서버에게 보낸 요청을 추상화한 객체 HttpServletRequest 와 서버가 클라이언트에게 응답하기 위한 정보를 추상화한 객체 HttpServletResponse에 대해서 알아봅니다. 핵심 개념 HttpServletRequest HttpServletResponse 1. 웹 브라우저에 URL입력 2. 웹 브라우저는 도메인, 포트번호 이용하여 서버접속하고 3. 웹 브라우저는 패스정보, cli IP, 기타 요청 정보를 서버에 전송 객체지향에서 객체란 관련된 정보를 모아서 가지고 있는 것이 특징 cli로 부터 req들어오면 WAS는 2개의 객체.. 2019. 7. 9.
[웹기초 BE_Servlet] 9. 서블릿 컴파일 및 실행 / Servlet이란? / 작성방법 / 라이프 싸이클 / Request, Response 객체 이해 / doGet() / doPost() 핵심 개념 자바 웹 어플리케이션 HttpServlet Dynamic Web Project 자바 웹 프로젝트 만들기 Perspective는 2가지 Java Perspective에선 File > Project > Web > Dynamic Web Project JAVA EE Perspective에선 File > Project > Dynamic Web Project 우선 project name은 firstweb으로 한다. java web application은 혼자실행이 안된다. 반드시 WAS안에 있어야한다. 우리가 사용할 WAS는 톰캣! WAS가 웹앱이 실행되도록 도와주기에 Target runtime을 설정해줘야한다. new Runtime > Apache Tomcat v8.5 > Next 클릭! Browse를.. 2019. 7. 8.
[웹기초 BE_Servlet] [Error] JAVAC -version 오류 환경설정을 모두 다 했음에도 불구하고 java -version은 인식되지만 javac -version만 뜨지 않는다. 'javac'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이유는 기존 JAVA_HOME 경로 설정시 잘못된 경로를 지정한 상태에서 PATH에 %JAVA_HOME%bin 이라고 입력했기 때문이다. JAVA_HOME을 수정한 뒤 PATH의 %JAVA_HOME%bin을 삭제 및 재설정하니 정상적으로 인식된다. 2019. 7. 8.
[웹기초 BE_Servlet] 8. Tomcat 다운받기 및 설치하기 / 톰캣 실행하기 word 파일을 열어서 내용을 확인하기 위해서는 ms office의 word 프로그램이나 viewer가 필요합니다. 웹 어플리케이션을 실행하기 위해서도 필요한 것이 있습니다. 그것이 WAS이고, 이번 학습에서 설치할 Apache Tomcat은 WAS 중 하나입니다. 웹 어플리케이션을 실행하기 위해서 필요하므로 설치해야 합니다. 학습하기 Apache Tomcat이란? 아파치 톰캣(Apache Tomcat)은 아파치 소프트웨어 재단(Apache Software Foundation, ASF)에서 개발한 세계에서 가장 많이 사용되는 WAS(Web Application Server)입니다. 컴퓨터에 운영체제를 설치해야만 컴퓨터를 사용할 수 있는 것처럼, 자바를 이용하여 작성된 웹 어플리케이션은 WAS가 있어야만 .. 2019. 7. 8.
[웹기초 BE_Servlet] [오류] The JRE_HOME environment variable is not defined correctly 라고 입력했으나 The JRE_HOME environment variable is not defined correctly 라는 오류가 발생했다. 이 때는 JAVA_HOME의 디렉터리를 제대로 지정했는지 확인하면 해결된다. 지금은 위처럼 정상적인 경로로 설정해서 해결했으나 이전에는 bin폴더로 설정되어있었다 2019. 7. 8.
[Boost Web] 6. CSS의 구성 / style적용방법 / 상속과 우선순위 결정 / CSS Selector / Style 변경 / float 레이아웃 / 디버깅-HTML-CSS span { color : red; } span : selector(선택자) color : property red : value style을 HTML페이지에 적용하는 3가지 방법 1. inline HTML태그 안에다가 적용합니다. 다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다. ​ 2. internal style 태그로 지정합니다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다. ... ​ 3. external 외부파일(.css)로 지정하는 방식입니다. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다. 현업에서는 여러.. 2019. 7. 8.
[Boost Web] 5. HTML 레이아웃 / HTML 구조설계 / class,id 레이아웃을 위한 태그 레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용됩니다. header () section (영역 ex.검색창, 본문) nav (탭부분을 nav사용) footer (html5에 새로 추가된 태그이기에 데스크탑버전이 아닌 모바일 환경에서 쓸 수 있음) aside PC유저는 div태그로 header, nav, footer를 쓰지 않고 div에다 클래스이름으로 사용함 모바일에서는 그대로 많이 쓰임 html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다. 지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성됩니다. 보통본문을 div로 사용 id값은 container,wrap으로 표현 HTML 구조설계 (ht.. 2019. 7. 7.
모니터 프리싱크와 지싱크? / 테어링, 스터터링, 인풋랙 / bypass 모니터란? Freesync 화면의 가로와 세로가 뒤틀리는 현상을 보완하는 싱크 기술 중 하나 AMD 그래픽카드와 인텔 내장그래픽에서 사용 가능한 기능 지포스 GTX1050 Ti는 NVIDIA 그래픽카드로 프리싱크 기능 사용불가 지포스 그래픽카드는 G-Sync 지원 모니터에서 동일한 기능 사용가능. (그러나 지싱크 모니터가 더 비싸다) 추가적인 Freesync에 대한 자료는 여기에! 프리싱크와 지싱크비교 이 가변동기화 기술을 AMD에선 '프리싱크', 엔비디아에선 '지싱크'라고 부른다. 가변동기화란? 모니터 주사율을 그래픽 카드 프레임에 맞추는 방식 이를 통해 테어링, 스터터링, 인풋 랙 현상 감소. 테어링 : 그래픽카드의 최대출력프레임이 모니터의주사율보다 높거가 낮으면 발생하는 현상 스터터링 : 순간적으로 프레임이 .. 2019. 7. 6.
[웹기초 BE_Servlet] 4. 웹 서버의 기능, 종류,역할 / WAS란, 종류, 웹서버와의 차이점 / DBMS / 미들웨어 핵심 개념 Apache Nginx HTTP 클라이언트 (Client) 서버 (Server) 웹 서버란? 웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말합니다. 웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것입니다. 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있습니다. 정적인 데이터란, 이미지, HTML파일, CSS파일, JS파일 등처럼 컴퓨터에 저장된 파일들을 의미 동적인 결과란 웹 서버에 의해서 실행되는 프로그램을 통해 만들어진 결과물 웹 브라우저와 웹 서버 URL주소가 HTTP로 시작되는 이유는 HT.. 2019. 7. 6.
21:9 / 해상도 조절 / 엔비디아 제어판 디스플레이 탭이 없는 이유와 다른 해상도 변경방법 21:9비율로 모니터 해상도를 강제로 변경하기 위해 NVIDIA 제어판으로 들어갔지만이상하게 디스플레이 탭이 없다?찾아본 결과노트북의 디스플레이는 기본적으로 인텔 그래픽HD로 구동되기 때문!인텔 그래픽 HD로 구동되는 노트북을 옵티머스 기능이 적용된 노트북이라 한다. 옵티머스 노트북에서외장그래픽카드는 렌더링을,내장그래픽카드는 모니터로의 출력을 담당한다.(현재 노트북의 내장 그래픽은 HD 630, 외장 그래픽은 GTX1050) 일단, 제어판 > 디스플레이 설정에선 최대 해상도가 1920 * 1080까지만 선택할 수 있기에WIN10 설정 방법으론 안된다.그렇다면 대안은 없는걸까?있다!!바로 인텔 드라이버를 이용한 방법이다.바탕화면 우클릭 혹은 시작에서 인텔 그래픽 제어판을 찾은 뒤 해상도를 변경하면 된다. .. 2019. 7. 6.
[Boost Web] 3. browser의 동작 / 구조 / 파싱방법 / HTML,CSS 구조 / 렌더링 참고사이트 웹을 통해서 전달되는 데이터는 어딘가에서 해석돼야 합니다. 서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 'Browser'입니다. Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있습니다. 이런 작업의 대부분은 브라우저 내부에서 이뤄지기 때문에 반드시 알아야 하는 것은 아닙니다. 하지만 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있습니다. 학습 목표 HTML파일이 올 때 브라우저가 어떻게 렌더링과정(Web Browser Rendering)을 거쳐서 화면에 보이게 되는지 간단히 이해 브라우저의 동작에 대해 알아야하는 이유 소스를 더 빠르게실행시키기위함.. 2019. 7. 5.
[Boost Web] 2. 웹 Front-End 와 웹 Back-End 웹은 프론트엔드(FE)와 백엔드(BE)로 나눠집니다. 우리가 인터넷을 하기 위해서 브라우저에서 웹을 탐색하곤 하는데요. 브라우저를 프론트엔드 또는 클라이언트라고도 합니다. 웹백엔드는 인터넷 사용자에게는 보이지 않는 것이죠. 프론트엔드 웹프론트엔드? 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다. 또한, 사용자의 요청(요구사항)에 반응해서 동작합니다. 다른 말로 클라이언트 사이드라고 한다. 클라이언트의 입장에서 개발 진행 웹프론트엔드의 역할 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript HTML.. 2019. 7. 4.
[Boost Web] 1. HTTP 물리적인 하나의 서버에는 여러개의 서버가 동작 www은 인터넷 기반의 대표 서비스 중 하나이다. 각 서버는 포트값으로 동작. 인터넷은 네트워크의 네트워크 수많은 네트워크의 결합체 이 인터넷은 TCP/IP 프로토콜(약속)으로 연결됨 웹에선 상호통신을 위해 HTTP를 이용 HTTP는 어떤 종류의 데이터도 전송할 수 있다. HTTP는 현재 HTTP/2 버전까지 등장한 것. 현재는 1.1버전이 가장 많이 다뤄짐 HTTP를 무상태 프로토콜이라고도 부른다. HTTP 작동방식 HTTP는 서버/클라이언트 모델을 따릅니다. 장점 (무상태 프로토콜) - 불특정 다수를 대상으로 하는 서비스에는 적합하다. - 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답.. 2019. 7. 4.
6. Array.map 한가지만으로 타이틀과 포스터 props하기 이전에는 복붙형식으로 영화수만큼 넣었으나 API에서 많은 양의 영화정보를 불러온경우엔? 어레이사용하면 된다. Array를 통해 리스트를 만들면 Array하나만으로 타이틀과 포스터를 출력할 수 있다. 리스트에는 여러 오브젝트(타이틀, 포스터들)들이 존재한다. 새로운 array. map은 array안의 엘리먼트이다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) App.js import React, { Component } from 'react'; import './App.css'; // Movie.js 컴포넌트 불러오고 // div밑에 해당 컴포넌트 이름쓰기 import Movie from './Movie'; // Array const movi.. 2019. 7. 4.
5. 각 component에서 props를 통해 해당 데이터를 넘겨받아보자 리액트에는 2가지 컨셉이 존재 - state - props 여기서s props에 다룰 것 메인 컴포넌트 app은 모든 영화자료들을 가지고 오고 카드형태로 나타난다. 즉, 메인 컴포넌트는 무비 리스트가 있고, 리스트 안에는 영화의 정보가 담긴다. 다시말해, 부모 컴포넌트가 칠드런 컴포넌트에게 정보를 준다는 의미. 정보를 줄 때, props를 통해서 준다. props를 사용하려면 function이 아닌 class로 컴포넌트가 선언되어야 한다. (이전까진 function으로 잘 작동되었으나 props에서는 막힘. 오류내용과 해결방법) App.js import React, { Component } from 'react'; import './App.css'; // Movie.js 컴포넌트 불러오고 // div밑에.. 2019. 7. 4.
오류내용 / props / function / class 오류내용 ./src/Movie.js Line 15: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. Compiling... Compiled with warnings. 오류화면 이유 class가 아닌 function으로 선언했기 때문 function components do not have this.props, 해결방법 t.. 2019. 7. 4.
힙에 충분한 공간을 할당할 수 없음 에러 내용 Error occurred during initialization of VM Could not reserve enough space for 1048576KB object heap 원인 힙에 충분한 공간이 없음 해결방법 참고할 것은 By default, the maximum heap size is set to 768m. 라는 것 다음은 Talend Community에서 찾은 다른 또 다른 해법 2019. 7. 4.
반응형

티스토리툴바