초보 개발자의 성장 일기

프로젝트의 특성상 지도가 꼭 필요한데 우리는 카카오맵 지도를 사용하기로 했다. 상세페이지를 담당하고 있어서 이 부분은 내가 담당하기로 했다. 처음에는 카카오맵 지도 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"..

이메일형식 체크 및 비밀번호 길이를 체크할 때 유효성 검사를 실시해야 한다. 유효성 검사를 실시하면 이메일과 비밀번호의 상태를 계속 확인해야하는데 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..

React.memo는 React에서 제공하는 고차 컴포넌트이다. 고차 컴포넌트란? 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환해준다. 일반의 컴포넌트가 React.momo를 거치면 최적화된 컴포넌트를 반환해준다. 렌더링이 되어야 할 상황에 놓일 때 마다 Props Check를 통해서 자신이 받는 props에 변화가 있는지 확인한다. props에 변화가 있다면 새로 렌더링 되는 것이 아닌, 기존에 렌더링 된 내용을 재사용한다. const Student = ({ name, age, address }) => { return ( {name} {age} {address} ); }; 여기서 Props Check를 하면 name, age, address에 변화가 있으면 재사용하면서 렌더링을 하게 되고 변하지..

여성, 남성 체크박스 중 하나만 선택돼야 하는 난관에 부딪혔다. 둘중에 하나만 선택이 되도록 하려면 어떻게 구현을 해야할까? const [ganderCheckValue, setGenderCheckValue] = useState(''); 우선 useState로 변수를 선언해준다. genderCheck(e)} /> 남성 genderCheck(e)} /> 여성 그리고 각각 input과 label로 구현을 해준다. 여기서 type, id, name, value, onChange를 적어주어야 하며 onChange에는 클릭할 때 서로 하나만 체크될 젠더 체크 함수가 들어갈 것이다. function GendercheckOne(id) { let checkBox = document.getElementsByName('ch..

CSS Module class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다. 스타일링 직접 하나하나 해야 한다. UI framework (ex. Ant Design, Material UI) 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋다. 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다. 해당 framework의 디자인철학을 벗어나기 쉽지 않다. 컴포넌트들을 커스터마이징 하기 어렵다. import "antd/dist/antd.css"; import { Button } from "antd"; export default function App() { r..