useState ?React 사용하다보면 가장 많이 쓰는 상태를 의미하는 메서드항상 선언을 [변수 , set변수] = useState() 형태를 띔 예시 코드const [member, setMember] = useState(0);const num = ['1','2','3'];if(num.length === 3) { setMember(3)}else { setMember(0)}굳이 set ?위의 코드를 보면 setMember 를 통해 member 는 3의 값을 가지게 되는데 사실 바로 member 에 적용하면 되는데 왜 그러는걸까 ? 기본적으로 react는 set을 통해 변화를 감지하는데 set을 통해 변화를 감지하게 되면 렌더링을 진행하여 화면을 업데이트 시켜준다 직접 member = 3; 이..
Spring vs Spring Boot프로젝트를 하다보면 Spring 으로 구축된 프로젝트가 있고 Spring Boot 로 구축된 프로젝트가 있는데 무슨 차이일까요? Spring (젠이츠)젠이츠는 ‘1형’만 쓸 수 있지만 그 하나를 극한으로 단련해 무시무시한 공격을 날리죠.Spring도 마찬가지. 기본기를 탄탄히 쌓을 수 있지만, 배우는 데 시간은 좀 듭니다.웹에 필요한 기능을 총집합한 프레임워크단, 집합인 만큼 설정도 복잡하고 프레임워크가 상당히 무거움xml , config 파일 등을 통해 설정함로컬서버도 따로 설정해줘야함설정하는데 시간이 많이 걸림 직접 컨트롤Spring Boot (카이카쿠) Spring 에서 진행하는 설정을 간소화 자동으로 설정 , 스타터를 써도 됨 로컬서버(톰캣) , 의존성..
useLayoutEffect 란 ?브라우저가 화면을 그리기 전에 마지막으로 작업 할 수 있게 해주는 훅 useEffect 보다 먼저 실행됨(단, 브라우저가 화면 그리기 전에 동작하는 동기적 실행이므로 성능에 영향을 줌) useLayoutEffect 렌더링 순서렌더링 시작dom 생성useLayoutEffect 브라우저 화면 그리기 시작 useEffect useLayoutEffect vs useEffect (Time is running out)useEffect 의 경우 브라우저가 화면을 그린 이후에 동작 > 유저 입장에서 화면 깜빡이는게 보임 useLayoutEffect 의 경우 브라우저가 화면을 그리기 전 동작 > 유저 입장에서 자연스러움 즉 마지막으로 화면이 그려지기 직전 화면과 관련해서 수정 할 기회..
HTTP란? 개념과 특징 정리일반 연필로 쓴 편지를 생각하면됨HTTP는 HyperText Transfer Protocol의 약자, 웹에서 데이터를 주고받을 때 사용하는 가장 기본적인 통신 규칙.그냥 누구나 읽을 수 있는 구조이며, 중간에 데이터를 가로채는 경우 원문 그대로 가로채지는 문제가 발생합니다(주민등록번호 , 주소지 등등 민감 정보가 그대로 보임)HTTPS란? 개념과 특징 정리양초로 쓴 비밀편지를 생각하면됨HTTPS는 HTTP + Secure, 기존 http 에 보안 개념이 추가되었습니다.즉 그대로 주고 받던 이전과 달리 암호화가 되어있습니다내부적으로는 TLS(Transport Layer Security)라는 보안 프로토콜을 사용당연히 암호화가 되어 있기 때문에 복호화 또한 존재합니다.주민등록번호..
(2024년 7월 이야기입니다..)첫 출근첫 출근 날.엘리베이터를 타고 회사가 있는 층에 내렸다.조용한 복도를 따라 걷는데,맞은편에서 어떤 여자분도 걸어오고 있었다.둘 다 같은 문 앞에 멈췄다.문은 굳게 닫혀 있고, 아무도 없다.거의 15분을 어색하게 휴대폰만 보고 있었는데면접때 인솔해주시던 여성분(인사팀)이 와서제가 많이 늦었죠 라며 문을 열어주셨다(그냥 이 어색한 시간이 끝나 좋았다)그렇게 다른분들도 한 두분 씩 오셨다 .프로젝트가 끝나 철수한 대리 , 과장 , 부장님 등등처음이라 어색한 분위기 속에 앉아있다가그 어색하게 서있던 분과 이야기를 했다혹시 이번에 들어오셨어요?동기가 5명이라는데 출근 가능 날짜가 다 달라서 얼굴도 몰랐다알고 보니 같이 입사한 동기였다 ;; (지금은 카톡도 자주하지만 그땐 ..
“접근 금지” – Shadow DOM, 주술회전 ‘영역 전개’“내 스타일에 간섭하지 마세요. 여긴 Shadow 영역입니다.”웹 개발을 하다 보면 이런 생각이 들 때가 있다. “왜 내가 꾸민 스타일이 자꾸 깨지지…?내 버튼은 분명히 예뻤는데…?”(※ 정확히 말하자면 React 개념보단 웹 컴포넌트 쪽에 가까워요.하지만 따로 섹션이 없으니 여기 React 영역에 올려두겠슴다 🙃)스타일의 영역 전개 – Shadow DOM이란?Shadow DOM은 말 그대로 DOM의 그림자 세계.브라우저가 제공하는 웹 컴포넌트(Web Components) 기능 중 하나로,외부 스타일이나 스크립트가 내부에 간섭하지 못하는 독립된 DOM 트리를 만드는 것.마치 자신만의 세계를 펼치는 고죠 사토루의 ‘무량공처’처럼,이 영역 안에..