일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- VUE
- 자바스크립트
- 모던
- 함수
- typescript
- todolist
- 리액트
- react
- Number
- null
- 모던 자바스크립트
- var
- function
- let
- const
- this
- 컴포넌트
- 라우터
- 스코프
- CSS
- ES6
- 뷰
- BIND
- Interface
- redux
- js
- 투두리스트
- 타입스크립트
- 데이터 타입
- 객체
- Today
- Total
목록전체 글 (83)
홍준혁
첫 번째 기능 - Automatic Batching setState는 호출될 때마다 리렌더링이 일어나게 된다. 정말로 그럴까? 사실 리액트에서는 조금 다르게 동작한다. 호출될 때마다 리렌더링을 작업하게 된다면 정말 비효율적인 방법일 것이다. 다음 코드를 보도록 하자. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // 리렌더링 발생 setFlag(f => !f); // 리렌더링 발생 set... // 리렌더링 set... // 리렌더링 set... // 리렌더링 set... // 리렌더링 set...
최근에는 많은 자바스크립트 프레임워크들이 나오면서 (React, Vue, Angluar 등...) 쉽고 간편하게 프론트엔드 개발이 가능해졌다. 그렇다면 웹 컴포넌트라는 기술은 왜 나온것이며, 기존의 있던 웹 프레임워크들을 대체할 수 있을까? 한번 알아보도록 하자. 웹 컴포넌트는 아직 널리 사용되는 기술은 아니다. 하지만 앞으로의 프론트엔드 개발에 있어서 중요한 역할을 하게 된다는 사실은 변하지 않는다. 먼저 웹 컴포넌트가 무엇인지부터 알아보도록 하자. 웹 컴포넌트란, 모든 주요 브라우저에서 지원하는 웹 표준 기반의 재사용 가능한 클라이언트 사이드 컴포넌트이다. 코드에서 원하는 부분을 캡슐화하는 방법을 제공하고, 모든 웹 앱과 페이지에서 재사용이 가능하다. 웹 컴포넌트의 장점은 어디에서나 사용할 수 있다는..
본 글은 기존의 자바스크립트 개발자의 시점으로 타입스크립트를 소개하는 글임을 알립니다. 자바스크립트와 타입스크립트의 관계는 매우 독특하다. TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가한다. 바로 이 레이어가 타입스크립트의 타입 시스템이다. JavaScript는 number, object, undefined등의 원시 타입을 가지고 있지만 코드 베이스에서 일관되게 작성되었는지 확인해주지는 않는다. TypeScript는 여기서 레이어도 동작한다. 타입 추론 변수를 생성하면서 동시에 특정 값에 할당하는 경우, TypeScript는 그 값을 해당 변수의 타입으로 사용할 것이다. let helloWorld = "He..
프로그래시브 웹앱(PWA)에 대해서 알아보는 시간을 가져보도록 하자. 네이티브 앱, 기기에 최적화된 기능을 구현하다. 네이티브 앱은 스마트폰에서만 작동하는 앱을 말한다. 그에 맞는 운영체제 환경에 맞는 별도의 프로그래밍 언어와 SDK라는 개발 도구를 이용해야 앱을 제작할 수 있다. 대표적인 예시로, 안드로이드 앱은 자바를 이용해서 안드로이드 스튜디오에서 만들고, IOS는 Objective-C나 Swift를 이용해서 XCode에서 개발을 하는데, 네이티브 앱은 기본적으로 개발 난도가 높은 편이다. 또한 각 운영체제 별로 개발을 해야 하니 비용과 시간이 들 수밖에 없다. 그럼에도 네이티브의 장점이라고 하면 기기에 탑재된 모든 기능을 사용할 수 있다는 것이 있겠다. 구분 장점 단점 개발 스마트폰에 최적화된 기..
HLOG는 개인프로젝트로 제작한 소프트웨어 정보공유 플렛폼이다. velog 처럼 글을 작성하고 다른사람과 소통하는 블로그다. 다들 개인 프로젝트로 블로그 하나씩은 장만하는거 같아서 나도 한번 만들어보았다. 프론트엔드 개발스택은 - Next.js + React.js - TypeScript - Emotion.js - Redux + Redux-saga - Immer.js ... 프론트엔드 파일 구조 백엔드 개발스택은 - Express.js - TypeScript - Mysql (DB) - Passport (Session login) - TypeOrm ... 을 사용하였다. 백엔드 파일구조 개발하면서 느낀 점. 이번 프로젝트를 진행하면서 느낀점이 굉장히 많은 것 같다. 특히 프로젝트를 배포하는 과정에서 많은 오..
Yarn Berry가 뭔지 알아보기 전에, 기존에 NPM의 문제점을 알아볼 필요가 있다. 아래의 사진을 보도로 하자. 그만큼, NPM이 관리하는 시스템이 비효율적이고 무겁다는 의미이다. 이는, NPM의 비효율적인 의존성 탐색에 있다. 우리가 리액트 프로젝트에서 "react"라이브러리를 가져올려면, require.resolve.paths() 이라는 함수를 사용해서 탐색을 하게 된다. 이 함수는 NPM이 검색하는 디렉토리의 목록을 반환한다. 이게 무슨 말이냐면, NPM은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색한다. 그래서 패키지를 찾지 못할수록, 느린 I/O속도를 자랑한다. (탐색에 실패하는 경우도 있다.) 즉, NPM은 패키지를 찾지 못하면 상위 디렉토리의 node_..