heeney.log

[React] fetch로 백엔드와 통신하면서 놓쳤던 부분 장바구니를 구현하면서 백엔드와 통신할 일이 많았는데, 이때 다양한 실수를 범했기에 기록한다. 다음 통신때는 절대 이런 실수를 하지 않으리 다짐해본다. 우선 내가 장바구니에서 백엔드와 통신해야했던 부분, 중요한 부분을 이야기 해보자면, 장바구니는 회원만 이용이 가능하다. 백엔드에 POST로 보내줄 body 내용은 JSON 문자열로 변환해야 한다. 전체 삭제 및 선택 삭제, 제품 직접 삭제가 가능하고 삭제한 내용은 DB에서 지워져야 한다. 구매하기를 누르면 구매한 데이터가 백엔드 측에서 따로 저장되어야 한다. 장바구니는 회원만 이용이 가능하다. 회원만 가능하다는 뜻은 결국 Token을 갖고 있는 회원만 장바구니에 접근이 가능하다는 뜻이다. 회원만 가..

주마등처럼 스쳐 지나가는 2021년 그렇다. 지금 이 글을 쓰는 시간은 31일 오후 11시 23분경이다. 다소 감성적이게 될 수 있기 때문에 주의하며 글을 쓰겠다. 어차피 몇분 지났다고 어썸한 2022년이 마법처럼 펼쳐지는게 아니라 그냥 2022년 1월 1일에 불과하기 때문이다. 이제 나는 기념일이며 뭐며 감흥이 없다. 감흥 없는 사람치고 글을 쓰고 있는게 좀 웃기긴 한데 그래도 한 해를 마무리하는 시간을 가지는게 스스로에게 값지기도 할 것 같고, 벨로그 구경하다보니 다양한 회고록이 있던데 왠지 더 열심히 살아야할 것 같은 느낌과 에너지를 주기에 한번 도전해보았다. 일단 2021년을 떠올려 보면, 나에게 2021년은 되게 긴 한 해였다. 회사를 1년 다녔다. 나는 웹디자인 & 퍼블리셔로 스타트업이자 첫 ..

[React] map 함수 적용시 key props를 부여하는 이유 본론부터 말하자면 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다. key값 부여 안하면 어떻게 될까? 🤓 콘솔에 에러 메세지가 뜬다. 너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유닠크한 키 prop을 줘야돼. 왜 필요하지? 🤔 map으로 요소를 하나씩 뿌려준다고 하자. 리액트는 내용이 바뀔 때 다시 랜더링을 하는데 10개의 리스트중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 여기서 달라졌네? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다. 그러면 리액트는 key값으로 변한 내용인지, 아..

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