개발이 하고싶은, 첼시를 좋아하는

Developer/TI

자바스크립트 script async/defer 어트리뷰트

async/defer 어트리뷰트 브라우저 렌더링 동작에 대해 공부하다 async/defer 어트리뷰트를 처음 접하게 되었고, 생소한 부분이라 다시 따로 공부한 것을 정리했다. 브라우저 렌더링 과정 정리 브라우저 렌더링 자바스크립트가 가장 많이 사용되는 곳은 웹 페이지/애플리케이션 클라이언트 사이드이다. 웹 페이지/애플리케이션의 클라이언트 사이드 상의 자바스크립트는 브라우저에서 mieumje.tistory.com async/defer 어트리뷰트의 등장 배경 Cats 위와 같은 html이 있다고 가정해보자. 브라우저 렌더링 동작 방식에 의해 위에서부터 아래로 차례로 내려오며 DOM과 CSSOM을 그린다. head tag 내부에서 script tag를 만나면, DOM 생성 과정을 중단하고 자바스크립트 엔진이 ..

Developer/TI

브라우저 렌더링 과정 정리

브라우저 렌더링 자바스크립트가 가장 많이 사용되는 곳은 웹 페이지/애플리케이션 클라이언트 사이드이다. 웹 페이지/애플리케이션의 클라이언트 사이드 상의 자바스크립트는 브라우저에서 실행(HTML, CSS, 자바스크립트)된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 문서를 어떻게 해석하고 그리는지 파악한다면 클라이언트 사이드 자바스크립트 프로그래밍의 효율을 높일 수 있다. 브라우저 렌더링 과정 웹 브라우저에서 URL을 입력하게 되면 서버 측에서 요청을 응답(웹 페이지, HTML, CSS, 자바스크립트)해준다. 서버로부터 요청받은 응답을 통해 렌더링 과정을 거치게 된다. 1. 입력받은 URL 해석 2. DNS 조회(도메인 ➡️ IP 주소, IP 주소 ➡️ 도메인) 3. IP가 존재하는 서버로 이동 ..

Developer/TI

REST API, RESTful API 정리

REST 용어 Representational State Transfer의 약자로 로이 필딩 논문(2000년)에 처음으로 소개되었다. Wiki 정의를 보면 다음과 같다. REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. 이 용어는 로이 필딩(Roy Fielding)의 2000년 박사학위 논문에서 소개되었다. 필딩은 HTTP의 주요 저자 중 한 사람이다. 이 개념은 네트워킹 문화에 널리 퍼졌다. 로이 필딩은 잘 설계되어 있는 HTTP를 제대로 사용하지 못하는 것에 대한 아쉬움이 있어 최대한 활용할 수 있는 REST 아키텍처를 발표했다고 한다. REST API, RESTful API란? REST는 A..

Developer/React

[React] 이미지 업로드 미리보기(FileReader / createObjectURL)

STU-TI 최종 프로젝트 회고 최종 프로젝트를 한마디로 요약해보자면, '최고의 팀원들과 성공적인 마무리!'라고 할 수 있다. 부족한 점도 많았던 내가 성공적으로 프로젝트를 마무리한 것은 좋은 팀원들과 함께해서였다. 물 mieumje.tistory.com 지난 최종 프로젝트에서 이미지 업로드를 다뤄야 했었다. 사용자로부터 이미지를 받고, 이미지 검증 후 미리보기를 보여주고 Form 입력이 완료되면 최종적으로 이미지가 포함된 Form Data를 백엔드 서버로 전송해야 했다. 내가 맡은 스터디 생성/수정 페이지에서는 FileReader를 사용했고, 다른 분이 작업한 커뮤니티 포스트에서는 createObjectURL 방식을 사용했다. 업로드한 이미지를 미리 보여주기 위해 사용한 방법에 차이가 있어 정리를 하게..

프로그래머스/데브코스 프론트엔드

STU-TI 최종 프로젝트 회고

최종 프로젝트를 한마디로 요약해보자면, '최고의 팀원들과 성공적인 마무리!'라고 할 수 있다. 부족한 점도 많았던 내가 성공적으로 프로젝트를 마무리한 것은 좋은 팀원들과 함께해서였다. 물론 아쉬운 점도 있고 보완해야 할 점도 많지만 기획했던 대로 프로젝트를 마무리할 수 있었고, 팀원들에게 배운 것도 많고 새로운 도전을 성공적으로 해결한 것 같아 긍정적인 면이 더 많다. KPPL 팀원 여러분 같이 프로젝트를 진행해서 영광이었고 너무나도 감사했습니다! 프로젝트 소개 STU-TI Study + MBTI MBTI를 기반으로 나와 잘 맞는 스터디를 구하거나 스터디 원을 구하는 것을 도와주는 서비스 입니다. 프로젝트 링크 서비스 배포 링크 서비스 github repository 링크 서비스 소개 영상 링크 팀 노션..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-07-06 / 78일차 (useReducer)

Context API에 대한 강의에서 ContextProvider 컴포넌트에서 로컬 state를 관리하기 위해 useReducer hook을 사용했었다. 얼핏 기억하기로는 그때 당시 강의에서 useState와 유사한 역할을 한다고 간단한 설명을 하고 적용했던 것으로 기억한다. useState와 유사하다니 그런 줄만 알고 넘어갔었는데, Context API를 직접 다시 사용해보니 useState를 사용할 때와 다르게 사용되는 것을 보고 useReducer는 useState와 어떻게 다른지 알아야 할 것 같다는 필요성을 느끼게 되었고 간단하게 정리해보았다. useReducer 우선 useState와 유사한데 굳이 사용하는 이유는 무엇일까? useReducer를 많이 사용해보지 않아 정확하게 사용하는 이유를 ..