LET ME EXPLAIN

[JS] westagram - 댓글 게시 기능 구현 메인 페이지 내에서 피드에 댓글을 다는 기능을 구현하였다. 쉽게 말해서 해당 댓글 게시 기능은 사용자가 입력한 input값을 담은 요소가 새로 생성되는 것이다. Check List ✅ 사용자가 원하는 내용의 댓글을 입력할 수 있도록 input 요소가 있어야 한다. => input ❌, textarea ⭕️ input으로 구성하려던 도중 인스타그램의 경우 textarea로 구성되어 있었다. 생각해보니 사용자가 정말 긴 내용을 코멘트로 달 수도 있었다. 실제로 인스타그램에서는 많은 양의 내용을 담은 코멘트를 다는 사용자도 있으니 필요한 부분이었다. 사용자가 댓글을 입력을 할 때에만 게시 버튼이 활성화 되어야 한다. keyup 이벤트를 줘서 사용자가 입력하면..

[CSS] westagram - inline 속성에서 발생하는 여백에 대해 westagram 구현 도중 main 페이지에서 피드에 사용자의 아이디와 댓글 사이에 여백을 주지 않았는데 자동으로 여백이 생성되는 문제가 발생했다. 문제 되는 자동 여백 🤯 이게 뭐야잇!!! 동일한 CSS와 동일한 class, 동일한 레이아웃 구조인데 이런 문제가 발생했다. 아니 대체... 왜? 나는 일단 저 둘 사이에 여백을 준 적이 없습니다 (결백) 새로 생성된 댓글에 여백이 없는 것은 이해가 되는데 왜 그 전에 미리 HTML 안에서 생성해둔 요소들 사이에는 여백이 있을까? 그로 인해 왜 나에게 혼돈을 주는가...? 시도해본 것들 🛠 우선 자바스크립트를 살펴보자. 자바스크립트를 리팩토링 했을 때는 또 정상적으로 4px정도의 ..

로그인 버튼 활성화&비활성화 (feat. westagram) instagram을 클론코딩(westagram)하면서 과제로 주어졌던 로그인 버튼 활성화 & 비활성화 기능에 대한 내용을 정리했다.  과제 ➡️ 로그인 페이지 1-1. 로그인 페이지 레이아웃 1-2. 로그인 페이지의 로그인 버튼 활성화 & 비활성화 메인 페이지 2-1. 메인 페이지 레이아웃 2-2. 메인 페이지 댓글 생성 기능 그 중 로그인 페이지를 먼저 작업하였다. 전체적인 westagram 레이아웃을 잡은 후 Javascript를 이용해 ID와 PassWord 입력란에 값이 모두 들어왔을 때만 로그인 버튼이 활성화 되도록 구현한다. checkList ✅ ID와 PassWord 둘 다 입력이 들어왔을 때만 로그인 버튼이 활성화 되는가? =>..

ES6 ES ? ECMA Script의 줄임말이다. Javascript를 표준화 시키고 규격화하기 위해 탄생했다. 현재는 ES10까지 나왔으나 주로 쓰이는 것은 ES6이다. ES6 ? 6번째 ES라는 뜻이다. 2015년에 처음 등장해 ECMA Script 2015라고도 불린다. ES5 이하 명세에서 문제 되었던 부분들이 ES6에서 많은 부분 해결이 되었고 다양한 기능들이 추가되었다. React, Vue 등의 라이브러리들이 개발 환경을 ES6로 바꾸다보니 ES6가 더 많은 관심을 갖게 되었다. 즉, ES6는 프로그래밍 언어가 아닌 스크립트 언어에 대한 표준 및 규격이다. arrow function 기본 형태 //ES5 function() {} //ES6 () = {} 이름이 있는 함수 //ES5 funct..

매개변수(parameter)와 인자(argument) 매개 변수(parameter) function(parameter) { // parameter == 매개변수 } 함수의 바로 옆 괄호에 들어가는 내용이 바로 매개 변수이다. 어떤 이름을 주어도 상관 없으며 이름에 나왔다시피 함수 안에서 '변수'의 역할을 한다. 해당 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값의 정의된다. 인자(argument) function test(params) { // ... } test(200); // argument 매개 변수에서 해당 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값이 정의된다고 했다. 호출될 때 전달받는 값이 바로 인자이다. 즉, 어떤 함수를 호출하면서 호출문의 괄호 안에 어떤 값 또는 값이 정..

display inline, block, inline-block display 속성에서 자주 쓰이는 inline, block, inline-block에 대해 알아보자. 왜 자주 쓰이냐면 시맨틱 웹을 구현하면서 의미 있는 태그를 사용하려고 할 때 inline 요소와 block 요소들의 특징으로 인해 레이아웃 배치에 영향이 있기 때문이다. inline 태그를 썼지만 block 특징을 가져야 하는 경우가 있고 그 반대의 경우(잘 안쓰이긴 함)도 있기에 display 속성으로 이 값들을 부여하면 태그를 더 자유롭게 사용할 수 있고 배치도 쉽다. inline 줄바꿈 없이 다른 요소들과 함께 한줄로 나란히 콘텐츠가 정렬된다. inline요소는 width, height가 무시된다. 해당 컨텐츠가 차지하고 있는 크기만..

🔖 position 레이아웃을 변경할 수 있는 방법 중 하나인 position을 알아보자. position은 브라우저 내에서 컨텐츠를 둥둥 띄운다고 생각하면 된다. 그래서 간혹 그냥 모든 컨텐츠를 position으로 다 정렬해버리는 경우도 있는데.... 정말 필요한 경우가 아니라면 쓰지 않는 것이 좋다. 왜냐하면 그렇게 하게되면 유지보수 하는데 정말 귀찮고 힘들기 때문이다. 어차피 기본값은 컨텐츠가 왼쪽->오른쪽 그리고 위->아래로 정렬되기 때문에 그에 맞춰 다른 속성으로 정렬해주어도 충분한 경우가 많다. static은 기본값(왼쪽->오른쪽, 위->아래)이라 생략하였다. 💡 모든 position 속성들은 top, left, right, bottom을 통해 위치하게 할 수 있다. position: rela..

vw, vh, vmax, vmin, rem, em, max-width, min-width 차이 쓸때마다 그냥 어렴풋이 알고 있는 지식으로 감 아닌 감으로 사용해서 아예 제대로 정리해볼 시간을 가졌다. vw & vh vw 브라우저 너비 값이 100px일때 1vw는 1px이다. (100분의 1) 퍼센트(%)로 계산할때 이해가 더 쉽다. ex) viewport의 너비가 1000px이고 컨텐츠 요소가 80vw라면 1000px의 viewport에서 80%를 차지한다는 뜻이고 즉 요소의 너비는 800px이다. vh 브라우저 높이 값이 100px일때 1vh는 1px이다. (100분의 1) vw와 동일하게, ex) viewport의 높이가 1000px이고 컨텐츠 요소가 80vh라면 1000px의 viewport에서 8..

🔖 section VS article 시맨틱 태그 비교 section과 article은 쓸때마다 헷갈려서 제대로 짚고 넘어가자고 다짐했다. article 내용이 독립적이고 따로 떼어져도 흐름이 깨지지 않는 내용일때 사용 블로그 글을 개별로 각각 나눌때 article을 사용하기도 한다. section 각 section의 내용이 연관성(논리적으로 관계있는 문서) 있을때 사용 article 안에 section을 넣기도 하고 section안에 article을 넣기도 한다. 그러나 설명을 보다시피 저 맥락대로라면 article 안에 section이 있는 것이 자연스럽다. 어떻게 구성하든 본인 자유이지만 나는 맥락상 article > section이 맞다고 생각한다. article > section 민초 민초단 반..

HTML을 통해 클릭시 바로 이메일로 연결이 되고 모바일일 경우 클릭 한번으로 바로 전화를 걸게 해줄 수 있다. 우선 a태그로 링크를 거는 방법중 세 가지의 방법을 간략하게 살펴보자. 사이트 or 페이지 이동 기본적으로 사이트 주소나 내가 만든 파일중에 다른 페이지의 파일로 이동할 수 있다. 가장 많이 사용하는 방식이다. 상대 경로, 절대 경로 가능 naver The Other Page 이메일 링크 걸기 : mailto mailtof:{이메일}을 href에 넣어주면 이메일을 작성할 수 있도록 링크가 생성되어 클릭하면 이동이 가능하다. send email mailto란? 이메일 클라이언트로의 복사 및 입력 과정 없이 사용자들이 특정한 주소로 전자 우편을 보낼 수 있도록 웹사이트의 하이퍼링크를 만들기 위해 ..