letsgojieun

프로젝트에서 회원가입 폼 css를 수정할 일이 생겨서 수정을 좀 했다 css styling은 resources의 css 폴더에 따로 작성하고 있는데 잘 적용되던 css가 갑자기 수정 저장 후 실행해도 적용이 안되었다 여기서 크게 두 가지 이유가 있는데 1. 캐시에 페이지 전체 resources가 저장된 경우 이미 캐시에 기존에 작성했던 resources 파일들이 저장되어 있어서 우리가 해당 웹페이지를 방문할 때마다 이를 새롭게 불러오는 게 아닌, 저장해놓은 기존의 리소스 파일들을 그대로 사용하는 것이다 (캐시 메모리) 이로 인해 스프링 부트에서 아무리 변경해도 웹브라우저에선 적용되지 않았던 것 (만약 resources 폴더로 따로 외부 링크를 빼놓지 않았다면 이와 상관없이 잘 적용될 것이다) 이럴 땐 해..

깃허브 저장소에 있는 Vue 프로젝트를 클론 해서 가져가면 node modules가 존재하지 않는다그래서 이를 제대로 사용하기 위해선, 클론을 받은 후 package.json이 존재할 수 있도록 npm install을 통해설치해줘야 한다    오늘 배운 내용은 axios!axios는 Vue의 기본 기능은 아니다하지만 리액트, 뷰 같은 프레임워크와 사용하기에 좋다    위처럼 npm install axios를 입력하고 package.json을 확인해보면 axios가 설치되어있다    axios를 함수로 보고 then을 보면 프로미스로 리턴하는 걸 알 수 있다    res 타입은 오브젝트이다여기에 data라는 방이 존재하는데 이 방은 오브젝트 또는 배열이 될 수 있다   이것이 우리가 사용하는 백엔드의 멤버..

Spring Mybatis로 oracle db에 회원가입 폼 전송을 하는 과정에서 이런 오류가 발생했다 구글링을 찾아보니 오류 발생에 대한 원인을 정리해놓은 포스팅을 발견했다 부적합한 열 유형 null 1111 이 발생하는 원인은 1. 데이터 타입이 다른 경우 2. Map을 파라미터로 넘겼을 때 해당 맵 안에 파라미터가 null인 경우 3. jsp view request parameter 값이 없는 경우 4. form id 또는 name 값이 없는 경우 5. ajax 모듈 사용 시 value 값이 null인 경우 이런 원인들이 존재하는데 나는 dto에서 정해준 이름과 jsp 페이지에서 폼 전송 요소 중 하나인 '선호하는 음식'의 name명이 달랐던 것이다.. dto에는 tag, 폼 전송 요소의 name에..

별 아이콘의 색이 채워졌다 사라졌다 하는 효과를 버튼에 클릭 이벤트가 발생할 때마다 적용시키고 싶었다 처음에 querySelector를 생각했다가 생각해보니 카드가 하나만 생기는 게 아닌 여러 개의 카드가 계속해서 추가될 예정이라 (=> 별 아이콘의 개수도 똑같이 늘어남) 일반적인 querySelector를 사용했더니 맨 처음에 찾아진 starIcon 클래스에만 적용이 되었다. 그래서 querySelectorAll을 사용했다 처음에 querySelectorAll을 사용하면 반복문이 가능한 유사배열인 Nodelist가 반환된다는 걸 생각 못해서 왜 계속 에러가 나는거지.. 했었는데 같은 조원인 친구가 알려줬다 (..!) 코드의 마크업 부분이다 여기서 아이콘의 변화는 class에 far가 있을 경우엔 바탕색..

프로젝트 진행하면서 스프링 툴로 마크업 코드 작성하는데 불편함을 느꼈고 일부러 VSCode와 메모장과 이것저것 코드를 옮기고 복붙 하면서 작업을 했는데 갑자기 에러가 났다.. 이때까지만 해도 내 코드에 문제가 있겠거니- 하고 코드를 뚫어져라 쳐다봤다 하지만 아무리 봐도.. html영역에도, js로 ajax 전송하는 코드에도 별 다른 문제점이 보이지 않아서 도대체 왜.. 뭐가 잘못된 걸까.. 한참을 헤매었는데 노란색 밑줄을 보면 updateForm을 감싸고 있는 앞 뒤 따옴표의 모양과 색이 다르다.. 어쩌다가 맥북 메모장에서 한 번 수정하고 그대로 긁어서 스프링 툴에 붙여 넣었는데 폰트가 달라서인지?! 인식을 못했던 것 같다 앞의 따옴표는 애플 메모장 폰트이고 뒤에 따옴표가 스프링 툴에서 적용되는 폰트이다..

오늘의 짤막한 에러 정리 기존의 백, 프론트 코드에 CSS 및 이것저것 작업을 하고 실행시켜서 확인해보니 에러가 발생했다 크게 건드린 부분이 없는데 왜 에러가 발생했지 싶었는데 여기서 ${tmp}를 탭 해서 들여 쓰기 한 거 때문에 문제가 발생했던 것이다. 탭을 하여 들여 쓰기 한 경우, 오브젝트 안의 값을 보면 작성한 단어 옆에 띄어쓰기 한 칸이 들어가 있다 이러면 DB에서 당연히 다른 값으로 받아들이기 때문에 에러가 날 수밖에 없는 것이다 ${tmp}을 붙여서 사용했더니 이제 띄어쓰기 없이 제대로 값이 출력된다

다음 주부터 본격적으로 학원 최종 프로젝트 준비에 돌입할 예정이다 우리 조는 매장의 자리 예약 웹페이지라는 아이디어를 실행시키기로 했다 저번 세미 프로젝트와 비교했을 때 어떤 점을 더 신경 써서 보완해야 할까 생각해봤다 1. 반응형 웹페이지 구현 저번 프로젝트는 반응형이 아니라 페이지 크기를 줄이거나 늘리면 모양이 엉망이 되는.. 대참사가 존재했다 반응형 웹페이지를 어떻게 구현해야 할까 고민하다 다들 css의 미디어 쿼리를 이용해서 반응형 웹을 구현하는 걸 알게 되었다. 거의 마무리되어가는 시점에서 미디어 쿼리를 적용시켜봐야겠다 2. 시맨틱 마크업 급한 마음으로 프로젝트를 진행하느라 미숙한 점이 많았는데, 최대한 시맨틱 한 태그를 사용하고 각 페이지마다 클래스 명의 통일성과 css root 요소를 적용시..

라이브러리와 프레임워크는 모두 프로그램 개발을 좀 더 쉽게 하기 위함이라는 공통점이 존재한다 큰 틀에서 보면 둘 다 똑같아보이는데 어떠한 차이점이 존재하는지 더 명확하게 구분해보자 라이브러리 ? 쉽게 말하면 라이브러리는 여러 가지 툴 같은 '도구'의 모음이라고 볼 수 있다. 프로그래밍에서 어떤 특정한 기능을 구현하기 위해 필요한 함수를 가져다 쓰는 함수의 집합이다 정해진 틀 없이 우리가 원하는 흐름대로 이것저것 가져다가 붙여 넣는다고 생각하면 된다 프레임워크? 영어를 그대로 해석해보면 일하는 틀! 즉 뼈대나 기본구조를 의미하며 프레임워크를 통해 일정하게 짜인 틀을 가지고 일을 한다고 생각할 수 있다. 위의 라이브러리는 우리의 입맛대로 필요한 기능을 이것저것 가져와서 붙여 넣지만, 프레임워크는 사용하기 위..

앞의 포스팅에서도 언급했지만 다시 정리하기 위해 작성해본다! vue를 사용하기에 앞서, 먼저 node.js를 설치해야 한다. node.js란? 자바스크립트 해석기! 텍스트로 프로그래밍하지만 결국은 C언어로 프로그래밍하는 거나 마찬가지이다 노드제이에스를 설치하면 자바스크립트를 사용하지만 C언어로 프로그래밍하는 효과를 준다노드제이에스 설치하면 서버에서 자바스크립트를 해석할 기능이 생긴다! 그리고 npm이라는 응용프로그램이 같이 설치되는데 (= node package manager)라이브러리 관련 다운로드는 npm js 사이트에서 다운로드가 가능하다   vue도 node.js 응용프로그램이다    결국은 자바스크립트를 얻어내는 것소스코드의 품질을 높이기 위해 타입 스크립트 사용하기도 한다타입 스크립트는 tsc..

뷰 개발환경은 node js server이다그리고 node js를 설치하면 npm이 같이 설치되는데 이는 node package manager의 줄임말이다    웹브라우저에서 ajax 요청은?우리는 자바 기반의 서버를 배웠는데 뷰를 node.js 서버 기반에서 개발해야 하는데그럼 ajax 요청을 어디로 해야 하나?    결국 서버를 두 개 돌려야 한다. 개발환경에서 계속 개발하기 쉽지 않은데뷰는 이렇게도 가능하지만 리액트 같은 경우엔 cli 개발환경에서만 가능하다    dist 최종적으로 심어놓으면 그 밑에 꺼는 다 필요 없다 (개발과정일 뿐)    새로운 프로젝트를 생성하고 폴더를 확인해보면 다양한 폴더와 파일들이 존재한다    새로 만든 프로젝트 파일 안에서npm run serve를 입력해보자    ..