프론트엔드 개발자 엄성준 블로그

브라우저 렌더링 과정은 다음과 같다. 1. HTML 파일 다운로드 : 브라우저는 HTML 파일을 서버로부터 다운로드합니다. 2. HTML 파싱 : 브라우저는 다운로드한 HTML 파일을 파싱 하여 DOM(Document Object Model) 트리를 생성합니다. 3. CSS파일 다운로드 및 처리 : 브라우저는 HTML 파싱 중에 CSS파일을 만나면 해당 파일을 다운로드하고 처리합니다. CSS 파일을 처리하여 스타일 규칙이 생성되고, DOM 요소에 스타일 규칙이 적용됩니다. 이 단계에서 이미지의 크기와 위치등의 계산이 이루어집니다. 4. JavaScript 파일 다운로드 및 실행 : 브라우저는 HTML파싱 중에 script태그를 만나면 해당 JavaScript파일을 다운로드하고 실행합니다. 결론은 이미지의..

Next.JS로 만든 포트폴리오 배포 사이트에서 계속해서 이미지 로드 오류가 발생하였다. 계속해서 원인에 대해서 생각해 봤었는데 아무리 봐도 getStaticProps() 문제인 것 같았다. 그래서 교체를 하니 정상적으로 며칠 동안 이상 없이 작동되었다. 그렇다면 왜 getServerSideProps() 일 때는 정상적으로 이미지를 불러왔을까? 그 이유는 아래와 같다. getStaticProps 이 메서드는 정적 생성(Static Generation)을 사용하는 페이지에 사용됩니다. 정적 생성은 빌드 시점에 페이지를 렌더링 하고 미리 생성된 HTML 파일을 제공하는 방식입니다. 이렇게 생성된 페이지는 정적인 상태로 유지되며, 서버에 요청이 발생하지 않습니다. getStaticProps를 사용하여 데이터를..

오늘은 TypeScript의 기본 타입을 다시 복습해 보는 시간을 가졌습니다! // 타입스크립트 복습 interface PersonType{ name:string; age:number; isStudent:boolean; studentNum?:number; } const person = { name:'엄성준', age:25, isStudent:false, } const getPersonAge = (peson:PersonType)=>{ console.log(person.age) } const array1:string[] = ['a','b','c'] // 문자로만 이루어진 배열 const array2:number[] = [1,2,3] // 숫자로만 이루어진 배열 const array3:boolean[] = [..

1. HTML과 HTML5의 차이점 - HTML : Hyper Text Markup Language - HTML5는 HTML 표준의 다섯 번째 업그레이드 버전 - 멀티미디어 기능 - 웹 저장 기능 - 웹 사이트 사용자의 정보를 pc에 저장할 수 있는 매커니즘을 제공함 - 웹 소켓 기능 - 위치 기능 - CSS3 2. GET과 POST의 차이점 GET - 서버에 정보를 조회하기 위해 사용되는 메서드 ex) 게시글 조회, 상품 조회, 회원 조회 - 서버에 정보를 요청할 때, 쿼리스트링을 통해 데이터 전송 - URL 주소에?로 주소로 데이터를 전송함, 길이 제한이 있음 - 서버에 동일한 요청을 여러 번 보내더라도 항상 동일한 응답이 돌아와야 한다는 것을 의미 == '멱등' POST - 서버에 데이터를 생성 또..

Vercel을 통해서 배포를 하려는데 계속 아래와 같은 오류가 났었다. 아무리 검색해도 원인이 나오지 않았었는데 아래의 글을 보고 https://www.reddit.com/r/nextjs/comments/uogl73/i_am_using_reacticon_and_my_imports_have_been/ r/nextjs on Reddit: I am using react-icon and my imports have been rendering in the browser, yet I am getting this error on Verc Posted by u/_yvanehtnioj - 16 votes and 8 comments www.reddit.com 오류가 난 부분의 react-icons뒤에 문자들을 소문자로 변..

먼저 CRA(create react app)를 구축했다는 가정하에 진행하겠습니다. 첫 번째로 vsCode에서 터미널을 켜주시고 npm install -D prettier을 입력해 주시면 됩니다. 이 부분에서 -D를 붙이는 이유는 개발환경에서만 사용하겠다는 의미입니다. 두 번째로 npm i -D eslint-config-prettier를 입력해줍니다. eslint와 formating관련 설정 중에 prettier와 충돌을 방지하기 위해 입력해 주는 것입니다. 세 번째로 폴더에 제일 상위에. eslintrc.json파일을 생성해 줍니다. 그 후. eslintrc.json 파일 안에 아래 문장을 입력해 줍니다. { "extends": ["react-app", "prettier"] } 네 번째로 vsCode좌측..

자연수(10진수)를 8진수와 16진수로 변환하려면 toStirng() 함수의 매개변수로 원하는 진수의 값을 넣어주면 된다. const NUM = 250; NUM.toString(2~36) 만약 toString() 에 2와 36의 사잇 값이 아닌 radix 가 주어지면, RangeError 가 발생하게 된다. 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString Number.prototype.toString() - JavaScript | MDN toString() 메서드는 특정한 Number 객체를 나타내는 문자열을 반환합니다. developer.mozilla.org 다음으로 피..

SPA(SinglePageApplication) : 하나의 페이지로 구성된 웹 어플리케이션 MPA(MultiPageApplication) : 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 새로 렌더링 하는 전통적인 방식 렌더링 방식 SPA -> CSR MPA -> SSR Client와 Server 중 어느 쪽에서 렌더링을 준비하느냐에 따라서 나뉨 👇👇 CSR(ClientSideRendering) : Client - CSR은 클라이언트 측에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 진행하는 것이다. SSR(ServerSideRendering) : Server - SSR은 사용자가 웹 페이지에 접근할 때, 서버에 각각 페이지에 대해 요청하고 서버..

드림 코딩 강의를 통해서 나만의 포트폴리오 제출용 웹을 제작하고 있습니다. 오늘은 웹 로고를 먼저 디자인하였습니다.

최근 블로그 관리에 소홀해진 느낌이 드는 것 같습니다... 왜냐하면 2022년 3학년 1학기부터 준비한 캡스톤 디자인 발표가 끝났기 때문입니다. 저희 팀이 진행한 프로젝트는 1 : 1 멘토링 서비스 플랫폼 'Mentworing'이었습니다. (프로젝트에 대한 자세한 내용은 보고서 작성 후에 상세히 기재할 수 있는 카테고리 개설 후에 작성하겠습니다.) 프로젝트를 진행하면서 느낀 점... 제가 프로젝트에서 맡은 역할은 프론트엔드 개발이었는데요. 뚜렷한 기획 없이 개발을 진행하게 되니 페이지 하나하나를 개발할 때마다 디자인하다 보니 다소 시간이 오래 걸렸고 처음 진행하는 팀 프로젝트이다 보니 백엔드 개발을 하는 팀원과 코드를 결합하는 부분에서 불편함을 느꼈습니다. 그래서 Git에 대한 중요성을 깨달을 수 있었습..