일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 해시
- axios
- render
- webpack
- SSR
- FigJam
- Javascript
- Babel
- 피그마
- HTML
- 자료구조
- github
- express
- git
- FIGMA
- docker
- 프로그래머스
- Stack
- Taillwind
- 코딩테스트
- hook
- grid
- CSS
- EC2
- useCallback
- react
- useMemo
- TAILWIND
- Next.js
- TypeScript
- Today
- Total
목록Javascript (6)
나는 오늘도 멋있다
1. 모든행동에는 목표를 정하고, 근거야 있어야 한다. 2. 문제가 발생하면 해결보다는 원인을 찾아 3. 다른사람의 관점을 고려하자 4. 알고자 하는 것의 정의는 무엇인가 5. 알고자 하는 것의 의도는 무엇인가 목적 클로저의 개념을 보다보니, 실행 컨텍스트 부터 렉시컬 환경을 보게되었고 이전부터 많이 봤던 단어들이다. 확실하게는 알고 있지 않아 확실하게 알고자 글들을 찾아보다가 문득 JS의 동작을 전체적으로 아는것이 좋다고 판단을 하였고, 내가 쓰는 언어의 동작은 알아야 되지않나? 라는 생각을 가지게 되어 JS의 동작을 주제로 글을 적어본다. JavaScript의 Google V8 엔진 V8엔진은 JavaScript를 실행하기 위해 단일 프로세스를 사용한다. JavaScript는 주로 단일 스레드로 동작..
useEffect란? React의 함수형 컴포넌트에서 부수효과(side effects)를 다루기 위한 hook이다 부수효과(side effects): 컴포넌트의 렌더링과는 직접적으로 관련이 없는작업(네트워크 요청,DOM 조작 등) useEffect 왜 사용해야 할까? React의 함수형 컴포넌트에서는 일부 구성요소가 외부 시스템과의 동기화가 필요할 수 있다. 예를들자면 네트워크요청, DOM조작, 구독설정, 타이머 설정들등 컴포넌트의 렌더링과 직접적인 관련이 없는 경우에 사용한다. useEffect 구문 useEffect(callback,[dependencies]) callback: 부수효과를 수행하는 함수로, 컴포넌트 렌더링 후에 비동기적으로 실행된다. 필요에 따라 Clean-up함수를 반환할 수 있다...
useState란? 기존의 클래스 컴포넌트보다 간결하고 명확한 문법을 가지는 함수형 컴포넌트에서 상태변수를 추가할수 있게 해주는 hook이다. 상태변수: 프로그램이나 애플리케이션의 현재 상태를 나타내는 변수다. React에서의 상태변수는 주로 컴포넌트의 상태를 나타낸다. useState 왜 사용해야 할까? React의 함수형 컴포넌트에서 useState는 핵심 hook이라고 볼수 있다. 왜 핵심일까? 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 즉 여러가지 상태변수를 간단하게 정의하고 업데이트하는데 사용된다. useState 구문 const [state, setState] = useState(initValue) initValue: 컴포넌트가 처음 마운트될때 사용되는 초기값 state: ..
[학습계기] NextJS를 학습하려다가 너무 돌아갔다가 지금 도착했다.. Webpack을 공부하고, module의 차이점을 비교하였다. 단순히 NextJs만 사용해서 SSR을 단순히 구현할 수 있지만 NextJS가 React의 프레임워크 인데 React로는 SSR을 구현할수 없을까? 라는 의문점과 NextJS 의 편의성을 좀더 직관적으로 느껴보고 싶어서 React로 SSR을 구현해보고 싶었다. 이것저것 고생도 했지만 해보길 잘한 것 같다. [클라이언트 설정] 1. react & typescript 패키지 설치 npm i react react-dom react-router-dom npm i -D typescript @types/react @types/react-dom 2. 기본파일구성 /* src/cli..
1. 구문 ESmodule import {useState} from "reacrt" export = {} CommonJs const {useState} = require("react") module.exports = {} 2.동작 방식 ESmodule 모듈을 비동기 환경에서 다운로드(import, export) 정적모듈 시스템으로 의존성을 파악하고 필요한 모듈을 미리 로딩함으로써 오류를 사전에 감지 package.json에 type: module 을 사용하거나 .mjs 확장자를 사용 this는 undefinde 이다. 순환의존성 지원: 인스턴스가 생성되어 독립적인 스코프를 가지게 된다.(변경된값이 적용됨) entry point를 기점으로 import문을 따라가며 찾는다. Top-level await 가능..
요즘 정신이 말짱하다. 학습하는대로 내머리에 다들어오는데 누군가가 머리를 계속 감겨주는 것 같은 느낌이다. 그래서 TypeScript를 좀더 알아보려고한다. 어느순간부터 TypeScript를 쓰고있었고 React에 타입을 명시하기 바빳다. 이런 기분에 학습하면 좀더 TypeScript를 더 다룰수 있을까해서 급하게 적어본다. 지금 당장 Google에만 TypeScript란 이라고 치면 엄청나게 많은 블로그들이 많이 뜬다. 그래서 나는 나처럼 깊게 알지 못하는 사람이 있을 수 있다고 생각하여 공식문서를 봤다. "프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다: 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우입니다. 이는 단순한 오타, 라이브러리 API를 이해하지 못한 것, 런타임 동작에 ..