241031 TIL - 절대경로&상대경로 / 모듈 맛보기 / localStorage

오늘은 프로젝트 마무리! 각자의 작업물을 깃허브에 합치고 테스트하고 수정하고 하는 작업이 주를 이뤘당

처음엔 감도 안 오고 혹시라도 팀 작업물을 망칠까 두려워서 조심스럽기만 했는데, 

그래도 자신감이 좀 생겼는지 pull request도 보내고 merge도 해보고 성장하는 하루였다!

대신 브랜치가 문어발 마냥 늘어난 건 비밀

오늘 있었던 문제상황은 크게 두 가지로, 개인적으로 겪었던 이미지 파일 경로 문제, 그리고 팀적으로 겪었던 데이터베이스 연결 문제가 있다! 둘의 해결 과정 중에서 공부한 내용들을 오늘 TIL에 정리해보도록 하자. 절대경로&상대경로 개념, 모듈 개념, localStorage 개념이다.

 

 

절대경로

 이미 지정돼 있어 변경이 불가한 경로. 다른 서버나 페이지의 이미지를 바로 연결시킬 때 사용한다. 브라우저에서 이미지에 오른쪽 클릭을 했을 때 이미지 주소 복사를 하면 가져오는 주소가 바로 절대 경로임

 

 

상대경로

 로컬이나 웹드라이브, 깃허브 등에서 상하위 폴더 등을 기준으로 변경될 수 있는 경로. 몇 가지 경우의 수를 살펴보자

• 불러올 이미지가 같은 계층에 있는 경우 (동일 폴더에 위치하는 등)

/* 파일명과 확장자만 써주면 됨 */
backgroud-image = url("pokemon.png")

• 불러올 이미지가 하위 계층에 있는 경우 (하위 폴더에 위치하는 등. 폴더 하나씩 들어갈 때마다 "폴더/"를 반복) 

/* "폴더명/파일명.확장자" 형태로 써줌 */
backgroud-image = url("images/pokemon.png")

• 불러올 이미지가 내 위치 기준 상위 계층의 다른 하위 계층에 있는 경우 (기준 폴더의 상위 폴더 중 또다른 하위 폴더에 위치하는 등)

/* 상위 폴더를 벗어난 만큼 "../"를 반복해줌 */
backgroud-image = url("../images/pokemon.png")

 

 

모듈

이후 과정에서 학습할 예정이기 때문에 지금은 맛보기!

개발 규모가 커지면 파일을 여러 개로 분리하게 되는데, 이때 분리된 파일 각각을 모듈(module)이라 함.

대개 클래스 하나 또는 특정 목적을 가진 함수 여러 개로 구성된 라이브러리 하나로 구성

HTML과 CSS, Script를 분리하는 것부터 부트스트랩이나 JQuery를 불러오는 것 등이 모두 모듈의 활용

• export : 변수나 함수 앞에 붙여 외부 모듈에서 해당 요소에 접근할 수 있게 함 (모듈 내보내기)
• import : 외부 모듈의 기능을 가져올 수 있음 (모듈 가져오기)

이 지시자들을 활용하기 위해선 <script type="module">같은 속성이 필요함

 

 

localStorage

브라우저에서 세션이 바뀌어도 key-value값을 활용할 수 있게끔 공유해주는 공간

문자열만 저장되기 때문에 다른 자료형을 저장하고 싶다면 문자열로 변환해서 적용해줘야 함

• setItem() : localStorage에 key와 value를 추가해줌
• getItem() : localStorage에서 value를 읽어 옴
• removeItem() : localStorage의 item을 삭제해줌
• clear() : 도메인 안의 localStorage 값을 다 삭제
• length : localStorage의 전체 item 개수를 알려줌
• key() : localStorage에서 인덱스를 활용해 key값을 찾아줌