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

💻오늘 배운 수업 📕변수 더보기 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 취미: 등산 블로그: 비밀 각 카드의..

드디어 내배캠 개강 첫날이다 2주 동안 사전캠프를 먼저 선행학습으로 하면서 1주차는 웹종반 수업 복습 2주차는 미니 팀프로젝트를 진행하면서 강의들었던 내용을 바탕으로 더 응용해서 팀원들과 웹페이지를 만들었다. 오늘 본 캠프 개강하고 바로 GIT 협업 특강이 약 2시간동안 이뤄졌는데 강의 내용 따라서 실습해보다 중간에 에러가 뜨면서 길을 잃었다.. 질문하고 싶어도 실시간 줌으로 진행되는 수업이고 정말 많은 사람들이 있어서 딜레이될것 같아 질문하지 못하고 넘어갔다. 나중에 줌 영상 녹화본 올려주시면 개인공부로 다시 복습을 무조건 해야한다... 가장 기본적인 것들만 기억난다. 강의를 들으면서 놓치기 전까지의 명령어들을 작성해보자면 pwd 현재경로 확인하기 (2가지) :절대 경로 (전체경로) :상대 경로 (현재..

어제는 html코드에 이미지 주소를 적어서 카드 이미지가 제대로 보여지는지 확인하는 작업을 했다. 영화리뷰 페이지가 웹페이지에 저장하려면 자바스크립트 함수를 이용해야 한다. addEventListener를 이용해서 이벤트를 등록하면 되는데 이 방식은 여러개의 이벤트 핸들러를 등록할 수 있는 장점이 있다. 카드 작성하기 버튼을 클릭(이벤트)하면 html 요소들의 클래스 이름 및 태그를 갖고 오기 위해서 querySelector를 지정해준다. $(document).ready(function () { show_order(); }); document.addEventListener('DOMContentLoaded', function () { document .querySelector('.mybtn button')..

작품리뷰를 해야하기 때문에 셀렉트옵션에서 작품제목을 선택하면 작품 포스터이미지도 나올 수 있게 하고 싶었다. 작품 선택후 리뷰 적고, 별점까지 선택한 후 작성하면 최종적으로 포스팅 되는 카드를 만드는게 목표다 요소 내에 직접 이미지를 삽입하는것은 불가능하기 때문에 이미지를 요소의 data-image 속성에 저장하고, 선택된 요소에 해당 이미지를 출력할 수 있도록 할 것이다. 이렇게 하면 이미지를 따로 다운받지 않고도 url로 긁어와서 나타날 수있게된다. 기존 짜놓은 코드에서 작품 제목 타짜 도둑들 관상 굿바이 싱글 시그널 직장의 신 아이디를 id="movie-select" 새로 하나 설정해주고 data-image에 해당하는 작품 이미지 주소를 붙여준다 작품 제목 타짜 도둑들 관상 굿바이 싱글 시그널 직장..

나는 내일배움캠프의 프론트엔드 리액트파트에 지원했고 리액트팀에서 새로운 조가 편성되어 캠프 개강을 일주일 앞둔 시점에 첫 미니 팀프로젝트를 받았다. 웹종반 수업에서 실습해본 팬명록, 버킷리스트 등을 바탕으로 한가지 주제를 선정해서 프론트엔드와 백엔드의 전반적인 흐름을 이해할 수 있도록 사이트를 하나 만들어 발제해야한다. 우선 우리 조는 다양한 의견 제시를 통해 여러 주제가 나왔지만 최종으로 배우 한명을 선택하고 그 배우의 필모그래피를 선택하면 해당 작품에 대해 리뷰와 별점, 그리고 명대사까지 남길 수 있는 배우리뷰 사이트를 만들기로 정했다. 회의끝에 나온 와이어프레임은 미리캔버스를 통해 대략 이런느낌으로 구성하였다. 전체적인 css는 팀원분 중의 한분께서 전에 수업을 들었던 미니홈피 파일이 있어 백그라운..