본문 바로가기

전체 글

🍈 [TIL] HTTP란? / position 사용법 질문 1) HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 답변) HTTP는 HyperText Transfer Protocol의 약자로, 인터넷에서 데이터를 주고받을 수 있는 규칙이라고도 할 수 있습니다. HTTP는 웹 브라우저와 웹 서버 간에 통신을 가능하게 하며, HTML 문서, 이미지, 동영상 등의 웹 리소스를 전송하는 데 사용됩니다. HTTP는 클라이언트가 요청을 생성하기 위한 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델을 따릅니다. HTTP는 클라이언트가 브라우저를 통해서 어떠한 서비스를 URI를 통해 서버에 요청하면 서버에서는 해당 요청에 대한 결과를 응답하는 형태로 동작합니다. HTTP 메시지는 서버와 클라이언트 간에 데.. 더보기
🍈 [TIL] 프레임워크, 라이브러리 / 캐싱이란? 질문 1) 프레임워크와 라이브러리 차이점에 대해 설명해주세요. 답변) 프레임워크란 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미합니다. 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발합니다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래서, 메서드들을 구현하면 됩니다. 라이브러리란 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도.. 더보기
🍈 [TIL] Hoisting, TDZ / parameter와 argument의 차이 질문 1) Hoisitng 이란? TDZ란? 답변) 호이스팅이란 자바스크립트에서 코드를 위에서 아래로 읽어가기 전 변수와 함수, 클래스 등의 선언부를 먼저 읽어들이는 작업을 말합니다. 프로그램 중간에서 변수나 함수를 선언하더라도 프로그램 처음에 선언된 것처럼 다른 문장앞에 생성되고 이를 변수 선언의 끌어올림인 Hoisting이라고 합니다. 사실 호이스팅은 정말 변수나 함수등을 위로 끌어올리는것이 아니라, 변수나 함수를 선언 이전에 사용할 수 있기 때문에 끌어 올려지는 것처럼 보이는 것입니다. 일단 변수 생성과정은 크게 1. 변수선언 2. 초기화 (undefined) 3. 할당 3가지 과정이 있는데 var는 호이스팅 과정에서 변수선언, 초기화(undefined)과정까지 이루어지지만 let,const는 변수.. 더보기
🍈 [TIL] Rest API란 무엇인가? 오늘은 Restful API에 대해 공부해보겠습니다. 오늘의 질문 : Restful API에 대해 설명해주세요. GET,POST 외에 알고있는 메소드와 그 기준을 설명해주세요. RESTful API 가 아닌 것들은 어떤게 있나요? 답변 : 먼저 REST API에서 REST는 정보들이 주고받아지는데에 있어서 개발자들이 널리 쓰이는 일종의 형식입니다. 그리고 API란 것은 티비를 켤때 명령을 내리기위한 도구로 리모컨을 사용하는 것 처럼 API는 인터넷상에서 데이터를 전송하고 이용할 수 있게 하는 소프트웨어 인터페이스를 의미합니다. REST API를 사용하는 이유는 REST기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수와 운용을 편리하게 할 수 있기 때문입니다. 그러므로 REST API는 HTTP를.. 더보기
🍈 [TIL] 웹페이지가 브라우저 랜더링 과정 웹페이지의 브라우저에 랜더링 되어지는 과정은 어떻게되는가? 브라우저의 랜더링 단계는 크게 5단계로 나타낼 수 있습니다. Parsing -> Style -> Layout -> Paint -> Composite 입니다. 이걸 풀어서 설명하면 첫번째 Parsing 단계에서는 HTML파일과 CSS파일을 파싱해서 각각 Tree를 만듭니다. 두번째 Style 단계에서 두 Tree를 결합하여 Rendering Tree를 만듭니다. 세번째 Layout 단계에서는 이전의 단계에서 결헙하여 만든 Rendering Tree에서 각 노드의 위치와 크기를 계산합니다. 네번째 Paint 단계에서는 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만듭니다. 마지막으로 Composite단계에서 레이어를 합성하.. 더보기
🌞 2/15 내배캠 React 76일차 [최종 프로젝트 중 만난 에러들] Next.js의 랜더링이 두번되는 이슈 데이터에 접근을 했을 때 항상 랜더링이 두번 되었다. 그러다보니 우리가 원하는 counter숫자도 2개씩 증가하였다. 모두가 2개씩 증가하면 사실은 별 상관없긴 하지만 해결하는 방법이 있을까 해서 찾아보았다. ReactStrictMode라는 것이 있었다. NExt.js 만의 것이 아닌 React에도 의 형태로 나타나 있는 것이었다. 그럼 ReactStrictMode란 무엇일까? 쉽게 말해 우리가 만드는 application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다. 사실 Next.js에서는 이 기능을 없애는걸 추천하지 않느다고 한다. 프로젝트에 큰 영향이 없다면 그대로 놔둬도 될 것 같다. 방법 next... 더보기
🌞 2/14 내배캠 React 75일차 에러 모음 [ HEIF파일이 읽히지 않는 이슈, setState 비동기 이슈 ] HEIF파일이 읽히지 않는 이슈 사진 파일을 넣어 테스트 하기 위해 내 파인더의 다운로드 폴더에 가장 상위에 있던 파일을 가져와 테스트를 진행 했다. 그런데 그 파일만 화면에 랜더링 되지 않았다. 하필 그 파일이 HEIF 파일이었다. HEIF는 ‘고효율 비디오 압축’이라는 표준을 기반으로 하는 손실 압축 형식파일 이다. 그러다보니 화면에 랜더링이 되지 않는 이슈가 발생했다. 내가 사진이나 다른 파일을 업로드 하고 싶을 때, 허용하고 싶은 파일의 형식을 지정하고 싶다면 쓸 수 있는 코드가 있다. input 테그 안에 들어있는 속성으로 accept="image/png, image/jpeg, image/jpg" 라고 작성해주면 이.. 더보기
🌞 2/9 내배캠 React 73일차 [ Next.js Typescript Firebase CRUD ] 기술사전 노트 작성 코드 컨벤션 folder → lowercase Component → Pascal Case function → camelCase 변수,props → 명사 함수 → 동사로 시작(handle~~~, is ~, on~) id, class → cabab-case 함수명 변수명 작성 시 명확하게 처음 보는사람이 봐도 알아볼 수 있는 의미로 지어주세요. 코드 컨벤션, 프로젝트 기술, 회의록 등 이번주에 있었던 일들을 정리하여 기술사전 노트를 작성하였다. 그리고 개인 기술 파트로 게시물 CRUD를 맡았기 때문에 지금 간단하게 구현해 놓은 CRUD를 ReactQuery로 리팩토링 하기로 했다. Next.js에 Typescript언어의 .. 더보기