You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🔮 부트스트랩 템플릿 사이트 모음집
부트스트랩 템플릿 사이트 모음 Bootstrap는 반응형 웹디자인을 기본으로 하고 있고, 다양한 웹 요소들의 디자인과 기능을 포함하고 있어 손 쉽게 사이트를 제작할 수 있다. 자신의 사이트에 맞는 디자인을 제작해서 사용하기는 하지만, 디자인의 비중을 조금 낮추고 전체 반응형으로 정형화된 템플릿을 찾을때 부트스트랩을 많이 사용하는 편이다. 하지만, Bootstrap 기본 디자인 모양은 매우 칙칙하고 차별화 되지 않기 때문에, 부트스트랩 템플릿을 이용하면, Bootstrap 기반이 아니라고 생각할 정도로 확연히 다른 모습은 아니지만 어느 정도 특색있는 디자인으로 꾸밀 수 있다. 거기다 최근에 부트스트랩5로 업그레이드 되면서 속도와 최적화 부분이 많이 향상되었다. 따라서, 처음 부터 일일히 css 디자인 작업..
![[Virtual Box] 💿 NAT / Bridge Adapter 개념 및 설정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEqhY2%2Fbtrit4LwRcI%2F24cTRDiroBKjGjPvGq96Vk%2Fimg.jpg)
[Virtual Box] 💿 NAT / Bridge Adapter 개념 및 설정
NAT은 버추얼박스가 설치되어 있는 호스트 PC가 공유기 역할을 하여 가상머신에 IP주소를 할당하는 방식이라면, Bridged Adapter는 실제 공유기로부터 가상머신에 IP 주소를 할당받기 때문에 호스트 PC와 동일한 네트워크 대역의 IP 주소를 받는다. 따라서 외부와 연결되는 네트워크를 구축할 땐 NAT보다 Bridged Adapter가 더 간편하다. Bridged Adapter는 가상머신 차원에서의 별도의 포트 포워딩 작업이 필요 없으며 고급 기능도 지원한다. NAT NAT는 가상머신 내에서 할당해주는 자유로운 IP이다. 10.0.0 번대로 시작한다 > 클라이언트 기능은 해주지만 서버로서 X 사설IP를 쓰고잇는 192.168.0.4 이 컴퓨터가 사설IP바깥쪽에 있는 PUBLIC IP에 해당되는 외..
![[백엔드 로드맵] 🌐 인터넷은 어떻게 작동될까요?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJD9KY%2FbtriopPIMuY%2FULjK8rSFuB1rklaGkKNCbK%2Fimg.jpg)
[백엔드 로드맵] 🌐 인터넷은 어떻게 작동될까요?
인터넷이란? 정보를 담고 있는 각 컴퓨터들을 TCP/IP 라는 통신 프로토콜을 이용해 서로 정보를 주고받도록 한 컴퓨터 네트워크를 말한다. 인터넷의 역사는 자세히 알려지지 않았지만 1960년대 한 연구 프로젝트에서 시작되었다고 한다. 그리고 1980년대에 들어서 많은 지원이 추가되며 공공 기반의 서비스로 진화해왔다. 인터넷은 지금에 이르기까지 많은 진화를 해왔지만 작동방식 자체는 크게 변하지 않았다. 인터넷은 다수의 컴퓨터를 연결하고 어떤 일이 있어도 연결 상태를 유지할 수 있는 방법을 찾는 방법이다. 인터넷 네트워크 종류 (발전 과정) 단순한 네트워크 A와 B라는 pc가 통신을 하기 위해서는 한개의 통신케이블이 필요하다. 다수의 네트워크 그렇다면 위 사진처럼 다수의 컴퓨터를 연결하는 경우에는 어..
🌐 웹의 비동기(Async) / 동기(Sync) 통신 정리
웹에서의 비동기와 동기 웹 개발을 하다보면 비동기(Async)와 동기(Sync)라는 용어를 자주 접하게 될 것이다. 이 두 용어는 웹에서 데이터를 주고받는 방식을 설명하는데 사용되는데, 동기(Sync)는 요청과 응답이 동시에 일어난다는 뜻이고, 비동기(Async)는 요청과 응답이 동시에 일어나지 않고 나중에 응답하는 것을 말한다. 그렇다면 왜 웹에서는 비동기와 동기라는 방식을 사용하는 걸까? 그리고 이 두 방식은 어떤 장단점이 있고, 어떤 상황에서 적절하게 사용할 수 있을까? 동기 (Sync) 동기(Sync) 통신은 웹페이지를 새로고침하면서 데이터를 불러오는 방식이라고 보면 된다. 예를 들어, 네이버 메일에서 왼쪽 사이드바에 보낸메일함에서 받은메일함으로 바꾸면 메일 리스트 화면 전체가 다시 로딩되는 것..
![[WEB] 🌐 웹 소켓 (Socket) 정리 (역사부터 차근차근)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0KeSL%2FbtrijUh8EXp%2FGjuzv8R3gVipzT91IdrKeK%2Fimg.png)
[WEB] 🌐 웹 소켓 (Socket) 정리 (역사부터 차근차근)
웹 개발을 처음 배우기 시작했다면 서버와 클라이언트의 통신은 모두 HTTP 프로토콜만 이용해서 이루어진다고 생각할 수 있습니다. 하지만 웹 개발을 하면서 채팅, 게임, 주식 차트 등의 실시간 통신이 필요한 서비스를 구현하려 하면 HTTP 프로토콜이 아닌 웹소켓 프로토콜을 사용하는 것이 좋다는 이야기를 흔히 찾아볼 수 있습니다. HTTP의 한계 [백엔드 로드맵] 🌐 HTTP는 무엇일까요? HTTP (Hyper Text Transfer Protocol) HTTP는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규약을 말합니다. TCP/IP(Transmission Control Protocol / Internet Protocol)을 이용하며, 사.. inpa.tistory.com HTTP..
자바스크립트 문법 총정리판
📌 자바스크립트 타입 number, string, boolean, object(function, array, data, regexp), null, undefined Symbol 📌 getter & setter getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행 setter 메서드는 obj.propName = value으로 프로퍼티에 값을 할당하려 할 때 실행 let user = { name: "John", surname: "Smith", get fullName() { //함수가 아니라 그냥 프로퍼티. 호출하면 getter함수가 실행 return `${this.name} ${this.surname}`; } set fullName(value) { //함수가 아니라 그냥 프로..
![[WEB] 🌐 웹 서비스 구조 (Web서버 / 웹컨테이너 / WAS) 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqTQ9r%2Fbtrijrtsohq%2FyfliKYFaYuFYg2yOJMRWgk%2Fimg.jpg)
[WEB] 🌐 웹 서비스 구조 (Web서버 / 웹컨테이너 / WAS) 정리
Static vs Dynamic 페이지 Static Pages 정적 페이지 데이터베이스에서 정보를 가져오거나 등 별도의 서버에서의 처리가 없어도, 사용자들에게 보여줄 수 있는 페이지. 어떠한 사용자가 오던간에 동일한 페이지를 보여줍니다. Ex) image, html, css, javascript 파일과 같이 컴퓨터에 저장되어 있는 파일들 Dynamic Pages 동적 페이지 서버에서 데이터베이스에서 정보를 가져와서 처리하는 것처럼, 어떠한 요청에 의하여 서버가 일을 수행하고 해당 결과가 포함된 파일을 보여주는 페이지. 사용자들마다 다른 페이지가 보여질 수 있습니다. Web Server와 WAS의 차이 Web Server - 웹 서버는 클라이언트가 요청한 정적인 콘텐츠를 HTTP 프로토콜을 통하여 제공..
🎨 position sticky - 위에 헤더를 고정하자
네비게이션 헤더 고정하기 대다수의 사이트가 상단 네비게이션 영역 부분이 스크롤을 내리면 같이 따라 내려오는 페이지 요소를 한번 쯤은 봐왔을 것이다. 이전에는 이러한 기능을 만들려면 자바스크립트로 복잡한 구성을 하여야 했지만 이제는 간단하게 css의 position: sticky 속성으로 구현이 가능하다. 예를들어 아래와 같이 요소 영역 부분을 스크롤을 내려도 상단에 고정시키고 싶다면, Logo Menu1 Menu2 Menu3 내용 ... See the Pen position-sticky-0 by barzz12 (@inpaSkyrim) on CodePen. 아래와 같이 속성을 설정해주면 상단 헤더 고정이 되게 된다. header { ... position: sticky; top: 0; } See the P..
🎨 CSS 변수(--variable) 사용법 & 응용 정리
CSS 변수 기능 복잡한 웹사이트 같은 경우 엄청난 양의 CSS를 가지고 있는데, 유지보수를 하다 보면 여러 곳에서 사용한 임의의 값을 한꺼번에 바꿔야 할 때가 있다. 그 값들을 하나씩 찾아서 일일이 바꾸려면 상당히 피곤할 것이고, 때에 따라 실수도 많을 것이다. 그래서 여타 프로그래밍 언어처럼 변수를 이용하면, 요소 전반에 걸쳐 사용되는 임의의 값을 변수에 저장하고 호출하면 보다 효율적인 프로그래밍이 가능해진다. CSS 변수 선언 및 호출 CSS에서 변수의 이름을 지정할 때는 변수 맨 앞에 -- 를 붙여주어야 한다. 그리고 변수를 호출해 사용할 때는 var(변수명)형식을 사용한다. :root { --main-font-color: #000f22; /* CSS 전역 변수 선언 */ } div { color..
🚀 CSS 애니메이션 재시작 하는 방법
CSS 애니메이션 재시작 엘리먼트.effect { animation: animation 1s linear } 이렇게 어떤 요소에 클래스로 만든 애니메이션을 넣고, 자바스크립트로 특정 상황에 애니메이션이 실행되게 했을 때, 그 특정 애니메이션 상황이 연속되면 애니메이션을 처음부터 다시 시작하고 싶으실 때가 있을 겁니다. 하지만 아래와 같이 단순히 class를 제거하고 다시 추가해도 애니메이션이 재시작 되지 않습니다. const target = 엘리먼트; target.classList.remove("effect"), target.classList.add("effect") 클래스를 붙이고 지우는 일은 사실 페이지의 많은 부분에 영향을 줄 가능성이 큽니다. 이런 변화를 바로 렌더링 하기에는 비용이 너무 크기 때..
🌐 애매한 UI / UX / GUI 차이점 정리
UI/UX/GUI 디자인은 혼동하기 쉽고 차이점을 알기 힘든 3가지 단어입니다. UI 는 User Interface UX 는 User Experience GUI 는 Graphical User Interface UX 기획자 (User Experience Researcher) UX 기획자가 하는 말 (출처: 이연주의 브런치) UX 기획자는 사용자를 조사합니다. UI, UX, GUI 중 가장 "User"와 가까이에 있는 직군으로, 사용자의 행동을 분석하고 서비스에서 개선할 부분을 발견합니다. UX 기획자에게 중요한 역량은 데이터를 추출하는 것보다는 사용자의 행동을 이해하여 새로운 서비스를 제안하고 적절한 개선 방향을 찾는 것입니다. UX 기획자는 분석한 내용과 개선 방향을 다른 담당자들이 이해할 수 있게 전..
🎨 transition / transform / animation 속성 사용법
CSS 트랜지션 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 쉽게 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기가 변화하는 설정을 가미했는데, 뚝뚝 바로바로 변화하는 것 보단 부드럽게 전환되는 효과를 지정해 줄 때 사용한다고 보면 된다 transition은 전환되는 모션을 추가로 가미하는 속성이지 그 자체로 스타일을 주는 속성은 아니다. 그래서 :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 그리고..
