Dev. Cookbook29 [React] React 공식문서 한글 번역 사이트 소개, 공식 및 비공식 사이트 저는 새로운 기술을 접할 필요가 있을 때, 생각하기보다 타이핑하는 게 좀 더 익숙한 접근 방법이라서 먼저 코드를 실행시켜 보고 간단한 Toy 프로젝트를 실행하면서 부딪혀본 다음 문서를 찾아보는 버릇이 있습니다. React도 인터넷의 강좌들을 몇 개 들어보고 간단한 React 애플리케이션을 2개 정도 개발해 보니 구조에 대한 이해가 절실하다는 생각이 들었습니다. 좋은 책을 볼까 생각도 해봤지만 요즘은 유명한 플랫폼들은 공식 문서가 잘 되어있기에 React도 공식문서를 읽기 시작했습니다. 먼저 크롬의 번역 기능으로 빠르게 읽어보고 이상한 번역은 원문을 보는 방식으로 읽었습니다. 그러나 역시 기술문서 번역의 오류와 영어의 압박으로 진도가 잘 나가지 않았습니다. 결국은 잘 번역한 번역본이 절실해 검색해 본 결과.. 2023. 12. 13. [React] 추천 React UI Components - Google Material Design을 지원하는 Material UI Backend 개발자로 혼자서 React 공부를 시작해서 간단한 앱을 만들면서 처음부터 사용하면 본질을 익히기 전이라는 생각에 라이브러리에는 큰 관심을 두지 않고 styled-components만 적용하여 개발을 해왔습니다. 그러나 역시 화면을 배치하고 디자인하는 component 스타일링 부분은 투자한 시간 대비 소득이 크지 않다는 생각이 계속 들었습니다. 물론 개인 역량이 부족하기도 합니다만... ^-^;;; 그래서 조금 찾아보니 구글 Material Design을 지원하는 Material UI Component가 있어서 검토해 보고, 작은 규모의 프로젝트나 개인 프로젝트에는 충분히 사용하면 좋겠다는 생각이 들어서 간단히 정리했습니다. 1. Material UI : MUI 란? https://mui... 2023. 12. 4. [java] jsp에서 forward vs redirect, 포워드와 리다이렉트 비교 Java 기반의 웹 애플리케이션에서 JSP는 forward 혹은 redirect의 두 가지 방법을 사용하여 한 서블릿(Servlet)에서 다른 서블릿 혹은 JSP로 제어를 전달합니다. forward와 redirect는 요청을 전달하지만 완전히 다른 흐름 제어를 사용하고 있습니다. 아래에서 좀 더 상세하게 살펴보겠습니다. 1. Forward와 Redirect 기본 개념 Forward 메서드는 웹 애플리케이션의 한 서블릿에서 다른 리소스로 요청을 전달하며, 이 리소스는 다른 서블릿, JSP 페이지 또는 HTML 파일이 될 수 있습니다. 브라우저로 요청을 전달을 하는 것이 아니라 서버 내의 다른 리소스를 호출합니다. Redirect 메서드는 요청을 브라우저로 전달하여 다른 웹 애플리케이션을 요청합니다. Red.. 2023. 11. 28. [Node, NPM] SQL Bricks, JavaScript로 SQL 구문을 생성하는 패키지 Node 환경에서 Axios를 사용해서 데이터를 크롤링하고서 이 데이터를 어떻게 처리할까 고민할 일이 있었습니다. 이 데이터를 DB로 옮겨야 하는데 어떤 방법이 좋을까 고민하다가 Spring Boot 환경에서 실행 시 데이터를 로드하는 방법이 있어서 SQL문으로 변환하는 방법이 필요했습니다. 직접 생성하는 방법도 있지만, 이미 만들어진 패키지가 있지 않을까 검색해 봤습니다. 1. 패키지 검색 https://www.npmjs.com Node 패키지를 검색할 수 있는 홈페이지 가운데 하나입니다. 여기서 검색어로 'generate sql'로 찾은 패키지입니다. https://www.npmjs.com/search?q=generate%20sql 2. SQL Bricks.js https://www.npmjs.com.. 2023. 11. 26. [JavaScript] JS에서 객체 이름 확인하는 방법 객체 관련 내용을 정리하다가 객체 이름을 확인하는 방법이 궁금해서 찾아보기 시작했습니다. 결론은 JavaScript에서 객체의 이름은 원래 없는 게 맞다고 봅니다. JavaScript는 프로토타입 기반의 동적 언어로 객체를 지원하고 있기 때문에 특정한 경우에만 객체의 이름을 사용할 수 있습니다. 1. JavaScript의 객체 생성방법 JavaScript의 거의 모든 객체는 Object 객체의 인스턴스입니다. JavaScript에서는 몇 가지 방법으로 객체를 생성할 수 있습니다. 1.1 객체 초기자 (Object initializer) 객체 초기자의 사용은 "리터럴 표기에 의한 객체 생성"이라고도 합니다. const myObject = { prop_1: value_1, // 식별자 prop_2: valu.. 2023. 11. 20. [JavaScript] this 제대로 이해하고 사용하기 Node 환경에서 코딩을 하면서 this를 사용해야 하는 경우가 있었습니다. 그런데 경우에 따라서 이 this의 동작이 달랐습니다. 다른 언어에서와는 달리 JavaScript는 this의 의미가 다르게 동작하는 경우가 있어서 제대로 이해하고 사용하고자 정리해 두었습니다. 1. this 란? 컴퓨터 프로그래밍 언어에서 this는 현재 실행 중인 코드가 속한 객체, 클래스 또는 기타 엔티티를 참조하는 데 사용하는 키워드입니다. this가 참조하는 엔티티는 실행 콘텍스트(예: 해당 메서드가 호출되는 객체)에 따라 달라집니다. 문제는 프로그래밍 언어마다 이 키워드를 약간 다른 방식으로 사용합니다. 많은 프로그래밍 언어에서 this는 한 가지 의미로 사용하는 경우가 많습니다만, JavaScript의 경우에는 사용.. 2023. 11. 19. [JSON] JSON 이해하기 - 2. JSON 기본 : JSON에서 사용하는 데이터 타입 JSON에 대한 기본적인 이해가 부족하다면 아래 글을 먼저 읽고 오면 좋습니다. https://dev-handbook.tistory.com/119 [JSON] JSON 이해하기 - 1. JSON 기본 : 개요, 특징 및 장단점, 구조 웹 개발을 하면서 정말 생각 없이 사용하게 되는 것이 JSON 인 것 같습니다. 무지성으로 사용해 오다가, 한 번 정리가 필요한 것 같아서 여러 글들을 읽어보면서 정리했습니다. 1. JSON 개요 JSON(JavaS dev-handbook.tistory.com 4. JSON에서 사용하는 데이터 타입 JSON에서는 number, string, boolean(true, false), object, array, null의 6가지 데이터 타입을 사용할 수 있습니다. 4.1 숫자 (.. 2023. 11. 6. [JUnit] MockitoAnnotations.initMocks is Deprecated 최근 책을 보면서 예제를 코딩하면서 Mockito에 대해 접하고 사용하기 시작했습니다. 그런데 소스 코드를 입력하는데 몇 가지 에러(error)와 경고(Warning)를 만났고 그중 하나가 MockitoAnnotations.initMocks is deprecated입니다. v실제 소스코드를 따라가 보니 initMocks() 메서드에는 @Deprecated 어노테이션이 선언되어 있습니다. 앞으로 더 이상 사용하지 않고 사라지게 될 것이라는 의미입니다. 가능하면 이 함수를 대신할 다른 함수나 방법을 찾아야 하는데 주석을 보면 openMocks()을 사용하라고 나와 있습니다. 바로 위에 openMocks() 메서드도 있네요. 파라미터도 동일하게 사용하고 있어서 간단히 메서드 명만 바꾸어 주면 됩니다. @Bef.. 2022. 12. 13. [Spring Boot] LocalDateTime 입출력 시 JSON 변환 방법 에러는 여러 가지 형태로 만나게 될 수 있는데 저는 이 에러를 JUnit 테스트를 하면서 알게 되었습니다. 문자열로 날짜(LocalDate)를 입력받아 시스템에서는 날짜, 시간(LocalDateTime)으로 처리하는 코드를 작업하면서 테스트 결과를 비교하는 과정에서 변환 결과에 차이가 있어서 오류가 났습니다. 조금 검색을 해보니 Spring Boot에서 LocalDateTime을 JSON 입출력 과정에서 필요한 코드(어노테이션)가 있고, 이를 제대로 이해하고 사용하면 문제를 해결할 수 있다는 것을 알게 되었습니다. 1. 오류 발생 및 확인 // Example Class public class User { ... private LocalDateTime birth; ... public User(LocalDa.. 2022. 12. 6. [Thymeleaf] 단순 텍스트 출력 - text, utext Thymeleaf 레퍼런스를 작성하고 있습니다. 최대한 간결하게 예시와 기능에 대한 설명만을 요약하려 합니다. 1. Thymeleaf에서 텍스트 다루기 1.1 HTML 태그에서 사용 1.1.1 th : text 특수문자를 해석하여 출력함 $data = " abcd " // 출력결과 abcd 1.1.2 th : utext 특수문자를 해석하지 않고 그대로 출력 HTML 태그를 포함하여 출력할 수 있음 $data = " abcd " // 출력결과 abcd 1.2 HTML 콘텐츠 영역에 직접 출력 1.2.1[[....]] 특수문자를 해석하여 출력함 my text is [[${data}]] $data = " abcd " // 출력결과 my text is abcd 1.2.2[(..... 2022. 11. 15. 이전 1 2 3 다음
