반응형 전체 글267 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. 인사이트(위즈덤 및 에세이) | 🕰구글 주가 🔌10%를 올린🔌 개발자 컨퍼런스 10분 요약🕰 ⭕ 인사이트(위즈덤 및 에세이) | 🕰구글 주가 🔌10%를 올린🔌 개발자 컨퍼런스 10분 요약🕰➡️ 실리콘밸리 구글 이벤트에 다녀와서 느낀 점 (feat. AI, Bard)https://www.youtube.com/watch?v=cJGKrsjhxr4 ➡️ 나의 인사이트 도출빅테크 기업들이 인공지능(AI) 기술을 도입한 것은 갑작스러운 결정이 아니라, 오랜 기간에 걸쳐 계획하고 추진해 온 전략의 일부입니다. 이러한 점진적인 접근은 기업과 사용자 모두에게 새로운 기술에 익숙해질 시간을 제공합니다. 특히, 이미지 처리 기술의 발전은 이미지를 조정하는 것뿐만 아니라, 우리의 기억에도 영향을 미치게 되었다는 깊은 인사이트를 제공합니다. 결국, 현실과 가상의 경계를 흐릿하게 만들며, 우리의 일상생활 방식과 .. 2024. 4. 30. 카카오테크캠퍼스 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. 인사이트(위즈덤 및 에세이) | 그로스해킹(Growth Hacking) ⭕ 인사이트(위즈덤 및 에세이) | 그로스해킹(Growth Hacking) ➡️ 서론 https://www.youtube.com/watch?v=TMYaTkOyV4Y 오늘날 스타트업 세계에서 '그로스해킹(Growth Hacking)'은 단순히 유행어를 넘어서, 기업 성장을 가속화하는 필수 전략으로 자리 잡았습니다. 그 중심에는 션 앨리스(Sean Ellis), '진화된 마케팅 그로스해킹'의 저자이자 이 전략의 창시자가 있습니다. Dropbox, Eventbrite, Lookout, LogMeIn 등 수십억 달러 가치의 기업들의 시장 진입 전략을 성공적으로 이끈 그의 접근법은 전 세계 디지털 마케터들 사이에서 큰 영감을 주고 있습니다. ➡️ 그로스해킹(Growth Hacking) 그로스해킹(Growth Ha.. 2024. 3. 25. 인사이트(위즈덤 및 에세이) | 귀납적 성공 방정식 - 공동의 목표와 가치 ⭕ 인사이트(위즈덤 및 에세이) | 귀납적 성공 방정식 - 공동의 목표 및 가치 ➡️ 서론 알뜰폰 시장은 과거 '효도폰' 이미지에서 벗어나, 현재는 다양한 연령대에 걸쳐 폭넓은 고객층을 확보하며 성장하였습니다. 이러한 변화의 핵심에는 공동의 목표 및 가치가 있었습니다. https://www.youtube.com/watch?v=mqJ5YKlMIaM ➡️ 모요 창립 모요의 창립 배경은 통신 시장 내의 불편함과 고객의 불만에 주목한 것에서 시작되었습니다. 안동건 대표는 번호 이동의 복잡함과 비효율성을 해결하고자 하며, 고객 중심의 새로운 통신 서비스 개발로 시장 변화를 추구하였습니다. 초기부터 수익 창출을 목표로 한 비즈니스 모델을 설계하며, 알뜰폰 시장과 사용자의 요구 사항을 분석해 서비스를 개발하였습니다... 2024. 3. 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 =.. 2024. 3. 20. 리액트 네이티브 React Native | JSX와 XML 마크업 언어 ⭕ 리액트 네이티브 React Native | JSX와 XML 마크업 언어 리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, XML 마크업 언어를 사용합니다. XML은 HTML의 부분집합으로, 태그나 속성을 자유롭게 확장할 수 있어 HTML보다 유연한 구조를 가집니다. ➡️ JSX JSX는 리액트 네이티브에서 사용되는 문법으로, 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 구문을 결합하여 사용하는 것을 의미합니다. ➡️ JSX JSX는 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와 .. 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과 동적 HTML 1997년, 마이크로소프트는 웹 기술의 새로운 패러다임을 발표했습니다. 이것이 정적 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. 리액트 네이티브 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. 자바스크립트 JavaScript | 비동기 처리 ⭕ 자바스크립트 JavaScript | 비동기 처리 비동기 처리는 코드가 순차적으로 실행되는 대신, 특정 작업이 백그라운드에서 실행되도록 하고, 그 작업의 완료 여부와 상관없이 다음 코드로 진행할 수 있게 해주는 프로그래밍 방식입니다. JavaScript에서는 이러한 비동기 처리가 매우 중요한데, 예를 들어 웹 애플리케이션에서 서버로부터 데이터를 요청하고 그 데이터가 도착할 때까지 기다리는 경우, 사용자 인터페이스(UI)가 멈추지 않고 다른 작업을 계속할 수 있게 해 줍니다. ➡️ Promise Promise는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. 이 객체는 세 가지 상태를 가지게 됩니다. pending: 아직 결과가 정해지지 않은 초기 상태입니다. fulfilled: 비동기 작업이.. 2024. 3. 9. 자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment) ⭕ 자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment) ➡️ 전개 구문 (Spread Syntax) 전개 구문은 배열이나 객체의 요소를 여러 개의 개별 요소로 "전개"하는 데 사용됩니다. 이 구문은 함수 호출에 인수를 전달하거나, 배열을 다른 배열에 병합하거나, 객체를 다른 객체와 병합할 때 유용하게 사용할 수 있습니다. // 배열 전개 let numbers = [1, 2, 3]; let moreNumbers = [...numbers, 4, 5]; console.log(moreNumbers); // [1, 2, 3, 4, 5] // 객체 전개 let person = { name:.. 2024. 3. 9. 자바스크립트 JavaScript | 함수 및 반환 방법 ⭕ 자바스크립트 JavaScript | 함수 및 반환 방법 ➡️ 묵시적 반환 묵시적 반환은 화살표 함수(=>)를 사용할 때, 함수 본문을 중괄호({})로 감싸지 않고 직접 결과 값을 반환할 수 있는 간결한 문법을 의미합니다. 이 방법을 사용하면 return 키워드 없이도 함수에서 값을 반환할 수 있습니다. 묵시적 반환은 함수의 본문이 단일 표현식으로 구성되어 있을 때 유용하게 사용할 수 있으며, 코드를 더 간결하고 읽기 쉽게 만들어 줍니다. 특히 배열 메서드의 콜백 함수나 간단한 연산을 수행하는 함수를 작성할 때 유용합니다. 첫 번째 함수 square는 묵시적 반환을 사용하여 x * x의 결과를 바로 반환합니다. 두 번째 함수 squareWithReturn는 동일한 계산을 수행하지만, 중괄호({})와 r.. 2024. 3. 9. 자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문 ⭕ 자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문 예외 처리는 프로그램 실행 중 발생할 수 있는 예외 또는 오류를 처리하기 위한 메커니즘입니다. 자바스크립트에서는 try-catch-finally 구문을 사용하여 예외 처리를 할 수 있습니다. 이 구조를 사용하면 오류가 발생했을 때 프로그램이 갑자기 중단되지 않고, 개발자가 제공한 방식으로 예외를 처리할 수 있습니다. ➡️ try-catch-finally 구문 try 블록: 실행할 코드를 포함하며, 여기서 발생하는 모든 예외는 catch 블록으로 전달됩니다. catch 블록: try 블록 내에서 예외가 발생했을 때 실행됩니다. 예외 객체를 받아 처리할 수 있습니다. finally 블록: 예외 발생 여부와 상관없이 실행.. 2024. 3. 9. 이전 1 2 3 4 5 ··· 9 다음 반응형
