gggimmin 개발 블로그 gggimmin 개발 블로그

🚩 React 란? React.js 는 SPA( Single Page Application ) 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법이다. ✅ SPA ..... MPA ? Single Page Application, 한 개의 페이지로 이루어진 애플리케이션 이라는 말이다. Multi Page Application 과는 상반된 개념이다. 기존 MPA 의 문제점은 좋아요를 눌렀는데 웹사이트가 다시 로딩을 해야한다거나, 요즘 같이 리렌더링( re-rendering )이 많은 상황에선 계속해서 깜빡거릴 수 밖에 없다. 반면 SPA는 이름 그대로 딱 한개의 페이지로 구성된 웹 앱이다. 서버에 1회 리소스를 요청하며, 그 이후에 무언가가 필요할 때 데이터만 ..

자바스크립트 강의 이후에 바로 찾아온 개인 과제에 이어, 팀원들의 과제 중 하나를 선택하여 팀 프로젝트로 발전시키는 과제였다. 기간은 2024.01.10 ~ 2024.01.15 (4일)이 주어졌다. 강의를 듣고, 개인 과제를 완성하고, 바로 팀 과제로 들어가니 정신도 없고 해야할 것도 많았지만 묵묵히 자기 맡은 일을 다해준 고마운 팀원들덕에 무사히 4일간의 프로젝트를 마칠 수 있었다. 🚀 프로젝트 소개 - 프로젝트 명 : FlickFinder - Movie Search Web - 개발기간 : 2024.01.10 ~ 2024.01.15 ( 4일 ) - 프로젝트 인원 : 4명 ( 프론트엔드 4명 ) - 프로젝트 소개 : TMDB api 를 이용하여 현재 상영중인 영화, 최고평점 영화, 인기있는 영화의 상세 ..

✅ Git 커밋 메세지 컨벤션이란? 프로젝트의 참여자들이 일관된 형식을 가진 커밋 메세지를 작성하기 위한 규칙을 말한다. ✅ 왜 Git 커밋 컨벤션을 지켜야할까? 정해놓은 규칙에 따라 커밋 메세지를 기재하면 개발자들이 서로의 작업을 이해하기 쉽고,효율적으로 운영하기 쉽다. 일관된 형태의 커밋 메세지는 높은 가독성을 보여주고, 이를 통해 작업 내역이나 변경 내역을 쉽게 파악할 수 있다. 또한, 소스 변경 이력을 효율적으로 추적할 수 있으며 문제 발생시 빠르게 원인을 찾을 수 있다. 커밋 컨벤션을 적용하지 않았던 과거 커밋 메세지를 완전 엉망으로 쓰진 않아서 어떤 내용의 커밋인지 대충 이해할 수 있다. 하지만 저건 커밋 메세지가 두개이기에 이해하기 쉬운거지 나중에 프로젝트를 하며 커밋 메세지가 누적될수록 가..

클래스(Class)는 다양한 종류의 물건을 만드는 설계도와 비슷한 개념이다. 설계도를 통해 어떤 물건을 만들 수 있는지, 책상이 가지고 있는 특징(이 특징은 변수 또는 속성과 메서드)은 무엇인지 알 수 있다. 인스턴스(Instance)는 이 설계도를 보고 만들어진 실제 물건이라고 생각해볼 수 있다. 실제 물건의 모양, 크기, 색상, 재료 등은 모두 설계도에 따라 만들어지며 이러한 물건들은 모두 다른 인스턴스가 된다. 이렇게 클래스는 객체를 만들기 위한 설계도라 할 수 있고, 이 설계도를 바탕으로 만들어진 실제 객체들은 인스턴스라고 할 수 있다. ✅ Class 란? class Person { // constructor는 이름을 변경할 수 없어요. constructor(name, age) { // 이름(na..

웹 페이지의 작동 원리는 이렇다 1. 사용자가 브라우저에 ' www.naver.com ' 주소를 입력한다. (💡 사용자 = 브라우저 = 클라이언트, 같은 의미 ) - 클라이언트가 서버에게 요청(request) 2. HTML 문서를 서버로부터 수신. - 네이버서버는 사용자에게 응답(response) - 그 응답은 바로 HTML 문서 3. 브라우저가 HTML 파일을 해석 (parsing 파싱) - 브라우저의 렌더링 엔진이 서버가 준 HTML 문서를 렌더링 - 렌더링 엔진이 HTML 문서에 코드를 한줄, 한줄 보면서 해석 4. 자바스크립트가 알아들을 수 있는 방식으로, 해석한 내용을 토대로 DOM Tree를 구성. (위의 사진처럼 ) 5. DOM Tree 랑 CSSOM Tree를 묶어 Render Tree를 ..

자바스크립트 파일을 작성하다보면 스크립트 파일을 에 위치할 때도 있고, 태그의 맨 아래에 위치할 때도 있다. 자세하게 다뤄보지 않아서 막연하게 이유가 있겠거니 생각하다가 오늘 자세하게 어떤 순서로 흘러가는지 흐름을 알아보기로 했다. 우선은 안에 스크립트가 위치하는 경우이다. 이런 경우는 HTML 파일이 한 줄씩 HTML 파일을 읽다가 스크립트 파일을 만나면서 HTML 파일을 파싱하는걸 잠시 멈추고 필요한 자바스크립트 파일을 서버에서 다운(fetching)받고, 이것을 실행(executing)한 다음에 다시 HTML 파싱하는 부분으로 넘어간다. 이렇게하면 자바스크립트의 파일이 엄청 크고 다운받을게 많다면 사용자가 HTML 파일을 읽어볼 수 있을때까지의 시간이 많이 소요된다. 그래서 스크립트 파일을 헤드에 ..

팀 소개 미니 프로젝트가 끝나자, Javascript 강의와 함께 찾아온 개인 과제... Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다. 영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다. 대략적인 과제에 대한 소개는 이렇다. Api 가져오기부터 카드로 정렬해서 나타내기까지 엄청 많이 헤매는 바람에 몇시간이 훌쩍 지나갔다. 그런데 정말 문제가 생겼다. Input 창에 Api에 존재하는 영화를 검색 검색 결과가 없습니다.. 콘솔 창에는 Cannot read properties of null ( reading 'addEventListener' ) 이라는 메세지가 출력되었다. 이 오류에 대해 찾아보니 이 오류는 ' addEventL..

1. 호이스팅 (Hoisting) 의 개요 ✅ 호이스팅 이란? JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다. ✅ 호이스팅 1. 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태이다. (JS 엔진은 코드 실행 전 이미 모든 변수정보를 알고 있는 것) 2. 변수 정보 수집 과정을 이해하기 쉽게 설명한 '가상 개념' 2. 호이스팅 (Hoisting) 의 규칙 1. 호이스팅 법칙 1 : 매개변수 및 변수는 선언부를 호이스팅 합니다. //action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다) //act..