🧐 TIL

내배캠 사전교육이 끝나갈 무렵 팀 소개 페이지 프로젝트가 발제되었다. 팀원들이랑 사전교육 내내 열심히 했었어서 걱정이 없었고, 결과적으로는 하려고 했던 모든 계획을 다 이루어 냈다! 소중했던 첫 프로젝트 간단하게 기록하기 ㅎㅎ 1. 소개 내일배움캠프 사전교육 1조 팀 소개 페이지 제작 프로젝트입니다. https://eunji624.github.io/1suk2jo/ 팀명 🍔먹고하조 팀장 유은지 팀원 김영우 정기욱 최수영 2. 사용 기술, 라이브러리 - HTML, CSS - Javascript - Jquery - Bootstrap 3. 페이지 소개 1) 메인페이지 - 상단 Navbar: 로고 및 카테고리 별로 페이지 이동 - 메인 페이지 section: 간단한 인사와 소개, 목표 기재 - 하단 footer:..

본격적인 node.js 주차가 시작됐다. 자바스크립트 꽤 익숙해진 줄 알았는데 아직 써보지 못했던 구조 분해 할당이 헷갈려 기록해봐야겠다. 🧨 구조 분해 할당 - 배열이나 객체의 속성을 해체하여 그 안의 값을 개별 변수로 담을 수 있게 하는 표현식 - 구조화된 배열과 같은 이터러블 또는 객체를 구조파괴(destructuring) 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. - 배열의 각 요소를 배열로부터 추출, 1개 이상의 변수에 할당한다.(배열의 길이에 맞춰서 변수 할당 하지 않아도 OK) - 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 한다. 🙋‍♀️ 이터러블? Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토 타입 체인 통해 상속 받은..

메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 1. this? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. - 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. - 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리키는데 , 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 ..

🔍 문제 - 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정리 - 해당 인덱스 값이 여럿일 경우 사전순으로 앞선 문자열이 앞쪽으로 위치한다. ⌨️ 입출력 예시 strings n return ['sun', 'bed', 'car'] 1 ['car', 'bed', 'sun'] ['abce', 'abcd', 'cdx'] 2 ['abcd', 'abce', 'cdx'] 🙋‍♀️ 내가 푼 방식 1. 인덱스 n에 해당되는 배열의 값 추출한다. 2. 해당 값들을 문자열 앞에 붙여준다. 3. 사전순으로 정렬 .sort() 4. 앞글자 떼기 // 최종 리턴 값 let answer = []; // 해당 값들을 문자열 앞에 붙여준 값들의 배열. let ne..

🔍 문제 - 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes, - 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. - 실제 정수들의 합을 구하여 return 해준다. ⌨️ 입출력 예시 🙋‍♀️ 내가 푼 방식 - 문제 자체도 이해를 못했었음.. - reduce 이해하느라 힘들었다 function solution(absolutes, signs) { // return할 answer 값 선언 var answer = 0; // absolutes, signs 각각 연산에 따른 결과 값 넣어 줄 배열 선언 let newArr = []; // absolutes와 signs의 길이는 항상 동일 // 반복문 같은 인자로 돌려도 무방 for(let i = 0; i < absolut..

🔍 문제 - 대문자와 소문자가 섞여있는 문자열 s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return - 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴 - 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. - 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return ⌨️ 입출력 예시 🙋‍♀️ 내가 푼 방식 - filter 써보려다가 길이를 구해야해서 배열 안에 넣어줘야 했기 때문에 - forEach로 돌며 p, P, y, Y랑 일치하는 문자 찾아 배열에 넣어주었다! function solution(s){ // 파라미터 s의 문자열을 넣어줄 배열 let arr = []; // 'p', 'y' 길이..

부트스트랩으로 모달창 띄어보자! 1. 부트스트랩 CDN으로 불러오기 🙋‍♀️ cdn이란? - Content Delivery Network - 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공하기 위해 고안된 기술이다. - 만약 우리나라에 있는 사람이 미국에 있는 서버로부터 이미지나 파일 등을 다운받으려고 한다면 시간이 오래 걸릴 것, " 따라서 서버를 분산시켜 캐싱해두고 사용자의 컨텐츠 요청이 들어오면 사용자와 가장 가까운 위치에 존재하는 서버로 매핑시켜 요청된 콘텐츠의 캐싱된 내용을 내어주는 방식으로 빠르게 데이터를 전송할 수 있게 된다. " - 만약 서버가 파일을 찾는데 실패하는 경우 CDN 플랫폼의 다른 서버에서 컨텐츠를 찾은다음 응답을 전송한다. 참고자료: https://velog.io/..

팀프로젝트 진행 중 만난 충돌,, 팀장님이랑 해결하느라 시간 꽤 쏟았는데 깃헙 강의에서 쉬운 방식을 알려주셨다,,,! 💥 충돌(Conflict) 💥 원인? - 같은 파일의 같은 위치에 코드가 변경되었기 때문 ✨ 해결 방법 - 충돌이 생기자마자 충돌이 생긴 사람과 상의 후 코드를 고치고 push 해주면 된다. 숫자…. 삭제 원하는 코드로 수정 코드를 변경한 팀원과 상의하는 것을 추천!! git add. / git commit -m '' / git push origin 내 브랜치

🔍 문제 - 문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return ⌨️ 입출력 예시 🙋‍♀️ 내가 푼 방식 - 말그대로 위치를 바꾸면 어떨까 생각했다. - 해당 인덱스 위치 값의 요소들을 바꿔 새로운 배열에 넣어주었다. - 배열을 문자열로 반환해주어야 하기 때문에 join() 메소드 사용해주었다. function solution(my_string, num1, num2) { var answer = ""; let str_arr = my_string.split(""); let switch_arr = str_arr[num1]; str_arr[num1] = str_arr[num2]; str_..

🔍 문제 - 문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return ⌨️ 입출력 예시 🙋‍♀️ 내가 푼 방식 - 대소문자 변환하면 떠올랐던건 toUpperCase, toLowerCase였다. - 각각의 요소들을 돌면서 각 요소의 문자가 UpperCase가 된 상태와 동일하다면 LowerCase 해주어 소문자로 바꿔주었고 - LowerCase가 된 상태와 동일하다면 UpperCase 해주었다. - 각각 해준 값들을 빈 배열값에 넣어두었고, join 메소드를 통해 문자열로 추출하며 반환하였다. - 다른사람의 풀이를 봐야할것같당.. 메소드가 많아 훨씬 간결하게 하지 않았을까 생각이 든다. function solution(my_string) { var ..