일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- js
- Til
- React
- 의사클래스
- useEffect
- 특성선택자
- 개발일지 #TIL #프론트엔드 #HTML
- 부트캠프 #개발일지 #TIL #Position #위치
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- 템플릿스트링
- JS예제
- CSS
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- 부트캠프 #CSS #개발일지 #TIL
- useState
- 개발일지
- 깃허브오류
- 리액트
- textContent
- 알고리즘
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- ㅜㄹㄹ
- 결합선택자
- appendChild
- 부트캠프
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- querySelector
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
- Today
- Total
목록전체 글 (156)
나의 개발일지
Get, Post의 차이 GET 데이터 조회를 목적으로 하며, HTTP header URL에 Query String 형태로 데이터를 전송하는 방식 url에 데이터를 담기에 길이가 제한적이며 보안에 취약하다. POST 데이터 추가 목적으로 사용되며 HTTP Body에 데이터를 추가하여 전송하는 방식 GET 방식보다 데이터 크기를 크게 할 수 있으며 보안적으로 더 나음 속도가 GET 방식보다 비교적 느림 웹 동작 방식 사용자는 브라우저에 URL을 입력 브라우저는 DNS를 통해 서버의 진짜 주소를 찾음 HTTP 프로토콜을 사용해 HTTP 요청 메세지 생성 TCP / IP 연결을 통해 HTTP 요청이 서버로 전송 서버는 HTTP 프로토콜을 활용해 HTTP 응답 메세지 생성 TCP / IP 연결을 통해 요청한 컴..
호이스팅 (Hoisting) hoisting 의 사전적 의미 : 끌어 올리기, 들어올려 나르기. 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상 단순하게 설명하자면 단어 뜻 처럼 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 '끌어올려~~'진 듯한 현상이다. 포인트는 물리적으로 '끌어올려'지는 것이 아니라 자바스크립트 엔진이 먼저 전체 코드를 한 번 스캔하고 실행컨텍스트에 미리 기록해 놓기 때문에 이런 현상이 발생하는 것이다. var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다. 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않는다. 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다. 그 사이의 시간을 TDZ..
Data Fetching React에서 일반적으로 data를 fetching 하는 방법 "use client"; import { useEffect, useState } from "react"; export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const response = await fetch( "https://nomad-movies.nomadcoders.workers.dev/movies" ); const json = await response.json(); setMovies(..
도메인(Domain)과 네임서버, DNS 도메인이란 인터넷 주소를 언급할 때 흔히 도네임 또는 도메임 이름이라고 한다. 도메인은 웹사이트의 위치를 나타낸다. 예를 들어 도메인 이름 "google.com"은 IP 주소 "142.250.196.142"를 가리킨다. 도메인과 URL의 차이점 웹 주소라고 하는 URL에는 사이트 도메인 이름과 전송 프로토콜 및 경로 등의 정보가 포함되어 있다. 네임서버란 해당 도메인에 매핑되는 ip주소로 변환해주는 것 ex) abcd.com => 123.123.123.123 DNS란 Domain Name System의 약자로 도메인 이름을 IP 주소로 바꿔주는 역할을 하는 시스템 계층이다. 일종의 전화번호부 같은 역할이다. 이로 인해 우리는 숫자로 되어 있는 IP 주소를 기억하지..
Route groups 사용 방법 : 폴더 이름을 ( ) 괄호로 묶어주기 라우트 그룹의 이름 지정은 조직화를 위한 것이외에는 특별한 의미가 없으며 URL 경로에 영향을 주지 않는다. 라우트 그룹을 포함하는 라우트는 다른 라우트와 동일한 URL 경로로 해석되어서는 안된다. 예를 들어, 라우트 그룹은 URL 구조에 영향을 주지 않으므로 (marketing)/about/page.js와 (shop)/about/page.js는 모두 /about으로 해석되어 오류가 발생할 수 있다. 최상위 레이아웃(layout.js 파일)이 없는 상태에서 여러 개의 루트 레이아웃을 사용하는 경우, page.js 파일은 라우트 그룹 중 하나에 정의되어야 한다. 예를 들어, app/(marketing)/page.js와 같은 형식이다...
TCP와 UDP의 차이점 연결 지향성: TCP(Transmission Control Protocol): 연결 지향적인 프로토콜로, 통신하기 전에 연결을 설정하고, 통신이 끝나면 연결을 해제한다. 이는 데이터를 신뢰성 있게 전송하고 수신 확인을 통해 데이터 손실을 방지한다. UDP(User Datagram Protocol): 비연결 지향적인 프로토콜로, 데이터를 전송하기 전에 연결을 설정하지 않는다. 따라서 속도가 빠르지만, 데이터 전송 중 손실이 발생할 수 있다. 신뢰성: TCP: 데이터 전송 중에 손실이나 오류가 발생하면 재전송을 통해 신뢰성 있는 데이터 전송을 보장한다. UDP: 데이터 전송 중에 오류가 발생하더라도 재전송을 하지 않는다. 따라서 손실이나 오류가 발생할 수 있다. 헤더 크기: TCP:..
useRef에 대해 설명해주세요. useRef는 React에서 참조(ref)를 생성하고 관리하기 위한 React Hook중 하나입니다. useRef를 사용하면 컴포넌트 내부에서 생성한 변수나 DOM 요소에 대한 참조를 생성하고, 이를 다른 곳에서 사용할 수 있습니다. useRef는 DOM 요소에 직접 접근할 때 사용할 수도 있지만, 그 외에도 여러 상황에서 유용합니다. useRef를 사용하여 생성한 참조는 컴포넌트가 리렌더링될 때마다 새로 생성되지 않으며, 기존에 생성한 참조를 그대로 유지합니다. useRef를 사용하는 상황으로는 다음과 같은 것들이 있습니다. 1) DOM 요소에 직접 접근해야 하는 경우 예를 들어, 특정 DOM 요소의 크기나 위치를 측정하거나, 입력 폼의 값을 가져오거나, 스크롤 위치를..
app > layout.tsx import Navigation from "../components/navigation"; export default function RootLayout({children}: {children: React.ReactNode;}) { return ( {children} ); } layout.tsx 파일을 만들어 사용할 layout의 내용을 작성해주면 된다. layout을 사용하는 원래 페이지에서 보여줄 내용은 children으로 받아서 사용한다. 만약 여기서 about-us의 레이아웃만 다르게 바꾸고 싶다면 about-us 폴더 안에 또 다른 layout.tsx 파일을 만들면 된다. export default function RootLayout({ children, }: { ..
자바스크립트에서 비동기 처리는 왜 필요할까? 자바스크립트는 동기적인 언어이다. 즉, 코드 하나하나가 처리되면서 지연시간이 발생하면 이후의 태스크들은 무아지경으로 블로킹이 되어진다. 서버에 데이터를 요청하는 등, 대기 시간이 긴 작업의 경우에는 무아지경의 지연시간을 해소하기 위해 병렬적인 함수 실행을 해야하는데, 이때 나오는 개념이 비동기처리이다. 비동기 처리 방식에는 Promise와 Async · Await 방식을 사용한다. 서버에서 데이터를 가져오는 경우, 응답 값을 받기 위해 보통 자바스크립트에서 비동기 처리 방식인 Promise, Async · Await 방식을 사용한다. 두 방식의 용도는 같지만 분명 다른 점이 존재한다. Async · Await 방식은 Promise에 비해 가독성이 좋고, 문법이..
Rest의 정의 Representation State Transfer의 약자 자원의 이름(표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 구체적인 개념은 HTTP URL을 통해 자원(resource)을 명시하고, HTTP Method(post, get, put, delete)를 통해 해당 자원에 대한 CRUD operation*를 적용하는 것을 의미한다. 즉 REST는 자원 기반 구조(ROA) 설계의 중심에 resource가 있고 HTTP Method를 통해 resource를 처리하도록 설계된 아키텍쳐를 의미한다. * CRUD Operation Create : 생성(POST) Read : 조회(GET) Update : 수정(PUT) Delete : 삭제(DELETE) HEA..