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..

분명 날짜는 12월 되기 이틀 전인데 10월 회고를 쓰고 있는 신비하고 아름다운 회고 오늘은 wecode 개강한 날이기도 한데 11월 회고 쓰면서 다뤄볼 예정이다. 10월 매우 바빴다.. 집 알아보고 이사하고 얼레벌레 보낸 한달. 짧게라도 어떤 10월을 보냈는지 정리해보려고 한다. 👍🏻 특정 언어의 카테고리에 게시물 작성 (정보 공유 및 기록) 👍🏻 웹 기초를 공부하는 시간을 가졌다. (HTTP, 프로토콜, 웹 기초 등...) 👍🏻 Linux 강의 완강! 9월의 목표였던 책들을 완독하지 못해 아쉽지만 최대한 읽어볼 예정이다. 😂 확실히 애매한 내용도 기록하면서 한번 더 상기시키다 보니 큰 도움이 된다. 기술 블로그는 다른 사람에게는 몰라도 일단 나에게는 정말 좋은 영향을 준다. TIL을 작성하기 위해 하..