profile
모르는것은 그때그때 기록하기
post-thumbnail

Javascript 전역 변수의 사용을 억제하는 법

지역변수를 지양하고 변수의 스코프를 줄일 수 있는 몇가지 방법을 살펴보자모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이

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

Javascript 객체 지향 프로그래밍

클래스 자체에는 데이터가 들어있지 않고 틀만 지정해 둔 것데이터 없이 정의만 해 둔것이기 때문에 실제로 메모리에 올라가지 않는다.오브젝트를 만들기 위한 틀templatedeclare onceno data in클래스를 이용해 데이터를 넣어 만든것이 바로 오브젝트실제 데이

2022년 5월 2일
·
1개의 댓글
·
post-thumbnail

GOF 대표적인 10 가지 Design patterns

코드에서 반복되는 디자인 문제를 해결하기 위해 사용자 지정할 수 있는 패턴을 미리 정해둔 것입니다.실제로 복사하여 붙여넣을 수 있는 알고리즘과 다르게 디자인 패턴은 프로그램에 복사 할 수 없기 때문에자신의 프로그램 현실에 맞는 솔루션을 구현할 필요가 있습니다.c++로

2022년 4월 14일
·
2개의 댓글
·
post-thumbnail

Javascript 에서 this가 가르키는 것

() => 화살표 함수일때 this는 부모요소를 가르킨다. function 선언문에서 this는 window를 가르킨다. call사용해 this를 명시적으로 조작 async await 을 쓰더라도 promise가 필요한 예

2022년 4월 1일
·
1개의 댓글
·
post-thumbnail

테오의 스프린트 5기 회고록

어찌보면 나는 조금 게으른 개발자인가?그동안 테오의 스프린트 모집을 1기부터 봐오면서 한 번쯤 참여해보면 좋겠네 생각만 하는 개발자였다.나는 아침 6시에 일어나서 개발일을 하고 틈틈이 운동까지 하는 "바쁜"일정을 해내고 있으니 나는 스프린트까지 할 시간이 없어 라며 자

2022년 3월 12일
·
8개의 댓글
·
post-thumbnail

리액트 currying & composition

currying 기본 사용예시중복코드 해결compose 함수 = 여러가지 함수를 순차적으로 실행시킴첫번째 함수의 리턴값을 다음 함수가 받아 처리 한다.시니어코딩님 유튜브 강의

2022년 2월 26일
·
0개의 댓글
·
post-thumbnail

CRA 없이 리액트 구조 세팅하기 (초기 세팅)

$ npm init -ynpm 이란 node package manager으로 node.js 에서 사용하는 모듈들을 패키지로 만들어 관리 배포 합니다.옵션값에 대한 질문 없이 초기 디폴트 값으로 세팅한다면 -y를 붙여줍니다.npm init 완료 후 프로젝트 정보와 의존성

2022년 1월 28일
·
0개의 댓글
·
post-thumbnail

혼란한 디바운스(debounce)와 스로틀(throttle) 차이

scroll, resize, input, mousemove 와 같은 이벤트는 짧은 시간 간격으로 연속해서 발생합니다.이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있습니다.버튼을 짧은 간격으로 여러번 클릭했을 때 일반적인 이벤트 핸

2022년 1월 26일
·
0개의 댓글
·
post-thumbnail

Node 기능 살펴보기

자바스크립트는 스크립트 언어라서 즉석에서 코드를 실행 할 수 있다.REPL이라는 콘솔 R(Read) E(Evaluate) P(Print) L(Loop)윈도우에서는 명령 프롬프트, 맥이나 리눅스는 터미널에 node 입력Node는 CommonJS 모듈시스템을 사용한다.co

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

정말 많이 바뀐 react router v6, 업데이트 총 정리

React Router v6는 Reack hook를 많이 사용하므로 v6를 사용하기 위해 React 16.8 이상이 요구됩니다.6이상의 버전으로 업그레이드만 하더라도 번들 크기에 대한 최적화가 바로 이루어 질 수 있습니다.Switch는 기본적으로 동시에 여러개의 rou

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

[PRESET] preact + snowpack + typescript

Snowpack은 더 빠른 웹 개발을 위한 최신의 프론트엔드 빌드 도구입니다.기존의 Webpack, Rollup 그리고 Parcel 같은 무겁고 복잡한 번들러의 번들 소요 시간을 획기적으로 절약할 수 있습니다.번들 없는 개발(Unbundled Development)개별

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

당신은 3분후 정규표현식 RegExp을 알게된다.

boolean타입의 값을 리턴합니다.매치되는 값을 배열로 반환합니다.target, regExp 순서에 주의하세요... 안의 ^은 not 을 의미합니다.검색 대상 문자열이 http:// 또는 https://로 시작하는지 검사한다.html 로 끝나는지 검

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

vue2 ♺ vue3

$ vue create vue-project가장 쉽게 구분되는 차이점은 App.vue에서 사용되는 api 문법이 Vue.extend에서 defindComponent로 바뀌었다는 것을 확인 할 수 있습니다.이외에도 뷰 내부에서 사용하는 코드들에 대한 타입들이 다양해졌다.

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

코드 분할(Code Splitting) feat.리액트

대부분은 React앱들은 Webpack, Rollup, Browserify 같은 툴을 이용해 여러 파일을 하나로 병합해번들된 파일을 웹 페이지에 포함해 한번에 전체 앱을 로드합니다.서비스가 비교적 가벼운 편이라면 큰 문제가 없겠지만 프로젝트가 덩치가 커지고 전달해야하는

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

성능 최적화 (Light house, chrome 개발자 모드)

1. 주요 렌더링 경로 최적화 현재 사용자 잡업과 관련된 콘텐츠 표시의 우선순위를 지정하는 것을 말한다. 우선 우리가 성능을 최적화 하기 위해선 HTML, CSS 및 자바스크립트 바이트를 수신한 후 렌더링된 픽셀로 변환하기 위래 필요한 처리, 그 사이 포함된 중간 단

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

useLayoutEffect는 언제 사용할까?

useEffect는 asynchronous로 즉 비동기적으로 실행되는 반면 useLayoutEffect 는 synchronous로 동기적으로 실행됩니다.렌더 순서의 차이useEffect는 component가 화면에 paint된 이후 실행된다.useLayoutEffect

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

웹서버 (아파치, 톰캣, Nginx...)

웹서버 말그대로 웹사이트를 제공하는 서버라 한다.웹 사이트가 서비스 될 때 필요함 왜? 우선 웹사이트는 브라우저에서 돌아간다 (크롬, 사파리, 파이어폭스 등등)그리고 브라우저가 읽을 수 있는 코드는 html, css, javascript 각종 이미지와 데이터들이 있고

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

setTimeout vs setInterval

일정시간이 지난 후 함수 실행 vs 일정 시간 간격으로 함수를 반복clearTimeout : 예정된 작업을 없애준다.setTimeout : timeId를 반환함setTimeout과 달리 한번 수행하고 종료되는것이 아닌 반복 수행 된다.

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

Nextjs 부수기 🤜🏻

컴파일과 번들링이 자동으로 된다(webpack 과 babel)nextjs 12버전 부터는 SWC 라는 컴파일러를 사용한다.(TMI swc는 한국인 개발자가 개발했다함.. 🙀respect)자동 리프레쉬 기능으로 수정하면 화면에 바로 반영된다.서버사이드 렌더링이 지원된다

2021년 10월 31일
·
0개의 댓글
·
post-thumbnail

react+typescript+jest setup 테스트 코드 작성

React 컴포넌트를 테스트할 수 있는 몇 가지 방법이 있는데 크게는 2가지 카테고리로 나누어집니다.컴포넌트 트리 렌더링 : 간략화된 테스팅 환경 및 출력값이 확실한 경우.완성된 앱에서의 테스트 : 현실적 브라우저 환경("End to End" 테스트라고 알려져 있습니다

2021년 10월 26일
·
0개의 댓글
·