record4me

코드 리뷰 후 배운 것 - 헤더 메뉴의 스크롤 기능 작업 function scrollPage(target) { let position = document.querySelector(target).offsetTop; window.scroll({ top: position-80, behavior: 'smooth' }); } => 해석하면 scrollPage란 함수가 실행되면 target이란 매개변수로 값이 들어와 querySelector로 해당 값의 요소찾아와 그 값의 좌표를 position이란 변수에 담아서 윈도우 브라우저에서 스크롤을 쓸 때, 내 문서를 특정 위치로 이동 시켜달라는 거야. 그리고 top의 상단 위치에서 -80 아래에 해당하는 위치에서 시작해서 behavior란 옵션으로 smooth , 즉 부..

프로젝트 시작 팀장정하기 일단 팀장부터 정하자며 사다리 타기를 돌렸으나 돌린 사람인 내가 팀장이 됐어. 그리고 발표와 시연영상 제작자를 뽑기 전에 몰래 돌려봤는데 전부 내가 되서ㅋㅋ 결국 이건 사다리타기의 억까가 아닌가 하며 다른 팀원분께 한 번 돌려달라고 부탁드려서 그렇게 발표와 시연영상 제작을 다른 분들과 분담을 하게 됐지. 차근차근 프로젝트에 들어갈 내용도 다같이 기획하고 채우고 프로젝트 구성과 디자인, 기능 분담을 어떻게 할 지 기획을 순조롭게 시작했어. 와이어프레임 만들기 & 디자인, 기능 부여하고 역할 분담 와이어프레임을 짜는 것부터 어디에 하면 좋을까 어떻게 그리면 좋을까하며 다같이 논하다가 figma에 작성하기로 했어. 정말 횡재였던 건 같이 하는 팀원분들이 전부 능력자라 금방 습득하거나 ..

난제봉착 문제 jquery라이브러리를 사용하며 js에서 동적으로 html을 생성해서 만든 요소인 모달창을 $("#id").click이벤트로 닫기 기능을 처리하려고 했지만 닫기 동작이 되지 않았어. 시도 1. 혹시 class나 id가 잘못 됐는 지 다시 한 번 적어보고 2. id대신 class를 써서 사용해보고 3. 동작이 되는 다른 식을 가져와서 클릭이벤트가 일어나는 요소만 바꿔보기도 하고 4. 추가한 요소가 혹시 걸림돌이 되지 않는 지 display : none을 시키거나 제거해서 확인해봤어. -script -문제의 그 동적요소 //js에서 동적으로 만든 요소들이야. let data_html = ` ${name} × 장점 ${goodPoint1} ${goodPoint2} 협업스타일 ${workStyle..

배운 것 firestorage의 내장함수 -파일 업로드 기능을 만들어서 파이어스토리지를 통해 이미지를 가져오고 미리보기 화면에 그 이미지를 보이게 하기 위해 찾아보게 됐어. 파일 업로드엔 아래와 같은 내장 함수들이 필요해. -getStorage -ref -uploadBytes => 해당 내장함수를 사용할 때 import를 생성해줘야 해. 1-아래의 문을 통해 필요한 적절한 참조를 만들어줘 import { getStorage, ref } from "firebase/storage"; // Create a root reference const storage = getStorage(); // Create a reference to 'mountains.jpg' const mountainsRef = ref(stor..

배운 것 리눅스 기초 명령어 -루트 -pwd 최상위 경로로 이동해줘. -ls 파일을 보여줘 -ls -a 숨겨진 파일을 모두 볼 수 있어. -cd ls 명령어에서 확인된 폴더로 이동 가능해. -cd .. 한 단계 이전 혹은 위의 폴더로 이동해 ..은 한 단계 위의 폴더라는 의미야. -mkdir 폴더명 폴더를 만드는 명령어야. -touch 현재 경로에서 파일을 생성하는 명령어야. git기초 -버전 관리 도구(형상 관리 도구)라고도 하고 -한 눈에 이해하기 쉽게는 코드 변경점 기록라고 할 수 있어. -작업한 코드를 온라인 저장소에 백업하고 공유해서 협업하기 위해 사용해. 필수 명령어 -git init 코드 관리를 시작하는 명령어야. 프로젝트 싲가 전 딱 한 번만 입력하면 돼. 정확한 프로젝트 폴더(경로)에서 ..

-강의 -코딩이 처음이어도 쉽게 배우는 웹개발 A to Z -3주차 7번째 강의까지 보고나서 1-jQuery 적용 -여러 제이쿼리 기능이 있어 -toggle()함수로 열고 닫아서 보여주고 사라졌을 땐, css의 display값이 none이 붙어. -값을 가져 온 걸 붙여주고 새로운 내용물을 생성했어. -html의 내용을 javascript에 가져와서 변수를 지정하고 내용을 저장했는데 문자열로 넣을 수 있어. 이때 가져온 html내용을 백틱(`)으로 감싸서 저장해줬어. - 이렇게 백틱으로 감싸는 방식을 "템플릿 리터럴"이라고 해. -태그같지만 템플릿 리터럴로 인해 문자열이 된 거야. -html내용을 변수에 템플릿 리터럴로 저장할 때 플레이스 홀더를 이용해서 표현식을 넣었어. *템플릿 리터럴 : 이중 따옴표..

-강의 -코딩이 처음이어도 쉽게 배우는 웹개발 A to Z -1주차 7번째 강의까지 보고나서 - 배운 것으로 1-웹의 작동 원리 - 웹개발은 보이는 홈페이지를 만드는 기술인데, 어떤 개발자도 개발의 기초는 웹을 아는 걸로 먼저 시작해. - 인터넷 연결과 상관없이 보여주는데 그건 이미 관련 자료를 내 컴퓨터로 가져와서 인터넷 연결이 끊어져도 보이는 건 그대로야. 대신 뭔가를 클릭해서 동작시키면 그때서야 안 된다는 신호를 주고. - 주소창에 naver.com를 쳤을 때 일어나는 과정으로 웹이 동작하는 걸 알 수 있어. -> 주소창에 naver.com를 치면 -> 클라이언트(내 컴퓨터)가 naver.com에 대응하는 서버(naver.com에 해당하는 컴퓨터)에게 필요한 뭔가(자료)를 요청하고 -> 서버는 요청..