분류 전체보기

NextJS의 장점 NextJS는 React로 풀 스택 어플리케이션을 빌드 할 수 있게 만들어 준다. 이 과정에서 데이터 fetch와 렌더링은 더 쉽고 효율적으로 변한다. 파일 시스템 라우팅(File-based Routing)의 도움으로 경로를 설정할 수 있다. 이는 추가적인 코드 기반 구성이나 추가적인 패키지가 필요 없다는 것이다. NextJS가 서버에 있는 모든 페이지와 구성 요소를 렌더링한다는 것이다. 이말은 화면에 전송되는 콘텐츠, HTML 문서 등 최종적으로 화면에 그려지는 모든 콘텐츠를 이미 포함한다는 것이다. 이는 SEO에도 강점을 가진다. 1년 7개월차 프론트엔드 개발자의 일기 2023년 10월 26일 NextJS 14가 출시 되었다. 2023년 한해는 NextJS 13으로 SI 프로젝트를..

REST API란? REST 원칙을 적용하여 서비스 API를 설계한 것을 말합니다. REST란 무엇인가? 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것입니다. HTTP URI를 통해 자원을 명시하고 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것을 말합니다. API란 무엇인가? 쉽게 말해 프로그램끼리 통신할 수 있도록하는 중재자입니다. 응용프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제거할 수 있게 만든 인터페이스입니다. Restful API REST API를 제공하는 웹사이트를 Restful 하다고 할 수 있습니다. Restful API를 통해 이해하기 쉬운 API를 만드는 것이 목적입니다. GE..

positon 속성과 배치방법 position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. static : 요소를 일반적인 문서 흐름에 따라 배치합니다. relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치합니다. (바뀌지 않는 위치에 지정) sticky : static + fixed 특징을 동시에 가집니다. 용어 공부 오프셋(offset) : top, left, right, bottom 값을 ..

호이스팅(hoisting)이란? 호이스팅이란 "끌어올린다"라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말합니다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있습니다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환합니다. 여기서 주의할 점은 "선언문"이라는 것이며 "대입문"은 끌어올려지지 않습니다. 기술적으로 정확한 답변 : 실행 컨텍스트 생성 시, 렉시컬 스코프 내의 선언이 끌어올려 지는 것이 호이스팅입니다. 호이스팅이 발생하는 원리 (모던 자바스크립트 Deep Dive 23장 실행 컨텍스트 발췌) 자바스크립트 엔진은 소스코드를 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다. 소스코드 ..

주소창에 google.com을 입력하면 일어나는 일 사용자가 웹 브라우저를 통해 google.com을 입력하면 URL 주소 중 도메인 네임 부분을 DNS 서버에서 검색합니다. DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달합니다. 브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송됩니다. 서버는 response 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다. 브라우저는 response를 받아 파싱하여 화면에 렌더링합니다. 용어 공부 DNS(Domain Name System) : 도메인 이름 시스템은 사람이 읽을 수 있는 도메인 이름(예: www.amazon.com..

브라우저 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링엔진을 사용합니다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어집니다. 1. HTML를 파싱 후, DOM 트리를 구축합니다. 2. CSS를 파싱 후, CSSOM 트리를 구축합니다. 3. Javascript를 실행합니다. - 주의 : HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다. 4. DOM과 CSSOM을 조합하여 렌더트리를 구축합니다. - 주의 : display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다. 5. 뷰포트 기반으로 렌..

문제 현상 개인 프로젝트 진행 중, main 브랜치에서 신규로 feature 브랜치를 생성하여 commit을 했는데 잔디가 심어지지 않는 현상이 있었다. 이유 main branch가 아닌 다른 곳에 commit을 하면 잔디가 심어지지 않는다. Github의 브랜치 내에서 확인해보면 commit된 것을 확인 할 수 있었지만, main branch에 PR을 받기 전까지는 초록색 글자가 나오지 않는다. 해결 방안 Main 브랜치에서 Pull Request를 받는다. 브랜치 내의 페이지에서 'setting > general'에 들어가 'default branch'를 변경해준다.

개발 목표 Code Pen이라는 온라인 코딩 툴 사이트가 있다. - https://codepen.io/ 해당 사이트와 같이 코드를 입력하고 번들링하여 실시간으로 보여주는 사이트를 React로 만들고자 한다. 단, 로그인과 같은 인증 기능은 제외한다. 코드 입력 창에서 발생할 수 있는 문제점 간단하게 만들 수 있을 것 같았지만 코드를 입력하는 창을 구현하기 위해서는 아래와 같은 이슈사항들이 있었다. 코드 입력창에 오류를 발생시키는 문법 등의 잘못된 코드가 작성될 수 있다. DOM을 조작하는 코드로 인해 예상하지 못한 현상이 발생할 수 있다. ex) document.body.innerHTML = ‘’; 사용자가 악의적인 코드를 넣을 수 있다. ex) for (var i = 0; i { axios.post('..

트러블 이슈 코드 번들링 사이트를 만들던 중 버그가 발견 되었다. 아래 이미지를 보면 왼쪽 검은색 영역이 코드를 작성하는 부분이고, 오른쪽 흰색은 그 코드의 결과가 나오는 화면이다. 그런데 새로고침을 할 때마다 흰색 영역이 한 번 검은색으로 깜빡 거리는 현상이 있었다. code-cell.tsx (코드 결과를 보여주는 React Component) import './code-cell.css'; import { useEffect } from 'react'; import CodeEditor from './code-editor'; import Preview from './preview'; import Resizable from './resizable'; import { Cell } from '../state';..

문제 상황 .tsx에서 아래의 코드 input의 “ref”에 빨간색이 나타나며 마우스를 오버하면 에러 문구가 나타났다. import { useRef } from "react"; export default const UserSearch: React.FC = () => { const inputRef = useRef(); return ( User Search // 아래 ref에 오류 표기 ); }; 에러 문구 Type ‘MutableRefObject' is not assignable to type 'LegacyRef | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are ..