Front-End, CS 스터디38 [도서] 1일 1로그 100일 완성 IT지식 #소프트웨어 27 ✅ 작문과 비슷한 프로그래밍 - 1970년대 '시스템 프로그래밍' 용도로, 즉, 어셈블러, 컴파일러, 텍스트 편집기 같은 프로그래머 도구와 심지어 운영체제까지 작성할 목적으로 사용할 언어들이 만들어졌다. 1️⃣ C 언어 - 1973년에 데니스 리치가 개발했다. 2️⃣ C ++ - 1980년대, 규모가 매우 큰 프로그램의 복잡성 관리를 도울 의도로 설계된 언어들이 개발되었다. - 비야네 스트롭스트룹이 개발했다. 🔷 대부분의 맥 소프트웨어는 C, C ++와 오브젝티브-Cobjective-c(C의 변종)으로 작성된다. 3️⃣ 자바 - 1990년대 초 제임스 고슬링이 개발했다. - 이베이같은 웹사이트를 방문하면 사용자의 컴퓨터는 웹페이지를 표시하기 위해 C++와 자바스크립트를 실행하겠지만, 이베이는 방문자의 브.. 2022. 12. 19. [도서] 리액트를 다루는 기술 #컴포넌트 3.1 클래스형 컴포넌트 - 클래스형 컴포넌트와 함수 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다. - 함수 컴포넌트의 장점은 클래스형 컴포넌트보다 선언하기가 훨씬 편하다. - 또한, 메모리 자원도 클래스형 컴포넌트보다 덜 사용하며, 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. - 함수 컴포넌트의 주요 단점은 state와 라이프사이클 API의 사용이 불가능하다는 점이었으나, 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 3.3 props - props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 .. 2022. 11. 13. [도서] 리액트를 다루는 기술 #JSX 2.1 코드 이해하기 - import 구문, 이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능이다. - 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능 - Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다. - 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundle)은 묶은 다는 뜻으로 파일을 묶듯이 연결하는 것 - 대표적인 번들러로 웹팩, Parcel, browserify라는 도구들이 있으며 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세인데 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다. - 번들러 도구를 사용하면 import(또는 requ.. 2022. 11. 11. [도서] 리액트를 다루는 기술 #컴포넌트의 라이프사이클 메서드 7. 컴포넌트의 라이프사이클 메서드 - 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. - 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. - 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고 불필요한 업데이트를 방지해야 할 수도 있다. - 이 때 컴포넌트의 라이프사이클 메서드를 사용하며, 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 7.1 라이프사이클 메서드의 이해 - 라이프사이클 메서드의 종류는 총 9가지이다. - Will 접두사가 붙은 메서드는 어떤 작업을 작동하지 전에 실행되는 메서드이다. - Did 접두.. 2022. 11. 9. [도서] 리액트를 다루는 기술 #컴포넌트 성능 최적화 11.1 많은 데이터 렌더링하기 - useState(createBulkTodos()) 라고 작성하면 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣어 주면 컴포넌트가 처음 렌더링될 때만 createBulkTodos 함수가 실행된다. 11.2 크롬 개발자 도구를 통한 성능 모니터링 - 리액트 v17 부터는 리액트 전용 개발자 도구인 React DevTools를 사용해야 성능 분석을 자세하게 할 수 있다. - 사용할 항목을 체크한 다음, 리액트 개발자 도구의 Profiler라는 탭에서 파란색 녹화 버튼을 누르면 성능 분석 결과가 나온다. - Render duration은 리렌더링에 소요된 시간을 의미하며, 1ms는.. 2022. 11. 7. [도서] 리액트를 다루는 기술 #Hooks 8. Hooks - Hooks는 리액트 v16.8에 새로 도입된 기능 - 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 8.1 useState - useState는 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. - 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다. 1️⃣ useState를 여러 번 사용하기 - 하나의 useState 함수는 하나의 상태 값만 관리할 수 있다. - 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 된다. 8.2 useEffect - useEffect는 리액트.. 2022. 11. 5. 이전 1 2 3 4 ··· 7 다음
