Front-end

브라우저 렌더링 과정?결론부터 말하자면, 상황에 따라 더 효율적이고 최적화된 웹 페이지를 작성하기 위해 브라우저 렌더링 과정을 이해하는 것이 중요합니다. 렌더링 과정을 알면 페이지 로딩 속도, UX, 성능 최적화 측면에서 큰 차이를 만들 수 있습니다.웹 브라우저는 HTML + CSS + JavaScript로 구성된 코드를 읽고 렌더링합니다. 따라서, 우리는 브라우저가 어떤 순서로 어떻게 파일을 해석하고 나타내는지를 이해해야 합니다. 브라우저 렌더링 과정렌더링 과정을 알아보기전 파싱, 렌더링, DOM이 무엇인지 이해해야 합니다. 파싱(Parsing) 파싱은 프로그래밍 언어 문법에 맞게 작성된 텍스트 파일을 기계가 이해할 수 있는 구조로 변환하는 과정입니다. 웹 페이지는 HTML, CSS, JavaScrip..

Recoil? 상태관리?React로 개발을 진행하다 보면 부모 -> 자식으로 state를 전달해야 하는 경우가 생긴다.컴포넌트 트리가 깊지 않다면 props를 통해 전달하면 쉽다. 하지만 그렇지 않은 경우가 대부분이다.A->B->C->D->E와 같은 컴포넌트 트리구조가 있고, A에서 E로 state를 전달해야 한다면 우리는 B, C, D 모두에 props로 전달하는 과정을 거쳐야 한다.  또한, 여러 컴포넌트가 동일한 state를 필요로 하고, 그 컴포넌트들이 서로 다른 계층에 있다면, props로 전달하기가 매우 번거로워진다. 상태를 필요로 하는 컴포넌트가 서로 연관되지 않은 곳에 위치한다면, 상태 공유는 어렵고 복잡해진다.React에는 Redux, Recoil, Zustand... 등 많은 상태관리 ..

전체 코드(js)class Member { constructor(id, pw, name) { this.id = id; this.pw = pw; this.name = name; }}document.addEventListener('DOMContentLoaded', () => { const input_userId = document.querySelector('#uid'); const input_userPw = document.querySelector('#pw'); const input_userName = document.querySelector('#uname'); const input_eId = document.querySelector('#..

요구사항1. 회원 정보 초기 저장 - 사용자로부터 아이디, 비밀번호, 이름을 받아 localstorage에 저장합니다.2. 기존 회원 정보 수정 및 삭제 - 사용자의 정보를 수정하거나 삭제하면 localstorage에도 그 내용이 반영되도록 합니다. - 이때 사용자의 고유키는 인덱스로 하되 삭제의 경우 오름차순으로 인덱스 번호가 변경되도록 합니다. ex) 0번 user, 1번 user, 2번 user 존재 시, 1번 user 삭제 후 이전의 2번 유저의 index는 1번이 되도록.3. 회원 리스트 - 등록된 회원의 정보를 index, 아이디, 비밀번호, 이름, 수정/삭제 순으로 나열합니다. 사용querySelector()const input_userId = document.querySelector('#u..

해당 프로젝트는 back-end가 없기 때문에, 모든 동작이 front-end에서 진행됩니다.때문에 해킹에 취약합니다. 우리는 오늘 이 문제를 해결할겁니다.우선 firebase 홈페이지 -> Firestore Database -> 규칙 으로 가줍니다.코드를 보시면, read, write를 2024년 5월 3일까지 허락한다고 적혀있습니다.일단 모든 주석을 제거하고우선 read만 허용하는 rule을 추가할겁니다.이렇게 수정하면 권한이 있는 누구든 읽기를 허용한다는 겁니다.작성을 완료했다면 게시해줍니다.우리의 사이트로 돌아가서 새로고침하면 정상작동 되는것을 확인할 수 있는데, 변화가 없어 모르겠다면 read를 write로 바꿔서 적용하고,다시 새로고침하면 read를 할 수 없다는 것을 알게됩니다.이제 writ..

이제 만들어진 어플리케이션을 배포할겁니다.우선 Firebase -> 빌드 -> Hosting을 눌러줍니다.시작하기를 눌러주시면 명령어가 뜨게됩니다. 복사해주시고 vscode 터미널에 입력하고 실행해줍니다.다음을 눌러주시고 또 다른 명령어가 나옵니다.만약 이전 명령어 설치가 완료되었다면 다음 명령어를 복사해서 실행해줍니다.로그인이 되어있지 않다면 y를 입력하고 브라우저에서 로그인을 진행해주시면 됩니다.완료되면, 다음 명령어를 복사해서 실행해줍니다.방향키로 Hosting으로 온 다음 스페이스바로 선택하고, Enter로 실행합니다.이후 Use an existing project 를 선택해서 Enter배포하려는 프로젝트 선택 후 Enter.여기까지 완료하면, What do you want to use as yo..

이번에는 현재 로그인된 사용자의 tweets(게시물)만 가져오는 작업을 할겁니다.tweets 상태를 만들어주고const [tweets, setTweets] = useState([]); const fetchTweets = async() => { const tweetQuery = query( collection(db, "tweets"), where("userId", "==", user?.uid), orderBy("createdAt", "desc"), limit(25) ); const snapshot = await getDocs(tweetQuery); const tweets =..

이번엔 사용자의 프로필을 만들어 볼겁니다.profile.tsx로 가서 기본적인 폼을 작성합니다.import styled from "styled-components";import { auth } from "../firebase";const Wrapper = styled.div``;const AvatarUpload = styled.label``;const AvatarImg = styled.img``;const AvatarInput = styled.input` display: none;`;const Name = styled.span``;export default function Profile() { const user = auth.currentUser; return ..