생각하며 글을 쓰는 사람

자바스크립트에서 객체(Object)는 속성(프로퍼티)과 메서드(함수)를 포함할 수 있는 데이터 구조입니다.객체는 키-값 쌍으로 구성되며, 키는 문자열이고 값은 어떤 타입도 될 수 있습니다.객체를 쉽게 이해하려면, 실생활에서 쉽게 마주할 수 있는 것과 같이 생각할 수 있습니다.예를 들어, "자동차"라는 객체는 색상, 모델, 제조사 등의 속성을 가질 수 있고, 운전하거나 멈추는 기능을 메서드로 가질 수 있습니다.자바스크립트에서 객체를 정의하고 사용하는 방법은 다음과 같습니다:   객체 생성1. 객체 리터럴을 사용하여 객체를 생성할 수 있습니다.   let car = {  make: "Toyota",  model: "Corolla",  year: 2020,  start: function () {  consol..

자바스크립트의 기초 내용을 한번 간략하게 정리를 해보겠습니다.  1. 변수와 상수 (Variables and Constants):var, let, const 키워드로 변수를 선언하고 값을 할당하는 방법입니다.  let x = 10; const y = 20; var z = 30;   2. 데이터 타입 (Data Types):기본 데이터 타입: String, Number, Boolean, Null, Undefined, Symbol, BigInt복합 데이터 타입: Object, Array, Function let name = "John"; // String let age = 25; // Number let isStudent = true; // Boolean let address = null; // Null l..

vscode에 들어갑니다. 익스텐션에 들어가서 프리티어를 설치합니다. 설치가 되면, 저장을 누를 때 자동으로 정리가 되는것을 원하시는 거죠? 그럼 저와같이 아래의 세팅을 해주면 됩니다. 일단 settings.json 으로 들어가 줍니다. settings.json에 들어가는 방법은 제 다른글에 설명이 되어 있습니다. 자 이제, 아래의 코드를 붙여넣기 하시면 됩니다. // prettier settting "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.printWidth": 120, "editor.formatOnSave": true 저는 원래 printWidth가 80으로 설정이 되어 있던가? 그렇습니다. 그러나 html을 작성할 때 이상하게 ..

이제 파이어베이스로 부터 데이터를 가져오는 방법을 배우겠습니다. 버전9로 진행을 하겠습니다. 이전에 시작하는 방법에 대해서 글을 썼습니다. 그 글에서 이어서 강의를 진행 하겠습니다. 파이어스토어에 들어가서 권한은 모두 접근할 수 있도록 풀어줍니다. 그리고 컬렉션은 blog로 하나 만들어주고 그 안에 임의로 데이터를 발행합니다. 임시로 서버를 띄워서 확인을 할 수 있습니다. 콘솔창에서 데이터를 확인하려면 아래의 코드를 작성하면 됩니다. // 예전 8버전 const db = firebase.firestore(); db.collection('blog').get().then((결과)=>{ console.log(결과) }) // 새로운 9버전 import { initializeApp } from "https://..

오늘은 파이어베이스 호스팅을 임시로 실행하는 방법에 대해서 알아보겠습니다. 일반적으로 파이어베이스를 시작하게 되면 html, css, javascript 로 시작하게 됩니다. 그리고 js를 이용해서 파이어베이스 로직을 프로그래밍 하게 됩니다. 간단하게 html과 css를 이용해서 화면을 꾸미게 되고 js를 이용해서 뭔가 기능을 만들고 파이어베이스를 실행하려면 파이어베이스 호스팅 기능에서 뭔가를 실행해야 합니다. 그러면 아래와 같이 콘솔에서 시작하게 됩니다. firebase serve --only hosting 그러나 이것은 예전 8버전의 기능입니다. 신버전의 9버전의 실행방법은 아래와 같습니다. firebase emulators:start 그리고 firebase.json 파일을 수정해줘야 합니다. 아래와..

파이어베이스는 어떻게 시작할까요? 일반적으로 파이어베이스는 스마트폰 어플리케이션 개발자들이 빠른 시간안에 풀스택 개발자가 되기 위해서 이용하는 플랫폼입니다. Swift를 이용하여 아이폰 어플, java( 또는 코틀린 )을 이용하여 안드로이드 어플은 일반적으로 클라이언트라고 하고... 이 어플이 동작하기 위해서는 서버가 필요하게 되겠죠? DB도 필요하구요 자바를 이용하여 스프링으로 백엔드를 할것인지? node.js를 이용하여 express를 할것인지? 장고를 할것인지? 루비 온 레일즈로 할것인지? 복잡합니다. 만약 1인 개발자로 시작해야 한다면 쉽지 않은 선택이지요~ 그러나 더 문제는 클라이언트 개발자가 데브옵스 지식을 가지는 것은 더 어렵습니다. 갑자기 트래픽이 증가하면 골치가 아프죠... 그러나 파이어..

저는 원래부터 뉴스의 전체적인 정보를 빠르게 볼 수 있는 플랫폼을 가지기를 원했습니다. 대부분의 신문사는 제 마음에 들지 않았기 때문입니다. 시대에 뒤쳐지는 마인드를 가지고 있는것 같습니다. 구식의 느낌이 느껴집니다. 너무 잡다하게 많은 광고를 달아서 어지럽기만 합니다. 그리고 ui / ux 도 엉망이라고 생각합니다. 쌍팔면도 마인드로 개발된 유저 인터페이스는 정말이지 마음에 들지 않습니다. 그래서 새로운 변화와 느낌에 대응을 할 수 있는 것을 만들고 싶습니다. 정말 짭은 시간을 들이고, 많은 정보를 획득할 수 있는 아주 쌈빡한 플랫폼을 만들어 보고 싶습니다. 그래서 이참에 React와 Next.js에 대해서 배우는 김에 플랫폼을 한번 개발을 해볼까? 생각하게 되었으며 한번 실행에 옮겨야 함을 느꼈습니다..

오늘 글에서는 비주얼 스튜디오 코드의 주석 색깔을 이쁘게 변경하는 방법을 보여드리겠습니다. 제가 설정하는 방법으로 하시면 주석의 텍스트가 핑크색으로 변경이 됩니다. 일단 vscode에서 주석 처리를 하는 방법을 설명 드리겠습니다. 1. 원하는 텍스트를 드래그하여 선택한다. 2. 맥 ( Command + / ) , 윈도우 ( 컨트롤 + / ) 을 누르면 주석처리가 됩니다. 주석 처리를 하면 내가 원하는 중요사항을 메모할 수 있고, 내가 작성한 코드에 영향을 주지 않게 됩니다. 이제 vscode 주석 색을 변경해보겠습니다. 먼저 vscode를 켜주시고, settings.json에 들어갑니다. ( settings.json 에 들어가는 방법은 제가 이전 글에 설명을 했습니다. ) 위의 그림과 빨간색 박스의 내용..

저는 개인적으로 개발을 처음으로 배우게 되고, 비주얼 스튜디오 코드 ( vscode ) 세팅하는 것을 매우 어렵게 했습니다. 처음이라서 그런것 같습니다. 그중에 setting.json에 들어가는 것도 어렵더라구요... ㅎㅎㅎ ( 개발을 처음 배울때~ ) 공식적으로 들어가는 것에 대해서 설명을 해보겠습니다. 한번 공식문서는 어떻게 설명하고 있는지 보겠습니다. https://code.visualstudio.com/docs/getstarted/settings Visual Studio Code User and Workspace Settings How to modify Visual Studio Code User and Workspace Settings. code.visualstudio.com 이 페이지로 들어가셔..

저는 원래 파이어베이스를 공부했었고, 버전8로 시작을 했습니다. 그러나 이제 버전9를 구글에서 업데이트를 했고, 파이어베이스 공식 문서를 보면 " Firebase는 한 번의 주요 릴리스 주기 후에 이 버전에 대한 지원을 제거하므로... 새 앱은 대신 버전 9를 채택해야 합니다. " 라고 적혀 있습니다.... 배포되어 있는 8버전은 돌아가겠지만 정식지원은 9버전 위주로 진행을 할 것 같습니다. 그래서 9버전에 대한 내용을 정리하려고 합니다. 우리가 흔히말하는 '웹서버'는 그냥 데이터 꺼내달라고 하면 데이터 꺼내주는 기계입니다. 버전 9 는 webpack 또는 Rollup 과 같은 최신 JavaScript 빌드 도구를 사용해서 파이어베이스 크기를 줄이고 효율성을 높이는 모듈식 접근 방식을 사용합니다. 앱에서..

시멘틱 태그에 대해서 정리를 하겠습니다. 간단하게 적습니다. : 머리말에 해당합니다. 주로 웹페이지의 상단에 있습니다. 로고나 메뉴 등을 넣는 공간입니다. : 링크 등의 메뉴 영역입니다. 링크와 메뉴를 그룹화를 할 때 사용합니다. 모든 링크와 메뉴를 일일이 nav 태그에 넣을 필요는 없습니다. : 동영상, 사진, 멀티미디어를 넣는 영역입니다. 메인 페이지의 이미지 슬라이드 부분 : 웹 문서의 본문, 중요한 콘텐츠를 그룹화할 때 사용 : 본문과 연관성이 적은 외부 영역, 광고의 팝업창 바로가기를 만들 때 사용 : 특정 영역의 그룹화, 연관성이 있는 콘텐츠를 그룹화 할 때 사용합니다. 신문에서 기사 제목 여러개를 section 태그 안에 담아서 사용합니다. : 개별 콘텐츠를 담는 영역입니다. 개별 글이나 기..

css 에서 예쁜 그림자를 넣기를 원하시면 코드를 잘 작성을 해야합니다. box-shadow: 좌우위치, 상하위치, blur(흐려짐 정도 범위), spread(그림자 크기), 색상 ; 이 코드를 잘 사용을 하면 됩니다. 이렇게 저렇게.... 막 수정하다가. 제가 딱 좋아하는 그림자를 찾아내게 되었습니다. 그림을 확인 해보시기 바랍니다. 예쁘지 않습니까????? 너무 과하지도 않고, 부담스럽지도 않고 ㅋㅋㅋㅋ 딱~~ 좋네요 ㅎㅎㅎ 코드는 이렇게 작성을 하였습니다. 일단 전체적인 코드는 다 적기는 너무 많고.. 부트스트랩을 이용했다고 보시면 됩니다. 그리고 핵심적인 코드 입니다. 참고하시기를 바랍니다. .practiceShadow { box-shadow: 0px 0px 20px 1px rgb(200, 200..

부트스트랩에서 margin(마진), padding(패딩), font-size(폰트사이즈) 를 설정하려면 어떻게 해야 할까요? 사이트의 튜틸리티에 spacing, text 를 보시면 됩니다. https://getbootstrap.com/docs/5.1/utilities/spacing/ Spacing Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance. getbootstrap.com https://getbootstrap.com/docs/5.1/utilities/text/ Text Documentation and examples ..

html과 css를 다루기 어렵다면 부트스트랩을 이용하시면 됩니다. html에 부트스르랩을 설치하는 방법을 설명하겠습니다. 일단 부트스트랩 홈페이지에 방문을 해보겠습니다. https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 시작하는 방법은 아주 간단합니다. 사이트의 Docs에 들어가서 퀵스타트를 보시면 됩니다. 부트스트랩의 css와 javascript 파일을 자신의 html에 붙여넣기는 하면 끝납니다. css cdn은 자신의 head 태그 안에 넣으면 됩니다. javascript cdn은 자신의 body 태그 끝나기 전에 넣으면 됩니다. 그럼 다 설치된 모습을 ..

내가 원하는 사이트에 애니메이션이 무엇이 있는지 알고 싶다면 크롬 갭발자 도구를 이용하면 됩니다. 빨간색을 따라가서 애니매이션을 누르면 됩니다. 애니매이션을 만들려면 Transition 을 이용해야 합니다. 1. 시작 스타일을 정해야 하고 2. 끝나는 스타일을 작성해야 합니다. 대부분 :hover 마우스를 올릴 때 최종 스타일을 지정합니다. 3. Transition 을 지정해주면 됩니다. html을 작성해 줍니다. price 클래스가 위로 올라가는 것입니다. 마우스를 올릴 때 작동하게 하려면 div를 하나 더 만들어서 그안에 넣어주고, 이 놈을 position을 이용해서 공중부양을 시킵니다. 그리고 기존 img 를 다 감싸도록 폭과 너비를 100%로 해줍니다. css를 작성을 해줍니다. div를 하나 더..