log log

#오늘 할 일 (19.11.12)📚 다음날 버튼 눌렀을 때 1일차 -> 2일차로 변경하기 지금까지는 음식점, 명소, 숙소의 버튼을 누르면 그에 맞게 이미지가 변경 되도록하고, 입력폼에서 입력한 내용을 리스트에 반영하는 기능까지 구현했다. 이제는 몇일차의 일정인지를 표시하기 위한 '다음날' 버튼을 구현해보고자 한다! 상단의 음식점, 명소, 숙소, 다음날 (이하 type 버튼)은 App.js에서 다음과 같이 정의되어있다. const types= [ {key:'food', value:'음식점'}, {key:'place', value:'명소'}, {key:'stay', value:'숙소'}, {key:'nextday', value:'다음날'} ]; 그리고 이것을 PlanForm.js로 넘겨서 const Type..

#오늘 할 일 (19.11.10)📚 확인 버튼을 눌렀을때, 인풋 값이 초기화 안되는 현상 해결하기 # 문제 발생 🤮 ▪ 인풋 값이 초기화 안되는 현상? 확인 버튼을 누르면, 아이템이 리스트에 추가되고 인풋 값은 초기화 되는 기능을 구현하고자 한다. 이를 구현하기 위해 확인 버튼을 눌렀을 때 발생하는 이벤트에서 state 값을 ''로 세팅해주었다. 하지만 결과는 바뀌지 않았다. state 값이 바뀐다고 해도, input의 value을 따로 지정해주지 않아 영향을 미치지 않았기 때문이다. 그래서 state가 변할 때마다 input의 value값이 변할 수 있도록 value={this.state.price} 이와 같이 state 값을 value 값으로 지정해 주었다. 이렇게 시도해보니 초기화 기능은 잘 구현 ..

#오늘 할 일 (19.11.09)📚 여행 리스트에 아이템 추가할때 발생하는 에러 수정하기 - 버튼 여러번 누르면 warning 발생 - 확인 버튼을 눌렀을 때, 값이 업데이트 되지 않는 이유? -(번외) commit을 했는데 잔디가 안 심어지는 이유? # 문제 발생 🤮 ▪버튼을 여러번 누르면 warning? 버튼을 여러번 누르면 key값이 'NaN'인 아이템이 중복된다는 warning이 개발자 도구에 찍혔다. 분명 나는 새로운 아이템이 추가될 때마다 컴포넌트에 id++로 key 값에 id를 주었는데, 왜 key 값이 NaN(숫자아님) 이 나오는 걸까? . . 알고보니, id++를 하면서 각각 고유의 값을 key로 부여하긴 했지만 초기 id값을 설정하지 않았다. 없는 값에 +연산을 하려다보니 NaN 가 발..

#오늘 구현 할 기능📚 여행 리스트에 아이템 추가하기 # 문제 발생 🤮 아이템을 추가하려면 setState를 이용하여 여행 계획 리스트를 변경해야하는데, state = { plans : [ {id:0, name:'walnuty', age:20.......} ] } 이런 식으로 하위에 객체를 가진 구조여서, 어떻게 해야 값을 변경하고 넣을 수 있는지 감이 안잡혔다. 기존 예제에서는 input 값이 하나였던 경우도 있었고, input 값이 여러개인 경우도 봤지만,,, 객체 배열(?)의 형태는 어떻게 해야하는 걸까...? 여러군데 찾아보니까 벨로버트님의 전화번호부 튜토리얼에 참고할 만한 내용이 있어서 시도해보았다. 원래는 PlanForm에서 값이 변경되면 계속 App.js에 있는 state 업데이트 해주는 형..

TIL(Today I learned) 을 기록하는 공간입니다. 잘못된 내용 또는 부족한 내용에 대한 수정 및 지적 환영합니다. #화면 구성👩‍🎨 기존의 TodoList 레이아웃을 참고하여 기본이 되는 화면을 구현해봤다. 지난 JSP 프로젝트에서는 아무 생각 없이 로 손쉽게 레이아웃을 구성했었는데, 이번에는 로 레이아웃을 구성해봤다. 생각만큼 잘 안돼서 css 짜는 시간이 꽤 많이 걸렸다..😂 그래도 이 과정에서 display:inline-block 과 float: left의 차이를 확실히 배웠다. #기능구현☝ - Form의 이미지 동적으로 바꾸기 왼쪽의 TodoList에서는 중앙의 색상 버튼을 클릭해서 입력 폼의 색상을 변경 할 수 있었다. 이를 활용하여, 상단의 버튼을 클릭하면 입력 폼의 이미지가 바뀌..

TIL(Today I learned) 을 기록하는 공간입니다. 잘못된 내용 또는 부족한 내용에 대한 수정 및 지적 환영합니다. https://velopert.com/3417 react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG 이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다...

TIL(Today I learned) 을 기록하는 공간입니다. 잘못된 내용 또는 부족한 내용에 대한 수정 및 지적 환영합니다. https://velopert.com/3631 누구든지 하는 리액트 5편: LifeCycle API | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 자 이번에는 리액트의 LifeCycle API 에 대해서 알아보겠습니다. 이 API 는 컴포넌트가 여러분의 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 입니다. 정말 중요한 역할을 하는데요! 한번 세세히 파헤쳐봅시다. 컴포넌트 초기 생성 일단, 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 들이 있습니다. constr..

TIL(Today I learned) 을 기록하는 공간입니다. 잘못된 내용 또는 부족한 내용에 대한 수정 및 지적 환영합니다. **컴포넌트를 만드는 방법 첫번재, 클래스를 통하여 만들기 class App extends Component { render(){ return(); } } export default App; 클래스로 컴포넌트를 만들때는 render 함수가 꼭 있어야하고, 내부에서 JSX를 return 해주어야한다. 두번째, 함수를 통하여 만들기 function App(){ return( {/*...내용...*/} ); } export default App; **각 태그들은 꼭 닫혀있어야한다. 그동안 닫는 태그 없이 사용했던 , 같은 경우에도 모두 닫는 태그를 작성해주어야한다. ** 여러개의 엘리..