hwlink

Scss 폴더관리 프로젝트 진행 시 개별 scss파일에 _sample.scss 언더바를 붙이면 컴파일이 발생하지 않는다. 그럼 컴파일이 일어나지 않는다면 스타일이 적용이 안되는데 어떡하나? 방법은 main.scss에서 _로 만든 scss파일들을 import 해서 한번에 컴파일 해주어 용량을 가볍게 관리하여 성능에 이점을 줄 수 있다.

Coding/CSS 2022. 1. 2. 22:58

:: DOM? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드 되는지 살펴보겠습니다. :: DOM 원리 역할 1. HTML 내용을 브라우저에 표시하게 해준다. 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 “Critical Rendering Path”라고 합니다. 1단계 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정. 2단계 브라우저는 해당 렌더링을 수행. \1번째 과정을 거치면 “렌더 트리..

Coding/JS 2022. 1. 2. 16:09

Problem 자바 스크립트는 동기적 언어인데 아래의 코드를 실행하면 1번, 2번, 3번 순으로 실행되야하는게 맞지만 실제 콘솔에서는 1번,3번,2번 순으로 실행된다. JS를 처음 사용할 때에는 무지성으로 사용하여 궁금하지 않았었는데 이제는 스스로 코드를 칠 때 이해가 되지 않아 자바스크립트의 동작 원리를 간단히 정리하려고 한다. console.log('1번') setTimeout(function() { console.log('2번'); }, 0); console.log('3번') 1. JS ENGINE JavaScript 엔진은 Memory Heap, Call Stack으로 구성되어 있다. JavaScript 엔진 중 가장 인기 있는건 크롬의 V8 엔진입니다. V8 /엔진은 Node.js 내부에서도 사..

Coding/JS 2021. 12. 31. 21:44

기업협업으로 출근하게 될 기업이 Recoil 기술스택을 사용 하길래 Recoil 공식문서를 참고하여 개념정리를 미리 하고 출근하려한다. 공식문서: https://recoiljs.org/ko/docs/introduction/getting-started 등장 배경 비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는 Redux와 MobX, 그리고 이들은 근본적으로 React를 위해 출시된 것이 아니다. React의 hooks와 어울리면서 React에 필요한 것들만 React스럽게 제작한 상태관리 라이브러리 Recoil 개요 Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 ..

Coding/React 2021. 12. 26. 15:15

Amazon Elastic Compute Cloud 다양한 오에스버전의 가상서버를 제공하는 아마존 웹서비스 인스턴스 생성 1. EC2에서 사용할 os머신 설정 (프리티어 버전 우분투 18.04 64bit) 2. CPU 메모리 등 서버의 규모 선택 프리티어 t2.micro선택 3.인스턴스 구성 - virtual pirvate cloud AWS 가상 전용 네트워크 : 아이피 주소를 기반으로 한 논리적인 네트워크 공간 구성가능, 방화벽 접근제어 설정가능케 해준다. - 퍼블릭ip 자동할당 : 동적으로 공인아이피 부여, EC2 인스턴스 재시작시 자동으로 변경 추후 고정아이피를 사용하려면 Elastic아이피설정 - 종료방식 : 중지: 인스턴스 셧다운시에 os 정지 >> os이미지 보존 재시작시 다시 시작 종료: o..

Coding/WEB 2021. 12. 25. 18:02

리덕스란 무엇인가 기초배경 :: MVC 기존에는 1979년에 고안된 MVC 디자인 패턴을 사용하였다. 관심사의 분리에 따라 분업화하는 디자인 패턴이다. Model: 정보, 데이터 리액트(State) Controller: 특정 동작에 따라 Model, View 조작, 변경을 위해 Model, View 모니터링, 이벤트감지 및 처리 View: 브라우저 화면, 유저 인터페이스, Controller에 변경 통지 하지만 단점도 존재하는데 아래 그림처럼 하나의 컨트롤러가 여러 모델에 걸쳐 데이터를 조작하고 있는 상황. 모델은 여러 뷰를 업데이트 하고, 뷰 또한 컨트롤러를 통해 모델을 업데이트 합니다(양방향 데이터 바인딩) 바인딩: 뷰와 데이터를 연결하는 것 컨트롤러가 일으킨 조작이 정확히 어떤 요소들에 대한 업데이..

Coding/React 2021. 12. 23. 02:03

DBMS 통상 데이터베이스와 DBMS 를 합쳐서 DataBase라고 부른다. 데이터의 집합 why use Database 데이터베이스 종류 관계형 데이터베이스(RDBMS) 관계 대수라는 것에 착안하여 고안한 데이터베이스 행과 열을 가지고 표 형식 데이터를 저장하는 형태의 데이터베이스를 가리킨다. 표 형식 데이터란 2차원 데이터를 말한다. 가로: 열, 세로: 행 이런 표를 잔뜩 저장해두고, 각각의 SQL(데이터베이스가 이해할 수 있는 언어) 자세하게 요청할 수 있다. 관계형 데이터베이스가 사용되는 시스템 다양한 시스템에서 사용된다. 일반적인 인프라 인터넷이다. 웹 시스템과 연동하는 경우 예약시스템, 등 다양한 서비스에 적용된다 관계형 데이터베이스 소프트웨어 RDMBS라는 용어는 관계형 데이터베이스를 관리하..

Coding/WEB 2021. 12. 18. 11:45

Style Component: styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 2차 프로젝트를 진행하면서 기존 사용하던 scss가 아닌 styled component를 적용하여 진행하게 되었다. - 스타일 컴포넌트 사용하는 이유. 먼저 스타일을 적응하는 방법 1. 외부 CSS 파일에 CSS코드를 작성하여 className으로 속성을 전달 - 규모가 커질수록 css 부피가 커진다. sass를 적용하면 조금 나아지지만 그래도 부피가 너무 크다. 2. inline CSS를 react component 에 삽입 - 인라인 스타일은 미디어 쿼리를 사용할 수 없고, 브..

Coding/React 2021. 12. 17. 13:19