초보 개발자의 성장 일기

프로젝트의 특성상 지도가 꼭 필요한데 우리는 카카오맵 지도를 사용하기로 했다. 상세페이지를 담당하고 있어서 이 부분은 내가 담당하기로 했다. 처음에는 카카오맵 지도 API를 호출해서 사용하려고 했는데 샘플 예제가 모두 JS로 구현이 되어 있었다. 이걸 어떻게 리액트로 바꿔야하나 블로그를 많이 찾아보던 중 카카오맵 예제랑 거의 비슷하고 좀 더 리액트스럽게 바꿔놓은 라이브러리가 있었다! 이걸 사용해도 되나 팀원들이랑 고민을 하다가 팀원들 중 라이브러리를 사용해본 분이 안계셔서 코치님께 조언을 구하기로 했다. 코치님께서는 API로 불러올 때나 라이브러리를 다운을 받나 용량은 비슷할 것같고, 다른 팀들은 API를 불러서 사용을 하니 라이브러리를 사용해보는게 어떻겠냐는 조언을 들었고, 두개의 선택지가 있으면 당연..

캐로셀이라는 의미를 안지는 사실 얼마 되지 않았다. 에버랜드에서 오랫동안 아르바이트를 했는데 마침 일을 했던 곳이 회전목마랑 같은 구역이었다. 에버랜드에서는 회전목마를 로얄쥬빌리캐로셀이라고 불려서 회전목마인가.. 했는데 그 뜻이 맞았다. 회전목마처럼 데이터를 옆으로 보여주는것을 캐로셀이라고 부르는 것이었다. 라이브러리를 사용하면 간편하지만, 사용하기전에 직접 구현을 해서 어떻게 코드를 짜야하는지 아는게 더 중요한것 같다. 이전에 jquery를 사용해서 이미지 자동 슬라이드 구현을 해 본적이있었다. 이미지를 보여줄 틀을 잡아놓고 그 안에 이미지를 flex로 나열 후 틀을 넘어간 이미지들은 overflow - hidden으로 가려주고 이미지 가로 크기만큼 -마진값을 넣어주어 구현했었다. 리액트로도 비슷하게 ..

API 대신 JSON으로 가데이터를 만들어서 axios를 직접 사용해봤다. JSON파일을 처음만들어봐서 어렵다고 생각했는데 막상 직접 만들어보니 정말 별거 아니었다. 역시 직접 해보는 경험의 중요함을 느꼈다. { "posts": [ { "id": 1, "image": "이미지1", "place": "강릉", "title": "바다가 너무 예쁜 강릉~", "tag": ["맛집 탐방", "힐링", "친구와", "20대"], "startDate": "2023년 12월 23일", "endDate": "2023년 12월 26일", "budget": 100000, "comment": 20, "bookmark": true }, { "id": 2, "image": "이미지2", "place": "서울", "title"..

1차 프로젝트가 끝나고 약 한달 뒤 자율 주제로 2차 프로젝트가 시작되었다. 1차 프로젝트의 경험 덕분에 2차 프로젝트를 할 때 좀 더 적극적으로 회의를 하고 아이디어도 내보고 기여를 많이 해야겠다는 의욕도 생겼다. 이번 프로젝트를 통해 포트폴리오로 만들고 싶고, 기록을 많이 남겨서 문서화를 꼭 해두고 싶다. 1. 프로젝트 소개 프로젝트의 주제를 정하였지만 오피스아워로 코치님의 피드백을 받고 나니, 다른 팀과 차별화된 기능이 없다고 느껴져서 다시 모여 프로젝트의 주제에 대해서 생각해보고, 브레인 스토밍을 해 보았지만 꽂히는 아이디어가 없어서 마무리 하고 내일 아침 스크럼 시간까지 다시 생각해보고 정하기로 하였다. 1-1. 진행기간 2023년 12월 11일 ~ 2023년 12월 29일 1-2. 팀원 포지..

타입스크립트는 자동으로 타입을 추론도 가능하다. const a:string = '5'; a에 타입을 지정해주면 a는 원래 문자열 5의 값이지만 a는 string의 타입을 갖게 된다. 타입은 최대한 정확하게 하는것이 중요하다. 이 경우에는 정확한 5의 값에서 더 넓은 타입인 문자열로 넓혀버린 것이다. const a = '5'; 타입스크립트의 추론을 먼저 확인하고 틀렸을 때 타입을 명시해준다. function add(x: number, y: number) {return x + y}; const result = add(1, 2); 매개변수에 타입을 지정해주면 return의 타입을 생략해도 추론이 가능하다. 튜플을 사용할 때 const arr3 = [123, 456, 'hello']; 타입 지정을 없애면 con..

일반 함수 function add(x: number, y: number): number { return x + y } 매개변수에 각각 타입을 지정해주고 리턴값에도 타입을 지정하려면 매개변수 뒤에 : 타입을 지정해준다. function add(x: number, y: number): number; //타입 function add(x, y) { // 실제코드 return x + y; } 같은함수가 같이 선언되어있으면 오류가 나지만 앞의 함수가 타입만 선언이 되어 있으면 오류가 나지 않는다. 화살표 함수 const add: (x: number, y: number) => number = (x, y) => x + y; 화살표 함수는 변수 명 뒤에 :를 작성해주고 리턴 값에 타입을 지정하려면 화살표(=>) 뒤에 타..

이메일형식 체크 및 비밀번호 길이를 체크할 때 유효성 검사를 실시해야 한다. 유효성 검사를 실시하면 이메일과 비밀번호의 상태를 계속 확인해야하는데 HTTP requset를 보낼 때 너무 많이 보내지지 않을까? const [enteredEmail, setEnteredEmail] = useState(''); const [enteredPassword, setEnteredPassword] = useState(''); const emailChangeHandler = (event) => { setEnteredEmail(event.target.value); }; const passwordChangeHandler = (event) => { setEnteredPassword(event.target.value); }; 우..

장바구니나, 투두리스트 등을 state로 상태관리를 하다보면 새로고침할 때 데이터가 전부 사라진다. 데이터를 유지하기 위해서는 데이터를 저장하는 곳이 필요함을 느꼈다. 대표적인 방법으로는 쿠키와 로컬스토리지가 있다. 이 둘의 차이점은 무엇일까? 우선 쿠키는 최대 4KB의 용량을 가진 작은 데이터이다. 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용되고, 문자열만 저장할 수 있다는 제한이 있다. 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것이다. 쿠키에는 크게 두가지의 종류가 있다. Seesion cookies: 만료일이 없고, 브라우저나 탭이 열려있을 때만 저장되며 브라우저가 닫히면 cookies는 영구적으로 삭제된다. Persist..

Grid Flex와 비슷하지만 행과, 열 2차원 레이아웃을 담당한다. display: flex; grid-template-columns: 398px, 398px, 398px; grid-column-gap: 19px; grid-row-gap: 32px; grid-template-columns는 세로로 몇개를 둘지, 한 개당 각각 column의 가로의 길이를 어떻게 설정할지 결정한다. grid-column-gap은 각 아이템 사이 세로(열) 간격을 설정한다. grid-column-gap은 각 아이템 사이 가로(행) 간격을 설정한다. grid-template-columns: repeat(3, 398px); repeat을 사용해서 398px을 3번 반복하도록 간결하게 나타낼 수 있다. 같은 컴포넌트가 반복이 되..

모달을 만들다보면, 폼의 옆에 생성이 되는데, 이 위치는 root의 안이다. 애플리케이션이 작다면 이렇게 해도 되지만, 현재 컴포넌트가 전체 애플리케이션의 위쪽에 위치해 있지 않고 다른 컴포넌트 안에 깊이 중첩되있기도 한다. 백드롭과 모달이 DOM의 다른 내용안에 깊이 중첩되버린다. 브라우저는 모달의 존재를 인식하지 못하고 구조적인 관점에서 모달이 맨 위에 있어야 하는 존재인지 인식하지 못한다.이때 렌더링 된 HTML을 Body 밑으로 모달을 옮기면 되는데, 이것은 Portal로 해결이 가능하다. 포털을 사용할 때 필요한 것 1. 컴포넌트를 이동시킬 장소 2. 컴포넌트에게 그 곳에 포털을 가져야한다고 알려주는 것 Potal 공식문서로 포탈을 살펴보면 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM..