jhhan의 블로그

리액트를 공부하면서 정리가 필요한 부분을 글로 작성합니다. 리액트에는 리액트가 제공하는 훅(Hook)들이 존재합니다.그리고 그 중에서 고수는 물론 초보자들도 반드시 알아야 하는 훅들이 있다고 하는데그것이 바로 useState와 useEffect 라고 합니다.그래서 이 2개에 대해서 정리해보려고 합니다. 참조: https://ko.react.dev/reference/react/useState useStateReact에서 가장 기본적인 훅으로 볼 수 있다고 합니다.컴포넌트 내에서 상태를 관리하는 Hook배열 구조분해를 통해 현재 상태값과 상태를 업데이트하는 함수를 반환import { useState } from 'react'const [state, setState] = useState(1);코드 예시를 통해..

최근에 리엑트 공부를 시작해서 글을 작성합니다. 리액트가 프론트엔드에서는 제일 많이 쓰인다는 것을 알고는 있었지만,실제로 제가 쓰는 일은 없어서 계속 미뤄왔지만..이제 더는 미룰 수 없을 듯 하여공부를 시작하고, 글도 다시 써봅니다. 현재는 윈도우11과 vscode로 리액트를 배우는 중이기 때문에vscode 기준으로 진행합니다. 1. vscode 설치개발자 분들이라면 대부분 설치되었다고 생각합니다.만약 아니시라면, 다른 블로그를 참고해서 vscode 설치를 하면 될 것 같습니다. 2. node.js이제 node.js 는 필수가 된 것 같습니다.(만약 설치되어 있다면 다음 단계로 가면 됩니다.)https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® ..

이번 포스트에서는 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..