사용기 및 에러처리 기록

작업 상태

- 알람 설정 작업을 진행하던 중 08:00 값을 설정하던중 발생했습니다.
 
에러 메시지 

error: SyntaxError: C:\Use...ns\Noti.js: Legacy octal literals are not allowed in strict mode. (15:12)

원인

- strict mode에서 코드에 0으로 시작하는 숫자가 있을 때 발생합니다.  이를 수정하면 됩니다. 또는 0o 접두어를 사용하여 8진수를 대신 표현할 수도 있습니다.

// 알림을 보냅니다.
const scheduledTime = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(),
     21, 00, 0, 0);

처리

const scheduledTime = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(),
     21, 0, 0, 0);

참고

JavaScript strict mode

- 더 엄격한 자바스크립트 문법 검사를 수행하는 모드입니다. 
- 기존 자바스크립트와는 다른 규칙을 따르게 됩니다. 

- 암묵적 전역 변수 금지: strict mode에서는 암묵적으로 선언되는 전역 변수를 사용할 수 없습니다. 변수를 명시적으로 선언하지 않으면 ReferenceError가 발생합니다.

- 읽기 전용 속성 및 변수: strict mode에서는 읽기 전용 속성 및 변수를 수정하려고 하면 TypeError가 발생합니다.

- 함수에서 this 사용 제한: strict mode에서는 함수 안에서 this를 사용할 때, 함수가 호출된 방식에 따라 this가 자동으로 전역 객체를 참조하지 않습니다.

- delete 연산자 사용 제한: strict mode에서는 delete 연산자로 변수, 함수, 매개변수 등을 삭제할 수 없습니다.

- 함수 매개변수 이름 중복 제한: strict mode에서는 함수의 매개변수 이름이 중복될 경우 SyntaxError가 발생합니다.

strict mode는 'use strict' 문을 사용하여 활성화할 수 있습니다. strict mode는 파일 전체에 적용될 수도 있고, 함수 내에서만 적용될 수도 있습니다.

작업 상태

- redux 사용 방법을 테스트 하던중 발생했습니다.

에러 메시지 

Uncaught ReferenceError: initialState is not defined
    at counter (redux.html:43:26)
    at dispatch (redux.js:329:23)
    at createStore (redux.js:403:4)
    at redux.html:63:15 

const counter = (state = initialState, action) => {  //이곳에서 에러가 발생했습니다.

원인

자바스크립트에서 발생하는 에러입니다. initialState 라는 변수가 정의되지 않아서 발생합니다.

일반적으로 

initialState 변수가 정의되지 않은 경우 
initialState 변수가 다른 파일에서 정의된 경우, 해당 파일을 import하지 않은 경우
initialState 변수의 스코프(scope)가 함수 내부에 한정되어 있어, 함수 외부에서 접근할 수 없는 경우
발생합니다.

처리

분명히 정의했었는데 이상해서 살펴보니 다른 부분 작업하다가 지워졌습니다.

변수 추가후 특이 사항 없음.

참고

읽던페이지 : 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG

Redux
JavaScript 애플리케이션에서 상태 관리를 위한 도구입니다. React와 함께 많이 사용되며, React에서 컴포넌트 간에 상태를 공유하고 업데이트하기 위한 상태 관리 방법으로 Redux를 많이 사용합니다.

Redux 중요한 메소드

createStore(reducer, [preloadedState], [enhancer]): 
애플리케이션의 상태를 저장하고 업데이트하는 스토어를 생성합니다. reducer는 액션에 따라 상태를 업데이트하는 함수이며, preloadedState는 초기 상태값을 나타내며 선택적으로 전달될 수 있습니다. enhancer는 미들웨어와 같은 스토어의 기능을 확장하는 함수입니다.

combineReducers(reducers): 
다수의 리듀서를 하나로 합쳐줍니다. 이를 통해 하나의 애플리케이션 상태를 여러 개의 작은 리듀서로 나눌 수 있습니다.

dispatch(action): 
액션을 발생시킵니다. 액션은 객체 형태로 {type: 'ACTION_TYPE', payload: ...}와 같은 형태로 구성됩니다. 리듀서는 이 액션에 따라 상태를 업데이트합니다.

getState(): 
스토어에 저장된 현재 상태를 반환합니다.

subscribe(listener): 
스토어에 상태가 변경될 때마다 호출되는 콜백 함수를 등록합니다. 이를 통해 상태가 변경될 때마다 UI를 업데이트하거나, 상태 변경을 로그로 기록할 수 있습니다.

applyMiddleware(...middlewares): 
미들웨어를 등록합니다. 미들웨어는 액션을 디스패치하기 전 또는 후에 추가적인 동작을 수행할 수 있습니다. 
Redux Thunk와 같은 미들웨어를 사용하면 비동기 작업을 처리할 수 있습니다.

작업 상태

- 새로운 페이지 작업중이었습니다.

- controller 메소드 생성 후 페이지를 호출하던중 발생했습니다.

- 작업을 했던곳이어서 페이지가 존재할것이라고 생각하고 결과 페이지 확인을 안했습니다.

에러 메시지 .[dispatcherServlet] - Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.thymeleaf.exceptions.TemplateInputException: Error resolving template [todo/list], template might not exist or might not be accessible by any of the configured Template Resolvers] with root cause
org.thymeleaf.exceptions.TemplateInputException: Error resolving template [todo/list], template might not exist or might not be accessible by any of the configured Template Resolvers

원인

일반적으로 다음과 같은 경우에 발생할 수 있습니다.
- 요청한 템플릿이 프로젝트에서 실제로 존재하지 않는 경우. <-- 실제로 존재 하지 않았습니다.
- 요청한 템플릿의 경로가 잘못 지정된 경우.
- Thymeleaf 구성이 올바르게 구성되지 않은 경우.

처리

템플릿 생성 : src/main/resources/templates/working/todolist.html

참고

Thymeleaf 템플릿 엔진에서 시작 기본 위치는 src/main/resources/templates/ 입니다.
 
예를 들어, 
index.html 파일이 src/main/resources/templates/ 디렉토리에 있다면, 
Thymeleaf는 index.html 파일을 찾을 수 있습니다. 
따라서, 스프링 부트 프로젝트에서 Thymeleaf를 사용할 때, 
src/main/resources/templates/ 디렉토리에 HTML 파일을 저장하면, 
이 파일들은 자동으로 Thymeleaf가 처리할 수 있는 템플릿 파일이 됩니다.

스프링 부트에서는 spring.thymeleaf.prefix 속성을 사용하여 시작 기본 위치를 변경할 수 있습니다. 
이 속성을 사용하여 다른 디렉토리에서 템플릿 파일을 찾을 수 있습니다.

templates 디렉토리가 아닌 views 디렉토리에서 템플릿 파일을 찾으려면 
application.properties 파일에서 spring.thymeleaf.prefix 속성을 설정할 수 있습니다.

spring.thymeleaf.prefix = classpath:/views/

Thymeleaf는 src/main/resources/views/ 디렉토리에서 템플릿 파일을 찾게 됩니다.

작업 상태

thymeleaf로 작업을 진행하던 중 다른 곳에서 가져온 코드를 사용하던 페이지에 복사 붙여넣기 하고 발생했습니다..

붙여넣은 일부분입니다.

<select th:name="'toblog-'+${category.id}" class="border border-gray-300 p-2 rounded-lg">  

에러 메시지 

Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates//admin/working/edit.html]")] with root cause
org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'id' cannot be found on null

원인

-  admin/working/edit.html] 여기까지 관련 template 파일은 찾았다는 이야기 이고 여기서 변환중 에러가 발생했다는 메시지 입니다.

- SpelEvaluationException: ${category.id}" <-- 여기의 category가 이미 null 이라 id를 찾을수 없다는 말입니다.

처리

- 새로 붙인 관련 객체의 변수로 바꾸고 해결됐습니다.

<select th:name="'toblog-'+${working.id}" class="border border-gray-300 p-2 rounded-lg">  

참고

Property or field 'id' cannot be found on null

null에서 'id' 속성이나 필드를 찾을 수 없습니다.