[포스코x코딩온] 1차 프로젝트 회고록

🪙 todays-account-book 프로젝트 소개 1인 가구를 위한 가계부 ✍ 프로젝트에서 담당한 기능 start page 떨어지는 동전 animate.style transform: translate(), rotate(), skew() 사용 animation-duration으로 동전마다 시간 조절 main 사용 설명서 sweetalert2 사용자의 여러 가지 경우 생각 -> then if문 반복 => 피드백 : 이 아니라 함수 사용을 했어야 했다. 다른 팀원께서 강사님께 질문했다가 피드백을 받은 부분이었다. 사용자가 사용 설명서를 읽을 경우 / 읽지 않을 경우 / 읽다가 중간에 닫을 경우를 생각하여 close 버튼과 다음 버튼으로 구성 하였다. 맞춤형 생활 정보 swiper slider 사용 cove..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 27.
• textsms

[포스코x코딩온] 1차 프로젝트 중간 점검🔥 (feat.중간 점검까지 프로젝트 회고록)

03/17 팀 배정 강사님께서 배정해 주신 팀으로 팀을 배정받았다. 어색한 공기가 흐르는 정적을 깨고 자기소개를 하고, 팀원 간 간단한 인사를 주고받았다. 이렇게 어색해 죽겠는데 팀이름을 정하라는 말씀에 팀 이름까지 정하고 팀장님을 뽑았다. 깃 레포지토리 깃에서 팀 레포지토리를 만들고 팀원들 각 개인의 브랜치에서 pull/add/commit/push 하는 과정을 익혔다. 25일 (토) 2시 발표 누가 거짓말이라고 좀 해줬으면 좋겠는 심정이었다. 일주일 만에 모든 것을 끝내야 하는 프로젝트라 아무 생각이 들지 않았다. 03/18 계획서 작성 - 기획 시작, 팀 역할 분배, 레이아웃 구성 -> 자세한 구현은 개발하면서 수정 밥 먹기 전까지 계획서 다 제출하는 게 오늘의 반이었다. 팀원 모두 적극적으로 의견을..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 23.
• textsms

[포스코 x 코딩온] JS_04 DOM

DOM HTML 문서는 node와 object의 집합으로 구성된다. dom 으로 각각의 node 또는 object에 접근해 문서 구조 , 스타일, 내용 등을 변경할 수 있다. Document : 웹 페이지에 존재하는 HTML 요소에 접근할 때 .querySelector('선택자')요소 선택자를 사용해 요소를 가져오는 메소드문서에서 만나는 첫번째 요소를 반환console.log(document.querySelector(".pink")); //핑크1 클래스 가져오기 .querySelectorAll('선택자')문서에 존재하는 모든 요소를 배열의 인덱스에 맞게 배열 요소로 반환 1 2 3 console.log(document.querySelectorAll(".box")); //모든 요소를 배열의 인덱스에 맞게 ..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 13.
• textsms

[포스코X코딩온] JS_03 메소드

문자열 관련 메소드 .length : 문자열 길이 반환(공백포함) .toUpperCase()&toLowerCase() : 문자열 전체를 대문자&소문자로 변경 .indeexOf(' ') : 매개변수로 문자열을 받아서 몇 번째 인덱스인지 숫자 반환 .slice(starIdx, endIdx) : start부터 end-1까지 슬라이싱 반환, 음수값도 가능 .replace(문자열1, 문자열2) : 1을 2로 변경 .replaceAll(문자열1, 문자열2) : 문자열1을 모두 문자열2로 변경 .repeat(n) : 문자열 n번 반복 .trim() : 문자열의 양끝 공백 없애기 .split() : 매개변수로 들어온 문자열 기준으로 str 쪼개서 배열 저장 배열 관련 메소드 .push() : 배열 끝에 추가 .pop(..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 12.
• textsms

[포스코X코딩온] JS_02 조건문 / 3항 연산자 / 반복문

조건문 조건문 if if {} else{} if(조건1){ //조건1이 참이라면 실행할 문 }else{ //조건1이 거짓이라면 실행할 문 } 조건문은 if 옆에 조건을 써주고 대괄호 안에 조건1이 참일 때 실행할 문을 작성해준다. else{} 안에는 조건1이 거짓이라면 실행할 문을 작성하면 된다. if{} else if{} else{} if(조건1){ //조건1이 참이라면 실행할 문 }else if (조건2){ //조건 2가 참이라면 실행 }else { //조건 1, 2가 모두 거짓일 때 실행 } 중첩 if if (조건1) { if (조건2) { //조건1을 만족하면서 조건2도 만족 } else { //조건1은 만족하지만 조건2는 만족하지 않음 } } for (let i = 0; i 조건식 2) 조건식이..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 11.
• textsms

[포스코X코딩온] JS_01 데이터/연산/함수

내장 방식 어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등 - 간단하게 생성가능 - 특정 페이지에서만 작동하는 기능일 경우 내장 방식만 따로 구현 가능 링크 방식 java script 파일을 따로 만들어서 링크를 거는 방식 (ex.css) 어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등 - js 코드의 양이 많으면 파일로 따로 관리하는 것이 더 유용 - 같은 기능을 다른 페이지에서 사용하고 싶을 때 링크만 걸어서 간단하게 사용 가능 - 유지 보수 용이성 편 데이터 종류(자료형) String 문자형 데이터 문자와 변수를 동시에 사용할 때 - 메소드의 매개 변수로 넣..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 10.
• textsms