티스토리

재시민

검색하기

블로그 홈

재시민

jaesimin0903.tistory.com/m

재시민 님의 블로그입니다.

구독자: 6

방명록 방문하기

주요 글 목록

[React] useRef, useMemo, useCallback 1. useRef특징 및 사용 목적값 저장: 컴포넌트가 다시 렌더링되어도 참조 값을 유지할 수 있습니다.DOM 접근: 특정 DOM 요소에 직접 접근하거나 조작할 때 사용됩니다.렌더링 영향 없음: 값이 변경되어도 컴포넌트를 다시 렌더링하지 않습니다.주요 사용 예시DOM 요소의 포커스 제어, 크기/위치 확인이전 상태 값 저장타이머가 업데이트 될 때마다 불필요한 렌더링 방지function Timer() { const timerRef = useRef(null); const [time, setTime] = useState(0); const startTimer = () => { if (!timerRef.current) { timerRef.current = setInterval(() => { .. 공감수 0 댓글수 1 2024. 12. 13.
React 번들링 번들링이란?여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위, 웹 애플리케이션을 제공하기 위한 파일 묶음 번들링에는 다양한 방법이 있습니다. 대표적으로 Webpack, Vite 등이 있죠WebpackWebpack 이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러모듈 번들러HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구변수들의 스코프 문제 해결각 자원을 호출할 떄 생겨나는 네트워크 쪽의 코스트도 신경써야 하기에 등장등장 배경웹 앱의 빠른 로딩 속도와 높은 성능을 위해서 필요한 파일들을 묶어 제공두개의 다른 js 파일에서 같은 변수를 사용할 경우 충돌빌드와 번들링빌드개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하.. 공감수 1 댓글수 1 2024. 12. 1.
React의 특징 1. 컴포넌트 기반 아키텍처React는 UI를 독립적이고 재사용 가능한 컴포넌트로 나누어 개발할 수 있습니다. 이렇게 나누어진 컴포넌트는 서로 독립적으로 관리되며, 부모-자식 관계로 데이터를 주고받습니다.예제: 컴포넌트 분리const Button =({ label, onClick })=> { return ( {label} );}function App() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)} /> setCount(count - 1)} /> );}App 컴포넌트는 Button 컴포넌트를 사용해 label, onClic.. 공감수 2 댓글수 2 2024. 11. 17.
[프로젝트] Secure Coding Lecture 배경 계절학기에 들어가면서 1학점 짜리 웹 프로젝트 연구를 진행하게 되었다. 주제는 웹 보안을 위한 시큐어 코딩 학습 사이트다. 3주 동안 진행되는 계절학기 특성상 미리 준비하는게 정신건강에 좋기 때문에 미리 웹사이트를 구축해보기로 했다. 새로운 기술 우선, 평소에는 react, nodejs 로 웹을 구축했었는데 이번에는 nextjs 를 이용해 구축해보려고 한다. 새로운 기술에 대해 배우는고 공부하는데 도움이 될 것 같아 이렇게 진행하려고 한다. 취약점 조사 프로젝트에는 웹보안 하면 가장 기초가되는 4가지 공격을 제외한 공격을 다루라고 명시되어 있다. (sql injection, XSS, path traversal, desdrialization) 사실 내가 생각해도 위의 공격은 너무 소스도 많고 기본적인.. 공감수 0 댓글수 0 2023. 6. 19.
[NodeJS] Chatting Service -1- NodeJS 로 채팅 서비스 만들기 시스템 소프트 웨어 강의를 배우면서 리눅스를 이용한 c 코드 C - S 를 만들어보니 재미가 있어 NodeJS 로 구현해 보기로 했다. 위의 링크를 통해 배우고 구현해 보기로 했다. 필요 모듈 const fs = require('fs'); // express module const express = require('express'); // socket module const socket = require('socket.io'); // html module const http = require('http'); NodeJS 기본 모듈을 제외하면 express, socket.io 모듈이 추가로 필요하다. Socket.io module Socket.io 에 대한 함수를 알아보.. 공감수 0 댓글수 0 2022. 2. 6.
[NodeJS] 1.DB연동 HTTP module var http = require('http'); //http module 불러오기 var url = require('url'); // url module 불러오기 http.createServer(function(request,response){ // http module 을 이용하여 서버 생성 var pathname = url.parse(request.url).pathname; //url 뒤에 있는 디렉토리 / 파일 이름 파싱 if(pathname=="/"{// pathname 이 비어있다면 index를 디폴트로 pathname="/index.html"; } } 콜백함수를 사용해 response 이벤트가 감지되면 데이터를 데이터에 받아온다. var callback = functio.. 공감수 0 댓글수 0 2022. 1. 29.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.