초보 개발자의 성장 일기

export const Navigation = styled.ul` display: flex; gap: 20px; li { font-size: 18px; font-weight: 800; cursor: pointer; border-bottom: 1px solid ${(props) => props.theme.color.white}; &:hover { border-bottom: 1px solid ${(props) => props.theme.color.gray}; } } `; 메뉴에 hover했을 때 아래에 밑줄이 가도록 border-bottom 속성을 넣어주었으나 미세하게 글씨가 움직인다. export const Navigation = styled.ul` display: flex; gap: 20px; li { ..

API를 fetch하고 데이터를 map으로 할당하다보면 제대로 데이터를 불러왔지만 map을 읽을 수 없다는 오류를 보게된다. 이때 data를 console로 찍으면 빈 배열이 나오게 된다. 이유가 무엇일까? 데이터를 fetch하는 함수가 비동기식이기 때문이다. 데이터를 불러오기전에 데이터를 할당 해 데이터의 할당 항목을 알 수 없는 것이었다. 이것은 간단하게 해결이 가능하다. if (!data) return ; 데이터가 없으면(즉 거짓이면) 빈 를 넣는 것이다. 데이터가 있을 때는 if안의 값이 거짓이 되어 데이터를 할당 할 수 있게 되는 것이다. 하지만 이렇게 하다보면 데이터 양이 많아질 때 데이터를 불러오는 동안 빈 화면이 보여지면 사용자 입장에서는 데이터를 불러오는건지, 원래 빈 화면인지 알 수 없..

로그인 폼을 구현하다가 사용자가 로그인할 때 입력폼에 아무것도 입력되지 않으면 로그인 버튼을 비활성화를 해야할지 입력 폼에 focus를 주어야 할지 고민이 들었다. 입력을 안했을 때 버튼 자체가 비활성화가 되는것도 좋지만, 로그인 버튼을 눌렀을 때 어떤 입력폼에 입력을 해야할지 focus를 주면 사용자 입장에서 더 편리할 수도 있겠다는 생각이 들었다. 무엇을 입력해야 하는지 알 수 있고, focus를 주면 사용자가 바로 입력하기 편리할 것 같다는 생각이 들었다. 1. focus를 줄 수 있는 activate 함수 만들기 const Input = (props) => { const inputRef = useRef(); const activate = () => { inputRef.current.focus();..

리액트 훅이란? use로 시작하는 모든 함수를 의미한다. 1. 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅에서만 호출해야 한다. 컴포넌트 함수가 아닌 일반 return하는 함수에서는 적용할 수 없다. 2. 리액트 컴포넌트 함수 사용자 정의 훅 함수의 최상위 수준에서 직접 호출해야 한다. 중첩 함수, block문에서 훅을 호출하면 안된다. if문에서도 허용되지 않는다. 3. 참조하는 모든 항목의 의존성으로 useEffect 내부에 추가해야 한다. useReducer 또는 useState에 의해 노출된 state 업데이트 함수는 변경되지 않도록 리액트가 보장한다.

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

타입스크립트는 자동으로 타입을 추론도 가능하다. 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); }; 우..