각종 학습 요약/Web
-
리눅스 가상메모리 켜기각종 학습 요약/Web 2023. 7. 6. 13:19
내용 보통 aws 프리티어를 처음 사용해보게 되면 거기에 웹서버도 올리고, 어플리케이션 서버도 돌려보고, rdb도 돌려보고 이것저것 시도하게 된다. 여기까진 괜찮을 수도 있다. 하지만 프로젝트를 빌드하거나, 도커를 올리게 되면 100% 멈춰있는 터미널을 만나게 될 것이다. 메모리 부족 문제다. 가상메모리(swap)를 설정해보자. 언제 가상메모리를 구성할까 부족할때 하면 된다. 그런데 메모리가 4G 미만이라면, 그냥 기본적으로 해두면 좋다고 생각하면 될 것 같다. 메모리 확인하기 다음과 같이 해본다 free -m실 메모리 정보 밑에 swap 0 0 0 과 같이 나오면 스왑메모리가 없는 것이다. 만약에 있다면 또 만들 필요는 없다. 여러개의 스왑파일을 만들어놔도 동작하는 데에는 무방하지만, 보통은 그렇게 할..
-
프론트엔드(웹서버)와 백엔드(WAS)를 나눈 리버스 프록시 구성해보기(w/ubuntu, nginx)각종 학습 요약/Web 2023. 6. 20. 11:11
상황과 필요 ubuntu 22.04에서 web server로 nginx를, WAS로 tomcat(springboot의 embedded tomcat)을 사용하는 상황으로 가정한다. 프론트는 react나 vue 등이 대응하고, api 호출만 백엔드가 호출되도록 하고 싶다. 쉽게 말해, 프론트와 백엔드 서버를 나눈 리버스 프록시 구성이다. 이때 https를 어떤 식으로 적용하면 좋을지 생각해보자. 가장 간단한 생각으로, '인증서를 p12 방식으로 변환하여 내장 톰캣 안에 넣어두면 되지 않나? 그러면 WAS만 띄우면 되는데'라고 생각이 들 수 있다. 하지만 그건 몇 가지 불편한 점이 있다고 생각한다. 어플리케이션 서버가 클라이언트에게 노출된다. 어플리케이션 서버의 컴퓨팅 파워는 어플리케이션을 구동..
-
Concept: REST API의 기본 개념 이해와 활용각종 학습 요약/Web 2022. 6. 8. 11:42
REST API의 기본 개념 이해하기 REST(Represented State Transfer) API란? REST란 HTTP(웹)의 장점을 최대한으로 활용할 수 있도록 제시된 아키텍처입니다. 기본적으로 제공되는 HTTP 메서드들을 규칙에 알맞게, 바람직하게 사용하는 것이죠. 다른 말로 하면, 자원을 URI로, 행동을 메서드로 잘 표현하여 요청과 응답을 정의하는 방식입니다. 무엇을 하고 있는지, 어떤 것에 대한 대화인지를 HTTP 요청/응답 메시지를 보고 파악할 수 있도록 하는 것이죠! REST API의 제한 조건 6가지의 제한 조건이 존재합니다. 설명에 앞서서 무엇들이 있는지 요약해보는 것이니 이해되지 않아도 괜찮습니다. 가볍게 훑어보시고 설명을 담고 있는 아래 문단으로 넘어가시죠! 인터페이스 일관성 ..
-
DNS의 작동 원리를 설명하는 9분 짜리 영상각종 학습 요약/Web 2022. 6. 7. 23:50
DNS - Domain name system에 대한 간략한 작동 원리 영상입니다. 오늘 커리큘럼에서 DNS에 대해 설명이 짧게 지나갔던 것 같아요. 추가로 알아두면 좋은 내용으로... 그래서 올해 초에 혼자 개발 공부를 시작하면서 DNS에 대해서 짧게 정리했던 내용이 있어서 공유하고자 가져와봤습니다. 물론 이 영상도 짧고 부족하지만, 그래도 요 정도(아주 요약된 버전..의 설명)는 알고 있어도 좋을 것 같아요. 최대한 틀린 내용이 없게끔 노력했지만, 당연히 틀린 내용이 있을 수 있어요. 피드백은 어떤 것이든 환영합니다 :) 다들 화이팅입니다 :D
-
flex layout에 대한 간단한 이해각종 학습 요약/Web 2022. 4. 30. 19:57
flex layout에 관한 작은 설명 이번주에 부트캠프에서 flex layout을 공부했는데(백엔드 과정이지만 기본적인 프론트 지식 정도는 쌓게한다는 의미에서 HTML/CSS도 보았다) 해당 내용이 매우 헷갈리다보니 스트레스를 받는 분들을 많이 만났다. "flex layout, 이거 사실 별로 중요한 거 아니야~"란 말을 들어도, 이해가 안되는 자신이 답답하게 느껴지는 그 스트레스가, 나는 충분히 상상이 되었다(그냥 내가 성격이 깝깝한 걸지도...). 그래서, 내가 가진 이해가 정확하지 않을지도 모르지만, 실제 활용하기에는 적당한 이해였기에 짧게 나눠보고자 한다. (제목은 flex 컨테이너에 대해 간단하게 이해시켜준다는 말이 아니라, 간단한 정도만 이해를 도와준다는 말이었던 것) 한가지, 용어 하나만 ..
-
HTML Page Layout : Flexbox로 레이아웃 잡기각종 학습 요약/Web 2022. 4. 28. 16:53
페이지 레이아웃 Flexbox로 레이아웃 잡기 display: flex 앞서 '기초 CSS의 이해 - 박스모델'에서 살펴봤듯, style 속성 display는 어떤 형식으로 보여질 건지, 박스모델의 display 방식을 결정하는 속성이다. Flex layout이란, 부모 엘리먼트의 박스모델을 display: flex로 속성값(강조한 이유가 있다, 일단 기억해두자)을 지정하고, 그 아래로 자식 엘리먼트들을 구성하는 레이아웃 구성 방식. Flex 요소(이하 '콘텐츠')들이 쌓이는 규칙 콘텐츠들은 기본적으로 수평으로 쌓인다('flex-direction의 기본값이 row다'라고 한다). 쌓는 방향(flex-direction)을 결정하는 속성값 두 가지: row, col..
-
HTML Page Layout : 화면을 나누는 방법각종 학습 요약/Web 2022. 4. 28. 16:50
페이지 레이아웃 레이아웃: 화면을 나누는 방법 HTML 구성 기본 TIP html을 작성할 때는 작성한 요소들이 위쪽으로부터 아래쪽으로, 그다음엔 왼쪽으로부터 오른쪽으로 쌓여간다고 생각하면 작업이 수월하다. CSS style 작업을 하기 전 가장 먼저 해야할 일 : 레이아웃 리셋 HTML 문서는 지금 막 생성한 것이라도 자체적인 style이 있다. 때문에 예상치 않게 여백이 생기거나 사이즈 계산이 맞지 않게 된다. 브라우저 간의 차이도 있고. 그래서 이런 차이들을 최소화 하는 style을 가장 먼저 적용하는데, 이 작업을 레이아웃 리셋이라고 한다. * { box-sizing: border-box; } body { margin:0; padding:0; }
-
기초 CSS의 이해각종 학습 요약/Web 2022. 4. 27. 17:06
*** 마크다운으로 작성한 내용을 기본 에디터로 수정하다보니 깨져보이는 곳이 있을 수 있습니다. 양해바랍니다. *** *** 문제되는 자료가 있을 시 댓글로 남겨주시면 수정하겠습니다. *** CSS 기초 CSS란? Cascading Style Sheets의 약자. 번역기 돌리면 '계단식 스타일 시트'라고 나오는데 솔직히 뭔 소린지 모르겠다. 근데 어쨌든 HTML의 시각적인 요소를 조작할 수 있는 웹 기술이다. 기본 구조 형식(스타일시트 사용 시) 오늘 배운 html/css로 그려보았다. ㅎㅎ 셀렉터는 여러 종류가 있다. 태그 셀렉터, id 셀렉터, class 셀렉터, 수많은 수도 셀렉터와 상태 셀렉터들... 태그, id, class만 알아도 기본이지만, 필요에 따라 다른 것들도 익혀보자. 여기서는 말고,..