[React] 리액트 상태 관리의 과거, 현재, 그리고 미래
2021. 9. 29. 00:27
dev-log/Front-End
본 글은 Lee Robinson의 포스팅 「Past, Present, and Future of React State Management」을 읽고 요약한 것으로, 오역이 있을 수 있습니다. (원문 바로가기) 2013년 5월 등장한 리액트는, 컴포넌트의 상태를 바탕으로 컴포넌트의 모양을 결정합니다. 이처럼 리액트는 "상태"라는 개념에 기초하는데요, 상태는 리액트 애플리케이션을 개발할 때 가장 어려운 부분 중 하나로 손꼽혀왔습니다. 용어 정리 본격적으로 글을 시작하기 전, 자주 쓰이는 용어들에 대한 정리부터 해볼까요? 이 용어들은 어떤 경우에는 다르게 불리기도 하지만 근본적인 의미는 동일합니다. UI 상태(UI State) : 애플리케이션에서 인터랙티브한 부분을 제어하기 위해 사용하는 상태 ex - 다크모드 ..
[Redux] 리덕스 모듈 만들기 - 덕스 패턴(Ducks pattern)
2021. 9. 23. 16:05
dev-log/Front-End
리덕스 모듈 리덕스 모듈이란? 액션 타입(Actions), 액션 생성 함수(Action Creators), 리듀서(Reducer)가 모두 들어있는 자바스크립트 파일을 의미함. 이렇게 하나의 파일에 작성하는 것을 덕스(Ducks) 패턴이라고 함. 리덕스 모듈에서 리듀서는 default export하고, 액션 생성 함수는 그냥 export함. "덕스 패턴"이 뭐고 이걸 쓰면 뭐가 좋은걸까? 덕스 패턴은 Erik Rasmussen님이 리덕스 사용 방법과 관련하여 제안한 패턴이다. (참고) 액션 타입, 액션 생성 함수, 리듀서를 각각 별도의 파일(심지어는 별도의 폴더)에 분리하여 작성하기 보다는, 그 셋을 하나의 모듈처럼 한 파일 안에 작성하자는 제안이다. 사실 나는 학원에서 리덕스를 처음 배울 때부터 덕스 패..
컴퓨터 내부의 언어 체계(2) - 고정소수점, 부동소수점
2021. 9. 21. 01:26
dev-log/CS
밑이 10인 실수에는 10진 소수점이 포함되는데, 밑이 2인 경우에는 2진 소수점을 어떤 방법으로 표현할 수 있을까? 2진수로 수를 표현하는 일반적인 방식들에 대해 알아보자. 고정소수점 표현법 2진 소수점의 위치를 임의로 정하는 방법 소수점을 기준으로 왼쪽에 있는 비트들은 정수 부분을 나타내고 오른쪽에 있는 비트들은 분수 부분을 나타냄. 소수점의 위치가 항상 일정하므로 고정소수점(fixed-point) 표현법이라고 함. 고정소수점 표현법은 넓은 범위의 수를 나타내기 위해 너무 많은 비트를 필요로 하므로 범용 컴퓨터에서는 잘 사용하지 않는 방법임. 비트가 많이 필요하다는 것은 곧 메모리 비용이 많이 든다는 것 DSP(digital signal processor) 등 일부 컴퓨터에서는 사용하기도 함. 부동소..
[라이브러리] Chart.js 시작하기
2021. 8. 21. 14:54
dev-log/Front-End
본 글은 저희 회사 기술블로그에도 동일한 내용으로 작성해놓았는데요, 저희 회사 개발자분들과 디자이너분들이 작성하신 좋은 내용들이 많으니 한번 구경해보셔도 나쁘지 않을 것 같슴니다..🎀 안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 “구현해야만“ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 Chart.js의 기본 사용 방법 및 커스텀을 위해 제공되는 옵션들에 대해 간단히 소..
[I Learned...] 2 - JWT, iOS 사파리 100vh 이슈
2021. 7. 5. 23:54
dev-log/기타기타🎸
JWT JWT를 사용할 때 프론트 단에서 토큰을 어디에 저장해야 할지가 고민 인증된 사용자인지 여부를 판별한 후 그에 따른 페이지 접근 권한을 부여하거나, 사용자 정보와 관련한 요청을 할 때 헤더에 토큰을 담아 서버에 전달해야 하는 상황... 등 클라이언트 사이드에서 토큰이 필요한 때가 있기 때문 당장에 돌아가도록 구현하는 것보다도 중요한 것은 보안 관련 이슈🔐 보통 두 가지 방법을 많이 쓴다고 한다. web storage (local storage, session storage) local storage - 사용자가 직접 삭제하지 않는 이상 저장 정보가 계속 남아있음. session storage - 브라우저를 닫는 경우 저장 정보가 사라짐. cookies 많이 쓴다고 해서 그게 곧 안전하다는 뜻은 아..
컴퓨터 내부의 언어 체계(1) - 비트로 "논리"와 "정수" 표현하기
2021. 7. 4. 15:51
dev-log/CS
프로그래머가 해야 할 일은 컴퓨터에게 명령을 내리는 것 💻💭컴퓨터의 말로 명령을 해야 한다. 컴퓨터는 어떤 언어를 쓸까? 컴퓨터 언어에서 자연어의 문자(character)에 대응되는 개념이 바로 비트(bit) 비트(bit)는 이진법(binary) + 숫자(digit)가 합쳐진 단어로, 메모리에 담긴 데이터를 나타내는 최소 단위라고 한다. 모든 데이터는 0, 1의 조합으로 구성되며 이때 0 또는 1이 하나의 비트가 된다. 1개의 비트는 두 가지 상태(0 또는 1)를 나타낼 수 있으므로, n개의 비트로 표현할 수 있는 상태(경우의 수)는 2^n가지가 된다. 즉, 비트가 많을수록 표현할 수 있는 데이터 종류가 많아지는 것이다. 논리 논리 연산(ogical operation)과 비트 연산(bitwise oper..
[I Learned...] 1 - yarn, chakra-ui 등
2021. 6. 20. 12:15
dev-log/기타기타🎸
husky typicode/husky Modern native Git hooks made easy 🐶 woof! Contribute to typicode/husky development by creating an account on GitHub. github.com npm 모듈로서, git hooks 공유를 위해 사용함. (참고: https://library.gabia.com/contents/8492/) git hooks란, git 관련 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이라고 함. git hooks는 .git 디렉토리에 저장되는데, 얘는 버전 관리 대상이 아니어서 repo에 올라가지 않아 공유가 안된다고 함. 그래서 공유를 위해 별도의 방법을 사용하는데 husky가 그런 ..
[Git/GitHub] git rebase from master into feature branch PR shows all files changed
2021. 6. 8. 01:08
dev-log/기타기타🎸
# git rebase from master into feature branch PR shows all files changed (master에서 feature 브랜치로 rebase 후 pull request에 모든 변경 파일들이 보여져요.) 저도 위 질문작성자의 경우와 마찬가지로, feature 브랜치에서 작업한 내역에 대해 PR을 열어놓은 상태에서 작성자와 마찬가지로 git checkout master → git pull origin master → git checkout feature/ayi → git rebase master → git add 및 commit → git push origin feature/ayi 정확히 이 순서대로 진행을 했고 작성자와 정확히 동일한 이슈가 발생했습니다. 즉 pus..