본문 바로가기

프론트3

[221030-221107] 일주일간 뚝딱거리며 포폴만든 이야기 자고로 우리 교수님이 그랬다. (코드를) 만지작거릴거면 적어도 예뻐야 만질맛이 난다고. 만지고있는데 재미가 없다면 그 이유 중에 하나는 안 예쁘다는 이유일거라고. 나도 그렇다. 디자이너는 아니지만 막 화려하게 예쁘진 않아도 마음에 들게 깔끔하면 코드 두들긴 결과물이 별게 아니더라도 마음에 참 들더라. 어쨌든 포폴을 만들어야해서 무료로 공개해놓은 포폴들 보고 있는데 내가 원하는 스타일이 없었다. 분명히 내 성격상 마음에 드는 디자인 찾을때까지 포폴 내용도 작성 안하고 구글링할게 뻔해서 호다닥 만들기로 했음. 1. 페이지 구성 구상 만들 페이지를 정하고, 나에 대해서 작성할 키워드를 작성했다. 정리 끝. 2. 레퍼런스 찾기 + 무한 구글링 마음에 드는 느낌을 가진 레퍼런스를 찾을때까지 찾아본다. 머리속에 희.. 2022. 10. 7.
[220317] socket.io 설치 & 세팅 socket.io 설치 $ npm install socket.io socket.io 의 구조 Namespace ㄴ Room ㄴ Socket socket.io는 이런 구조로 이루어져있다. Namespace에 있는 Socket끼리 통신하는 개념이고, default-NameSpace을 따로 지정해주지 않으면 '/'가 된다. socket.io 세팅 원래 html 파일 header에 이 코드를 작성해야하는데, 나는 모든 정적파일을 public에서 찾도록 설정을 해놓은 상태다. 빼내려면 public 폴더를 빠져나가서 찾는 코드를 작성해야하는데 구찮아..... 그래서 CDN 코드를 사용하기로 함. (이게 ES6 모듈이라고한다. 몰랐음) ( socket.io 공식 홈페이지 : https://socket.io/docs/.. 2022. 3. 18.
[211220] 브라우저의 구성과 html 기초 목차 1. 브라우저의 구성 2. html의 기초 3. 엘리먼트의 속성과 작성법 4. 엘리먼트의 종류 1. 브라우저의 구성 1-1. 프론트, 백엔드, css 1-2. 인터넷 창을 구성하는 2가지 네트워크(주소창) 화면을 구성하는 렌더링 1-3. 그렇다면 화면은 어떻게 만드는 것일까? 3가지로 이루어진 렌더링 : html, css, 자바스크립트 브라우저별로 개별적으로 다른 렌더링. 개발자 도구(F12) -> html을 볼 수 있음, 볼 수 있는 위치 지정 가능, 화살표를 누르면 항목별로 알 수 있음. 2. html의 기초 2-1. visual studio 작업 환경 만들기 visual studio 프로그램 설치 -> 확장 탭에서 korean 설치, live server 설치 visual studio code.. 2021. 12. 20.