어제보다 더 나은 오늘

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

개발자로 커리어 전향을 꿈꾸는 이들 각자의 동기가 있을 것이고, 이 동기라는 것이 꼭 한 가지가 아니라 복합적일 테지만 나는 개인적으로 더 나은 세상을 만드는 데 구체적인 기여를 할 수 있는 직무라는 생각이 큰 원동력으로 작용했다. 기존 서비스 중에 이런 공공의 가치를 구현한다고 생각하는 서비스를 종종 소개해 볼까 한다. 오늘 처음으로 소개하고 싶은 서비스는 시각장애인들에게 손쉽게 도움을 줄 수 있는 Be My Eyes이다. Be My Eyes 소개글: https://www.bemyeyes.com/language/korean 앱을 설치하고 내가 커뮤니케이션을 할 수 있는 언어를 선택하면 해당 언어를 구사하는 시각장애인에게 도움이 필요할 때 전화벨이 울린다. 2022년 12월 현재 Be my eyes 커뮤..

지난 포스팅에 이어 컴퓨터가 사칙연산을 하는 법을 찾아보았다. 예상했던 대로 컴퓨터가 하는 연산의 기본은 덧셈이다. 뺄셈은 음수를 더하는 방식으로 계산한다. 다시 말해 컴퓨터가 4-2를 수행하는 과정은 4+(-2)를 연산하는 것이다. 컴퓨터에게 음수를 알려주는 방식으로는 최상위 비트(가장 왼쪽의 비트)를 이용해 최상위 비트가 0일 때는 양수, 1일 때는 음수라고 약속하면 된다. (이 방법으로 연산한 경우 overflow - 서로 부호가 다른 정수의 덧셈, 뺄셈 연산에서 발생 가능 - 가 생길 수 있다고 하는데 여기까지는 파고들지 않기로 한다...) 곱셈은 덧셈을 반복 수행하면 되고, 나눗셈은 곱셈과 달리 나머지라는 것을 처리해줘야 하고, 0으로 나눌 수 없다는 예외가 있기에 곱셉만큼 간단하지는 않다. 일..

앞선 포스팅에서 얘기한 것처럼 부트캠프에서 매일 하루에 한 문제씩 알고리즘 문제를 풀게 하면서 하루 일과를 시작한다. (a.k.a. Daily Coding) 이제까지 문제를 딱 보고 pseudo code를 하나도 적지 않고 바로 푼 문제도 있고, 1, 2, 3 번호를 매겨가며 pseudo code를 적은 다음 푼 문제도 있지만 어...? 하고 2초 간 얼었던 문제는 어제가 처음이었다. 나눗셈(/)과 나머지(%) 연산자를 사용하지 않고 두 수의 나머지를 구하는 함수를 작성하는 것 잠시 삼천포를 건널테니 이 포스팅을 읽는 여러분도 위의 함수를 어떻게 짤 지 한 번 생각해 보시면 좋겠다. 개인적으로 부트캠프에서 이제까지 했던 과제 중 가장 인상적인 과제를 꼽으라면 두 가지를 들 수 있겠다. (섹션이 끝날 때마..

부트캠프에서 매일 아침 알고리즘 문제를 하루에 한 문제씩 풀게 한다. 오늘의 문제는 다음과 같았다. 💡 문자열을 입력받아 아이소그램인지 여부를 리턴한다. 아이소그램(isogram)이란 각 알파벳을 한 번씩만 이용해서 만든 단어나 문구를 말한다. 처음에 문제를 보고는 별 생각 없이 다음과 같이 이중 for문으로 풀었다. function isIsogram(str) { // 빈 문자열이 들어오면 true를 출력한다는 주의사항을 반영 if (!str) return true; str = str.toLowerCase(); for (let i = 0; i < str.length; i++) { for (let j = i + 1; j < str.length; j++) { if (str[i] === str[j]) retu..

상태 변경 함수(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로 현재 날씨 정보 가져와 화면에 보여주는 걸 했었다. 이때는 코드를 따라치면서도 뭐가 뭔지 하나도 모르고 그냥 그대로 따라치니 화면에 날씨 정보가 뜨고 신기해 하기만 했다. 이걸 지금 다시 보니 모든 코드가 이해가..