🍒 Chae-ri Dev 🍒

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 타임을 가졌는데 유익하고 좋은 말들을 많이 해주셔서 의욕이 뿜뿜 생겨났다.개강식이 끝나..

⭐️Issue 템플릿 생성법(+PR 템플릿)⭐️레포지토리의 Settings → General → Features → Issues → Set up templates 순으로 클릭한다.Add template를 누르고 bug나 feature 등 상황에 맞는 템플릿도 있지만나는 나만의 템플릿을 만들 것이므로 Custom template를 선택해준다. 위처럼 Custom issue template이 생기는데 Preview and edit을 눌러보면 다음처럼 확인할 수 있다.연필 모양 아이콘을 클릭하여 다음처럼 나만의 템플릿으로 바꿔준다.Optional additional items 이슈에 고정적으로 어떻게 할 것인지 고르는 것이기에 입맛대로 하면 된다.Purpose changes -> Commit changes를 ..

버전 관리 방법1. 혼자서 버전 관리2. 다른 사람과 버전 관리 다른 사람과 버전 관리1. 직접 서버를 구성2. SaaS 서비스 이용 - 외부 컴퓨터에서 데이터를 저장하여 버전을 관리하는 것(ex. Github)*외부 컴퓨터가 날아간다면? => 각각 개별의 로컬에 버전이 백업되어 있기 때문에 복구 가능(Git의 분산 시스템 방식) *git과 github의 차이는?git - 분산 버전 관리를 위한 도구 및 시스템github - Git 저장소를 호스팅하는 클라우드 기반 플랫폼. 즉, 데이터를 저장할 수 있는 외부 컴퓨터라고 보면 됨 파일의 네 가지 상태Tracked - .git이 추적 중인 파일(commit 가능)Untracked - .git이 추적 중이지 않은 파일(commit 불가능)modified - ..