heyday2024 님의 블로그

1. ES6 문법// ES6// (1) 2015년도 이전 => var, let(변수), const(함수)// (2) arrow function// (3) 삼항 연산자: 조건 ? 이거 : 저거//////////////////////////////////////////////////////////////////////////////////// 구조분해할당: destructuring// 배열, 객체 속성/////////////////////////////////////////////////////////////////////////////////// (1) 배열의 경우let [value1, value2, value3] = [1, "new"];console.log(value1, value3); //1 undef..

1. 조건문// 문(if, else if , else, switch ~)// 조건문// if (조건문 true or false) {main logic}let x = 5;let y = "hello world";if (y.length >= 5) { console.log(y.length);}if (x > 0) { console.log("x는 양수입니다.");} else if (x === 0) { console.log("x는 0 입니다");} else if (x = 18) { if (gender === "여성") { console.log("성인 여성입니다"); } else { console.log("성인 남성입니다"); }} else { if (gender === "여성") { co..

1. 변수, 상수// 변수, 상수// 주석(comment) --> JS엔진이라고 부르는 js를 구동하는 프로그램이 해석하지 않음// 터미널 사용하다가 이전에 썼던 명령어 깨끗하게 지우고 싶을 때: clear// 변수 매커니즘: 값을 메모리에 저장한다. 메모리에 저장했던 값을 읽어들여서 재사용한다.// [변수의 5가지 주요 개념]// 변수 이름 : 저장된 값의 고유 이름// 변수 값: 변수에 저장된 값// 변수 할당: 변수에 값을 저장하는 행위// 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위// 변수 참조: 변수에 할당된 값을 읽어오는 것// 변수를 선언할 수 있는 3가지 방법: var, let, const// 1. varvar myVar = "var";console.log(myVar);// 변..

1. JS 의 역사1995년에 만들어짐. 넷스케이프 커뮤니케이션즈라는 미국의 인터넷, 소프트웨어, 통신 산업을 하는 회사에서 만든 언어로 원래는  LiveScript 였는데 당시 Java가 인기가 많아서 우리도 java처럼 이름 바꾸자해서 java랑 전혀 연관이 없음에도 이름이 Javascript가 되어버림.JS는 브라우저에 동작하기 위해 쓰이는 언어임: JS = 브라우저 동작 스크립트 언어1999년 자바스크립트 표준화(ECMA-262) 완료: 보다 널리 사용되고, 브라우저 간 호환성을 높이기 위함. European Computer Manufacturers Association의 약자로, 정보 통신 시스템을 표준화하는 기구. 자바스크립트가 브라우저나 환경에 상관없이 일관되게 작동할 수 있도록 정의된 규칙..

프로젝트 명: 삼조맛집 공휴일과 주말을 제외하고, 기획에서부터 개발까지 약 4일 동안 진행한 프로젝트이다. 나는 여기서 members 페이지 제작을 맡았고, CRUD 기능 중 READ, DELETE 기능을 firestore를 이용해 구현하였다. 프로젝트 발표 진행    프로젝트 발표 후 피드백우선 CORS 문제를 해결하기 위해 넣었던 js 코드가 inline으로 html에 추가되는 방식이 아닌, 다른 방식으로 해결될 수 있음을 알았음으로, js 파일을 따로 만드는 것이 좋을 것이다라는 피드백을 받았다. (이 부분은 시간 부족으로 수정할 시간이 없어서 그냥 제출했었는데, 추후에 다시 깃허브에 업데이트할 예정이다.)깃허브 push 관련 문제로, branch를 만들어서 이 branch 자체의 url 코드를 제..

공휴일(10/3)을 지나 이어서 members 페이지 작업을 끝내고,팀 github 계정에 push했다.그러나 갑자기 팀원분들 컴퓨터에 나의 members 페이지가 랜더링되지 않는 문제가 생겼다.  CORS 문제 일단 CORS를 이해하려면,  출처의 기본 개념과 동일 출처 정책(same-origin policy)를 알아야함.출처(origin)는 크게 3가지 요소로 결정됨. 두 url이 같으려면 아래 세가지 요소가 모두 일치해야함.프로토콜 (e.g., http vs https)  -scheme호스트 (e.g., example.com) -domain포트 (e.g., :80, :443)예시http://example.com과 https://example.com은 다른 출처 (프로토콜이 다름).http://exa..

우선 앞서 올린 게시물처럼 나는 Members 페이지를 만드는 역할을 담당했다.간단하게 만들어진 와이어프레임은 아래와 같다.정리하자면, 내가 해야할 일은1) firestore에 저장된 데이터를 가져와서 bootstrap을 이용한 보기 좋은 디자인을 가진 cards 생성하기2) 각각의 카드 클릭 시 각 맴버들의 상세 설명 내용 보여주기(이 데이터들도 firestore에 저장되어있음)3) delete 버튼 클릭 시 삭제 확인을 다시 묻는 모달창 생성하기4) 입력한 비밀번호와 저장된 비밀번호가 같은 경우 관련데이터를 firestore에서 삭제하고, 해당 카드도 삭제하기5) 비밀번호가 틀리면 Members_delete_failed, 맞으면 Mebers_delete_successed 모달창 보여주기 과정을 요약하..

본캠프가 시작되자마자 첫 프로젝트를 하게 되었다.프로젝트를 많이 한다는 얘기를 듣고 신청했는데, 첫 주부터 프로젝트를 준다니... 너무 좋다. 첫 프로젝트는 팀 페이지 만들기!   우리 팀에는 기획자로 일하셨던 분이 계서서 기획이 굉장히 수월하게 진행되었다. (고마워요 너굴맨😭) 직접 기획을 했었던 것은 아니지만, 이전에 Axure를 사용해서 만들어진 와이어프레임과 가상 로직 구현으로 웹페이지들을 만들어본 경험은 있었다. 그 때의 얄팍한 배경지식으로 Figma로 구현된 와이어 프레임과 로직 플로우들을 이해할 수 있었다. 조금이나마 기획에 도움이되고자 Figma를 사용해 Members_delete 프레임을 만들어보았지만, 능숙하지 않은 실력에 시간도 꽤 걸리고, 디자인도 아름답지 못했다.(다시 도와줘요 ..

https://idkhowtonamethispage.netlify.app/ 스타벅스 주문 시스템 idkhowtonamethispage.netlify.app  속성의 이름이 data-로 시작하는 모든 속성은 데이터 속성. data-index 속성은 HTML 요소에 사용자 정의 데이터를 저장할 수 있는 속성 1. order.item1.name점 표기법 (Dot Notation):이 방식은 객체의 속성에 직접 이름을 사용하여 접근하는 방법.item1은 order 객체의 속성으로, 해당 속성은 객체여야함. 예를 들어, order 객체가 다음과 같다고 가정해보면, let order = { item1: { name: "아메리카노", quantity: 2, } };위와 같이 정의된 경우 order.item1.name..

firebase 한계점(백엔드에 대한 컨트롤을 일부 잃게 됨/ 커스터마이징 힘들다....) 1) 서버 제어 제한: 파이어베이스는 서버 인프라에 대한 직접적인 컨트롤 제한됨.(파이어베이스에서 제공하는 기능, 방식에 따라 작업 수행해야함.)2) 확장성 제약: 파이어베이스는 규모에 따른 가로 확장성 측면에 제한이 있음3) 종속성: 파이어베이스 사용 시 google서비스에 의존하게되기 떄문에 외부의 다른 서비스나 기능 활용 어려움.파이썬 사용!!(파이어베이스의 제한 사항을 넘어선 더 많은 컨트롤 가능!(다양성, 유연성)) 1) 개발자가 원하는 방식으로 서버 구축, 관리 가능2) 서버의 확장성 조절 가능, 필요에 따라 리소스를 추가하거나 조정할 수 있음(대규모 기업이나 많은 트래픽을 처리해야하는 프로젝트에서 중요..