프론트엔드 가보자GO 프론트엔드 가보자GO

이번주 월요일부터 자바스크립트 문법 종합반 강의를 계속 듣고 있는데 자바스크립트에 대해 너무 초면이라 익숙치 않고 많이 어렵다,, 강의를 들을 때는 이해가 안되면 여러번 다시 들으면서 이해가 되지만 정작 알고리즘 문제를 풀 때는 어떻게 시작해야할지, 또 어떤 식으로 풀어야 할지 문법들이 떠오르지가 않아서 나에게는 기초 문법들을 익히는게 제일 먼저 해야할 일이라고 생각했다. 그 중 어제 문제를 풀 때도 그렇고 배열과 메서드를 이용해서 문제를 푸는 방식이 가장 마음에 들어 메서드가 익숙해지도록 더 공부해 볼 생각이다. 📕오늘 공부한 내용 1. push() : 배열 마지막에 추가 let fruit2 = ["사과", "바나나"]; console.log("1 =>", fruit2); //1 => [ '사과', '..

🧐문자열 연습하기 function solution(numbers) { var answer = 0; return answer; } 더보기 📌 문제설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 📌제한사항 0 ≤ numbers의 원소 ≤ 1,000 1 ≤ numbers의 길이 ≤ 100 정답의 소수 부분이 .0 또는 .5인 경우만 입력으로 주어집니다. 📌입출력 예 numbers result [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 5.5 [89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99] 94.0 📌해결과정 처음에는 먼저 정수 배열들의 값을 다 더하고 난 후에 평균값을 ..

🧐문자열 연습하기 function solution(s){ var answer = true; // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다. console.log('Hello Javascript') return answer; } 더보기 📌 문제설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 📌제한사항 문자열 s의 길이 : 5..

🔍발생한 이슈(오류) 일급객체로서의 함수 특징 중 this에 대해서 공부하다가 템플릿 리터럴과 화살표 함수로 변형해서 예시문제를 해결할 때 계속 오류가 났다. const person = { name: "john", age: 31, isMarried: true, sayhello: function () { console.log("hello, my name is " + this.name); }, }; person.sayhello(); 기존 예제문제는 실행하면 hello my name is john가 잘 출력이 된다. 📌해결과정 👉템플릿 리터럴을 이용 1번 console.log("hello, my name is " + `${name}`); //실패 2번 console.log("hello, my name is "..

💻오늘 배운 수업 📕변수 더보기 1.변수 : 메모리에 저장하고 읽어들여서 재사용 할 수 있다. 변수의 5가지 주요 개념 변수 이름 : 저장된 값의 고유 이름 변수 값 : 변수에 저장된 값 변수 할당 : 변수에 값을 저장하는 행위 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 변수 참조 : 변수에 할당된 값을 읽어오는 것 2.변수를 선언할 수 있는 3가지 방법 : var, let, const *var : 똑같은 이름으로 다시 선언할 수 있다 + 재할당이 가능하다 var myvar = "hello wold"; var myvar = "test "; myvar = "goodbye"; console.log(myvar); *let : 재할당이 가능하다 let mylet = "hello wold 1"; /..

❤️Keep (프로젝트를 진행과정 중 다음 프로젝트에서도 유지했으면 하는 부분) 프로젝트를 진행 함에 있어서 각자 책임의식을 가지고 협력하는 부분 모르는 부분을 서로 공유하며 같이 공부할 수 있는 점 서로에게 이쁜 말로 의견을 제시하며 조율하는 부분 좋은 분위기를 이끌어가기 위해 긍정적인 마인드로 서로를 바라보는 모습 하루 3번씩 회의를 진행하면서 오늘의 목표를 수행하기 위해 노력하는 모습 질문하는것을 두려워 하지 않도록 친절히 답변해주고 답을 공유해주는 모습 ❓Problem 문제점 (프로젝트 발표시 튜터님께 받은 피드백) 유효성 검사 정규표현식 이메일 양식 검증 양식/숫자 양식/닉네임 양식/전화번호 모달창 백그라운드 투명도 조절 마우스 커서 포인트 (유저가 미리 예측할 수 있는 부분) 기능을 작게 나누..

🤓오늘 공부한 내용 더보기 어제까지는 전체 모달창에 각가 댓글달고 저장까지 완성했지만 모달창 개별 댓글 저장은 아직 해결하지 못했다. 팀원분께서 포스트아이디 값을 개별로 주면 된다고 하셔서 우선 html 디자인부터 꾸미고 댓글 마무리작업을 해야 할 것 같다. 디자인 감각이 없어서 3일째 기본 틀로 html을 꾸며놨었는데 점심을 먹다가 갑자기 동물의 숲이 떠올랐다..ㅋㅋ 닌텐도로 한참 모동숲 꾸미던 때가 생각이 나서 팀원 분들을 모동숲 주민 캐릭터로 이미지 설정하고 전체적이 테마도 모동숲이랑 맞춰볼 생각이다. 팀원 분들한테 각자 좋아하는 동물 있냐고 여쭤봐서 주민캐릭터 중에 귀여운 캐릭터로 골라봤다. (난 케찹이 💟) 백그라운드 배경 이미지를 부모요소로 하고 캐릭터들을 자식요소로 해서 전체적인 위치를 잡아..

🤓오늘 공부한 내용 오늘은 어제 기본으로 만들어놓은 틀을 바탕으로 팀원 이미지도 추가하고 팀원 카드 이미지를 누르면 모달창이 뜰 수 있게 만드는 것이 목표다. 모달창을 완성하고 시간이 되면 파이썬을 이용해서 flask서버까지 해볼 것이다. 팀원 카드에 들어가는 이미지를 고민하다가 슬랙에 올려진 개인 프로필 사진을 참고해서 아이폰 미모티콘으로 한번 만들어보았다. 🔍발생한 이슈 각 멤버 카드마다 다른 모달창이 나와야 하는데 다른 멤버 카드를 눌러도 처음 테스트로 만들어 놓은 모달창만 뜬다. 구글링 해보니까 아이디값이 충돌해서 안된것 같다. 개별 모달아이디를 주고 자바스크립트를 통해 동적인 모달창을 만들어야 한다. 📌해결과정 이름 팀원 × 이름: 비밀 MBTI : INFJ 취미: 등산 블로그: 비밀 각 카드의..