혼자 적어보는 노트

3~4일차 : 와이어프레임 & 디자인 시안 작업 이전에 디자인을 한 경험이 있는 사람이 팀내에 나밖에 존재하지 않아서 중간 프로젝트에 이어서 최종 프로젝트에서도 디자인을 하게 되었다. 최종 와이어프레임에서 수정할 부분들을 수정하고 수정된 와이어프레임을 바탕으로 디자인을 했는데 다들 적극적으로 의견을 주셔서 결정할 때 도움이 많이 되었다.😊 개발을 안하고 디자인만 하는거면 배너도 만들고 조금 더 꾸미고 싶은 마음이 있었겠지만,,,, 개발자로서 프로젝트에 참여하는 것이기도 하고 프론트엔드 팀이 3명밖에 없기 때문에 그런 것들은 과감하게 포기했다.😭 이번 디자인의 목표는 공통 컴포넌트를 사용할 수 있도록 최대한 비슷한 형태로 만들기! 그리고 추후 리팩토링 과정에서 반응형으로 모바일을 편하게 대응할 수 있도록 ..

2일차 - 와이어프레임 완성 및 회의 지난 기획 회의에서 받은 유저 스토리를 기반으로 와이어프레임을 만들었는데 개발적인 측면 + 사용자 경험 측면을 고려하는 과정에서 기획 내용을 수정해야겠다는 생각이 들었고 관련 사이트들을 모니터링했다. ✍ 참고한 사이트들 https://www.wishbeen.co.kr/ 가볼만한곳/맛집/숙박 정보, 항공/호텔 가격비교, 나만의 여행일정 | 여행의 모든 것, 위시빈 궁금한 여행정보, 위시빈에 다 있다! 1천 개 이상의 전 세계 여행꿀팁 · 25만 개의 자유 여행일정 · 40만 개의 전 세계 가볼만한 곳, 맛집, 숙박 정보 · 여행자들이 직접 남긴 100만 개의 리뷰/후기/ www.wishbeen.co.kr https://www.earthtory.com/ko/plan 나만..

1일차 지난 중간 프로젝트의 경우 프론트엔드끼리만 진행을 하기로 했지만 이번 최종 프로젝트에서는 백엔드와 기획까지 시작해서 API까지 함께 한다.🙌 오늘이 프로젝트 첫 시작일이지만 이전에 기획 회의를 한 번 했었고, 만들기 재미있을 것 같다는 의견이 많았던 🛫여행 코스 추천으로 이번 프로젝트를 진행하기로 했다!! 기획은 백엔드 분이 처음 낸 아이디어로 되었지만 회의를 거쳐서 내용이 많이 수정이 되었다. 같이 완성을 시켰지만 기획자 포지션이 있어야 할 듯 하여 백엔드분께 유저스토리+일부 페이지를 그림으로 그려주기를 요청했고 드디어 오늘 내용을 정리된 내용을 받고 회의를 진행했다! 오랜 시간을 거친 회의.. 아무래도 프론트엔드 3 + 백엔드 5 = 총 8명의 의견을 함께 모아야 하다보니 시간이 조금 소요되었..

코어 자바스크립트 책과 함께하는 스터디가 어제부로 끝났다. 목차가 1~7장 까지 있어서 한 주에 한 장씩 7주간 하기로 했었는데 드디어 마무리를 짓게 되었다. 이전에 한 번 코어자바스크립트 책을 읽은 적이 있었지만 이번 기회에 다시 정독을 하기로 마음을 먹고 2주 차 때 급하게 참여하게된 스터디다ㅎㅎ 스터디를 진행했던 방법: 1. 주에 한 챕터씩 읽고 책의 내용 혹은 추가로 조사한 내용을 자유롭게 정리한다. 2. 해당 챕터에 다룬 내용을 바탕으로 퀴즈를 낸다. 3. 스터디 날 당일 룰렛을 통해서 2명의 발표자를 정한다. 👍 좋았던 점. 1. 주 1회 스터디 아무래도 각자 다른 공부들을 하고 있다보니 너무 무리하지 않는 선으로 주 1회로 정했고 중간프로젝트때는 프로젝트에 집중하자는 의견이 다수를 차지해서 ..

4장 함수 4장에서는 함수를 살펴보고 아래와 같은 내용을 다룬다. - 함수를 선언하고 실행하는 방법 - 시그니처 오버로딩 - 다형적 함수 - 다형적 타입 별칭 # 특별한 상황을 제외하면 매개변수 타입은 추론하지 않는다. - 문맥을 보고 타입을 추론하는 상황(문맥적 타입화)등 특별한 상황을 제외하면 매개변수 타입을 추론하지 않는다. * 반환 타입은 자동으로 추론하기때문에 보통 실무에서는 반환타입을 명시하지 않고 추론하도록 한다. # 함수에서 this를 사용할 때 첫번째 매개변수로 선언할 수 있다. function fancyData(this: Date){ return ${this.getDate()}/${this.getMouth()} } fancyDate.call(new Date); fancyDate() //..

타입스크립트 Type Guard로 타입 좁히기 Type Guard 컴파일러가 타입을 예측할 수 있도록 타입을 좁혀주어서 타입의 안전함을 보장할 수 있다. typeof를 사용한 type guards Javascript의 typeof 연산자를 활용하여 타입가드를 할 수 있다. const test = (a: number | string) => { if (typeof a === "string") { return a.substring(1); } return a; }; 함수의 인자로 넘어온 a값은 number이거나 string일 수 있는데 바로 a.substring을 사용하면 number에는 substring을 사용할 수 없기 때문에 에러가 발생한다. typeof를 사용하여 if문 내에서 a값이 string임을 보..

모바일 이미지 업로드 시 이미지 회전 현상 프로젝트를 리팩토링하고 확인하는 과정에서 핸드폰으로 촬영한 이미지를 업로드할 때 회전되어서 보여지는 현상이 발생했다. 사용하는 핸드폰은 아이폰이고 원본(실제크기) 그대로 올릴 경우 제대로 나타나지만 업로드 할 때 아이폰 기능에서 파일 사이즈를 줄일 경우 회전이된다. 왜 사진이 회전될까? 휴대폰을 세워서 정상적인 각도에서 사진을 찍으면 정상적으로 나타나지만 핸드폰의 각도를 기울여서 찍은 경우 틀어져서 저장이 되고 이 회전 정보를 기억한다고 한다. 이 회전된 정보는 EXIF라는 메타정보의 orientation 에 저장이 되는데 핸드폰의 경우 이 정보를 읽어서 정상적으로 갤러리에 보여주지만 브라우저는 이 orientation정보를 읽지 못한다고 한다,, 해결을 위해 ..

props로 전달된 값에 따라 style을 지정하고 싶을 때 작성 해야 할 style이 길 경우 css의 템플릿 리터럴을 사용하여 작성할 수 있다. import { css } from "@emotion/react"; const Button = styled.button` display: ${({ block })=> block? 'block': 'inline-block'} ${({ styleType }) => styleType && css` background-color: black; color: white; `} `; Global style 적용 Emotion의 Global을 사용하여 reset할 style울 지정할 수 있다. import { css, Global } from "@emotion/react"..