CS기초/웹
-
망분리 환경에서 Spring boot gradle 설정CS기초/웹 2022. 4. 3. 01:54
회사에서 Spring boot 프로젝트를 Spring initializr를 이용해서 초기 세팅을 하고 빌드를 했더니, 스프링 부트 의존성 라이브러리들을 땡겨지 못해서 gradle 빌드 에러가 났다. 플러그인 id 가 org.springframework.boot인 것을 maven central 레포지토리에서 끌고 와야 하는데, 망분리 환경이라 방화벽에 막힌 듯 했다. 이럴 경우 몇 가지의 해결 방법이 있다. 1. 핫스팟을 켜고 dependency 라이브러리들을 받아와 local repository에 넣어놓고 빌드때 이용한다. ( .m2 나 .gradle 같은 cache repository에 넣어놓고 사용 ) 2. 방화벽 설정을 변경하여 maven central 레포지토리에 접근 가능하도록 한다. 3. 자체..
-
React 와 Spring boot 서버CS기초/웹 2022. 3. 31. 16:21
회사에서 개발하면서 삽질한 내용을 적어보고자 한다. 프론트는 React + Typescript 를 사용해서 SPA 구조로 개발했고, Spring boot 로 REST api 를 개발하였다, 내장 톰캣을 사용해, 프론트와 서버를 같이 jar 로 말아서 배포해야했다. 사실, 배포 단위를 나누는 것이, 변화에 대한 수용에 용이하게 해주어서, 프론트와 백을 각각의 웹 어플리케이션 서비스로 띄우고, 웹서버를 앞단에 두어서 리버스 프록시 설정을 하는게 좋다. (보안상으로도 좋다고 한다) 예를들어, 프론트를 3000번 포트에 띄우고, 스프링 서버를 8080포트에 각각 띄운다음에, nginx 설정을 통해서, /api/ 로 요청이 들어오면 8080포트로, 그 외에는 3000번 포트로 요청을 보내주게끔 하면, 포트 번호를..
-
[부스트코스] Web UI 개발 - FECS기초/웹 2020. 3. 20. 23:49
* 이 글은 부스트코스의 강좌를 듣고 작성되었습니다. https://www.edwith.org/boostcourse-web/lecture/16698/ [LECTURE] 1) window 객체(setTimeout) : edwith 들어가기 전에 전역객체(window)에 속한 메서드에는 경고창을 띄워주는 alert 그리고 setTimeout이라는 메서드등이 있습니다. 이를 어떻게 사용하는지 그리고 다른 함수와... - 부스트코스 www.edwith.org 1. window 객체 (setTimeout 과 비동기) window 는 전역객체라 생략도 가능하다. 디버깅시 자주 쓰는 alert이나 setTimeout 등의 메서드 들이 window 객체에 있다. setTimeout 은 비동기적으로 동작되는 메서드다. ..
-
[부스트 코스] CSS 기초 문법 (우선순위, 선택자, 레이아웃 구성)CS기초/웹 2020. 2. 13. 00:58
* 이 글은 부스트코스의 웹 프로그래밍 강좌를 수강하고 작성되었습니다. https://www.edwith.org/boostcourse-web/joinLectures/12952 [부스트코스] 웹 프로그래밍 강좌소개 : edwith - 부스트코스 www.edwith.org 1. CSS 선언 방법 CSS 선언방법은 다음과 같다. 괄호 { } 는 객체를 표현한다. 그 안에 따옴표 없이 프로퍼티 이름을 쓰고 값을 준다. 스타일을 HTML 페이지에 적용하는 세가지 방법이 있다. inline : HTML 태그 안에다가 넣는 방법 internal : head 안에 바로 style 태그로 지정한다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해..
-
[부스트 코스] HTML - FECS기초/웹 2020. 2. 6. 13:45
[부스트코스] 웹 프로그래밍 강좌소개 : edwith - 부스트코스 www.edwith.org 1. HTML Tags 태그란, HTML 문서를 구성하는 명령어다. 링크나 이미지, 목록, 제목 등 HTML 을 구성하는 것들에 태그를 단다. 태그의 종류는 매우 많기 때문에, 구글링해서 참고할 수 있다. https://www.w3schools.com/TAGS/default.ASP 를 보면, 태그들이 나와있다. 2. HTML Layout 태그 레이아웃을 구성하는 태그에는 다음과 같은 것들이 있다. header section nav footer aside article 이들은 각각 다음과 같이 구성된다. 사실 이름만 저렇지, div 랑 똑같이 처리되기는 한다. 위의 레이아웃 태그들은 HTML5 부터 나와서 IE ..
-
[부스트 코스] 웹 개발의 이해 - FE/BECS기초/웹 2020. 2. 6. 01:55
* 이 글은 부스트 코스 웹 프로그래밍 강좌를 듣고, 작성되었습니다. https://www.edwith.org/boostcourse-web/joinLectures/12952 [부스트코스] 웹 프로그래밍 강좌소개 : edwith - 부스트코스 www.edwith.org 1. 웹 프로그래밍을 위한 프로그램 언어들 저급언어 : 기계 중심의 언어 고급언어 : 사람 중심의 언어 컴파일러 : 어셈블리어를 기계어로 바꿔줌. 또는 소스코드를 기계어로 번역해주는 도구 컴퓨터, 즉 기계가 직접 알아들을 수 있는 0과 1의 2진수로 이뤄진 값으로 작성하는 프로그래밍 언어를 기계어라고 한다. 기계어는 사람이 프로그래밍하기 굉장히 어렵기 때문에, 이 기계어의 숫자와 1:1 대응시킨 기호를 만들고, 이 기호로 프로그래밍을 하게 ..
-
[부스트코스]웹의 동작 원리(HTTP 프로토콜의 이해)CS기초/웹 2020. 1. 19. 23:46
*이 글은, 아래 부스트코스의 웹프로그래밍 강의를 듣고 작성되었습니다. https://www.edwith.org/boostcourse-web/lecture/16661 [LECTURE] 2) 웹의 동작 (HTTP 프로토콜 이해) : edwith 들어가기 전에 사람과 사람이 전화 통화를 하기 위해서도 몇 가지 규약이 필요합니다. 서로 알아들을 수 있는 말을 사용해야 하며, 한쪽이 말할 때 다른 쪽에서는 들어야 합니다. 또한... - 부스트코스 www.edwith.org 인터넷과 웹 WWW(World Wide Web). 간단히, 웹(Web)이란 인터넷 상에 연결된 사용자들이 서로의 정보를 공유할 수 있는 무형의 네트워크 공간을 의미한다. 웹은 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 정보를 하이퍼..