SPA (Single Page Application)

MPA와 SSRMPA (Multi Page Application)최초 접속한 페이지 외에도 새롭게 서버가 생성한 페이지가 존재하고, 그것을 불러와 사용하는 경우 SSR (Server Side Rendering)초기화면 로딩 시 서버에서 완성된 HTML 페이지를 만들어 브라우저에 전송하는 방식렌더링: 시각적인 요소들을 그려내는 것이 아니라 HTML 문서 자체를 생성하는 과정서버에서 생성된 HTML이 브라우저로 전송 -> 브라우저가 시각적인 페이지를 표시(브라우저 렌더링)으로 이어짐서버에서의 처리 과정을 통해 초기 페이지 로딩 속도를 향상, 검색 엔진 최적화(SEO)에 유리하게 작용서버에서 사전에 페이지의 주요 내용을 포함시킬 수 있기 때문에 검색 엔진이 페이지 내용을 더 쉽게 인식  SPA (Single ..

• format_list_bulleted React
• · 2024. 8. 8.
• textsms

[JS] 단축평가 (||, &&, ?., ??)

논리합연산자 ( || )논리합 연산자를 활용해 기본값을 설정할 수 있다.if-else 혹은 삼항연산자 등을 활용하는 경우를 훨씬 간단하게 표현할 수 있다는 것!const person = { age: 30,};const getUserName = (user) => { return user.name || "신원미상";};const getUserName2 = (user) => { if(!user.name) return "신원미상"; else return user.name;};  논리곱연산자 ( && )특정 조건이 성립할 때 수행할 내용을 지정해줄 수 있다.const loggedIn = true;const userName = "르탄이";loggedIn && console.log(`환영합니다. ${userN..

• format_list_bulleted JavaScript
• · 2024. 8. 8.
• textsms

[JS] Destructuring, Spread Operator, Rest Operator

Destructuring객체객체 내부의 요소들을 쪼개서 사용할 수 있다 const person = { name: "르순이", age: 28,};function greet({age, name}) { console.log(`안녕하세요. 제 이름은 ${name}이고, ${age}살 입니다.`);}greet(person);위처럼 사용하는 경우 객체 내부에서 요소의 순서와 분해된 순서가 달라지면 영향이 있지 않을까 생각할 수 있지만, key의 이름과 일치하는 변수에 할당되므로 영향 없다! 객체 Destructuring 사용 예시const movie = { title: "Inception", // 생략};const { title } = movie; // "Inception"// --------------..

• format_list_bulleted JavaScript
• · 2024. 8. 8.
• textsms

팀프로젝트 - 영화검색사이트 만들기

프로젝트 소개1. 진행 기간: 2024.07.31 ~ 2024.08.06 (7일)2. 인원: 5명3. 개발 환경HTML5 / CSS / Vanilla JSFirebase (Auth, Firestore DB)TMDB API (영화 데이터 조회)4. 깃허브 GitHub - spmrsong/movieDiveContribute to spmrsong/movieDive development by creating an account on GitHub.github.com 5. 팀 노션 16조_코드다이브 | Notion4. 와이어프레임teamsparta.notion.site + 정리해서 팀원분들께 공유했던 기획 내용   6. 와이어프레임 FigmaCreated with Figmawww.figma.com  구현 기능1. ..

• format_list_bulleted 프로젝트/팀 프로젝트
• · 2024. 8. 7.
• textsms

[24.08.06] 팀프로젝트 6일차

내일은 발표! 오늘 마무리를 하고 발표준비를 하기로 했다.발표하며 소개할 내용들을 정리하고있는데 담당 튜터님이 오셔서 코드를 보며 개선할 부분을 짚어주셨다.더보기1. 테스트용 console.log 지우기2. config/URL 등 상수들 하나의 파일에 모아 임포트해 사용하기3. 함수 내부와 함수 호출에서 사용하는 변수명이 다를 경우 의미를 정확하게 할 수 있는 이름이 무엇일지 생각해보기4. 구조분해할당 사용해서 fetch한 데이터들 더 가독성 좋게 받아보기5. 댓글 시간 2024-08-06과 같은 양식으로 출력하는 방법 -> toISOString으로 받아 어떻게 그 부분만 받아 사용할 수 있을지 고민해보기 (split, slice 활용)6. 주석 작성 습관 계속 가져가기 bbb -> 추후 주석을 자동으로..

• format_list_bulleted 일지
• · 2024. 8. 6.
• textsms

[24.08.05] 팀프로젝트 5일차

css 최우선순위 속성 적용, 구글 아이콘 속성 적용하기구글폰트의 심볼&아이콘에서 임포트해온 아이콘이 기본 속성에의해 색상, 폰트 사이즈 변경이 먹히지 않았다. 자바스크립트로 스타일 속성을 적용해보니 태그에 직접 스타일이 추가되면서 속성이 적용됐는데, 그 때 아예 스타일 적용이 되지 않는게 아니라 우선순위 문제구나 하는 걸 깨달았다. css 파일에서 !important 를 지정해주었다!.saveButton { /* 생략 */ text-shadow: 0px 0px 3px black !important; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;}  중첩된 요소간 이벤트 버블링 막기위 요소들은 영화 카드..

• format_list_bulleted 일지
• · 2024. 8. 6.
• textsms