본문 바로가기
반응형

자바스크립트11

카카오테크캠퍼스 2기 | 8주차(24-05-27 ~ 24-06-02) 회고 ⭕ 카카오테크캠퍼스 2기 | 8주차(24-05-27 ~ 24-06-02) 회고이번 한주는 실력적으로 스스로에게 만족하지 못했지만, 하루하루 조금씩 발전하는 나를 발견한 순간들이 있었다 😊. 이런 경험을 통해 반복 학습의 중요성을 다시금 느꼈다 📚.아직 자바스크립트가 많이 부족한 상황이다. 요즘 집중력이 떨어지면 자꾸 포기하거나 다음으로 미루게 되는데, 이는 자바스크립트를 제대로 활용하지 못하게 하는 원인 중 하나다. 문제를 찾아보고 답을 알게 되어도 내 코드에 적용하는 데 어려움을 겪고 있다 😔. 모든 것이 아주 느리게 진행되는 것 같다 🐢.곧 STEP 2가 시작되는데, 모르는 것은 무조건 알고 이해하자고 다짐했다 💪. 2024. 6. 11.
카카오테크캠퍼스 2기 | 6주차(24-05-13 ~ 24-05-19) 회고 ⭕ 카카오테크캠퍼스 2기 | 6주차(24-05-13 ~ 24-05-19) 회고자바스크립트의 개념들을 공부하면서 동기와 비동기 프로그래밍에 대해 이해하고 사용하는 것이 얼마나 중요한지 깨달았다. 특히 콜백 함수 대신 Promise를 사용하는 연습이 필요하다고 느꼈다. 이번 스터디를 통해 그동안 콜백 함수를 사용해왔지만, 그 의미와 용도를 깊이 이해하지 못했다는 것을 알게 되었다. 💡공식 문서를 확인하지 않거나, 그냥 보기만 하거나, 아무 생각 없이 예제만 따라 치는 것은 (개인적으로 이러한 행위는 손가락만 고생하는 복사 붙여넣기와 다름없다고 생각한다) 피해야 한다. ✋📄 2024. 5. 24.
자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager) ⭕ 자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager)패키지 매니저(package manager)는 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다.특히 자바스크립트는 풍부한 오픈 소스 생태계를 자랑하기 때문에, 패키지 매니저는 필수적인 역할을 합니다.자바스크립트 프로젝트는 적게는 수십 개, 많게는 수백 개의 다른 패키지에 의존할 수 있습니다. ➡️ NPM (Node Package Manager)Node.js 환경에서 JavaScript 패키지를 관리하기 위한 패키지 관리자입니다.Node.js 프로젝트에서는 추가적인 설치 없이 기본적으로 npm을 사용할 수 있습니다.파일 구성: package.json, .. 2024. 5. 14.
카카오테크캠퍼스 2기 | 4주차(24-04-29 ~ 24-05-05) 회고 ⭕ 카카오테크캠퍼스 2기 | 4주차(24-04-29 ~ 24-05-05) 회고참고 - 모던 자바스크립트 딥다이브 (https://m.yes24.com/Goods/Detail/92742567) 자바스크립트에 대해 정말 상세하게 정리되어 있는 책입니다.이번 개인 프로젝트를 통해 GitHub에서 버전 관리를 하고 처음으로 포크를 진행하면서 협업에 필요한 여러 기법을 배울 수 있었습니다. 🤓📚 특히, 프로그래밍 요구사항을 이해하면서 나중에 개발 협업 시 공통적으로 합의해야 할 사항들에 대해 학습할 수 있었습니다.또한, 구현할 목록을 단계별로 작성하고 이를 하나씩 완성해 가면서 체계적으로 학습할 수 있었습니다. 이전에 미니 프로젝트를 진행하면서 요구사항을 제대로 정의하지 않았던 경험을 되돌아보며 반성하게 되었.. 2024. 5. 14.
카카오테크캠퍼스 2기 | 1주차(24-04-08 ~ 24-04-14) 회고 ⭕ 카카오테크캠퍼스 2기 | 1주차(24-04-08 ~ 24-04-14) 회고이번 주는 기존 프로젝트를 마무리하느라 바쁜 한 주였습니다. 진도는 많이 나가지 못했지만, 기초를 천천히 짚고 넘어간 것이 나중에 큰 역할을 할 것 같아 흥미롭고, 더 알아보고 싶은 마음이 커집니다. 모든 선택은 내 몫이고, 후회하지 않기 위해서는 당장 눈앞의 일에만 급급해하지 않고, 더 멀리 보며 철저하게 공부해야 할 필요가 있다고 느꼈습니다. 빨리 나아가고 싶은 마음은 크지만, 천천히라도 매일 새로운 것을 배우는 태도로 나아가겠습니다.자바스크립트를 학습하면서, 시작적으로 결과를 확인할 수 없어 어려움을 느끼고 좌절했던 적이 있습니다. 하지만 이는 HTML과 CSS에서의 시각적 요소를 넘어서 기능을 구현하는 자바스크립트로 한 .. 2024. 4. 21.
리액트 네이티브 React Native | DOM과 렌더링 ⭕ 리액트 네이티브 React Native | DOM과 렌더링 DHTML(Dynamic HTML) 방식은 자바스크립트가 텍스트를 만드는 것이 아니라 객체 지향 언어의 상속 관계로 설계한 문서 객체 모델(DOM) 타입 자바스크립트 객체를 생성하는 방식으로 동작합니다. 웹 브라우저는 HTML 문서를 만나면 파싱 과정을 거쳐 다양한 형태의 자바스크립트 객체 구조를 만듭니다. 이러한 클래스를 DOM이라고 하며, DOM의 인스턴스를 DOM 객체라고 합니다. DOM 객체는 부모/자식 형태의 나무 구조를 이루는데 이를 DOM 트리 구조 또는 줄여서 DOM 구조라고 합니다. 웹 브라우저가 HTML을 파싱하여 자바스크립트 DOM 구조로 만드는 것을 렌더링이라고 합니다. // 예시: HTML 문서에서 div와 h1 요소를.. 2024. 3. 19.
리액트 네이티브 React Native | 정적 HLTML과 동적 HTML ⭕ 리액트 네이티브 React Native | 정적 HLTML과 동적 HTML 1997년, 마이크로소프트는 웹 기술의 새로운 패러다임을 발표했습니다. 이것이 정적 HTML에서 동적 HTML로의 전환입니다. 정적 HTML은 웹 서버에서 미리 작성된 HTML 문서를 클라이언트에게 전달하는 방식으로 동작했습니다. 그러나 마이크로소프트의 발표는 이러한 전통적인 방식을 벗어나, 웹 브라우저에서 자바스크립트 코드를 실행하여 동적으로 HTML을 생성하는 방식으로 웹 기술을 발전시켰습니다. ➡️ 정적 HLTML 정적 HTML은 변하지 않는 콘텐츠를 제공하는 데에 적합했습니다. 그러나 동적 HTML은 사용자의 상호작용에 따라 콘텐츠를 동적으로 생성하고 업데이트할 수 있어서 웹 애플리케이션의 기능성과 사용자 경험을 향상했.. 2024. 3. 19.
리액트 네이티브 React Native | 브릿지(Bridge) 방식 ⭕ 리액트 네이티브 React Native | 브릿지(Bridge) 방식 리액트 네이티브(React Native)는 모바일 앱 개발에 있어 혁신적인 접근 방식을 제시합니다. 이 플랫폼은 안드로이드와 iOS 개발을 위해 각각 자바(Java)와 오브젝트-C(Objective-C) 또는 스위프트(Swift)로 작성된 기존의 네이티브 프레임워크에 의존합니다. 안드로이드의 경우 안드로이드 프레임워크, iOS의 경우 UIKit 프레임워크가 이에 해당합니다. 이 두 프레임워크는 각각의 운영체제에서 GUI 구성요소를 다루는 데 필요한 다양한 뷰(View) 클래스를 제공합니다. ➡️ 브릿지(Bridge) 방식 리액트 네이티브는 이러한 네이티브 프레임워크와 자바스크립트 엔진 간의 통신을 가능하게 하는 '브릿지' 방식을 채.. 2024. 3. 19.
리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform) ⭕ 리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform) 리액트 네이티브(React Native)는 페이스북에 의해 2015년에 발표된 혁신적인 크로스플랫폼 모바일 앱 개발 프레임워크입니다. 이 기술은 모바일 앱 개발의 패러다임을 전환시키며, 개발자들에게 안드로이드와 iOS 운영체제를 위한 앱을 단일 코드베이스로 개발할 수 있는 능력을 부여합니다. 리액트 네이티브의 등장으로 인해, 웹 개발자들은 별도의 네이티브 언어 학습 없이도 효율적으로 모바일 앱을 개발할 수 있게 되었습니다. ➡️ 네이티브 앱 (Native App) 네이티브 앱 개발은 각 운영체제별로 최적화된 성능과 사용자 경험을 제공하지만, 이는 개별 플랫폼마다 별도의 앱 개발을 필요로 합니다. 안드로이드 앱 개발에.. 2024. 3. 19.
리액트 네이티브 React Native | 리액트 기반 프레임 워크 ⭕ 리액트 네이티브 React Native | 리액트 기반 프레임 워크 리액트 네이티브(React Native)는 페이스북이 개발한 크로스플랫폼 모바일 앱 개발 프레임워크로, 널리 사용되는 웹 개발 언어인 자바스크립트를 기반으로 합니다. 리액트 네이티브는 리액트와 기술적으로 약 10%만 공유하며, 주로 웹 브라우저 대상으로 동작하는 리액트와는 달리, HTML과 CSS를 사용하지 않고도 실행 가능한 앱을 만들 수 있다는 점에서 큰 차이를 보입니다. 이는 기존에 안드로이드 앱 개발에 사용되는 자바나 코틀린, iOS 앱 개발에 필요한 오브젝트C나 스위프트와 같은 언어에 비해 훨씬 접근성이 좋다고 할 수 있습니다. 그 결과, 리액트 네이티브는 개발자들에게 자바스크립트를 이용하여 네이티브 수준의 성능을 내는 모바.. 2024. 3. 19.
자바스크립트를 사용하여 웹사이트 서버 시간 따는 법 [1편] | 위버스 서버 시간 | 예스24, 인터파크, 대학교 수강신청 등등 ⭕ 자바스크립트를 사용하여 웹사이트 서버 시간 따는 법 [1편] 자바스크립트를 공부하면서, 서버 시간을 확인하는 것에 흥미가 생겼습니다. 이번 글에서는 자주 이용하는 팬사이트인 위버스를 예시로 들어보겠습니다. 서버에 요청을 보내기 전에 먼저 해당 사이트에 아무 요청이나 보내 데이터를 받아와 봅니다. 받아온 데이터를 잘 살펴보면 부가 정보들이 있는데, 이를 헤더스(Response Headers)라고 합니다. 헤더스 중에서 Date 정보는 시간 정보를 포함하고 있어서 이를 기반으로 서버 시간을 추정할 수 있습니다. ➡️ Response Headers HTTP 응답에 관련된 정보를 제공하는 헤더 부분입니다. 서버로부터 받은 HTTP 응답의 헤더에는 다양한 메타데이터와 정보가 포함되어 있습니다. 이 헤더들은 클.. 2024. 1. 7.
반응형