log log

#오늘 구현 할 기능📚 여행 리스트에 아이템 추가하기 # 문제 발생 🤮 아이템을 추가하려면 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; **각 태그들은 꼭 닫혀있어야한다. 그동안 닫는 태그 없이 사용했던 , 같은 경우에도 모두 닫는 태그를 작성해주어야한다. ** 여러개의 엘리..

Spring, MyBatis, MySQL을 연동하면서 겪었던 에러에 대해 정리하고자 한다. 연동 방법은 아래의 포스팅을 참고하였다. https://all-record.tistory.com/175 [Spring] 스프링, MySQL, MyBatis 연동 스프링, MySQL, MyBatis 연동 프로젝트 생성 및 관련 설정들은 아래 글을 참고하면 된다. ■ 관련글 [Spring] 스프링 개발환경 설정 프로젝트 생성 후 pom.xml을 연다. 여기에 연동에 필요한 라이브러리를 설정.. all-record.tistory.com #1. unable to load authentication plugin 'caching_sha2_password' 정확히는 잘 모르겠지만, MySQL 8.0.4부터 password 인증..

(부제) Spring Framework의 동작원리 얼마 전 나는 학생 때 진행했던 개발 프로젝트를 리팩토링 하기 위해 Spring을 재설치했다. Spring 설치가 제대로 되었는지 확인하기 위해, Project를 생성하여 그 안에 기본적으로 내장되어있는 home.jsp를 실행시켜봤다. 늘 그랬듯 실행시키고자 하는 jsp 파일를 focus로 두고 실행시켰다. ( 이것의 문제의 시작 ) 당연히 Hello World를 볼 수 있겠거니 싶어, 대수롭지 않았는데 404 에러가 떨어져서 매우 당황스러웠다. 환경 설정이 잘못되었는지, 서버에 문제가 생겼는지 이것저것 찾아보았는데, 한 블로그에서 정리된 내용을 보고 그 원인을 파악할 수 있었다. 결론부터 말하자면 home.jsp에서 프로젝트를 실행한 것이 문제가 되었다..

TIL(Today I learned) 을 기록하는 공간입니다. 잘못된 내용 또는 부족한 내용에 대한 수정 및 지적 환영합니다. ▶생활코딩 : Node.js - 데이터와 객체 https://www.opentutorials.org/course/3332/21150 App - 입력 정보에 대한 보안 - 생활코딩 수업소개 입력정보와 관련해서 보안적으로 처리해야 할 이슈를 살펴보겠습니다. 강의 소스코드 main.js (변경사항) var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); var template = require('./lib/template.js'); var pa..