초보 개발자의 성장 일기

1. 문제 https://www.acmicpc.net/problem/9012 9012번: 괄호 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 www.acmicpc.net 2. 풀이 방법 첫번째 원소는 input의 행의 길이이다. shift로 이 원소를 배열에서 빼고, len변수에 담는다. 그리고 결과를 넣어줄 새 배열을 선언한다. for 반복문을 통해서 각 행을 지정해줄 i를 선언하고 for ...of를 사용하여 각각의 행안에 있는 원소가 '('일 경우 1을 더하고 아닌경우 즉, ')'일 경우에는 -1을한다. cnt의 결과..

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"..

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..