neda의 블로그

230625 내일배움캠프 6주차 WIL Facts React 2주차 레벨2, 레벨3 과제 진행했다. react-router-dom, redux 라이브러리를 사용해 페이지를 나누고 상태를 관리하는 방법을 적용했다. module css 적용하여 컴포넌트 별로 독립된 스타일을 작성할 수 있었다. Framer를 사용하는 방법에 대해 알아보고, 간단하게 페이지를 만들어 보았다. Feelings 모든 것을 한 페이지로 만드는 것보다 react-router-dom을 사용해 페이지를 나누는 것이 더 좋은 방법인 것 같다. redux를 사용해 상태 변화와 관련된 동작을 한 곳에서 관리하니 기능을 추가하거나 에러가 생길 때 수정하기 편했다. Framer는 색다른 경험이었다. 기본적으로 컴포넌트가 상호작용이 가능한 것이 신..

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 egjs Masonrygrid MasonryLayout을 만드는 여러 라이브러리가 있겠지만, 네이버의 egjs에도 있길래 사용해보았다. 별다른 설정없이 바로 레이아웃이 적용되었다. egjs 라이브러리 설명 다른 사람들의 라이브러리를 사용하고 또 살펴보는 것은 많은 도움이 되는 것 같다. 역시 한국인이 만든 라이브러리여서 그런지 MasonryGrid.ts에는 아래와 같이 한글로 된 기본 설명이 있다 MasonryGrid는 벽돌을 쌓아 올린 모양처럼 동일한 너비를 가진 아이템를 쌓는 레이아웃이다. 모든 이미지의 너비를 동일한 크기로 조정하고, 가장 높이가 낮은 열을 찾아 새로운 이미지를 삽입한다. 따라서 배치된 아이템 사이에 빈 공간이 생기지는 않지만 배치된 레이아웃의 아래쪽은 울퉁불퉁해진다. ..

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 필드가 있지만 수락할 수 있는 타입의 응답이 없는 경우 ..