neda의 블로그

230623 Framer(프레이머)로 Login Form(로그인 폼) 만들기 / 프레이머 사용법 토스의 강연 영상을 정주행하고 프레이머가 도대체 어떤 것일까 궁금해지기 시작했다. 토스에서는 디자인 모두가 프레이머로 작업한다고 한다. 영상 중간 중간에 나오는 작업 영상들도 모두 프레이머였다. 그래서 한 번 써보기로 했다. Framer는 무엇인가 프레이머도 피그마 스케치와 비슷하게 프로토 타이핑 툴이다. 하지만 애니메이션과 상호작용이 점점 많아지고 있는 웹·앱을 피그마로 만드는 데는 한계가 많다. 피그마에 비해 프레이머는 동적으로 할 수 있는 것들이 많다. 예를 들면 버튼 호버시 커서를 설정하거나 컴포넌트로 리액트의 props처럼 속성을 넘기거나 Form이 실제로 동작하기도 한다. 더 자세한 설명은 유튜브의..

230622 react에서 module css 사용하기 react 컴포넌트에서 '컴포넌트명.css'를 통해 스타일을 관리하고 있다가 module css를 사용하면 클래스가 겹칠 위험이 줄어든다는 피드백을 받아 module css로 모두 변경하기로 했다. module css 장점과 일반적인 사용법 다른 css 파일과 독립적으로 동작하여 충돌할 위험이 적다. 컴포넌트 별로 클래스 명을 정하기 때문에 짧은 이름으로 편하게 사용할 수 있다. .css 파일 확장자를 module.css로 변경 /* Button.module.css */ .button { ... } module.css를 styles로 import import styles from './Button.module.css' const Button = ()..

230621 react input Select 만들기 Select 컴포넌트 구현해야 할 기능 onChange 함수를 props로 받아 옵션이 선택될 때 선택된 값을 인자로 onChange(value) 실행 defaultValue를 입력 받아 초기값으로 지정. 없으면 옵션 목록의 첫 번째로 지정 선택 버튼을 클릭하면 옵션 목록이 열리고 다시 누르면 닫힘 옵션 목록은 다른 요소의 위치를 방해하지 않아야 함 옵션 목록에서 옵션을 클릭하거나 컴포넌트 바깥을 클릭하면 목록이 닫힘 Tab키로 옵션 목록을 이동할 때 밖으로 나오지 않고 순회. enter키를 사용해 옵션 목록을 누르는 것과 동일하게 선택 가능 esc키를 누르면 옵션 목록을 닫고 선택 버튼으로 포커스 이동 포커스 이동하기 이번 Select 컴포넌트 fo..

230620 투두리스트에 react-router-dom 적용하기 router 구조 현재 투두리스트 앱이 가지고 있는 경로는 두 가지이다. 홈: 투두리스트가 보이는 메인페이지 투두 상세 페이지: 투두리스트에서 하나의 투두를 눌렀을 때 이동되는 상세 페이지 처음에는 경로 별로 두 가지 페이지 컴포넌트를 만들어서 적용했다. 그랬더니 모달이 열리고 닫힐 때 페이지가 이동되면서 컴포넌트가 다시 마운트 되는 문제가 발생했다 TodoItem에 css transform 속성이 적용되어 있기 때문에 전부 다시 사라졌다가 다시 나타나고 재배열 되었다. 그래서 각각 경로에 같은 을 줘봤는데, 나름 괜찮게 작동해서 이렇게 사용했다. const Router = () => { return ( ); }; 모달 열기 -> 상세 페이..

230619 Node 로그인 만들기 로그인 기능은 대부분의 웹과 앱에서 필수적인 기능으로 사용되고 있다. 복잡한 로그인 기능을 passport.js를 사용하면 쉽게 구현할 수 있다. 순서 회원가입 순서 request로 받은 username이 db에 이미 있는 유저인지 검사한다 이미 있을 경우 이미 사용자가 있음을 알려준다. username과 일치하는 사용자가 없을 경우 bcrypt를 사용해 비밀번호를 hash값으로 변환한다 mongoose를 사용해 username과 password hash값을 저장한다 사용자에게 회원가입이 완료되었음을 알려준다 로그인 순서 localStrategy를 미리 작성한다. request로 받은 username과 password를 사용해 passport 모듈의 authentica..

230618 내일배움캠프 5주차 WIL Facts 내일배움캠프 리액트 1주차 시작 리액트 1주차 과제로 TodoList 만들기 nodejs http 모듈과 express 기초 공부 Feelings 드디어 리액트 주차가 시작되었다. 리액트를 통해 할일 목록을 만드는 개인과제를 진행했는데, contentEditable 속성을 사용하면 내용이 변경될 때 마다 리렌링되고 커서 위치가 초기화되어 할일 내용을 편집하는 것이 어려웠다. 또한 할일을 flex나 grid로 배치할 때 각각의 내용의 길이가 달라 높이가 달라지고 이 때문에 어색하게 보이는 문제가 있었다. Findings contentEditable 속성을 사용할 때는 리렌더링을 되지 않게 useRef를 사용하여 제어했지만, 다른 방법도 있을 것 가다. 커서..

230616 React Masonry 레이아웃 만들기 Masonry 레이아웃 Masonry 레이아웃의 필요성 grid를 이용한 정렬에서는 row마다 그 row의 가장 높이가 큰 요소를 기준으로 높이가 공유된다. 아래 사진의 3번 요소과 같이 높이가 길어지면 높이 차이가 큰 2번요소나 4번 요소는 빈 공간이 많아진다. display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); row-gap: 20px; column-gap: 20px; Masonry 레이아웃 설명 레이아웃은 css의 transform 속성 중 translate를 통해 만들어진다. 일단 모든 요소를 display: absolute를 사용해 시작점에 모으고, 각각의 ..

230615 express res.format()으로 Accept HTTP Header에 따라 다른 콘텐츠 응답하기 res.format()을 사용하면 사용자가 보낸 http 요청에 대해 서버는 사용자가 원하는 타입으로 데이터를 줄 수 있다. Accept HTTP Header Http header 필드 중 하나인 Accept는 MIME 타입으로 표현되고, 서버에게 클라이언트가 이해 가능한 타입이 무엇인지 알려주는 역할을 한다. 서버에서는 이 값을 바탕으로 클라이언트에게 응답을 어떤 형식으로 할지 결정할 수 있다. Accept 필드가 없는 경우 이 경우에는 클라이언트가 모든 미디어 타입을 수락할 수 있다고 가정한다. Accept : */* Accept 필드가 있지만 수락할 수 있는 타입의 응답이 없는 경우 ..

230614 React 투두리스트 localStorage에 저장하기 React 과정에서 선발대(?)라는 수준별 학습에 대한 개별 과제로 만들고 있는 개인과제인 투두리스트의 데이터를 localStorage에 저장하고 불러와서 브라우저가 새로고침 되어도 데이터가 유지되는 기능을 구현했다. localStorage에서 불러오기 처음 해야 할 것은 페이지에 접속했을 때 이미 localStorage에 데이터가 있다면 불러오는 것이다. 데이터를 getItem()으로 가져와서 JSON.parse를 사용하여 분석을 하면 원래 데이터가 나온다. useEffect(() => { const todoData = localStorage.getItem('todoData') try{ const parsedTodoData = JSON..

230613 React contentEditable 속성을 가진 요소의 커서 초기화 문제 해결하기 리액트를 이용한 TODO LIST를 만들던 중 할일을 보여주고 편집까지 되는 기능을 위해 contentEditable 속성을 가지는 요소를 만들어 값이 변경되면 useState를 통해 상태를 관리하려고 했다. 하지만 한글자를 친 이후부터는 커서가 항상 맨 앞으로 이동하는 문제가 발생했다. 문제가 되는 부분 문제가 되는 부분은 Todo 정보를 props로 받아서 useState에 초기값으로 지정하고 값을 사용하는 부분이다. 일반적으로 많이 사용하는 State 관리 방법이지만, contentEditable에서는 커서 초기화 문제가 발생한다. 12345를 입력하면 1 -> 21 -> 321 -> 4321 -> 5..