🍒 Chae-ri Dev 🍒

리액트의 주차였던 3주차!!! 이번주 너무 빠르게 지나갔다..바로 회고 포스팅 시작하겠다.2025-01-13-MONReact 기본 개념 정리✏️다양한 기능이 추가되면서 자바스크립트 파일이 커지게 되어 브라우저가 부담되는 부분이 커져감MPA일 때는 첫 페이지에서 두번째로 갈때 새로고침되면서(깜빡이면서) 이동됨SPA일 때는 새로고침 없이 페이지 이동(사용자 경험 개선)dom을 직접 조작하면 성능 저하 발생=> 리액트에서 이를 해소하기 위해 가상dom을 활용함CSR => React서버로부터 받아온 json을 클라이언트에서 변화해서 쓸 수 있도록 한다ex) 구글 지메일 => 처음 실행할 때 로딩하고 페이지 보여줌(로딩할 때 html이랑 자바스크립트 번들 파일을 불러오는 것)SSR => NextJS요즘은 다시 서..

nginx 관련해서 들어가기 전에 먼저 웹 서버에 대해 간단히 정리하면서 시작해보겠다.웹 서버 웹 서버란 하드웨어와 소프트웨어 측면으로 나누어서 볼 수 있다.하드웨어웹 서버는 웹 서버의 소프트웨어와 website의 컴포넌트 파일들을 저장하는 컴퓨터컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript 파일들이 있다.웹 서버는 인터넷에 연결되어 웹이 연결된 다른 기기들이 웹 서버의 데이터를 주고 받을 수 있도록 한다.소프트웨어기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리HTTP 프로토콜을 사용하여 클라이언트의 요청 처리 및 응답대표적으로 Apache와 Nginx가 있다. nginx nginx는 대표적인 상용 웹 서버 중 하나로, 클라이언트..

Portal이란?부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링을 해준다.즉, 컴포넌트의 상하 관계 구조를 가지고 있는 DOM 상에서 자식 컴포넌트를 부모 컴포넌트의 외부에 있는 다른 컴포넌트에 전달할 수 있도록 해준다. 리액트 프로젝트에서 해당 컴포넌트를 어디에 렌더링 시킬지,사전에 DOM을 선택하여 부모 컴포넌트 바깥에 렌더링해주는 기능이라고 생각하면 된다.ReactDOM.createPortal(child, container) ReactDom의 createPortal 메서드를 활용하여 포탈을 사용해 계층 밖으로 보낼 컴포넌트(child), 포탈로 이동할 목적지, DOM Element(container)를 인자로 넣어준다. 1. 모달이  렌더링할 위치 지정하기index.htm..

useReducer란?상태를 관리하고 업데이트하는 훅인 useState의 대체 함수.useState의 업그레이드 버전이라고 생각하면 된다.다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 useState가 아닌 useReducer 사용을 통해 컴포넌트의 성능을 최적화시킬 수 있다고 한다.(callback 대신 dispatch를 전달하기 때문) useReducer는 다음과 같이 사용된다.const [state, dispatch] = useReducer(reducer, initialArg, init);  state현재 상태 값. useReducer로 관리되는 상태의 현재 값이며, reducer 함수의 반환 값에 의해 업데이트 된다.초기 상태는 in..

2주차 시작!!! 이번주는 JS 주차였는데 꽤나 정리할게 많았다.. 후...실습 정리하고.. 프로젝트하고 하느라 다소 정신 없는 한 주 였지만 그래도 주차별 회고는 빠질 수 없으니 정리를 빠르게 해보도록 하겠다.6일차 2025-01-06-MON미니 프로젝트 발표를 시작으로 JS의 기본 문법을 쭈욱 나간 날이다. JS란 어떤 특징을 가진 언어인지부터 실습과 함께 기본 문법들을 다져볼 수 있었다. 발표 FISA에서 처음한 날인데... 안떨어야지 안떨어야지 하면서 말하다보면 갑자기 목이 파르르 떨릴 때가 있다. 왜그러냐 서채연.원래 발표할 때 안떤다고 생각했는데 요근래 들어서 말을 많이 안해서 그런가(노트북만 보고 있으니...) 깔끔하게 말하는 연습을 해야겠다. 유창하게 말하는 사람이 되고 싶다. 연습을 많이..

nodeJS와 Express를 이용하여 서버를 구축해볼 것이다. 먼저 nodeJS와 Express가 무엇인지 알아보자. nodeJSJavaScript로 브라우저 환경이 아닌 서버 환경에서 실행할 수 있도록 한 런타임 환경모듈화(내장 모듈 제공) - http, hs, path, cryto 등예시) http 모듈 서버 생성const http = require('http');const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello from Node.js!');});server.listen(3000, () => { console.log('Ser..

Ajax(Asynchronous JavaScript and XML)JavaScript 기반의 비동기적으로 데이터를 처리하는 기술페이지 전체를 새로고침하지 않고 브라우저 상에서 사용자의 동작에 따라 웹 페이지의 일부분을 업데이트 할 수 있도록 한다.Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. 1. 사용자의 이벤트 발생2. JS가 XMLHttpRequest를 생성 후, 서버에게 요청 후 응답 받음3. 반환 받은 데이터를 통해 특정 부분 업데이트 여기서 클라이언트와 서버는 JSON 형식의 데이터를 주고 받는다. JSON이란?클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다. 기존의 XML 데이터 포맷으로 통신하는 과정이 복잡하다고 느껴..

사용자가 어떠한 입력값을 입력할 때 실시간으로 api를 불러와야할 때(input),사용자가 사이트의 스크롤을 내릴 때 발생하는 수많은 이벤트들이 발생할 때(scroll),화면 크기를 조정(resize)하거나 마우스가 움직일 때(mousemove) 위 상황을 봤을 때 짧은 시간 안에 이벤트 핸들러가 콜백함수를 계속해서 호출하고 대량의 api가 호출되기에 성능 저하가 나타나는 상황이 발생한다. 이를 해결하기 위해서는 Debounce(디바운스)와 Throttle(쓰로틀)을 활용하여 이벤트를 제어해야만 한다. Debounce와 Throttle는 둘 다 일정 시간에 따라 이벤트 핸들러의 호출을 제어하는 부분에서는 같지만, 차이점이 있다.Debounce Debounce는 계속해서 호출된 함수들 중 제일 마지막 또는..

바닐라 JS 실습 프로젝트를 하는 도중자바스크립트 동작이 제대로 안되는 것을 확인했다. 이벤트를 걸어줬는데 이벤트도 동작을 안하고 콘솔로 확인해보니 dom 관련 메서드가 제대로 동작이 안되는 걸 확인할 수 있었다.Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 가 태그보다 먼저 로드되고 있어서,app.js가 실행될 때 아직 clickBtn과 backgroundDiv가 DOM에 존재하지 않았기 때문에 발생하는 문제였다. 문제의 코드... // ❌  해결 방법에는 script 태그 위치를 옮기거나 defer나 async 요소를 넣으면 된다. (추가로 DOMContentLoaded라는 것도 있다고 한다...

우리FISA 1주차가 끝났다. 이번주는 완전 적응기간이었다.평소 오전 10시~11시쯤에 일어났던 내가.. 매일 아침 6시에 일어나 7시에 직장인들과 함께 버스를 타고 상암으로 행하는 게 뭔가 부지런한 갓생러 된 것 같으면서 몸은 힘들었던... 그치만 점차 적응해져간다.그리고 하루종일 앉아 있다 보니 운동을 꼭 해야겠다고 생각이 들었다..근데 운동할 시간이 정말 촉박한 건 사실이다 흑흑 할게 너무 많아. 1일차 2024-12-30-MON두근두근한 1일차!1일차는 개강식과 OT를 진행했다.개강식은 우리금융타워에서 진행했다. 건물 짱 웅장👍🏻👍🏻 떨리는 개강식 시작!!!개강식에는 1기 선배분들이 오셔서 조언과 Q&A 타임을 가졌는데 유익하고 좋은 말들을 많이 해주셔서 의욕이 뿜뿜 생겨났다.개강식이 끝나..