jhhan의 블로그

이번 포스트에서는 Spring boot에서 로그 파일을 남겨보는 방법 중 한 개를 알아보려고 합니다.(정말 오랜만에 정리해보는 Spring boot 관련 포스트입니다.) 참조 : https://cl8d.tistory.com/96 [Spring] 에러 로깅하기 - Logback을 사용해서 ERROR 레벨만 파일로 로그를 남겨보자!🌱 들어가기 전 이번 장바구니 미션에서는 프론트 크루들과 협업을 해야 했기 때문에 앞으로 에러 로그를 볼 일이 많아질 것 같다고 생각했다. 배포 스크립트를 작성하면서 스프링이 띄워질 때cl8d.tistory.com 아래에서 진행하는 내용들은 모두 vscode 기준으로 진행합니다.Spring boot version : 3.1.11java version               : ..

이번 포스트에서는 shadow DOM과 template에 대해서 알아보겠습니다. 지난 포스트와 이어지는 내용이 있으니 참고하셔도 좋습니다. https://jhhan009.tistory.com/130 Web Components 이번 시간에는 Web Components에 대해서 알아보겠습니다. html 코드를 작성하다 보면, 혹은 살펴본다면 div 태그들을 많이 쓰는 것을 볼 수 있습니다. 근데 실제로 이 div 태그들을 계속해서 쓰는 것이 jhhan009.tistory.com 1. 화면 상에서는 나름 복잡하게 보이는데 코드 상으로는 간단한 그런 것들이 있습니다. input 이 아마도 그런 예시가 될 것 같습니다. 코드 한 줄로 표현이 되지만, 과연 코드 한 줄로 저런 화면이 나오는 것이 되는 걸까요... ..

이번 시간에는 Web Components에 대해서 알아보겠습니다. html 코드를 작성하다 보면, 혹은 살펴본다면 div 태그들을 많이 쓰는 것을 볼 수 있습니다. 근데 실제로 이 div 태그들을 계속해서 쓰는 것이 귀찮을 수 있습니다. 그런 것들을 모아서 하나의 새로운 태그로 만드는 것도 괜찮지 않을까요? 바로 Web Components라는 문법을 사용하면 가능하다고 합니다. 참고로 이것은 브라우저에서 지원해주는 기능입니다. 그리고 js 문법으로 구현할 수 있어서 js를 사용해서 진행합니다. 1. 커스텀 태그 만들어보기 만들어보고자 하는 커스텀 태그가 없다면 다음의 커스텀 태그 예시를 살펴보겠습니다. label 과 input 태그가 같이 나오는 그런 태그를 만들어보겠습니다. class LabelAndI..

이번 포스트에서는 웹브라우저 동작 원리에 대해 간단하게 알아보려고 합니다. 요즘은 node.js가 나왔기 때문에 js 구동을 어디서든지 할 수 있지만, node.js가 나오기 전에는 js 구동이 제한적인 걸로 알고 있습니다. 그리고 그 제한적인 곳 중 하나가 브라우저 입니다. js 코드를 열심히 작성하고 나서 js가 잘 실행되는지 확인하는 곳이 브라우저라는 것은 js 개발을 한 번이라도 해봤으면 아실 것입니다. 그렇기 때문에 브라우저에서 js가 어떤 식으로 동작하는지 안다면 js 개발을 좀 더 효율적으로 할 수 있지 않을까요 ㅎ 1. 브라우저 브라우저는 c++로 구현되어 있다고 합니다.(확인 필요) 그리고 브라우저는 stack과 queue라는 공간을 가지고 있다고 합니다. 여기서 stack은 코드를 실행..

이번 포스트에서는 async와 await에 대해서 적어보려 합니다. 이전 글에서 Promise 디자인 패턴에 대해서 알아봤습니다. (필요하시다면 참고하시면 되겠습니다.) https://jhhan009.tistory.com/126 Promise는 디자인 패턴으로 사용하기 어렵다고 생각하는 사람이 있을 수도 있습니다. 그럴 때는 ES8에서 등장한 async & await을 사용하는 것을 고려해 볼 수 있습니다. async 와 await을 쓰는 것은 Promise보다 코드 상으로는 더 간편할 수 있습니다. async function f1() { return 1+1; } 위의 코드처럼 function에 async를 붙이면 됩니다. 그리고 난 후 async function f1() { return 1+1; } f..

이번 포스트에서는 Promise에 대해서 알아보겠습니다. 이번 글은 아래의 글과 연관되는 부분이 있습니다. https://jhhan009.tistory.com/125 동기, 비동기 처리 & 콜백함수 이번 포스트에서는 동기, 비동기 처리 & 콜백함수 에 대해서 작성해보겠습니다. javascript는 동기식 처리의 특징을 가지는 언어입니다. 동기식 처리는 한 번에 한 줄 씩 처리하는 것을 의미합니다. jhhan009.tistory.com Promise는 디자인 패턴으로 callback 함수를 사용하는데 있어 불편함을 느낀다면 사용할 수 있는 대체제 입니다. 먼저 Promise의 간략한 사용법을 알아보죠 let pm1 = new Promise(); pm1.then(function() { }).catch(fun..

개발자라면 사이드 프로젝트에 대해서 많이 들어봤을 것이다. 생각이 풍부하고 이것저것 많이 해보고 싶은 활동적인 개발자라면 다양한 사이드 프로젝트에 도전할 수 있겠지만, 그렇지 않은 개발자들도 있을 것이다. (나..?) 그럴 때 유용할 것 같다. 1.아이디어를 찾고 싶을 때 : producthunt.com → 새로운 IT 서비스에 대해서 볼 수 있음 : news.ycombinator.com → 해외 개발자들이 몰려있는 사이트 2. 평소에 겪었던 문제를 해결 : 일 하면서 겪었던 문제를 해결해보고 이것을 확장해가면서 더 다양한 공부를 해본다. 비고. austinhenley.com/blog/challengingprojects.html : 공부용 / 실력 키우기용 으로 진행 가능 3. 데이터베이스 : mongo..

이번 포스트에서는 동기, 비동기 처리 & 콜백함수 에 대해서 작성해보겠습니다. javascript는 동기식 처리의 특징을 가지는 언어입니다. 동기식 처리는 한 번에 한 줄 씩 처리하는 것을 의미합니다. 코드 예시를 보겠습니다. console.log(1); console.log(2); console.log(3); 만약 이런 코드가 있다면 실행결과는 어떨까요? 결과값은 1 2 3 으로 나오게 됩니다. 동기식 처리를 진행하기 때문에 한 줄 씩 처리해서 코드가 적힌 순서대로 출력됩니다. 이는 javascript를 실행하는 웹브라우저의 stack이라는 공간에서 코드를 한줄 한줄 실행하게 하기 때문입니다. 근데 대부분의 프로그래밍 언어들은 동기식 처리로 진행합니다. 하지만 javascript 코딩을 하다보면 비동기..