letsgojieun

2번으로 하는 게 훨씬 편함 스프링 프레임워크란? 골뱅이 잔치! 거대한 하나의 틀을 만들어놓고 거기에 일부 프로그래밍만 해도 하나의 프로그램 완성이 되는 것 -> 프레임워크 라이브러리는 부분적인 것을 해결! 부분적인걸 정렬하고 싶거나.. 2번! 숫자로 알아서 바꿔서 넣어준다 혹시 전달되지 않으면 기본값 지정 가능. RequestParam 옆에 () 추가해서 그 안에 Ctrl+space 버튼 누르면 defaultValue 클릭 가능 home.jsp에서 마지막처럼 코드값을 넣지 않을 때 디폴트 값을 출력 home.jsp에서 회원등록 폼 작성 후 폼이 전송이 되면 test/insert.do에 post 방식으로 전송이 되고 spring프레임워크에선 num name addr을 어떻게 출력할지 확인해보기 그리고 컨..

저번 수업 중 강사님이 서버사이드 렌더링과 클라이언트 사이드 렌더링에 대한 차이점에 대해 간략히 짚고 넘어가 주셨다. 그 이후에 추가로 더 개념, 차이점과 장단점을 정리하면 좋을 것 같아서 이번 포스팅 주제로 서버사이드 렌더링과 클라이언트 사이드 렌더링을 정리해보려 한다. 우선 뒤에 반복되는 렌더링의 뜻은 무엇일까? 렌더링이란, 서버로부터 요청해서 받아 온 문서들(html, css, js) 브라우저 화면에 나타내는 것을 의미한다. 서버사이드 렌더링이란? 전통적인 방식으로 클라이언트 측에서 서버 측으로 요청을 보내면 서버 측에서 응답하여 클라이언트 측에 화면이 보인다. 클라이언트 측에서 페이지를 요청할 때마다 서버 측에서 전체 페이지를 새롭게 응답하여 리로딩(새로고침)이 일어난다 모든 콘텐츠가 담겨있는 h..

수업내용을 바탕으로 스프링 프레임워크 정리하기 file->new->other->spring->spring legacy project templates에서 spring MVC project 클릭 앞에는 회사 url주소, 뒤에는 context주소 안에 / 슬래쉬가 있으면 모든 요청은 디스패처 서블릿을 거친다는 의미 여기선. do로 끝나는 모든 것에 대해 서블릿을 거치게 하겠다는 의미 스프링은 디스패처 서블릿부터 시작 위에서 가장 최상위 경로를 home.do로 지정해주고 HomeController에서 이에 대한 설정을 해줌 home 요청이 들어오면 어떻게 할 것인지 views/home.jsp에는 이렇게 c:forEach를 사용하여 반복문 돌아서 출력해줌 위에 prefix 필수 설정 Run on server 클..

저번 포스팅에선 버블링과 캡처링에 대해 알아보았다 버블링과 캡처링이 브라우저에서 이벤트가 발생하고 동작하는 방식, 그 자체에 대한 용어라면 이벤트 위임은 이러한 방식을 이용한 기술이라고 할 수 있다 자바스크립트에서 동적인 요소의 이벤트를 처리할 때, 만약 투두 리스트를 만든다는 가정하에 1 2 3 4 5 6 7 8 9 10 1부터 10까지의 자식 요소인 list가 있고 그 자식 요소들을 ul이라는 부모 요소가 감싸고 있다고 가정해보자 이 경우, 자식 요소인 를 클릭하면 할 일을 완료했다는 의미에서 밑줄을 치거나 없애는 이벤트를 등록할 때 자체에 이벤트 핸들러를 등록하여 documentqueryselectorall + forEach 구문을 이용할 것이다 위의 코드 블록처럼 1~10까지의 요소들만 존재한다면..

강의를 듣다가 캡처링과 버블링에 대해서 간단히 알게 되었다 나중에 이벤트 위임에 대해 배우기 위해 꼭 알고 있어야 할 필수지식이라 이번 포스팅에 정리해보려 한다 버블링이란? 화면에서 어떠한 이벤트가 발생했을 시, 하위부터 시작해서 그 이벤트가 최상위까지 전달되는 것을 말한다 참고로 무조건 이벤트를 주었다고 전파되는 것이 아닌, 부모-자식관계이며 (형제관계 X) 하위에 click 이벤트를 주었을 때 마찬가지로 최상위도 click 이벤트가 존재한다면 버블링이 발생하고, 최상위가 click이 아닌 submit 등 다른 이벤트면 버블링이 되지 않는다. 브라우저에서 이벤트 처리 시, 기본은 버블링이지만 최상위 요소 (부모)에 { capture: true} 속성을 적용하여 캡처링으로 변경이 가능하다 (원래 디폴트 ..

저번에 완성했던 shopping list를 내가 직접 구현했던 코드와 강의에서 솔루션으로 제공 한 코드의 차이점을 비교해보면서 이렇게 했으면 더 좋았을 것-이라고 생각했던 부분들을 정리해봤다 1. js에서 불필요한 변수 선언을 줄일 수 있었다 (최소한으로 하기) 2. const i = document.createElement('i'); i.setAttribute('class', 'fas fa-check'); 대신 deleteBtn에 deleteBtn.innerHTML = ''; 로 innerHTML만을 이용해서 아이콘 추가를 하는 것이 더 나을 것 같다 3. 여러 기능을 하나의 function에 묶어놓지 말고 새로운 아이템 list를 생성하는 코드 블록은 따로 새로운 함수를 만들어서 넣었으면 더 깔끔했을..

대략 한 달 동안 그동안 수업에서 배웠던 내용을 바탕으로 조별 세미프로 젝트를 진행했다 처음엔 각 페이지의 백엔드와 프론트엔드를 모든 팀원들이 각자 작성하고 그중에서 괜찮은 부분을 합쳐 사용하는 방향이었는데, 모든 팀원이 똑같은 한 페이지를 구성하려다 보니까 세미프로 젝트의 목적인 복습에는 매우 도움이 되겠지만 사실 효율적이지 않은 방법이었다 (무엇보다 시간이 부족했다) 그래서 결국 각자 한 페이지씩 맡아서 백엔드와 프론트엔드를 구성하는 방향으로 정했다. 우리 조는 인스타그램 같은 SNS를 만들고 싶었기 때문에 학원 이름을 가져와 에이콘스타라는 SNS 사이트를 만들어봤다 여기가 피드를 올릴 수 있는 메인 페이지이다 반응형으로 제작되어있으며 유저 아이디 옆 하트를 누르면 숫자가 증가하고 댓글 기능도 존재한..

원래 제이쿼리를 사용하면 코딩하는 양도 줄어들고 예전에는 크로스 브라우징 문제로 인해 많이 사용했었다고 한다. 크롬 파이어폭스 등 특히 인터넷 익스플로러의 자바스크립트 스펙이 많이 달랐었는데 (브라우저별로 자바스크립트를 준비해야 했을 정도로) 요즘엔 웹브라우저 버전이 올라가면서 어느 정도 브라우저 통합이 이루어졌고 이로 인해 제이쿼리 수요가 많이 줄었다. 제이쿼리의 수요가 계속해서 줄어듦에도 갑자기 제이쿼리 포스팅?이라고 생각할 수 있겠지만 예전에 많이 사용했기 때문에 유지보수를 겸해야 하는 일을 할 때는 꼭 마주치게 될 것이라는 얘기를 들었고 사실 모든 배워서 나쁠 건 없다고 생각한다. 그리고 이번에 직접 제이쿼리를 배워보고 조금 사용해보니까 정말 편하다.. 왜 제이쿼리 페이지에 write less, ..

항상 align-items만 사용해오다가 최근 수업에서 정렬에 대해 공부하면서align-content와 align-self에 대해서도 알게 되었다.오늘은 align-content와 align-items에 대한 정확한 차이점과CSS에서 요소를 개별 정렬하기 위해 align-self는 어떻게 사용해야 하는지에 대해 정리해보겠다  우선 align-items는 축의 수직 방향을 기준으로 정렬이 된다.각 옵션은 위의 이미지를 참고하면 이해하기 편할 것이다. align-content도 이와 비슷한 것 같지만 조금 다른 점이 존재한다  align-items는 한 줄을 기준으로 정렬하는 반면, align-content는 두 줄부터 사용하는데 의미가 있다그래서 align-content의 경우, 두 줄의 flex-wrap..

위에랑 아래 글자 길이가 어느 정도 비슷해서 엄청 나빠 보이진 않지만 개인적으로 왼쪽에 딱 붙었으면 좋겠다는 생각이 들었다 글자 정렬 시엔 text-align에 left를 주어 왼쪽으로 정렬되도록 수정하였다 그리고 맨 첫 번째 올린 이미지를 보면 텍스트와 옆 체크 아이콘 사이의 거리가 너무 가까운 것 같아서 margin-left를 5px만 주어 살짝 간격을 주었다 원래 바로 수정하려다가 현재 세미프로젝트가 더 중요한 목표이기 때문에 대부분 프로젝트에 집중을 했고 내가 할 부분은 마무리지어서 남은 시간은 후다닥 css로 글자 정렬과 간격 수정을 했다 아 그리고. gitignore 파일을 추가하지 않아서. DS_store라는 파일이 추가되어있었다. gitignore를 다시 추가하고 아이텀을 이용해서 원격 저..