Sadie의 개발일기

Next + React Query로 SNS 서비스 만들기 강의를 듣다가 dayjs에 대해 알게 되었고, 강의 내에서의 dayjs configuration 코드를 보다가 알게 된 점이 있어 글로 남기고자 한다. (강의 내용과는 무관) dayjs는 플러그인 같은 개념이 있어서 쓰고자 하는 기능이 있으면 필요한 플러그인을 등록해줘야 한다고 한다. 예를 들면 이런 식이다. import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.locale("ko"); dayjs.extend(relativeTime); export default function Post() { // ...

(참고 : https://react-ko.dev/learn/render-and-commit) 리액트의 렌더링이란? 리액트에서 컴포넌트를 호출하는 것. 컴포넌트는 언제 렌더링되는가? 처음 화면에 등장할 때(초기 렌더링) 첫 렌더링에서 리액트는 루트 컴포넌트를 호출. 컴포넌트의 state가 업데이트되었을 때 이 경우 리액트는 state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트를 호출. 렌더링은 재귀적이다. 만약 렌더링되는 컴포넌트가 다른 컴포넌트를 반환할 경우, 리액트는 다음으로 해당 컴포넌트를 렌더링하며, 이는 중첩된 컴포넌트가 더 이상 없거나 리액트가 화면에 표시될 내용을 정확히 알 때까지 계속됨 부모 컴포넌트가 렌더링되면, 모든 자식 컴포넌트도 렌더링된다. 리액트의 커밋이란? 컴포넌트의 렌더링 이..

HTML 엘리먼트에 커스텀 attribute로 data-로 시작하는 이름을 지정하면, dataset으로 가져올 수 있다. 예를 들어 다음과 같은 html이 있을 때, ... div입니다 js에서 이렇게 가져올 수 있음 const $duck = document.querySelector("#duck"); const { name, age, superLong } = $duck.dataset; console.log(superLong); //superduperlong

requestAnimationFrame이란? 자바스크립트에서 기본으로 제공하는 Window 인터페이스의 메소드이다. 왜 사용하나요? 만약 자바스크립트로 애니메이션을 구현할 때 단순히 setTimeout 혹은 setInterval을 사용하여 특정 코드를 반복 실행시키면 여러 문제점이 존재한다. 애니메이션을 자연스럽게 만드려면 fps(1초에 몇 개의 프레임이 넘어가는지의 단위)를 신경써야 한다. 사람의 눈은 60fps에서부터 애니메이션을 부드럽다고 느낀다고 한다. 이를 위해서는 16.666 밀리세컨드마다 프레임이 바뀌도록 구현해야 한다. 하지만 setTimeout이나 setInterval을 통해 코드를 반복 실행시키면 콜백 코드 부분이 프레임 시작 시간에 맞춰 실행됨을 보장하지 못한다. 타이머 함수에서 콜백..

자바스크립트는 기본적으로 모듈 시스템을 지원하지 않는다. 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각. 모듈들은 자신만의 파일 스코프(모듈 스코프)를 갖는다. ⇒ 모듈의 모든 자산(변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다(export). 또한 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다(import). 자바스크립트는 모듈이 성립하기 위해 필요한 파일 스코프와 import, export를 지원하지 않는다. 즉, 자바스크립트는 파일마다 독립적인 파일 스코프를 갖지 않으므로, 자바스크립트 파일을 여러 개로 분..

주소창에 google.com을 치면 무슨 일이 일어나나요? 주소창에 url을 입력하고 엔터를 치면, url의 도메인 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에 요청이 전송된다. 도메인 이름 : 인터넷의 실제 IP주소와 연결된, 기억하기 쉬운 이름. (ex : google.com) DNS : 사람이 읽을 수 있는 도메인 이름(예: www.amazon.com )을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환하는 시스템 해당 URL 요청의 경로에 따른 html 파일이 보내진다. URL은 이론적으로 웹에서 주어진 고유 리소스 주소이다. 세부 리소스 경로의 경우 요즘은 물리적 실체가 없는 웹 서버가 추상적으로 처리하지만, 예전에는 웹 서버내 실제 파일 위치를 나..

호이스팅이란? 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징. console.log(score); //undefined var score; //변수 선언문 위 코드는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 그러나 참조 에러가 발생하지 않고 undefined가 출력된다. 그 이유는 호이스팅에 의해 변수 선언이 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. ⇒ score 변수는 console.log()에서 찍을 시점에 호이스팅에 의해 이미 선언된 이후이므로, 에러가 나지 않고 undefined가 찍힌다. 변수 선..

기존 책 내용에 보충하고 싶은 부분들(ex: 컴파일 과정)을 이것저것 추가해서 1.7.3 가상메모리까지만 정리해 보았다.(그 뒤는 시간관계상 생략...) 지금은 3장 읽고 있는데 책이 이상하게 잘 읽히지가 않아서 머리 싸매고 있다... 정글러 분들... 요약정리글 공유해요...😂 서문 프로그램의 수명주기를 따라가면서 주요 개념과 용어, 관련된 구성요소를 간략하게 소개하고자 한다. 다음 코드로 이루어진 hello.c 프로그램을 통해 이를 공부해 보자. #include int main() { printf("hello, world\n"); return 0; } 1.1 정보는 비트와 컨텍스트로 이루어진다 hello 프로그램은 소스 프로그램으로 생성되어, hello.c라는 텍스트 파일로 저장된다. 소스 프로그램 ..

크래프톤 정글에 와서 파이썬이란 언어와 상당히 친해졌다. 이전에는 진짜 안다고 할 수도 없는 수준이었는데... 알고리즘 문제를 하나씩 깨면서 파이썬의 수많은 메소드, 문법들에 조금은 익숙해진 것 같다. 알고리즘 문제를 풀면서 새로 알게 된 문법들, 표현 방식들, 기타 알고리즘 문제 풀이 팁들을 공유한다. python3 vs pypy3 pypy3 : 실행 시 자주 쓰이는 코드를 캐싱 간단한 코드상에서는 Python3가 메모리, 속도 측에서 우세 복잡한 코드(반복)을 사용하는 경우에서는 PyPy3가 우세 재귀, 큐 쓸 때는 python3가 좋음 최적화 input input 대신에 sys.stdin.readline()을 쓰는 게 더 빠름 ex) import sys input() 대신에 sys.stdin.rea..

팀프로젝트를 하면서 막판에 String과 Number를 비교하느라 생긴 에러를 디버깅하는 데 2시간을 허비했다. 너무 화가 나서 이 팀프로젝트가 끝나면 반드시 타입스크립트를 공부하겠어.... 라고 결심했었고, 팀플이 끝났다! 그래서 타입스크립트를 공부하려 한다. 공부한 강의 인프런의 타입스크립트 코리아 : 기초 세미나 강의를 수강했다. 처음에는 그냥 타입스크립트 공식문서로 부딪혀볼까 했는데, 막상 펼쳐보니 꽤나 방대하고 감이 잘 오지 않아서 강의를 찾아보게 되었다. 타입스크립트 타입스크립트는 인터프리터 언어인 자바스크립트와 다르게 컴파일 언어이다. 다만 전통적인 컴파일 언어와는 다르게 비슷한 수준의 추상화를 가진 언어(자바스크립트)로 변환되기 때문에, 트랜스파일이라는 용어를 사용하기도 한다. 타입스크립트..