반응형 더 알아보기/개념33 react-dom의 createPortal 사용 후기 react-dom의 createPortal이란? React 프로젝트에서는 구현된 화면을 /public/index.html의 에서 렌더링 하는 데 react-dom의 createPortal을 사용하면 #root가 아닌 다른 태그에 id를 부여함으로써 영역을 분리하여 화면을 렌더링 할 수 있다. [React] ReactDOM.createPortal() 모달 공부를 하다가 마주친 ReactDOM.createPortal()에 대해 알아보자! velog.io 어떤 상황에 사용할 수 있을까? Modal 컴포넌트를 생성할 때 화면을 감싸고 있는 root를 개별적으로 사용할 수 있기 때문에 화면 우선순위 처리면에서 유용할 것 같다. 이외의 새롭게 알게된 부분 예제에서는 document.getElementId("#mod.. 2023. 7. 28. MVC 패턴 내 머릿속에 MVC 패턴은 백엔드에서 사용하는 아키텍처로써 Model, View, Controller가 있다고 알고 있었는 데, 막연히 Spring과 같은 백엔드에서만 사용하는 것이다라고 생각하며 3년이라는 시간이 지나자 이제는 MVC 패턴이 프런트에서도 사용되고 있다는 것을 알게 되어 새로운 마음으로 MVC 패턴에 대해 알아보았다. 프론트엔드의 MVC 아키텍처와 디자인 패턴 > 내가 건축가가 되어서 직접 집을 짓는다고 생각해보자. 눈에 보이는 집의 구조는 같은 집일지라도 단독주택으로 집을 짓는 것과, 빌라로 집을 짓는 것과, 고층 건물로 velog.io 위 글에서 MVC 패턴에 대한 설명과 프론트에서는 MVVM, MV*과 같은 MVC에서 파생된 개념들도 잘 정리되어 있기 때문에 한번 읽어보면 개념 잡는.. 2023. 3. 27. SWR vs React-Query 앞서 작성한 애자일 방법론의 서론과 마찬가지로 커리어리에 올라온 Q&A를 통해 SWR과 React-Query의 차이점을 알아보게 되었고 좋은 글을 발견하여 따로 정리할 것 없이 해당 글을 첨부하였다. React Query vs SWR React Query와 SWR의 차이점 tech.madup.com 추후 패캠에서 SWR과 React-Query 강의 시청 후 추가하거나 사용법을 정리해 볼 예정이다. 2023. 3. 24. 애자일(Agile) 방법론 아침마다 커리어리에서 개발 관련 글을 3개씩 읽으려고 노력하는 중인데, 오늘 본 글에서 요즘 개발팀에서 애자일 방식을 많이 사용한다는 글을 보게 되었다. 고로 애자일 방식이 뭔지에 대해서 알아보기로 했다. 내가 알고 있던 애자일의 정의는 "프로젝트를 장기적으로 보고 순차적으로 진행하는 방식이 아니라 일정 기간마다 회의를 통해 팀 단위로 해당 기간 동안 진행할 부분들을 정하고 빠르게 개발해 나가는 방식"으로 알고 있었으며 이번 기회를 통해 위 정의가 맞는 지 또는 더 자세한 부분이 있는지 알아보고 정리해 나갈 예정이다. 정의 애자일(Agile)이란? : 소프트웨어 개발 방법론 중 하나로 사전적 의미로는 '기민한, 날렵한'이라는 뜻을 가지고 있다. 좋은 것을 빠르게 취하고, 낭비 없게 만드는 다양한 방법론을.. 2023. 3. 24. CSS 모듈화 웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS 웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS www.samsungsds.com [React] CSS모듈화. 리액트에서 CSS 적용하는 방법은 크게 2가지가 있다. 1. style.css 등을 만들어서 각 컴포넌트의 스타일링을 하고 import해오기 2. 해당 컴포넌트 안에서 property 적용하기 하지만, 위 2가지 방법 모두 코 codingbucks.tistory.com 에스코어 에스코어는 디지털 혁신을 위한 고급 프로페셔널 서비스를 제공합니다. 매니지먼트 컨설팅과 소프트웨어 테크놀로지 서비스 오퍼링을 살펴보세요. s-core.co.kr CSS-in-CSS React에서 CSS를 적용하는 방법 1) styl.. 2022. 7. 13. JS의 메모리 누수 자바스크립트의 메모리 누수 (Memory Leaks) Memory Leaks 메모리 누수란? 부주의 또는 일부 프로그램 오류로 인해 더 이상 사용되지 않는 메모리를 해제하지 못하는 것 자바스크립트의 메모리 스택 메모리: 단순 변수 (String, Number, Boolean, Null, U beenlog.tistory.com [Java] Garbage Collection(가비지 컬렉션)의 개념 및 동작 원리 (1/2) 1. Garbage Collection(가비지 컬렉션)이란? [ Garbage Collection(가비지 컬렉션)이란? ] 프로그램을 개발 하다 보면 유효하지 않은 메모리인 가바지(Garbage)가 발생하게 된다. C언어를 이용하면 free()라는.. mangkyu.tistory.com 메.. 2022. 6. 15. EJS Include란? ejs란? EJS란? Embedded JavaScript Template의 약자로써 NodeJS와 Express에서 많이 사용하고 있는 템플릿 엔진입니다. 사용자 수가 많은 Jabe 템플릿은 HTML과 작성법이 많이 다른 반면에 ejs는 기존의 HTML 문법에 한.. eundol1113.tistory.com ejs에 대한 개념 설명은 위 참고 Include 작업을 하다보면 header나 footer 등의 내용이 중복되는 경우가 종종 발생합니다. 이럴 때 중복되는 코드를 하나하나 작성한다면 수정사항이 생길 때마다 해당하는 모든 코드를 찾아야 합니다. 따라서 템플릿을 이용하여 중복하는 코드를 모듈화 할 수 있습니다. 템플릿 엔진으로는 ejs를 사용합니다. var express = require('expres.. 2022. 3. 1. EJS란? EJS란? Embedded JavaScript Template의 약자로써 NodeJS와 Express에서 많이 사용하고 있는 템플릿 엔진입니다. 사용자 수가 많은 Jabe 템플릿은 HTML과 작성법이 많이 다른 반면에 ejs는 기존의 HTML 문법에 한해서 를 사용하여 크게 벗어나지 않아 더욱 쉽게 서버의 데이터를 사용하거나 코드를 실행 할 수 있다는 장점이 있습니다. 기본 문법 - 주석 : - JS 코드 : - 변수 출력 : (HTML Escape 처리 : >를 $gt로 변환) - 태그 내부 공백 제거 : - HTML Escape를 안하고 변수 출력 : // // npm/yarn을 사용하여 ejs 설치 $ npm install ejs or $ yarn add ejs NodeJS와 연동 (= 데이터 넘겨.. 2022. 3. 1. Git fork vs clone 프로젝트를 진행 하면서 clone과 fork를 많이 했었는 데 정작 정확한 의미는 모르고 있었던 것 같아 이참에 제대로 정리 해보기로 하였다! 아래 사이트들을 참고하여 정리 하였다. [Git] clone 과 Fork 의 차이점 이번 글에서는 clone과 Fork의 차이점을 알아보려 한다. 1. fork란? fork는 다른 사람의 Github Repository에서 내가 어떤 부분을 수정하거나 추가 기능을 넣고 싶을 때 해당 repository를 내 Github Repository.. devlog-wjdrbs96.tistory.com [ Fork ] fork는 다른 사람의 Github Repository에서 내가 어떤 부분을 수정하거나 추가 기능을 넣고 싶을 때 해당 repository를 내 Github .. 2022. 2. 5. 이전 1 2 3 4 다음 반응형
