반응형 프론트엔드164 자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅 ⭕ 자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅➡️ var재선언 가능코드의 가독성과 유지보수에 부정적인 영향을 미칠 수 있습니다.var name = "Alice";var name = "Bob"; // 재선언 가능console.log(name); // "Bob" 재할당 가능var number = 1;number = 2; // 재할당 가능console.log(number); // 2 전역 스코프함수 스코프(function-scoped)변수가 선언된 함수 내부에서만 접근 가능하게 하는 스코핑 규칙function testScope() { var insideFunction = "visible";}console.log(insideFunc.. 2024. 5. 14. 자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성 ⭕ 자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성[프론트엔드/[이론] 웹 기술] - 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blisugoring-it.tistory.com[프론트엔드/Javascript] - 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링.. 2024. 5. 14. 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향 ⭕ 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향[프론트엔드/[이론] 웹 기술] - 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blisugoring-it.tistory.com ➡️ 태그를 만나면, 스크립트의 다운로드(Fetching) 및 실행(Executing)을 위해 문서 파싱을 일시적으로 중단합니다.스크립트 앞의 콘텐츠스크립트 뒤의 콘텐츠CSSOM의 구축은 DOM .. 2024. 5. 14. 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 ⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blink 엔진사파리(Safari): Webkit 엔진파이어폭스(Firefox): Gecko 엔진 ➡️ CRP (Critical Rendering Path) ➡️ DOM(Document Object Model) 트리 생성HTML 파싱 후, DOM 트리를 생성합니다.파싱웹 페이지나 앱이 실행될 때, 브라우저의 자바스크립트 엔진 같은 런타임 환경이 이해할 수 있는 형태로 코드를 변환하는 과정을 말합니다.웹 문서를 작은 조각들인 '토큰(token)'으로 분리하고, 문법적인 구조를 가.. 2024. 5. 14. CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치 ⭕ CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치레이아웃을 배치하기 위한 기능구성 요소 플렉스 컨테이너(Flex Container): 플렉스 레이아웃을 적용받는 부모 요소 플렉스 아이템(Flex Item): 플렉스 컨테이너 안에 배치되는 자식 요소 축메인축(Main Axis): 아이템들이 배치되는 주 축입니다.교차축(Cross Axis): 메인축에 수직으로 있는 축입니다. ➡️ 플렉스 컨테이너(Flex Container)의 속성배치 설정 - display: flex아이템들은 가로 방향으로 배치됩니다.width: 내용물의 크기만큼 차지합니다.height: 컨테이너의 높이만큼 늘어납니다. 배치 방향 설정 - flex-directionrow (기본 값): 아.. 2024. 5. 14. CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky ⭕ CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky요소의 위치 지정 기준 ➡️ static (기본 값)요소를 문서 흐름에 따라 배치합니다.positon 설정이 없는 것과 같다.position: static; ➡️ relative (거의 사용하지 않음) static 위치를 기준으로, top, right, bottom, left 값을 사용하여 배치합니다. position: relative;top: 40px; left: 40px; ➡️ ⭐ absolute일반 문서 흐름에서 요소를 제거하고, 위치상 부모 요소를 기준으로 배치합니다.position: absolute;top: 40px; left: 40px; ➡️ fixed일반 문서 흐름에서 요소를.. 2024. 5. 14. CSS | 여백 속성: Margin 및 Padding ⭕ CSS | 여백 속성: Margin 및 Paddingmargin : 요소의 외부 여백을 설정한다.padding : 요소의 내부 여백을 설정한다. 2024. 5. 14. CSS | background-size 속성: contain 및 cover ⭕ CSS | background-size 속성: contain 및 cover➡️ contain비율을 유지요소의 더 짧은 너비에 맞춤이미지와 요소의 비율이 다를 경우 이미지가 반복될 수 있습니다.background-size: contain; background-repeat: no-repeat; 옵션이미지가 반복되지 않고, 대신 요소 주변에 빈 공간이 생깁니다.background-size: contain;background-repeat: no-repeat; ➡️ cover비율을 유지요소의 더 넓은 너비에 맞춤이미지가 요소의 가로와 세로를 완전히 덮으며, 이미지의 일부가 잘릴 수 있습니다.background-size: cover; 2024. 5. 14. Git & GitHub | 커밋 메세지 규칙 - Git Commit Message Conventions ⭕ Git & GitHub | 커밋 메세지 규칙 - Git Commit Message Conventionshttps://gist.github.com/stephenparish/9941e89d80e2bc58a153Any line of the commit message cannot be longer 100 characters. Git Commit Message ConventionsGit Commit Message Conventions. GitHub Gist: instantly share code, notes, and snippets.gist.github.com (): ➡️ Subject lineAllowed feat (feature)fix (bug fix)docs (documentation)style (fo.. 2024. 5. 14. Git & GitHub | 브랜치 관리 : GitHub flow, Git flow ⭕ Git & GitHub | 브랜치 관리 : GitHub flow, Git flow➡️ GitHub flowMaster 브랜치를 중심으로 운영되며, 기능 개발, 버그 수정 등의 작업용 브랜치를 별도로 구분하지 않는 간단한 구조를 가지고 있다.주로 자주 배포가 이루어지는 프로젝트에 적합하며, 배포 프로세스를 단순화하고 빠르게 반응할 수 있다. ➡️ Git flow (많은 기업에서 표준으로 사용함)Git Flow는 보다 체계화된 다섯 가지 주요 브랜치를 운영한다.큰 팀과 긴 배포 주기에 적합하다.Master Branch: 제품으로 배포할 수 있는 버전을 관리하는 브랜치.Develop Branch: 개발자들이 지속적으로 개발 내역을 쌓아가는 브랜치.Feature Branch: Develop에서 분기하여 새.. 2024. 5. 14. Git & GitHub | 포크(Fork), 클론(Clone), 브랜치(Branch), git add, commit, git push, Pull Request (PR) ⭕ Git & GitHub | 포크(Fork), 클론(Clone), 브랜치(Branch), git add, commit, git push, Pull Request (PR) Git: 버전 관리 프로그램GitHub: Git의 기능을 클라우드 저장소로 제공하는 서비스 ➡️ 포크(Fork)다른 사람의 원격 저장소를 복제해서 개인의 저장소를 만드는 방법이다. 이렇게 생성된 개인 저장소는 원본 저장소와 독립적으로 관리된다.주로 다른 프로젝트나 오픈소스에 기여하기 위해 사용된다. 원본 프로젝트와 분리된 환경에서 코드를 안전하게 수정하고 실험할 수 있는 장점이 있다.Fork 한 저장소는 로컬 환경에 Clone 하여 사용한다. 이후 원본 프로젝트로 풀 리퀘스트를 보낼 수 있다. ➡️ 클론(Clone)원격 저장소의 내용을.. 2024. 5. 14. 자바스크립트 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기 | 5주차(24-05-06 ~ 24-05-12) 회고 ⭕ 카카오테크캠퍼스 2기 | 5주차(24-05-06 ~ 24-05-12) 회고부족한 베이스로 인해 진도가 생각보다 더 느려지니, 결국 시간에 쫓겨 학습을 진행하게 되었다. 더불어 내가 주어진 기간 내에 모든 내용과 과제를 충분히 소화할 수 있을지 걱정이 들기 시작했다. 😟하지만, 학교 수업을 듣는 친구들보다 시간적 여유가 많다. 그렇기에 남들보다 더 많이 공부해서 소화해보자고 마음을 다시 먹기로 하였다. 💪📚나는 지금까지 npm과 yarn의 큰 차이점을 알지 못하여, 프로젝트를 진행하며 혼용을 하였다. (실제로 배포 직전까지 혼용하여 배포할 때 문제가 생긴 적도 있었지만, 배포하는 거에 바빠 제대로 무엇이 문제인지 파악하지 않고 npm 관리로 바꿨다.) 하지만 npm과 yarn의 패키지 관리 방식은.. 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기 | 3주차(24-04-22~ 24-04-28) 회고 ⭕ 카카오테크캠퍼스 2기 | 3주차(24-04-22 ~ 24-04-28) 회고정보처리기사 이슈,,,로 많은 부분을 학습하지 못하였습니다. 😢 4주차 화이팅원하는 요소를 적재적소에 선택하는 것은 화면 구현에서 매우 중요하다고 생각합니다. 🖥️머리로 외우는 것이 아닌, 직접 타이핑을 통해 손이 기억하도록 하자! ✌️ 2024. 4. 30. 리액트 네이티브 React Native | EAS를 통해 APK를 빌드하는 방법 ⭕ 리액트 네이티브 React Native | EAS를 통해 APK를 빌드하는 방법➡️ eas.json 파일 설정하기eas.json 파일은 프로젝트의 빌드 프로세스를 구성하기 위해 사용됩니다. 이 파일에서는 다양한 빌드 환경(예: 개발, 내부 릴리스 등)에 대한 설정을 정의할 수 있습니다. 각 환경은 특정 타깃(Android/iOS)에 대한 세부 사항을 설정할 수 있습니다. ➡️ 개발 빌드 설정개발 빌드 환경에서는 주로 디버깅과 개발을 목적으로 하는 APK를 생성합니다.buildType: 빌드 타입을 "apk"로 설정하여 Android APK 파일을 생성하도록 합니다.gradleCommand: Gradle을 사용한 빌드 명령을 지정합니다. 여기서 :app:assembleDebug는 디버그 버전의 앱을 .. 2024. 4. 26. 웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ⭕ 웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ➡️ HTML: 구조 역할: 웹 페이지의 기본 구조를 제공함 기능: 제목, 문단, 표, 이미지, 동영상 등 페이지의 구조적 요소를 정의함 비유: 얼굴에서 눈, 코, 입과 같은 구체적인 부분을 형성함 ➡️ CSS: 스타일 역할: 웹 페이지의 시각적 스타일을 담당함 기능: 색상, 크기, 폰트, 레이아웃 등을 조정하여 콘텐츠의 시각적인 표현을 정의함 비유: 구조적으로 설정된 눈, 코, 입의 위치와 모양, 색상 등을 정의함 ➡️ JavaScript(JS): 동적 처리 역할: 웹 페이지의 동적 기능을 구현함 기능: 사용자의 입력에 반응하거나, 페이지의 콘텐츠를 실시간으로 변경하고 움직임을 추가함 2024. 4. 22. 웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) ⭕ 웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) 프론트엔드 개발은 웹 개발의 가장 전면적인 부분 HTML, CSS, JavaScript 기술을 활용하여 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 사용자와 상호 작용하게 하는 과정 프론트엔드 개발자는 사용자가 직접 보고 경험하는 웹 페이지의 실질적인 구축을 담당함 ➡️ UI(User Interface) 사용자와 컴퓨터가 정보를 주고받기 위해 사용자와 프로그램이 상호 작용하는 프로그램의 일부분 ➡️ GUI(Graphic User Interface) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 환경 이전까지 사용자 인터페이스는 키보드를 통해 명령어로 작업을 수행하였지만.. 2024. 4. 22. 카카오테크캠퍼스 2기 | 2주차(24-04-15 ~ 24-04-21) 회고 ⭕ 카카오테크캠퍼스 2기 | 2주차(24-04-15 ~ 24-04-21) 회고아직 기초 단계라 큰 어려움은 없었습니다. 하지만 정처기 준비로 바빴기 때문에, 빠르게 진도를 나갈 수 있었으면 좋았을 텐데 아쉬움이 남습니다. 하지만, 목표한 만큼 완수했습니다! ⭐ 빨리 어려움이 생겨 질문을 남겨보고 싶습니다. 채널에 공유되는 자료들은 실무자들에게 한번 더 필터링된 자료로, 큰 도움이 될 것이라고 생각하여 꼭 훑어보려고 합니다. 🍪HTML을 학습하면서 깨달은 중요한 점은, (CSS 개발 전에는) 문서가 시각적으로 예쁘게 보이는 것보다는 구조를 이해하는 것이 훨씬 중요하다는 것입니다. 또한, 자연스럽게 사용자에게 보이는 body 영역에 집중하는 경우가 많지만, head 영역에 있는 내용 역시 중요하므로 이를 .. 2024. 4. 22. 파이썬 Python | 문자열: count 함수 ⭕ 파이썬 Python | 문자열: count 함수파이썬에서 문자열의 count() 함수는 매우 유용한 메서드 중 하나입니다. 이 메서드는 문자열 내에서 특정 문자나 문자열의 등장 횟수를 세어서 그 수를 반환합니다. 이를 통해 데이터 분석이나 텍스트 처리에서 문자의 빈도를 파악할 때 많이 사용됩니다. ➡️ 함수의 구조string.count(x, start, end)x: 찾고자 하는 문자 또는 문자열입니다.start: 검색을 시작할 인덱스입니다 (이 인덱스를 포함).end: 검색을 종료할 인덱스입니다 (이 인덱스는 포함되지 않음). ➡️ 함수의 특징대소문자 구분: 'A'와 'a'는 다르게 취급됩니다.범용성: 단일 문자뿐만 아니라 문자열도 검색 가능합니다.범위 지정: start와 end를 설정하지 않으면 기.. 2024. 4. 21. 카카오테크캠퍼스 2기 | 1주차(24-04-08 ~ 24-04-14) 회고 ⭕ 카카오테크캠퍼스 2기 | 1주차(24-04-08 ~ 24-04-14) 회고이번 주는 기존 프로젝트를 마무리하느라 바쁜 한 주였습니다. 진도는 많이 나가지 못했지만, 기초를 천천히 짚고 넘어간 것이 나중에 큰 역할을 할 것 같아 흥미롭고, 더 알아보고 싶은 마음이 커집니다. 모든 선택은 내 몫이고, 후회하지 않기 위해서는 당장 눈앞의 일에만 급급해하지 않고, 더 멀리 보며 철저하게 공부해야 할 필요가 있다고 느꼈습니다. 빨리 나아가고 싶은 마음은 크지만, 천천히라도 매일 새로운 것을 배우는 태도로 나아가겠습니다.자바스크립트를 학습하면서, 시작적으로 결과를 확인할 수 없어 어려움을 느끼고 좌절했던 적이 있습니다. 하지만 이는 HTML과 CSS에서의 시각적 요소를 넘어서 기능을 구현하는 자바스크립트로 한 .. 2024. 4. 21. 리액트 네이티브 React Native | React.createElement와 JSX ⭕ 리액트 네이티브 React Native | React.createElement와 JSX리액트 네이티브에서는 UI를 작성하기 위해 컴포넌트를 사용합니다. 텍스트를 표시하기 위해서는 Text 컴포넌트를 사용합니다. 이 때, React.createElement와 JSX는 컴포넌트를 생성하는 두 가지 주요 방법입니다. ➡️ React.createElement 함수React.createElement 함수는 가상 DOM 객체를 생성하는 데 사용됩니다. 이 함수는 세 개의 인자를 받습니다. 첫 번째 인자: 컴포넌트의 이름 (예: 'Text')두 번째 인자: 속성 객체 (props)세 번째 인자: 컴포넌트의 자식 요소예를 들어, 다음 코드는 Text 컴포넌트를 생성합니다.const virtualDOM = React.. 2024. 3. 20. 리액트 네이티브 React Native | JSX와 XML 마크업 언어 ⭕ 리액트 네이티브 React Native | JSX와 XML 마크업 언어리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, XML 마크업 언어를 사용합니다. XML은 HTML의 부분집합으로, 태그나 속성을 자유롭게 확장할 수 있어 HTML보다 유연한 구조를 가집니다. ➡️ JSXJSX는 리액트 네이티브에서 사용되는 문법으로, JavaScript XML의 약자입니다. JSX는 JavaScript로 XML 형식의 코드를 작성할 수 있게 해줍니다. HTML과 달리 XML은 태그 이름을 자유롭게 정의할 수 있습니다 ➡️ 마크업 언어 문법마크업 언어의 기본 문법은 시작 태그와 끝 태그로 이루어집니다. 시작 태그는 형식으로 작성하고, 속성을 가질 수 있습니다. 속성은 항.. 2024. 3. 20. 리액트 네이티브 React Native | JSX (JavaScript, XML) ⭕ 리액트 네이티브 React Native | JSX (JavaScript, XML)XML 태그 이름을 자유롭게 사용할 수 있는 JSX(JavaScript XML)는 리액트와 리액트 네이티브에서 자바스크립트와 XML 구문을 결합하여 사용하는 것을 의미합니다. ➡️ JSXJSX는 JavaScript XML의 약자로, XML에 자바스크립트를 결합할 목적으로 만들어진 구문입니다. 이를 통해 React.createElement 호출 코드를 간단하고 명확하게 만들 수 있습니다.// JSX 예시const element = Hello, world!; ➡️ 자바스크립트 확장자바스크립트 확장은 표준 ESNext 자바스크립트나 타입스크립트 문법에는 JSX 구문이 없음을 의미합니다. 리액트와 리액트 네이티브 프레임워크 개발.. 2024. 3. 20. 리액트 네이티브 React Native | react 패키지 ⭕ 리액트 네이티브 React Native | react 패키지➡️ react 패키지리액트와 리액트 네이티브 프레임워크는 공통적으로 react 패키지를 사용합니다. 이 패키지는 애플리케이션의 가상 DOM 구조를 만들어주는 역할을 담당합니다. ➡️ react-native 패키지리액트 네이티브에서는 react-native 패키지가 사용됩니다. 이 패키지는 리액트 요소를 안드로이드 프레임워크나 iOS용 UIKit 프레임워크의 화면 UI 객체로 변환하는 역할을 합니다. ➡️ 브리지 방식 렌더링리액트에서는 자바스크립트를 사용하여 DOM 렌더링 과정을 직접 확인할 수 있습니다. 그러나 리액트 네이티브에서는 네이티브 렌더러의 동작을 코드로 확인할 수 없습니다. 이는 리액트 네이티브 프로젝트의 Android와 iOS .. 2024. 3. 19. 리액트 네이티브 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과 동적 HTML1997년, 마이크로소프트는 웹 기술의 새로운 패러다임을 발표했습니다. 이것이 정적 HTML에서 동적 HTML로의 전환입니다. 정적 HTML은 웹 서버에서 미리 작성된 HTML 문서를 클라이언트에게 전달하는 방식으로 동작했습니다. 그러나 마이크로소프트의 발표는 이러한 전통적인 방식을 벗어나, 웹 브라우저에서 자바스크립트 코드를 실행하여 동적으로 HTML을 생성하는 방식으로 웹 기술을 발전시켰습니다. ➡️ 정적 HLTML정적 HTML은 변하지 않는 콘텐츠를 제공하는 데에 적합했습니다. 그러나 동적 HTML은 사용자의 상호작용에 따라 콘텐츠를 동적으로 생성하고 업데이트할 수 있어서 웹 애플리케이션의 기능성과 사용자 경험을 향상했습니.. 2024. 3. 19. 리액트 네이티브 React Native | 윈도우 개발 환경: Scoop, Node.js, JDK ⭕ 리액트 네이티브 React Native | 윈도우 개발 환경: Scoop, Node.js, JDK리액트 네이티브(React Native)는 모바일 앱 개발을 위한 프레임워크로, 개발자가 JavaScript를 사용하여 iOS와 안드로이드 양쪽 플랫폼을 위한 네이티브 앱을 개발할 수 있게 해 줍니다. 윈도우 서 리액트 네이티브 개발 환경을 설정하는 과정을 용이하게 만드는 중요한 도구 중 하나가 Scoop입니다. ➡️ Scoop 설치 과정Scoop은 윈도우용 커맨드 라인 인터페이스(CLI) 기반의 패키지 매니저로, 소프트웨어 설치와 관리를 간소화합니다. 특히 개발 도구와 라이브러리를 쉽게 설치하고 업데이트할 수 있는 기능을 제공하여, 수동 다운로드와 설치의 번거로움을 줄여줍니다.PowerShell 관리자 .. 2024. 3. 19. 리액트 네이티브 React Native | 개발 환경 ⭕ 리액트 네이티브 React Native | 개발 환경리액트 네이티브(React Native)는 모바일 앱 개발의 패러다임을 바꾼 크로스플랫폼 프레임워크입니다. 이 기술을 사용하여 개발자는 하나의 코드베이스로 iOS와 안드로이드 양쪽 플랫폼에서 실행 가능한 앱을 만들 수 있습니다. 그러나 각 운영 체제에 맞는 앱을 효과적으로 개발하기 위해서는 특정 개발 환경 설정이 필요합니다. ➡️ 개발 환경 구성리액트 네이티브의 개발 환경은 기본적으로 Node.js 기반으로, 이는 다양한 운영 체제에서 지원됩니다. 개발자는 Node.js를 설치한 후, 마이크로소프트가 오픈소스로 제공하는 비주얼 스튜디오 코드(Visual Studio Code) 같은 편집기를 사용하여 코드를 작성할 수 있습니다. 이는 윈도우, 맥, 리.. 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. 이전 1 2 3 4 5 6 다음 반응형
