어제보다 더 나은 오늘

상태 변경 함수(setState)를 써서 상태 갱신을 할 때 데이터 확인을 위해 아래 예시 코드의 6번 라인과 같이 console.log(state)를 해보면 다음과 같이 실제 입력값보다 한 개씩 밀려서 출력이 되는 걸 알 수 있다. const [username, setUsername] = useState(""); const handleChangeUser = (event) => { setUsername(event.target.value); console.log(username); }; return ( // ... // ... ) 이는 setState 함수가 이벤트 핸들러 내에서 비동기적으로 작동하기 때문이다. 이게 무슨 뜻일까? 위의 문장을 이해하려면 React가 상태 업데이트를 실시간으로 처리하는 것이..

자바스크립트는 왜 프로토타입을 선택했을까 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다. 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 내보내기는 중괄..

아직 구체적인 방법은 실습을 해봐야 알겠지만 서버에 데이터를 요청해서 받는 방법을 처음으로 알았다! API, API 하던 것이 무엇인지 이제야 어렴풋이 알 것 같다. API란 하나의 응용 프로그램이 다른 응용 프로그램에 서비스를 요청하는 방식을 일컫는다. 이걸 웹 개발에 적용하면 클라이언트와 서버가 서로 통신할 수 있게 하는 매커니즘이라고 볼 수 있겠다. 9월 말 Nomad Coder - 바닐라 JS로 크롬 앱 만들기를 수강할 때, 마지막 챕터에서 브라우저가 현재 위치 파악해서 OPEN API로 현재 날씨 정보 가져와 화면에 보여주는 걸 했었다. 이때는 코드를 따라치면서도 뭐가 뭔지 하나도 모르고 그냥 그대로 따라치니 화면에 날씨 정보가 뜨고 신기해 하기만 했다. 이걸 지금 다시 보니 모든 코드가 이해가..

전자정부 프로젝트로 첫 출장을 갔던 튀니지에서 서버 개발자들을 대상으로 연수 프로그램 통역을 했을 때 '화면에 뿌려준다'는 말을 처음 들었다. 당시 IT 프로젝트 통역을 처음 맡았던 거라 Apache, 라우터, 게이트웨이, L4 스위치, 데이터베이스 서버 등 알 수 없는 말들이 난무했는데 저런 기술 용어들은 만국 공용어인지라 정작 통역을 하는 나는 무슨 말인지 몰라도 그냥 그대로 통역을 하면 엔지니어들끼리는 찰떡 같이 알아들었다. 하지만 '화면에 뿌린다'는 건 무슨 말인지 몰라서 그대로 직역을 했더니 튀니지 개발자들도 못 알아듣더라고 😇 결국 연사(speaker)였던 한국 개발자 분에게 화면에 뿌린다는 게 무슨 의미인지 조금 더 구체적으로 설명해 주실 수 있냐고 요청드렸고, 서버에서 받아온 데이터를 화면..

지난주 금요일 리액트에 입문하고 리액트를 학습한지 D+6일차가 되었다. 지금까지 React intro / SPA / state & props 총 3개의 과제를 하면서 바닐라 JS를 쓰는 것보다 리액트를 쓸 때의 간편함을 경험할 수 있었다. 마이 아고라 스테이츠 과제를 할 때 삽질했던 기억들이 좋은 반면교사가 되어주었다. 컴포넌트로 설계하면 편했을 것을... 😇 지금까지 배운 React의 핵심은 : 1. 데이터를 가져온 다음, 2. map() 메소드를 돌려서 받은 데이터를 화면에 뿌려준다. 1번 데이터를 받는 과정은 아직 서버와 통신하는 걸 배우지 못해서 더미 데이터로 하고 있다. 새로운 데이터가 생성되었을 때 기존 데이터와 합치는 것이 역시 관건인데 이 부분은 과제하면서 역시나 삽질을 많이 했고, 결론은..

오늘 아침식사를 하면서 본 클립인데 너무 좋아서 중학교 영어 교사인 친구와 아이를 키우고 있는 두 명의 친구에게 클립을 공유했다. 한편으로는 소프트웨어 교육에 대한 이야기이지만 그보다 폭넓게 평생 학습자로 살아가야 하는 현대인의 교육에 대한 이야기라고 생각한다. 키워드 : 배우는 법을 배우기, 연결 능력 필요에 맞춰 무엇을 학습해야 하는지를 알고, 학습을 위한 구체적인 계획을 세우는 능력이 너무나 중요하다. 세 달 전 무엇을 어디서부터 공부해야 할 지 몰라 막막하던 때도 있었는데, 역시 처음 허들이 가장 높다. 첫 번째 장애물만 통과하면 그 다음부터 시야가 넓어진다. 유체역학의 나비에-스토크스 방정식을 활용해 영화 에서 바다의 풍랑을 CG로 표현하는데 혁혁한 공을 세워 아카데미 기술상을 두 번이나 수상한..

우리의 친구, 우리의 벗 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 =>..