본문 바로가기

전체 글

JavaScript 함수형 프로그래밍 패러다임 ~ 스코프 체인
JavaScript 함수형 프로그래밍 패러다임 ~ 스코프 체인 2024. 4. 16. 함수형 프로그래밍 패러다임 자바스크립트는 함수형 프로그래밍 패러다임을 추구하며, 객체지향 프로그래밍 패러다임도 지원한다. 자바스크립트의 핵심은 함수와 객체다. 클래스와 객체를 활용할 수 있으며, TS를 통해 인터페이스(다형성)을 도입할 수 있다. 때문에 JS 개발을 위해서는 함수형 프로그래밍에 대한 이해가 필요한데 (컴포넌트를 만들다보면 함수로 만들면 매우 좋은 것 같긴하다. 클래스로 만들면 중구난방 this로 인해 헷갈리게 될지도... hook을 함수로 만드는 것도 같은 의미 아닐까.) 함수형 프로그래밍은 2가지 조건을 만족하는 것을 의미한다. 1. 일급 함수: 함수 변수 + 함수 파라미터 + 함수 반환 함수 변수 할당 = 함수 표현식 var expression = function() { console..
Web Development 란 무엇이며, 어떻게 동작하나?
Web Development 란 무엇이며, 어떻게 동작하나? 2024. 4. 16. 웹 개발(Web Development)를 왜 배우는 걸까 우리가 크롬과 같이 자주 쓰는 웹 브라우저, 그리고 웹 서버가 존재하는데 이를 통칭하여 웹 개발이라고 부른다. 오늘날 웹과 앱 등은 필수다. 우리가 잘 알고 있는 App은 구동을 위한 머신이 필요한데, 그 머신을 안드로이드나 iOS 같은 모바일 OS로 국한된다. (물론 데스크탑 앱도 존재한다) 반면에 웹은 어디든지 적용 가능하다. 웹 브라우저는 어디든지 설치가 가능하다. 앱에서도 웹 브라우저를 띄울 수가 있다. 웹 개발 웹 페이지에 무엇인가 표기하는 것을 이야기한다. 페이지에 표기 방식인 Rendering을 다루는 건 프론트엔드, 웹 페이지가 표기 할 데이터와 조작은 백엔드에서 개발한다. 웹 페이지를 표기하기 위한 구성 요소는 HTML(구조), C..
[React] Hook과 useContext, useReducer 상태관리
[React] Hook과 useContext, useReducer 상태관리 2024. 4. 14. React의 Hooks? hooks는 React 16.8부터 React에 요소로 새로 추가되었다. 클래스형의 컴포넌트 고유 기능인 상태(state)관리와 라이프 사이클 관리 기능을 함수형 컴포넌트에서도 쓸 수 있도록 해주는 함수들을 총칭한다. Hooks라고... 불리는 이유... 숙어인 Hook in의 뜻인 "어떻게든 손에 넣다"에서 온 것으로 추측된다. hooks를 사용하면 함수형 컴포넌트를 개발하는 개발자의 손에도 클래스형 컴포넌트에서 쓸 수 있는 기능이 쥐어지기 때문이다. (낚시할 때 그 훅이라고 생각해도 좋을 듯) 클래스형 컴포넌트 자바스크립트의 this는 다른 언어의 this와 좀 다른 의미로 쓰인다. 자바스크립트의 this는 런타임에 결정된다. 컨텍스트에 따라 this가 바뀐다는 장점도 있지만..
[React] React의 탄생 이유
[React] React의 탄생 이유 2024. 4. 11. 초기의 프론트엔드 개발 이전 인터넷은 상호작용하는 웹 애플리케이션이 아닌 문서를 보여주는 웹 문서를 주고 받는 것에 가까웠다. 바야흐로 HTML 웹 문서 시대. 애초에 HTML는 마크업 언어로 개발 언어도 아니었다. 그러나 인터넷 속도가 개선되고, Google Map이라는 혁신적인 앱이 등장함에 따라 Ajax라는 개념을 통해 웹 문서가 시시각각 변했다. Ajax(Async JavaScript and XML)는 JavaScript로 서버에서 데이터를 즉각적으로 받아올 수 있던게 큰 특징이다. 또한, 당시에는 jQuery를 많이 사용했다. 이렇게 HTML 페이지를 일부 변경할 수 있게 되면서 브라우저 사이트 화면을 웹 페이지가 아닌 웹 애플리케이션이라고 부르기 시작했다. Angular의 등장 그러나 jQue..
[JAVA] 스레드
[JAVA] 스레드 2024. 4. 7. 프로세스 컴퓨터에서 설치하여 사용하는 이클립스나 워드 프로세서, 브라우저와 같은 코드 덩어리를 애플리케이션이라고 한다. 설치된 애플리케이션을 실행하게 되면 운영체제(OS)로 부터 메모리의 일정 영역을 할당받고(운영체제도 메모리에 올라간다.) CPU와 HDD를 이용해 동작하는데, 이것을 프로세스라고 부른다. 일반적으로 운영체제들은 여러 프로세스를 실행할 수 있는데, 이것을 멀티 프로세스라고 부른다. 예컨대 음악 플레이어와 인텔리제이를 동시에 실행하며 채팅을 할 수 있는 것처럼. 이 개별 프로세스들은 동작을 위해 자신만의 데이터, 메모리 등의 자원과 여러 스레드라는 것으로 구성된다. 그래서 인텔리제이를 여러개 실행시켜도 일반적으로 프로세스 간의 공유는 발생하지 않는다. 스레드 스레드는 프로세스 동작의 최소 ..
[JAVA] 자바의 다형성
[JAVA] 자바의 다형성 2024. 4. 7. 다형성(Polymorphism)이란, 많을 다에 형태 형을 사용한다. 여기서 말하는 '형'이란 타입을 이야기한다. 즉, 많은 형태를 가진다는 뜻. 가장 유명한 예인 붕어빵으로 가정을 해보자. 붕어빵 사장은 최근 붕어빵 장사가 잘 되지 않았다. 그래서 붕어빵을 좀 더 발전시킨 황금 잉어빵으로 아이템을 변경했다. 이떄 황금 잉어빵을 위해서 황금 잉어빵을 새로 만들진 않았을 것이다. 기존 붕어빵에서 황금색을 낼 수 있는 재료와 단 맛을 더 추가했을 것이다. 그런데 단골 손님이 와서 붕어빵을 천 원 어치 주문했다. 지금은 황금 잉어빵을 팔고 있는데, 붕어빵을 팔 수 없는 걸까? 아마도 사장은 황금 잉어빵을 건넸을 것이다. 그리고 고객도 불만을 갖지 않을 것이다. 사장과 손님 모두 다형성에 대해 알고 있기 때문이..
[JAVA] 자바 상속, super(), 메서드 오버라이딩
[JAVA] 자바 상속, super(), 메서드 오버라이딩 2024. 4. 5. 클래스 포스팅을 할 때 간단하게 java의 상속과 다형성에 대해 언급했다. 간단하게 언급한 정도기 때문에 이 포스팅에서 좀 더 깊이 들여다 본다. 우리는 굳이 자바의 상속을 왜 사용할까? 만약 자바의 문법만을 학습한 채로 클래스의 관계에 대한 고민 없이 프로그래밍 하게 된다면 엄청난 중복 코드와 지나치게 엄격한 관계 형성으로 유지보수성이 떨어진 Application을 만들게 된다. 상속은 객체지향 프로그래밍의 (A P.I.E) 중 I(Inheritance)에 해당하는 중요한 개념이다. 모두가 알고 있듯이 실생활에서 상속은 부모의 재산을 물려받는 것이다. 상속을 받으면 한번에 부모가 이룬 모든 것들을 물려받을 수 있다. JAVA의 상속 상속은 기존 클래스의 재산을 다른 클래스에서 재사용하기 위해 사용하는 ..
[JAVA] 클래스, 지역/전역 변수, 생성자, 상속과 다형성, 접근 제한자
[JAVA] 클래스, 지역/전역 변수, 생성자, 상속과 다형성, 접근 제한자 2024. 4. 4. JAVA는 객체 지향 언어다 자바는 1991년에 등장한 객체지향 언어다. 자바 이전에는 C 언어 등 절차지향 언어가 대세를 이루고 있었다. 하지만 지금은 '대한민국은 자바 공화국이다'라는 말이 나올 정도로 자바가 큰 사랑을 받고 있다. 이는 객체지향의 장점이 많이 드러나기 때문이다. 객체라는 게 무엇일까? '손님 객'자를 써서 주체가 아닌 개체를 이른다. 즉, 주체는 '나'이므로 나를 제외한 내가 사용하는 나머지 모든 것이 객체가 된다. 사물은 물론 논리와 같은 것도 포함된다. 그렇다면 객체지향은? 바로 '주변의 많은 것들을 객체화하라'라는 것. 간단한 예시를 들어보자. 철수는 영희에게 고백하기 위해 선물을 고민하고 있다. 그러던 중, 영희가 과일을 좋아한다는 사실을 알았다. 그래서 과일을 주며 고백하기..
[JS] 자바스크립트 모듈, ESM/CJS
[JS] 자바스크립트 모듈, ESM/CJS 2024. 3. 27. 모듈(Module) 여태까지 우리는 간단하게 10줄이 넘지 않는 코드들만 봐왔다. 모두 한 파일에 작성한다고 당연히 생각이 들겠지만, 규모가 작은 프로젝트는 괜찮으나 크기가 커지면 유지보수와 재사용을 위해 기능별로 파일 분리하는 것이 효율적이다. 이 때 이 분리된 파일들을 모듈이라고 부른다. ES6부터 네이티브 모듈 시스템이 추가되었다. 이전에는 CJS와 AMD와 같은 모듈 시스템이 사용되었다. 모듈의 특징 1. 파일 스코프를 가진다. 각 모듈은 자체적인 파일 스코프를 가진다. 전역 네임스페이스를 오염시키지 않기 때문에 변수나 함수의 충돌을 방지하고 코드를 분리된 단위로 유지할 수 있도록 한다. 2. 선택적 공개가 가능하다. (캡슐화) - export 자체적인 스코프를 가지기 때문에 내부 구현의 세부 사..

티스토리툴바