전체 글60 모바일웹에서 Input 클릭 시 화면 확대 없애기 문제 반응형 디자인의 웹을 만들었다. 핸드폰에서 웹을 켜고 화면의 Input을 클릭하니 자동으로 화면을 확대해서 인풋을 강조해준다. 아... 친절한 모바일 이펙트...😇 하지만 내가 의도한 이펙트가 아닐뿐더러 오히려 UX를 해치기까지 하는 상황. 해당 이펙트를 막아보자. 코드 한 줄로 해결이 가능하다. 해결방법 index.html을 열어 name이 viewport 인 메타태그를 찾아준다. ... 그리고 해당 태그에 이렇게 content를 추가해주면 끝! 자동으로 확대되지 않을 뿐더러, 유저가 확대/축소할 수도 없게 막아버렸당. 깔끔~ ... 2022. 1. 23. 리액트에서 signature-pad로 서명하기, react-signature-canvas에 placeholder 넣기 회사에서 설문 제작 시 선택할 수 있는 새로운 문항 종류로 `서명 입력`을 받을 수 있는 모듈을 구현하게 됐다. 서명 입력 받는 라이브러리 중 가장 대표적으로 사용되고 있는 signature-pad를 리액트에서 좀 더 간편하게 사용할 수 있도록, React wrapper로 감싸주는 `react-signature-canvas`를 사용하기로 결정~ 해당 라이브러리를 사용하면서 고민했던 부분, 그리고 해결 방법에 대해서 글을 써보고자 한다. https://www.pocketsurvey.co.kr/survey1/ExBZRsY 여기서 완성된 기능을 사용해볼 수 있다. (포켓서베이 많이 사용해주세요😃) 오랜만에 링크 클릭해보니 서베이가 삭제된거 같다ㅠㅠ 404 뜨네ㅠㅠ react-signature-canvas를 사.. 2022. 1. 4. React 렌더링 퍼포먼스 개선 리액트 렌더링 위한 고민, useMemo, useCallback, React.memo 리액트의 컴포넌트는 state가 변경되었을 때, 그리고 props가 변경되었을 때, 부모 컴포넌트가 렌더링 될 때 렌더링된다. 예를 들어, 부모 컴포넌트의 state가 바뀌면 부모 컴포넌트, 변경된 state를 받는 자식 컴포넌트는 물론, 심지어 변경된 state를 받지 않는 자식 컴포넌트까지 모두 렌더링된다. 쓸데없는 렌더링을 줄일 수 있는 방법이 없을까? 쓸데없는 렌더링을 줄이고 성능을 최적화하기 위한 유용한 훅을 몇가지 소개하고자 한다. useMemo useMemo를 사용해 복잡한 계산식의 계산한 값을 재사용할 수 있다. useMemo는 호출 시 메모라이즈된 값을 반환한다. 복잡한 계산식을 수행해야하는 값이라면, .. 2021. 12. 29. [HTTP] 인터넷 프로토콜이 뭐야?(IP, TCP, UDP) 😎 TL;DR 복잡한 인터넷 망에서 메세지를 주고 받기 위해서는 IP 프로토콜이 필요하다. 하지만 IP 프로토콜은 여러 한계(비연결성, 비신뢰성, 프로그램 구분 불가능)를 가지고 있어 메세지가 잘 도착했는지 도무지 확신할 수가 없다. IP 프로토콜이 가진 이런 한계를 보완하는 기능들을 가진 프로토콜이 등장하게되는데, 바로 TCP 프로토콜 이다. TCP 프로토콜은 3 way handshake, 데이터 전달 보증, 순서 보장과 같은 기능을 가지고 있어 믿을 수 있다. TCP 프토토콜과 같은 전송 계층의 친구로 UDP 프로토콜도 있는데, 이 프로토콜은 포트 정보만 추가되고 TCP가 가진 기능들은 없는 백지같은 프로토콜이다. 아무 기능없는데 왜 사용하냐 의문일 수 있겠지만, 이렇게 단순한 덕분에 빠르고 기능 덧.. 2021. 12. 24. HTTP란 무엇인가? 알아보자! http란 인터넷에서 데이터를 주고 받는 프로토콜(규칙이라 이해하면 좋겠다)이다. 프론트엔드 개발자로서 서버랑 데이터 통신을 하다보면 자연스레 http에 대한 조각 지식들이 쌓이곤 하는데, 그런 조각 지식들을 모으고 또 새로운 지식들을 얻으면서 전체 흐름을 이해해보는 시간을 가지고 싶어 포스팅하는 http 시리즈 📖 목록을 업데이트 해놓고 포스팅 할 때마다 링크를 붙여놓겠다. 해당 포스팅으로 한꺼번에 찾아볼 수 있도록! 📚 인터넷 프로토콜 (IP, TCP, UDP) 포트 도메인 네임 URL, URI 개념 http의 특징 http 메시지 http 메소드 http 상태코드 http 헤더 http 캐시 2021. 12. 24. Redux 불변성을 지키면서 상태 변화를 손쉽게 하는 방법, immer 불변성, 불변성! 리덕스를 사용하면서 귀에 딱지 앉게 들었을 불변성 🙉 상태는 절대 절대 직접 변경하면 안된다. 특히나 리덕스는 객체의 상태 변화를 얕은 수준에서만 인식할 수 있기 때문에 객체의 깊은 상태를 변경하면 리덕스가 상태 변화를 못 알아차릴 수도 있다. 예를 들어 아래와 같이 깊은 객체가 있다고 한다면, 우리는 이 객체를 변경하기 위해 state = { 병원: { 소아병동: { 207호: { 환자1: { 성별: 남, 퇴원예정일: 3일 후 // 이 정보를 오늘로 바꾸어 보자! }, ... }, ... } } } 아래처럼 새로운 객체를 생성하여 깊고 깊게 파고 들어가 변경을 해야한다. const { 병원 } = this.state; this.setState({ 병원: { ...병원, 소아병동: { .. 2021. 2. 15. Redux 기초 개념 요약본 / 리덕스란? MVC 패턴의 한계를 보완하기 위해 나온 Flux 패턴. 단방향 데이터 흐름을 통해서 상태 변화가 일어났을 때 손쉽게 파악할 수 있다 😎 오늘 포스팅할 Redux는 이러한 Flux 패턴을 충실히 구현해냈되 보다 간결하고 단순하게 사용이 가능하다. Redux a single centralized place to contain the global state 리덕스는 상태 관리를 위한 패턴이고 라이브러리이다. 상태는 action을 통해 업데이트되고, 리덕스를 사용함으로써 상태는 예측가능하게 관리된다. 리덕스는 애플리케이션 내에서 언제, 어디서, 왜, 어떻게 상태가 업데이트되었고 상태 변화가 일어났을 때 로직이 어떻게 동작하는지 이해하는데 도움을 준다. 🌈 리덕스 규칙 단 하나의 스토어가 존재한다. 상태는 읽기.. 2021. 2. 15. 리덕스가 등장하기 전까지 이야기, MVC 패턴의 한계와 Flux의 등장 리덕스를 공부하다보니 Flux를 공부하게 되었고, Flux를 파다보니 MVC까지 타고 내려왔당. 중간 중간 만나게 되는 아하 포인트 덕분에 공부 너무 재밌당. 재밌는 공부의 세계~ 요즘 클하로 공부 자극 뿜뿜 받는데, 너무 너무 즐겁다 😃 이로써 리덕스가 나에게 조금 더 고해상도로 다가오지 않을까 기대해본다. 그렇다면 제일 먼저 MVC 패턴부터 이야기를 해보겠다. MVC 비즈니스 처리 로직과 사용자 인터페이스 요소를 분리시켜 서로 영향없이 개발하기 수월하게 한다. 아주 널리 널리 사용되고 있는 디자인 패턴이다. Model 비즈니스 처리 로직을 담당한다. 알고리즘이나 데이터와 같은 부분들. 무엇을 할 것인지 정의한다. View 사용자 인터페이스 요소이다. 최종 사용자에게 화면에 무엇인가를 보여주기 위한 역.. 2021. 2. 15. 공부해야 할 것 리액트 리덕스 리덕스 사가 타입스크립트 제이슨 스키마 제스트 서버 사이드 렌더링 등 등 등 세상에나. 공부할 거 ㄱ짱 많다. 다행인 건, 공부하는 게 재밌당. 어제 안읽힌 코드가 오늘 읽히면 너무 너무 뿌듯하고 즐겁당. 어제보다 오늘, 오늘보다 내일 더 성장하기 즐겁다 즐거웡 👀👏🌈 + 3월까지 회사 적응하고 회사 서비스 익숙해지면, 잠시 멈춰둔 CS 공부나 알고리즘 공부도 다시 시작해야겠다. 2021. 2. 2. Github에 Typora 첨부 이미지가 안나와요? 이미지 환경 설정하기 나는 markdown으로 typora를 사용하고 있다. 이미지 첨부하고 열심히 작성한 .md 파일이 github에 올라가서 이미지가 안뜨면 너무 속상 ㅠ_ㅠ 이는 로컬에 저장되어 있는 이미지가 같이 올라가지 않았기 때문인데, 해결하기 위해 이미지가 저장될 파일을 따로 만들어 주고 git에 올릴 때 .md 파일과 같이 업로드를 해준다. 나는 images라는 파일을 만들어 저장하는 편. 문 제 해 결 😌 편 - 안 2020. 11. 27. 이전 1 2 3 4 5 6 다음
