hahagarden의 블로그

문제상황 처음 테이블 목록은 1위 타이타닉, 2위 헤어질 결심, 3위 세 얼간이이다. 데이터를 수정하면 랭킹순서대로 정렬되지 않는다. (드래그앤드롭으로 순위를 변경하는 것은 문제없이 잘 된다.) 데이터 수정 후 내가 지정한 랭킹(1위, 2위, 3위) 순서가 아니라, 데이터베이스에 데이터를 추가한 시간 순서대로(2위 헤어질 결심, 1위 타이타닉, 3위 세 얼간이) 정렬이 되고 있다. 🩹 초기 구현 리스트 데이터를 수정하면 파이어베이스의 snapshot기능으로 자동으로 업데이트된 데이터를 가져온다. 이 때 가져온 쿼리데이터로 likes상태를 업데이트 해준다. 데이터베이스에는 데이터가 생성된 시간 순서대로 정렬이 되어있고, 이 순서대로 쿼리데이터를 가져오며, likes상태(배열)에도 이 순서대로 저장된다. 한..

피그마로 GNB를 만드는 실습을 해보았다. click interaction을 주고 change to로 컴포넌트 프로퍼티를 변환해주는 기능을 이용하였다. 그런데 change to는 상태를 전환할 때(호버효과나 아코디언 컴포넌트처럼 펼침, 접힘을 구현할 때) 주로 사용하고, GNB의 메뉴와 같이 아예 페이지를 전환하는 경우에는 각각 프레임화하여 click interaction은 Navigate to를 이용하는 것이 적합해보인다.

🙌 github commit 🙌 refactor: change state logic, rendering position and modal-event, sty… · hahagarden/project-machine@9a975fa …le: add ModalBackground github.com 1. 전체 모달창 로직 수정 🩹 초기구현 MyLikes프로젝트에 모달창이 3종류 있다. 카테고리 추가창(addCategoryModal), 리스트 등록창(RegisterModal), 리스트 수정창(UpdateModal). 초기에 모달창을 켜는 상위컴포넌트, 모달창을 그리는 컴포넌트 두 개에서 모달에 대한 상태가 공통적으로 사용되어 전역상태로 관리하였다. 켜지면 true, 꺼지면 false였다. 그런데 부모-자식 관계이고,..

HTTP HTTP는 HyperText Transfer Protocol로 HTML과 같은 문서를 전송하기 위한 프로토콜이다. 프로토콜이라 함은 일종의 규약이다. 웹 서버와 웹 브라우저가 데이터를 주고받기 위해 생긴 약속이다. 요청을 하는 클라이언트는 HTTP message 양식에 맞게 요청을 보내고, 응답을 하는 서버도 HTTP message 양식에 맞게 응답을 한다. 무상태성 stateless 무상태성이다. HTTP는 상태를 가지지 않는다. 이것이 HTTP의 가장 큰 특징이다. 사용자가 장바구니에 상품을 추가할 때, HTTP 요청을 보내고 적절한 응답과 함께 사용자가 원하는 작업이 완료될 것이다. 그러나 HTTP는 통신 규약일 뿐이므로, 장바구니에 저장을 했는지 저장이 안되어있는지 상태를 가지지 않는다...

6개월 전에 작성한 코드를 리팩토링을 하려고 한다. 상태를 다루기 위해서 전역상태만 사용했는데 상태 끌어올리기를 사용하여 로직을 더 효율적으로 개선할 수 있을 것 같고, 이벤트는 핸들러에 전달인자를 넘겨주는 방법으로 코드를 줄일 수 있을 것 같다. 특히 UpdateModal컴포넌트 부분이 지금 보니 왜 이렇게까지 비효율적으로 했는지 모르겠다. 💬 1. UpdateModal 로직 수정 🩹 초기 구현 초기에는 어떤 리스트를 더블클릭하면 해당 리스트를 수정하기 위한 모달 창이 나타나고, 서버에서 데이터를 받아와 해당 데이터로 input을 초기화한다. Table컴포넌트에서 리스트를 더블클릭하고, UpdateModal컴포넌트에서 리스트의 데이터를 렌더링하여 한 상태를 두 컴포넌트에서 사용하였다. 처음에는 상태 끌..

토글 버튼 배경 색을 슬라이드처럼 가로로 미는 애니메이션을 주고 싶었다. 쉽지 않았다. 😨 react와 styled-components를 사용했다. inner div 만들기 토글 자체에서 배경색에 변화를 주는 애니메이션을 주는 것이 아니라 일종의 눈속임을 하는 것이다. 토글 안에 div(.toggle-inner)를 하나 더 만든다. 그리고 토글을 on/off할 때마다 각각 .toggle--checked가 추가되거나 삭제된다. overflow: hidden; > .toggle-container { width: 60px; height: 32px; border-radius: 30px; background-color: #8b8b8b; overflow: hidden; > .toggle-inner { display..

모달창 중앙 배치 모달 창처럼 가장 상위 레이어에 가로, 세로 모두 중앙에 배치할 경우가 많은데 방법을 자꾸 잊어버려서 기록을 하려고 한다. position을 주고, top과 left를 각각 50%으로 위치시킨 다음, x축과 y축으로 다시 각각 -50%씩 옮기면 된다. position: fixed; // 또는 absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 또는 배경에 모달창이 자식으로 있을 경우 배경 div에 display:flex, justify-content, align-items를 모두 center를 주어도 가능하다. div 가운데 정렬 margin: 0 auto; 다음과 같이 텍스트를 포함한 div를 가운데정렬을 하고 싶을 때에..

[Project] 질문 게시판👀 만들기 Agora States Project 자바스크립트의 기초 문법과 DOM조작법을 학습하고 이를 이용하여 질문 게시판 만들기 프로젝트를 진행했다. 바닐라 자바스크립트 프로젝트이다. 프로젝트 개요 이름과 제목, 내 hahagarden.tistory.com 위 포스팅에 이어지는 내용이다. 추가 개선 사항 1. 페이지네이션 기능을 추가하였는데 1페이지가 아닌 다른 페이지에 있는 상태에서 '좋아요' 목록을 렌더링하려고 하면 아무 것도 렌더링되지 않는다. 오류가 뜨진 않아서 코드에서 빠진 부분이 있는 것 같다. 다음과 같다. currentPage변수를 업데이트해주지 않아서 6페이지에서 ❤️버튼을 누르면 좋아요 목록의 6페이지가 렌더링되어서 아무 것도 나타나지 않는 것이었다. 좋..

fork해온 레포지토리는 기본적으로 잔디가 심어지지 않는다. 하지만 새로운 레포지토리를 만들어서 그동안 커밋된 기록을 fork해서 그대로 옮기고 잔디도 심을 수 있는 방법이 있다. 1. fork해야 할 레포지토리의 주소를 복사한다. 2. fork해야 할 레포지토리를 로컬에 bare clone한다. (옵션 --bare을 주어야 한다.) git clone --bare [포크해야 하는 레포지토리 주소] 3. 실제로 사용할 레포지토리(new-repo)를 만든다. 4. 새로 만든 실제로 사용할 레포지토리(new-repo)의 주소를 복사한다. 5. 2번에서 bare clone한 포크할 레포지토리의 디렉토리에 들어가서 새로 만든 레포지토리의 주소를 mirror-push한다. cd [포크해야 하는 레포지토리 이름] g..

🙌 KPT 회고1️⃣ 목표현재 내가 학습을 통해 이루고자 하는 것은 무엇인가?개발 배경지식 쌓기. 실력 기르기. 프론트엔드 개발자로 취직하기. 내 행보에 만족하기. 과제의 레퍼런스 코드를 보면 기분이 좋아질만큼 깔끔하다. 문맥별로 적절히 띄어쓰기가 있고 필요한 곳에만 주석이 있고 코드가 간결하다. 나도 그렇게 작성하고 싶다. 지금은 나중에 기억하기 위해 주석을 자주 달고 어떨 때 변수를 생성해서 사용할지, 데이터를 직접 전달할지 등의 기준이 명확하지 않다. 멘토님의 잠깐 사용하고 종료될 함수는 변수를 생성해서 사용해도 메모리 낭비가 크지 않을 것이라는 등의 설명이 도움이 된다.현재 바라는 목표를 모두 이루었다면 ‘나’는 어떻게 변해 있을까?개발자들의 언어를 알아듣고 소통이 가능할 것이다. 나의 코드를 효..

Props 외부에서 전달받은 값이다. 전달받은 값이므로 함부로 변경할 수 없도록 읽기 전용으로 되어있다. 읽기 전용이 아니라면 변경할 수 있을 것이고, 부모 컴포넌트에서 전달받은 props를 자식 컴포넌트에서 변경하여 상위로 영향을 끼치게 된다. 이는 React의 데이터 하향식 단방향 흐름의 원칙에 위배된다. props는 객체이다. 내부에 어떤 값도 전달할 수 있도록 객체로 되어있다. function Parent() { return ( I'm the parent // "장난감"이라는 값을 가진 속성 gift를 전달 ); }; function Child(props) { // props 객체 return ( {props.gift} // props.gift 사용 ); }; State const [state 저..

css 스타일링을 위해 styled-components를 사용했다. pages와 components들에 컴포넌트가 많다. 컴포넌트별로 스타일링을 하려면 각각 css또는 scss 파일을 만들어야 하는데, 복잡해질 것 같았다. styled-components는 리액트 파일에서 스타일링을 할 수 있어 파일을 따로 만들어줘야 할 필요가 없는 점이 가장 큰 장점이다. styled-components 라는 이름처럼 스타일링 또한 컴포넌트화 한다. 🙌 github repository 🙌 GitHub - evergarden0412/gptea-web Contribute to evergarden0412/gptea-web development by creating an account on GitHub. github.com