목록프론트엔드 부트캠프 (78)
heyday2024 님의 블로그
나는 Number를 이용해서 풀었다.+로 문자를 숫자로 바꿀 수 있지만, 명시적이지 않은 방법. 하지만, 생각하지 못한 방법이어서 재밌었다.parseInt도 스트링을 integer타입으로 바꿔줌.나는 indexOf를 사용했다.findIndex도 특정 조건문에 해당되는 아이템의 index를 반환하는 메소드라는 것을 새롭게 알았다. function solution(n) { let answer = ""; for (let i = 1; i - 내가 작성한 코드이다. - 어떤 분은 repeat이라는 메소드를 사용했다. function solution(s) { let length = s.length; let mid = Math.floor(length / 2); return (length % 2 ===..
알고리즘? 컴퓨터가 문제를 해결할 수 있도록 절차나 방법을 자세히 설명하는 과정 컴퓨터는 작업 성능은 우수하지만 정확한 명령이 없으면 일을 효율적으로 하기 힘들어요📚 개발자는 컴퓨터가 효율적으로 동작하도록 명령을 내려야 하고 이 때 필요한 것이 알고리즘입니다. 코딩테스트는 코드로 이루어지는 모든 형태의 테스트입니다.통상적으로 알고리즘 실력을 평가하는 테스트를 지칭 온라인 - 프로그래머스 등 기업용 서비스를 제공하는 곳에서 진행보통 3문제를 2시간 이내에 풀고 제출하는 조건이 가장 대표적입니다문제수는 1 ~ 5문제, 시간은 90분에서 4시간까지 다양해요라이브 - 온라인 또는 오프라인 면접 시간에 면접관 앞에서 진행보통 낮은 난이도의 알고리즘 문제를 풀이이 경우에는 ‘라이브 코딩테스트’라고 별도의 이름..
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 프레임을 만들어보았지만, 능숙하지 않은 실력에 시간도 꽤 걸리고, 디자인도 아름답지 못했다.(다시 도와줘요 ..