어제보다 더 나은 오늘

아래 포스팅에 쓴 것처럼 바닐라JS로 DOM을 조작해서 더미데이터를 화면에 뿌려주던 것을 fetch API로 서버에 데이터를 요청해 받아오는 방식으로 리팩토링을 해보았다. fetch로 서버에 데이터를 요청해서 응답으로 받은 데이터를 agoraStatesDiscussions 라는 변수에 담는 것이 목표였다. 1. 1차 시도 const agoraStatesDiscussions = []; fetch("http://localhost:4000/discussions/") .then((res) => res.json()) .then((data) => { agoraStatesDiscussions.push(...data); console.log(agoraStatesDiscussions); // 데이터 담김 }); cons..

지난달 바닐라JS와 DOM을 사용해 구현했던 페이지를 React로 리팩토링을 해보았다. 하드코딩된 더미데이터를 가져다 만들었던 지난달과 다르게 서버를 구축해서 해당 서버에 fetch API로 데이터를 요청해서 받아온 데이터를 props로 컴포넌트로 내려보내주었다. 그러던 중에 데이터에 담긴 시간 정보가 toISOstring() 형태의 string이었는데, 이 정보를 가공해서 아래와 같이 다른 날짜 형식으로 표현하고 싶었다. 결론부터 이야기하자면 날짜 문자열 구문을 분석해서 1970년 이후의 ms초를 반환(Date.now()와 동일한 형태)해주는 Date.parse() 를 쓰면 된다. '2022-05-15T23:57:43Z' 형태로 들어온 날짜 데이터를 Date.parse()에 넣어보면 다음과 같다. 리액..

자바스크립트는 왜 프로토타입을 선택했을까 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다. medium.com 한줄평: 클래스와 프로토타입의 차이를 아주 근원으로 올라가 서양 철학으로 풀어낸 최고의 포스팅 👏🏼👏🏼👏🏼 1. 클래스 기반 언어 (대표적인 언어: Java) : 소크라테스의 이데아를 구현한 프로그래밍 언어 2. 프로토타입 기반 언어 (대표적인 언어: JavaScript) : 비트겐슈타인의 의미사용론(단어는 사용에 의해 의미가 결정되기 때문에 맥락context이 중요하다는 이론)을 구현한 프로그래밍 언어 💡 자바스크립트의 주요 개념 정리 - 호이스팅: 실행 컨텍스트 생성시 렉시컬 스코프 내의 선언이 끌어올려지는 것 - ..

변하지 않는 상태를 유지하는 방법, 불변성(Immutable) 이번 포스팅에서는 순수 함수에 이어 함수형 프로그래밍에서 중요하게 여기는 개념인 에 대한 이야기를 해보려고 한다. 사실 순수 함수를 설명하다보면 불변성에 대한 이야기가 꼭 한번은 나오 evan-moon.github.io - 실제 프로그램을 짤 때 함수형 프로그래밍과 객체지향 프로그래밍의 차이 - 값에 의한 호출(call by value) vs. 참조에 의한 호출(call by reference) - 상태 관리의 개념과 어려움 - React에서 setState 메소드를 써서 상태를 변경할 때 뒷단에서 일어나는 일 너무나 훌륭한 포스팅이다. 이 포스팅 말고 블로그 전반적으로 포스팅 퀄리티가 훌륭해서 어제 이 블로그 탐독하다가 원래 하려던 건 하나..

모듈을 내보내고 가져오는 데에는 크게 두 가지 방식이 있다. 1. 유명 내보내기 (named export) : 여러 값을 내보낼 때 유용하다. 가져갈 때는 변수나 함수의 내보낸 이름과 동일한 이름을 사용해야 한다. constructor를 내보내면 메소드까지 다 같이 사용 가능하다. export { func, foo } // func 와 foo (함수 또는 변수) 내보내기 import { func, foo } from "경로" 2. 기본 내보내기 (default export) : 어떤 이름으로도 가져올 수 있다. 아래 예시에서 동일한 변수명 agoraStatesDiscussions이 아닌 다른 변수명을 지정해도 상관없다. 다만 가져오는 파일 안에서 식별자 충돌이 없어야 한다. default 내보내기는 중괄..

우리의 친구, 우리의 벗 console.log()...! console.log()로 데이터가 잘 들어왔는지, 혹은 생성됐는지 확인하는 용도로 쓴다. 그리고 console.dir()로는 객체를 보다 생생하게 볼 수 있다. stack overflow에 따르면 기본적으로 console.log()와 console.dir()의 역할은 다음과 같다. 1. console.log() : 인자를 string으로 찍어준다. 2. console.dir() : 탐색할 수 있는 트리(navigable tree)를 보여준다. 3. console.table() : 테이블 형태로 자료를 보여주고, 탐색할 수 있는 트리를 그 아래에 출력한다. 먼저 console.log()와 console.dir()의 차이점을 살펴보자. 스택오버플로우..

함수 선언식이나 표현식에 비해 간결한 문법으로 사용할 수 있기 때문에 특히 콜백 함수가 들어갈 argument 자리에 화살표 함수를 쓰는 경우가 많다. 그래서 map(), reduce() 등 배열 내장 메소드와 함께 자주 쓰게 된다. const arr = [1, 4, 9, 16] const newArr = arr.map(x => x * 2) console.log(newArr) // [2, 8, 18, 32] 위의 예제에서 두 번째 줄 .map() 부분을 좀 더 살펴보면 다음과 같다. 중괄호를 제거하고 return 키워드를 빼고 간편하게 적을 수 있다. const newArr = arr.map(x => x * 2) // 아래는 위의 코드와 동일한 코드이다. const newArr = arr.map(x =>..

📍 구현 과제 : 데이터 객체가 배열에 담긴 더미 데이터를 끌어와서 화면에 렌더링 각자 취향대로 css 스타일링 게시판 형태로 페이지네이션 작업 새로운 데이터 입력시 기존 더미 데이터에 합쳐서 화면에 렌더링 로컬 스토리지 이용해 새로운 데이터 저장해서 새로고침 해도 화면에서 유지 github page 이용해서 배포 링크 만들기 📍 과제 구현한 웹페이지 배포 링크 : 아바타 이미지 16종을 준비해서 사용자가 새로운 질문을 등록하면 랜덤 아바타 16개 중 하나가 배정되어서 뜨게 만들었다 🤗 https://ah-ae.github.io/fe-sprint-my-agora-states/ * 과제 코드 확인해 보고 싶으신 분은 GitHub Repository로 들어가시면 됩니다. 과제하면서 배운 것들 1. 페이지네이..

들어가기에 앞서 이 포스팅은 inDepthDev의 아티클 Here is why appendChild moves a DOM node between parents를 번역한 것입니다. 번역에 오류가 있는 경우 댓글을 통해 알려주시면 신속하게 수정하도록 하겠습니다. 나는 웹의 기본 원리를 아는 것이 무엇보다 중요하다고 믿는 사람이다. 그래서 종종 웹 개발 아키텍처나 웹 플랫폼 API에 관한 흥미로운 질문들을 하곤 한다. 이러한 질문을 던짐으로써 피면접자가 자신의 일에 대해 얼마나 열정을 가지고 있는 개발자인지, 지식에 대한 열망을 가지고 얼만큼 멀리 가봤는지를 이해하는 데 도움을 받는다. 지난주 트위터에 다음과 같은 질문을 올렸다. 아래와 같은 HTML 코드와 appendChild 메소드를 사용하는 다음과 같은..

Zero CHO - 호출 스택과 이벤트 루프 https://www.zerocho.com/category/Javascript/post/597f34bbb428530018e8e6e2 https://www.zerocho.com/category/Javascript/post/597f34bbb428530018e8e6e2 www.zerocho.com