Hebom's Dev

TIL을 깃(GIT)으로 옮기려고 준비중이다. 이유는 깃이 아무래도 프로그래머들이 이용하는 저장소다 보니까, 교류도 많고 깃을 집중적으로 쓰기 위해 (그리고 잔디밭을 만들기위해) 많이 써봐야 할 것 같아서이다. 1.morgan이라는 외부 미들웨어를 코드에 넣는 것에 대해 배웠다. 2. 어제 배운 내용을 복습했다. 서버는 언제나 request를 받을 준비를 하고 있다. 이 request의 대표적인 행동은 홈페이지 주소(url)을 사용자가 입력하는 것이다. 이런 url이 일종의 문의 역할을 하고 이런 것들을 라우츠(routes)라고 한다. 등등... 3. CSS 그리드 복습을 할겸 새로운 홈페이지를 클론 코딩했다. 그리드 내부에 그리드를 넣는 일종의 NESTING 개념을 적용했는데 그런대로 잘 적용이 되는 ..

1. 듣고 있는 인강에서 백엔드 파트를 공부중이다. 노마드 코더 사이트에서 유튜브 클론 공부 강의를 듣고 있다. 현재 nodeJS에 EXPRESS를 사용하고 있다. * 서버는 브라우저에서 보낸 request를 받고 response를 보낸다. * 서버가 이런 정보를 받으려면 port(일종의 문)를 사용해야 한다. * 서버는 request를 받으면 반드시 respnse를 해줘야지 안그러면 브라우저 무한 로딩이 될 수 있다. * 미들웨어(Middleware)를 추가할때 신경써야 할 점은 request와 response뿐만 아니라 next 파라미터로 갖는다! 게다가 다음으로 넘긴다는 의미로 'next()'를 꼭 기록해줘야 한다. * 종료함수에서는 필요없으니 next 파라미터를 넣을 필요가 없고 return으로 ..

칸 아카데미의 SQL강의 내용을 요약해봅니다. 뒷부분에 자가결합 부분이 다소 헷갈리지만 첫술에 배부를 수 없겠죠? 쌓이다보면 언젠가는 터득하게 되리라 기대해봅니다. 테이블 생성하기 CREATE TABLE [생성할 테이블명] ([생성할 컬럼명1][데이터타입], [생성할 컬럼명2][데이터타입]....) ; 예시 CREATE TABLE book(id integer,name text,rating integer); 데이터 삽입하기 INSERT INTO [삽입할 테이블명] VALUES ([첫번째 컬럼에 추가할 데이터], [두번째 컬럼에 추가할 데이터] ... ); 예시 INSERT INTO book values(1,"white death",5); INSERT INTO book values(2,"remember Mi..

가끔 CSS코드를 보다보면 선택자들을 공백없이 붙여서 사용하는 것도 있고 공백을 넣어서 사용할때도 있고 쉼표로 구분하는것도 있어서 무엇인지 헷갈렸던 부분이 있습니다. 마침 칸아카데미에 관련설명이 있어서 강의를 들으면서 정리를 해봤습니다. 여러개 선택자를 한꺼번에 스타일을 적용하고 싶은 경우 이건 쉽습니다, 그냥 쉼표(,)로 구분합니다. h1, h2 { font-family: cursive; } 그런데, 아래의 경우들이 다소 헷갈릴때가 있습니다. 태그선택자와 클래스 선택자를 결합해서 쓰는 경우 p.warning{ border: 5px solid orange; } 위의 예시는 태그(p)와 클래스(.warning) 사이에 공백이 없습니다. 이런 케이스는 클래스 선택자들 중에 태그 안에 들어간 클래스 선택자만 ..

인프런에서 맛집 클론코딩 사이트에서 네트워크에 대해 설명해주신 내용이 너무 쏙쏙 머리에 들어와서 복습할 겸 제가 피그마로 후다닥~ 다시 정리해보았습니다. 그동안 포트, 프로토콜 이런 게 무엇인지, 아파치, PHP, MySQL등이 혼재되서 어지러웠는데, 이제야 좀 정리가 됩니다. (강사님 감사합니다) 클라이언트와 서버와의 관계설명 먼저 클라이언트와 서버와의 관계를 쉬운 예시로 다음과 같이 설명해봅니다. 레스토랑에서 주문하는 과정을 비유해서 설명해 주십니다. 구체적으로 서버를 어떻게 찾아가는가? 클라이언트가 서버를 어떻게 찾아가는지 손님이 가게를 찾고 주문하는 방식에 비유해서 설명해주셨습니다. 참고자료 인프런 풀스택 맛집지도 만들기 https://www.inflearn.com/course/%EB%B9%84%..

CSS에서 한 요소를 width나 height의 나머지 공간을 채우려면 어떻게 할지 찾아봤습니다. flex-grow라는 녀석이 있더군요. 예를 들어, 주로 홈페이지를 만들때 상단에 navigation bar가 있고 중앙에 main 컨텐츠가 들어가고 하단에 footer로 꾸미고싶다고 가정합시다. 아래와 같이 세 요소의 비중이 동일할때 main으로 나머지(검은부분)을 꽉 채우고 싶어요! 이럴때는 채우고 싶은 요소 즉, 아래에서는 main선택자에 'flex-grow:1'이라는 값을 줘서 나머지를 꽉! 채울 수 있습니다! See the Pen Untitled by Hebom (@hebom2022) on CodePen.

CSS에서 엘리멘트를 숨길 때 display: none 과 visibility : hidden를 사용할 수가 있습니다. 그런데 이 둘의 차이점이 뭔지 궁금해서 알아보았습니다. 일단 이런 상자가 있다고 칩시다. 주황, 파랑, 청록색 블럭이 있네요! (결과값쪽을 봐주세요) See the Pen study by Hebom (@hebom2022) on CodePen. 먼저 display : none에 대해 알아봅시다! display속성은 어떻게 엘리먼트가 표시되는지 결정합니다. (inline or block 중) 그리고 flex, grid등과 같은 엘리먼트의 자식들의 레이아웃도 설정합니다. 이때, display를 none와 함께 쓰면 엘리먼트를 보여주지 않습니다. (게다가 그 자식들까지 포함해서) 마치 원래 없..

querySelector와 getElementById 중 무엇을 써야 될지 개념이 없어서 정리를 해봅니다. querySelector는 다양한 선택자를 입력할 수 있어서 선호했더니, 다른분들은 속도가 느리다고 잘 안쓰는 편이라고 합니다. querySelector 선택자(selector)와 일치하는 첫번째 엘리먼트 객체를 반환합니다. 일치하는 엘리먼트가 없으면 null을 반환합니다. 선택자는 ' '(외따옴표)나 " "(쌍따옴표)로 시작하며, 선택자의 종류에 따라 말머리가 달라집니다. (아래 예시를 참고) 구문 querySelector(selectors); 예시 document.querySelector('img'); //선택자가 html태그일때 아무것도 붙이지 않는다. document.querySelector..

그동안 여러가지 공부를 시도했다. * 유데미 문벅스 카페메뉴 따라만들기 : 메뉴관리까지 진행 * 여러가지 자바스크립트 클론 코딩 * 조코딩 웹앱 만들기 따라해봤다. * 칸 아카데미 자바스크립트 강의 듣기 (~반복문까지 들음) 그러나!!!, 백날 클론코딩만 했다가 실력은 하나도 안드는 것 같아서 당초 올해 계획을 세웠던 앱만들기를 먼저 시작하기로 했다. 올해 계획했던 앱 개발 시작은 아직 버거우니 간소화버전을 구상하고 그것을 project F라고 명명했다. 그냥 말로 하면 되게 단순하다! 내가 선호하는 아티스트를 선택해서 팬덤에 가입한 후, 하트를 클릭하면 팬덤 멤버들의 클릭 하트수를 합산해서 랭킹을 산출해 내는 기능이다. 하지만! 내게는 서버가 붙는 어머어마한 프로젝트다!!!! 우선 기획서와 피그마로 U..

JS로 CCS 스타일의 속성값을 알아낼 수 있는 짝꿍을 소개합니다! getComputedStyle와 getPropertyValue입니다. getComputedStyle은 객체형태로 반환해주고 getPropertyValue로 속성값을 가져올 수 있다고 합니다. getComputedStyle 구문 var style = window.getComputedStyle(element[, pseudoElt]); * element : 속성값을 얻으려는 요소 * pseudoElt : 의사요소(=pseudo-elements, ::after, ::before, ::marker등등... )를 지정하는 문자열. 보통 생략되거나 null이어야 함 getComutedStyle 구문 매개변수로 지정된 CSS속성의 값을 반환합니다. v..

CSS에서 input 태그안의 타입을 선택하려면 어떻게 해야 하나요? 대괄호를 ( [ ] ) 쓰고 이 안에 타입명을 쓰면 됩니다. 구문 input[type=타입명] { /* 스타일 내용 */ } * input에 정의할 수 있는 타입명 : button, password, text등 많습니다. 자세한 input type에 대해 알고 싶으시면 아래를 참고하셔요! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input 예시 input[type=text] { font-family: Arial, sans-serif; } input[type=text], input[type=password] { width: 100%; padding: 15px; margin: ..

오늘도 클론코딩을 연습합니다. .clearfix::after { content: ""; clear: both; display: table; } 엇? CSS코드에서 가끔 보긴했는데 이 ::after는 뭘까요? 오늘은 가상요소(::)에 대해 알아봅시다! 가상요소(Pseudo-Element)란? 선택자에 추가하는 키워드로 선택한 요소의 지정된 부분에 스타일을 입힐 수 있습니다. 예를 들어, 요소의 내용 앞이나 뒤에 내용을 추가하거나, 요소의 첫글자 혹은 줄 스타일을 지정할 수 있습니다. 가상 요소의 종류 선택자(selector) 예시 설명 ::before p::before 선택한 요소의 바로 앞에 다른 요소를 삽입합니다. ::after p::after 선택한 요소의 바로 뒤에 다른 요소를 삽입합니다. ::fi..