profile
JS Engineer
post-thumbnail

ReactDOM.createPortal

modal을 사용하기 위해서는 redux를 연결하거나 contextAPI를 사용해서modal provider를 만들어 주고는 했다. 그런데 보니깐 리액트 돔 api중에 하나인 createPortal을 이용해서 모달을 만들어 사용할 수 있다는 부분을 보고는 나도 한 번

6일 전
·
0개의 댓글

Resources: Importing SVG In React

This is a new special syntax when importing SVG in React. The ReactComponent import name is special and tells Create React App that you want a React c

6일 전
·
0개의 댓글
post-thumbnail

hello, my friend react. - concepts

페이스북에서 만들고 관리하는 UI기능만 제공하는 라이브러이 입니다. 따라서 전역 상태관리나 라우팅 또는 빌드 시스템등을 각 개발자가 직접 구축해야 하는 친구 입니다.즉, 자유도가 높다는 장점이 있지만 개발환경을 직접 구축해야하는 다소 번거로운 점이 있습니다.프론트엔드

2021년 2월 15일
·
0개의 댓글
post-thumbnail

웹 최적화

프런트 엔드 성능 로딩 최적화 1. 브라우저 기준 최적화의 문제점 Navigation Timing processing && load 이 두 이벤트를 앞 단기고 빨리 하는데 목표가 있다. domContentLoadedEvent(processing) - 브라우저가 ht

2021년 2월 14일
·
0개의 댓글

RN- web-view

WebView란쉽게 말해서 이미 존재하는 웹 페이지를 앱으로 옮기는 것이다.WebView 사용전 준비WebView를 사용하기 위해서는 WebView를 import해주어야한다.원래는 리액트 네이티브 core에 있었지만, 리액트 네이티브가 core에서 빼버렸기 때문에 설치

2021년 1월 25일
·
0개의 댓글

FE공부해요

좋은 커밋 메세지 작성법n npm // node version 관리좋거나 나쁘다 평가하지 않는다.무엇을 사용할지 고민인 된다면 많은 사람이 사용하는 것을 고르는 것도 자료찾기가 싶고 나름 괜찮은 방법이 될 수 있습니다.변수를 줄이고, 컴포넌트로 나눈다.하나의 컴포넌트는

2021년 1월 17일
·
0개의 댓글
post-thumbnail

CORS란 무엇인가?

Cross-Origin Resource Sharing(CORS)은 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘을 말합니다. 하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해

2021년 1월 12일
·
0개의 댓글
post-thumbnail

webworker

index.htmlapp.jsworker.js

2021년 1월 11일
·
0개의 댓글
post-thumbnail

Intersection Observer API

비동기적인 요소의 인터섹션을 감지한다. 현재 스크롤 하면서 화면에 보여지는 요소 찾기 인피니티 스크롤만들기 이미지/ 데이터 프리패칭 하기 좋은 api라고 생각 예제

2021년 1월 9일
·
0개의 댓글

shallow copy vs deep copy

단순 복사객체 복사에 있어, 가장 순수하게 생각할 수 있는 것은 대입 연산자(=) 를 통한 복사이다.이것은 단순 복사라고 칭하겠다.let mainObject = { a: 1, b: 2};let copyObject = mainObject;copyObject.a

2021년 1월 5일
·
0개의 댓글
post-thumbnail

content-disposition

응답해더에 있는 content-disposition값에 접근 하기위 해서는 server response header값에Access-Control-Expose-Headers:Content-Disposition다음을 추가해 주어야 프론트에서 javascript로 접근이 가

2021년 1월 5일
·
0개의 댓글
post-thumbnail

📓 GIT 깃

🤩 깃의 중요한 컨셉 이해하기 working directory : 작업중 [untracked, tracked] staging area : 커밋준비 완료상태 .git directory : 커밋후 히스토리에 저장 -> checkout -> 돌아가기 가능! remote :

2020년 11월 22일
·
0개의 댓글
post-thumbnail

PWA

모바일 앱과 같은 경험을 주는 최신 웹 앱앱 아이콘, 앱 아이콘 설치배너, 모바일 푸시, 오프라인 경험을 제공HTML, CSS, JS로 구현하는 웹 애플리케이션"높은 사용자 경험을 제공하기 위한 웹 앱의 진화"모바일 시장의 폭잘적인 성장모바일 웹 보다는 모바일 애플리케

2020년 10월 23일
·
0개의 댓글
post-thumbnail

Kotlin - basic

카멜 표기법을 권장한다.var 변경이 가능val 변경이 불가능class 매부 프로퍼티 : 속성그외 로컬 변수라고 한다.자료형? 를 사용할경우 null을 혀용하겠다는 의미로 사용된다.형변환을 하기 위해서는 to자료형() 형변환 함수를 지원암시적 형변환을 지원하지 않습니다

2020년 10월 23일
·
0개의 댓글
post-thumbnail

docker-ko

docker를 설치하는 방법은 두 가지가 있다.Docker에서 제공하는 자동 설치 스크립트를 이용하는 방법리눅스 배포판의 패키징 시스템을 이용하여 직접 설치하는 방법CentOS7에서 설치하기도커의 명령은 docker run, docker push와 같이 docker &

2020년 8월 11일
·
0개의 댓글
post-thumbnail

Front TDD

모든 테스트를 완전히 자동화 하고 그 결과까지 스스로 검사하게 만들자.테스트를 적성하기 가장 좋은 시점은 프로그래밍을 시작하기 전이다.테스트 주도 개발은 테스트가 개발을 주도하는 방법이다.테스트가 개발을 주도한다는 것은 테스트가 코딩의 방향을 이끌어 간다는 말이다. 테

2020년 6월 15일
·
0개의 댓글
post-thumbnail

React란?

React공식 사이트React의 탄생배경과 행심 개념React는 UI들을 독립적이고 재사용항 수 있는 부분으로 나누고 각 부분을 분리하여 개발할 수 있는 컴포넌트로 만들 때 도움을 주는 "라이브러리" 입니다.리액트는 재사용이 가능한 컴포넌트를 만들고, 이 컴포넌트들이

2020년 6월 8일
·
0개의 댓글
post-thumbnail

JSX

Babel Babel이란 무엇인가 요즘 Frontend 개발에선 Babel은 필수적입니다. 우선 Babel을 왜 쓰는지 이해하기 위해선 트랜스파일(Tranpile)에 대하여 이해하실 필요가 있습니다. 아래 문서들을 학습해주세요. 마찬가지로 아래 내용을 모두 자세하게 숙

2020년 6월 2일
·
0개의 댓글
post-thumbnail

JavaScript를 활용한 Web 개발

요즘과 같이 React, Vue 등의 라이브러리를 사용하여 개발하는 시대엔 DOM API를 직접 사용할 일이 줄어들고 있습니다만, JavaScript를 활용한 Web frontend 개발을 위해선 먼저 HTML과 DOM의 관계, JavaScript로 DOM을 조작하기

2020년 6월 2일
·
0개의 댓글
post-thumbnail

개발 환경 구축

Node.js 설치 Node.js란 무엇인가? Node.js는 Chrome V8 JavaScript Engine으로 빌드된 JavaScript Runtime Environment입니다. 기존에는 JavaScript 코드를 브라우저 위에서만 실행할 수 있었습니다. 브라

2020년 6월 2일
·
0개의 댓글