Leo.K | To become a cooler Developer

2023-03-24 #3 State state : 기본적으로 데이터를 저장하는 저장소. 바뀔 변수의 값을 저장해 줄 저장소. 이번 강의에서는 바뀐 값을 저장해줄 state 변수에 대해서 알아보았다. 0. 문제점 Container라는 컴포넌트를 만들면서 내부의 버튼에 이벤트를 등록해주고 count를 증가시키는 것은 어렵지 않다. 하지만 문제점은 가장 초기의 상태(counter == 0)를 렌더링 해주고, 그 이후에는 렌더링을 하지 않기 때문에 내부적으로 클릭이벤트가 발생할 때마다 counter의 값은 1씩 증가하는데, 그 값이 보이지 않는다는 점이다. 단순하게 클릭 이벤트가 발생하여 값이 증가할때마다 reRendering하여 값을 갱신해주는 방법이 있다. 1. vanilla JS VS react JS 여기..

2023-03-17 #7 TO-DO-LIST 우리는 추가와 삭제가 가능한 멋진 todo-list를 위해 기본적인 설정을 화면에 구현했다. 이 내용은 이전 게시글에서 이미 기록한 개념이기 때문에 생략하고 마지막에 전체 소스코드를 보여주려고 한다. 하지만 새로고침을 하거나 이용자가 누구인가와 관계없이 똑같은 todo-list가 나온다면 우리는 todo-list를 그 때마다 계속해서 작성해야할 것이다. 만약 todo-list를 1,000개 작성했는데 단숨에 날라간다면...? 그건 어딘가 부족한 todo-list 일 거다. 그래서 우린 todo-list에 나타낸 텍스트를 저장하는 기능과 로딩하는 기능, 이미 달성한 일은 제거하도록 삭제하는 기능을 추가로 구현해야 한다. 1. todo - list의 배열 생성 1..

2023-03-16 #5.0 Interval setInterval({function}, {time}) 함수를 사용하여 특정 주기마다 함수를 실행할 수 있다. 이때 주기에 해당하는 time argument는 ms(1s === 1000ms)단위라는 점에 유의하자. const clock = document.querySelector("#clock"); function sayHello(){ console.log("hello"); } //interval -> 매 2초 등 간격을 의미 setInterval(sayHello, 5000); #5.1 Timeouts and Dates setTimeout({function}, {time}) 함수를 사용하여 특정 시간이 지난 후에 단 한 번만 함수를 호출할 수 있다. http..

const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); function onLogInBtnClick(){ console.log(loginInput.value); } loginButton.addEventListener("click", onLogInBtnClick) 2023.03.14 #4.0 Input Values 모든 것은 HTML에서 시작되어야 한다. HTML에서 태그를 작성하고 자바스크립트로 기능을 구현한다. 먼저, HTML 코드 작성하기 1. 사용자가 이름을 작성..

참으로 오랜만에 블로그를 작성하기 시작하는 것 같다. 작년에 취업한 이래로 한 해가 바뀌면서 회고록을 작성하면서 다짐했지만 동기부여가 크게 되지 않았나 보다... 벌써 입사한 지 8개월 차가 되어 간다. 그동안 미뤄왔던 개인 공부를 솔찬히 시작하면서 블로그 작성을 시작해야겠다. 크게는 풀스택 개발자를 향하여 프런트 엔드는 자바스크립트를 시작으로 리액트까지 학습하며 어플을 만들어 볼 것이고, 백엔드는 김영한 선생님의 강의를 학습하면서 스프링부트와 JPA를 완전 정복하려 한다. 오늘이 시작이다. 너무 많은 것을 이루려 하지 말고 하루에 조금씩이라도 꾸준하게 진행하자. 무료로 제공되는 강의로 아주 높은 수준의 퀄리티를 자랑한다. 이전에 깃허브를 학습할 때 간간히 유튜브에서 봤던 형인데, 사이트에 방문하여 자신..

전체 소스코드 보기 지난 시간에 이어서 오늘은 파일 업로드&다운로드 실습에 기능을 추가하고자 한다. 오늘은 이미지를 누르면 업로드 되어 있는 사진을 팝업 형태로 상세보기 할 수 있는 기능을 추가할 것이다. photo_list.jsp파일에서 태그에 onclick속성을 추가하고 photo_view()함수를 추가한다. 기본적으로 모든 이미지들은 JSTL의 forEach문을 사용해서 출력했다. 상세보기를 하기 위해선 내가 클릭한 이미지가 어떤 이미지인지 알아야 해당 이미지를 데이터베이스에서 가져올 수 있다. 하지만 forEach문의 반복첨자로 사용하던 vo는 "Java"언어이기 때문에 이 문법을 그대로 함수의 인자로 전송하면 이 함수를 실질적으로 처리하는 언어는 JavaScript이기 때문에 인식이 안될수가있다..