본문 바로가기

분류 전체보기107

241031 TIL - 절대경로&상대경로 / 모듈 맛보기 / localStorage 오늘은 프로젝트 마무리! 각자의 작업물을 깃허브에 합치고 테스트하고 수정하고 하는 작업이 주를 이뤘당처음엔 감도 안 오고 혹시라도 팀 작업물을 망칠까 두려워서 조심스럽기만 했는데, 그래도 자신감이 좀 생겼는지 pull request도 보내고 merge도 해보고 성장하는 하루였다!대신 브랜치가 문어발 마냥 늘어난 건 비밀오늘 있었던 문제상황은 크게 두 가지로, 개인적으로 겪었던 이미지 파일 경로 문제, 그리고 팀적으로 겪었던 데이터베이스 연결 문제가 있다! 둘의 해결 과정 중에서 공부한 내용들을 오늘 TIL에 정리해보도록 하자. 절대경로&상대경로 개념, 모듈 개념, localStorage 개념이다.  절대경로 이미 지정돼 있어 변경이 불가한 경로. 다른 서버나 페이지의 이미지를 바로 연결시킬 때 사용한다... 2024. 10. 31.
241030 TIL - Math.random() / animate() 오늘은 거의 css 숫자 노가다를 하며 보냈지만...! 그래도 짤막짤막 새로 배워 활용한 녀석들이 많다! 사전캠프 때 랜덤 장애물 생성을 위해 시도했던 math.random을 다시 만났고, 피날레로 animate메서드에 대해 공부하며 하루를 마무리 했다! 하나하나 간단히 정리해보자 [ Script ]Math.random()Math로 시작하면 일단 수학적인 무언가인디(대문자 M임!!!), 여기서 random이 첨가되면 난수를 생성할 수 있게 됨인자를 입력하지 않은 기본 상태에선 0에서 1 사이의 난수를 생성하는데, 이때 1은 포함되지 않음출력값은 실수라서 범위 내의 값이 매우매우 많음!만약 범위를 설정하고 싶다면 "Math.random()*n"를 해주면 된다. 이 경우 "0 를 가짐 0말고 최소값을 설정하.. 2024. 10. 30.
241029 TIL - github 개념 / DOM과 JQuery 혼용문제 오늘은 모달 창 구현과 hover 기능 활용을 목표로 시작했고! 모달 창 구현에 거의 하루 종일을 쏟고 말았다....hover 활용은 잘 돼서 메인 화면에 몬스터볼과 사용자 간의 상호작용이 늘어나니 넘 좋았다!모달이 문제였는데.... 우선 github 관련 정리를 합시다! git 개념 정리git은 버전을 관리해주는 도구, github는 원격 코드 저장소개인 프로젝트 때 활용하는 명령어들론 init, add, commit, push 등이 있고, 협업 등에 주로 활용하는 명령어들론 clone, pull, branch, checkout, merge 등이 있음레포지토리는 폴더 같은 개념임브랜치를 잘 나눠 쓰는 것이 협업 효율을 올릴 수 있다!! 근데 어렵다!! 협업 루틴 각자 작업할 새 feature 브랜치들을.. 2024. 10. 29.
CSS 속성 정리 01 cursor, hover, position, overflow, transform cursor속성 부여받은 태그 위에 위치하는 커서의 모양을 바꿀 수 있음기본 화살표 default, 자동 auto, 손가락 모양 pointer(클릭 가능한 버튼), 로딩중 wait 등이 있음 transition과 hoverhover는 선택한 셀렉터에 마우스 커서가 올라갈 때 발동하는 속성을 부여할 때 활용.그 셀렉터에 미리 transtion을 간단히 준 후 "셀렉터명:hover"에서 발동할 효과를 자세히 써주는 식/* 그림자 효과 0.2초 동안 준다고 미리 설정 */.btn { transition: box-shadow 0.2s;}/* hover에서 그림자 어떻게 줄 건지 자세히 서술 */.btn:hover { box-shadow: 3px 4px 11px 0px #00000040;}  posit.. 2024. 10. 28.
241028 TIL 시 작본 캠프 1주차 프로젝트는  팀 소개 페이지 만들기!웹 개발 역량이 필요한 프로젝트라 어느 정도까지 깊게 파고 들어야할지 고민이 많다...그래도 배운 것, 아는 것 내에선 최대한 활용하면서 연습하는 시간이 될 수 있음 좋겠다! 팀 회의포켓몬스터 게임의 도감을 모티브로 소개 페이지를 제작하기로 의견이 모였다.초기 화면에는 조원수 만큼의 몬스터볼이 있고, 그 몬스터볼을 클릭하면 상세 설명 화면이 보이는 식으로 설계하기로 했다생각하고 의도한 것들이 잘 나와주면 좋겠지만, 너무 매몰돼서 무리하진 않기로! 개인 연습오늘 처음 참여라 강의를 들으셔야 하는 조원 분들이 많아서 당장 프로젝트를 진행하긴 어려웠다. 아쉽지만 연습할 겸 개인적으로 구현이 가능하겠다 싶은 부분들을 재미삼아 코드를 작성해봤다. html과.. 2024. 10. 28.
웹 UI개발 기초강의 정리 02 [ Script ].toFixed()숫자의 소수점 부분을 반올림해주는 메서드. 주의할 점은 변환 결과가 문자형임모든 숫자형 뒤에 붙일 수 있으며, 파라미터로는 반올림 받을 자리수를 입력함let pi = 3.141592;/* 자리수 지정 안 했을 때 */console.log(pi.toFixed()); // 결과 : 3, 정수 부분만 남겨줌/* 자리수 지정 했을 때 */console.log(pi.toFixed(2)); // 결과 : 3.14, 지정한 만큼의 소수점 자리수까지 남겨줌  parseFloat()와 parseInt()문자형 꼴의 숫자를 숫자형으로 변환해주는 함수. float는 실수로, int는 정수로 변환해줌parseInt()를 적용했을 때, 소숫점 이후는 버림 판정let pi = "3.141592.. 2024. 10. 28.

티스토리툴바