본문 바로가기
반응형

분류 전체보기308

CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자 ⭕ CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자➡️ 기본 선택자전체 선택자 (*)모든 HTML 요소* { margin: 0; padding: 0; }모든 요소의 마진과 패딩을 0으로 적용함태그 선택자지정된 태그를 의미p { font-size: 16px; }모든 태그에 16픽셀의 글꼴 크기를 적용함클래스 선택자 (.)지정된 클래스를 가진 모든 요소.menu { background-color: blue; }menu 클래스에 파란색 배경을 적용함ID 선택자 (#)특정 ID를 가진 단일 요소자주 사용하지는 않음#header { height: 100px; }header ID에 높이를 100픽셀로 적용함 [프론트엔드.. 2024. 5. 16.
CSS | 요소(Element)와 클래스(Class)의 차이 ⭕ CSS | 요소(Element)와 클래스(Class)의 차이➡️ 요소 (Element)HTML 요소는 웹 페이지의 구조를 정의하고 의미를 담당합니다. 이러한 요소들은 특정 태그로 표현되며, 웹 브라우저에 어떻게 내용을 표시할지 알려줍니다. , , , p { color: blue;}➡️ 클래스 (Class)클래스는 HTML 요소에 스타일을 적용하기 위해 사용되는 식별자입니다. 클래스는 점(.)으로 시작하며, 하나 이상의 요소에 재사용 가능한 스타일을 정의할 수 있습니다. .menu, .header, .footer.menu { background-color: #333; color: white; padding: 10px;}.header { font-size: 24px; fo.. 2024. 5. 16.
인사이트(위즈덤 및 에세이) | 매주 앱 1개씩 만들다 보니 글로벌 1000만 앱이 탄생했다 ⭕ 인사이트(위즈덤 및 에세이) | 매주 앱 1개씩 만들다 보니 글로벌 1000만 앱이 탄생했다https://www.youtube.com/watch?v=y2a-OJqCD9I  ➡️ 나의 인사이트 도출미래 변화에 대한 예측보다 변화를 인식하고 이에 "대응하는 능력"이 더 중요하다는 점입니다. 이는 기술, 제품, 서비스 개발에서 사용자의 필요와 시장의 변화를 지속적으로 관찰하고 이에 적응하는 유연성을 필요로 합니다. 구글 검색의 아쉬움을 예로 들면, 사용자 경험을 개선하는 방향으로 기능을 업데이트하고 사용자의 니즈를 정확히 파악하여 그들이 원하는 바를 제공하는 것이 핵심입니다. 가장 중요한 것을 잘 구현하는 것은 사용자 중심 디자인과 지속적인 혁신을 통해 이룰 수 있습니다. ➡️ 나의 기획 방향성 도출채팅 .. 2024. 5. 15.
자바스크립트 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.
인사이트(위즈덤 및 에세이) | 🕰구글 주가 🔌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 Hacki.. 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 = 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.
반응형