hahagarden의 블로그

Redux 공식문서에서 Redux Toolkit 사용을 공식적으로 적극 추천한다. 기존 Redux에서 작업을 단순화하고, 흔한 실수를 방지하여 Redux 어플리케이션을 더 쉽게 만들 수 있도록 한다. 기존의 Redux를 React, vanillaJS에서 사용하는 방법은 각각 다음의 포스팅에서 확인할 수 있다. Redux란 / Redux React에서 사용하기 Redux는 JavaScript 어플리케이션의 상태를 관리할 수 있는 상태 관리 라이브러리이다.(React, Vue, Angular, vanilla JS 등 모두 사용할 수 있다.) React로 상태 관리를 할 때 props drilling이나 상태끌어올리기를 hahagarden.tistory.com Redux vanillaJS에서 사용하기 html..

인터넷과 웹 인터넷은 전세계적으로 연결된 컴퓨터 네트워크 통신망이다. 웹 뿐만 아니라 온라인 게임, 이메일, 모바일 앱을 포함한다. 웹은 문서, 이미지, 영상 등을 볼 수 있는 공간이다. 웹은 인터넷에 포함되어 있다. 이 공간은 인터넷 익스플로러, 크롬, 파이어폭스, 오페라 등 다양한 웹 브라우저가 있다. 그런데 2000년대 초에 어떤 사이트가 어떤 웹브라우저에서는 작동을 하고 어떤 브라우저에서는 작동을 안하거나, 어떤 브라우저에서는 버튼이 보이고 어디에서는 안보이는 등의 호환성 문제가 있었다. 그래서 개발자들이 동일한 서비스를 만드는데 브라우저별로 구현을 해주어야 했다. 힘들었을 것 같다. 😰 이러한 브라우저 호환성 문제를 해결하기 위해 웹 표준이 등장했다. 웹 개발 형식을 통일시킨 것이다. 그래서 생..

html파일에서 간단하게 증감버튼을 만들고, JavaScript파일로 DOM조작을 하고, Redux로 상태를 관리한다. add minus DOM조작을 위해 브라우저 환경에서 작업하였다. 리액트를 주로 사용했어서 자연스럽게 npm install redux를 하고, commonJS 또는 모듈import/export로 createStore메서드를 가져와서 사용하려니 불가능했다. 이는 node.js 환경에서 가능한 것인데 말이다. (브라우저 환경이 아닌 node.js 환경에서 웹 어플리케이션을 만드려면 다양한 node.js 패키지들을 설치하고 세팅해주어야 한다. 그렇기 때문에 이러한 것들을 미리 설치하고 세팅해놓은 보일러 플레이트 CRA를 이용해서 리액트 앱을 시작하는 것이다.) redux를 브라우저 환경에서 ..

Redux는 JavaScript 어플리케이션의 상태를 관리할 수 있는 상태 관리 라이브러리이다.(React, Vue, Angular, vanilla JS 등 모두 사용할 수 있다.) React로 상태 관리를 할 때 props drilling이나 상태끌어올리기를 사용하거나 컴포넌트 안에서 상태 변경 로직이 구현되어 코드가 복잡할 때가 있다. Redux는 상태 또한 컴포넌트처럼, React 컴포넌트로부터 분리하여 다룬다. Redux에는 세 가지 원칙이 있다. 1. Single Source of Truth 동일한 데이터는 항상 같은 곳에서 가져와야 한다. Redux의 Store가 단 한개만 존재한다는 것과 관련있는 것이다. 2. State is read-only React의 상태는 상태변경함수를 통해서만 변경..

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

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

토글 버튼 배경 색을 슬라이드처럼 가로로 미는 애니메이션을 주고 싶었다. 쉽지 않았다. 😨 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를 가운데정렬을 하고 싶을 때에..

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

Node.js 서버 만들기 https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction 문서를 참고하여 Node.js의 HTTP 처리 과정을 정리해본다. HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. 서버 생성하기 모든 Node.js 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다. cont http = require('http'); const cuteServer = http.createServer(); cuteServer.on('request', (req, res) => { // 매 http 요..