전체 글

JS: 함수에 대하여 "인사이드 자바스크립트" 책을 구입해서 읽던 중 4장 제목이 함수와 프로토타입 체이닝인데 몰랐던 부분이 많고, 정리해두면 좋을 것 같아서 글을 쓰게 되었다. 함수 정의 함수는 세 가지 방법으로 정의할 수 있다. 함수 선언문 함수 표현식 Function() 생성자 함수 자바스크립트에서는 함수도 객체이다. 그래서 조금 어색하지만 변수에 함수의 레퍼런스를 담을 수 있고, 객체를 리터럴로 생성하듯 함수도 리터럴로 생성할 수 있다. 함수 선언문 function add(a, b) { return a + b; } 위의 코드가 함수 리터럴 방식이자 함수 선언문 방식이다. 사실 리터럴 방식과 함수 선언문은 약간의 차이점이 존재하는데, 리터럴은 함수 이름이 선택사항이다. add 라는 이름이 없어도 리..

Node JS 를 사용하다보면 process.env.PORT 와 같이 특정 값에 접근하는 것들을 자주 볼 수 있다. 보통 포트 번호 또는 데이터베이스 URI, 클라이언트 시크릿 값들을 저렇게 숨겨놓고 사용한다. 사용법은 간단하다. 일단 dotenv 패키지를 설치한다. yarn add -D dotenv 이후 프로젝트의 루트 디렉터리에 .env 파일을 만들고, 해당 파일에 자신이 사용하려는 내용을 작성한다. PORT=4000 MONGO_URI=mongo.com 이제 이 값을 사용하려는 위치에서 아래와 같이 사용하면 된다. import dotenv from 'dotenv'; dotenv.config(); app.listen(process.env.PORT); dotenv.config() 를 통해, 위에 작성한 ..

"리액트를 다루는 기술" 책에 있는 블로그 제작 프로젝트를 리뷰한 내용입니다. 전체 코드는 이 곳에서 확인하실 수 있습니다. Blog 프로젝트 리뷰 24-27 장에 거친 프론트엔드 블로그 프로젝트의 리뷰를 진행하도록 하겠습니다. 최대한 프론트 부분의 모든 코드를 꼼꼼하게 보고 넘어가는 것이 목표이고, 이를 통해 리덕스 사가에 대한 이해와, 전체적인 프로젝트 구조를 이해하게 되는 것이 목표입니다. 현재 프로젝트의 구조는 아래와 같습니다. 📦src ┣ 📂components ┃ ┣ 📂auth ┃ ┃ ┣ 📜AuthForm.js ┃ ┃ ┗ 📜AuthTemplate.js ┃ ┣ 📂base ┃ ┣ 📂common ┃ ┃ ┣ 📜AskModals.js ┃ ┃ ┣ 📜Button.js ┃ ┃ ┣ 📜Header.js ┃ ┃ ┣..

4장. 미학 이번 장에서 이야기하는 말 그대로 커드 편집기에서 볼 수 있는 코드의 미적인 부분이다. 미학적이지 않은 코드의 대표적인 예가 들여쓰기가 제대로 되어있지 않은 코드이다. 관련 있는 코드끼리 구분지어져 있는 것도 미학적인 부분에 포함된다. 미학적인 코드는 들여쓰기는 기본이고 비슷한 코드는 비슷하게 보이는 코드이다. 추가적으로 줄 바꿈을 사용해서가독성을 높일 수 있다. 동일한 기능을 하는 부분을 메서드로 분리해 미학성을 높일 수도 있다. 추가적으로 얻을 수 있는 이점은 코드의 길이가 짧아진 다는 것과, 메서드에 이름을 붙여서 이해하기 더 쉬운 코드로 만들 수 있다는 점이다. 가장 중요한 점은 코드가 일관적이어야 한다는 것이다. 어느 때는 중괄호를 이름 옆에 두고, 어느 때는 아래에 두는 것과 이름..

3장. 오해할 수 없는 이름들 변수, 함수, 클래스의 이름을 지을 때 이 이름이 다른 의미로 해석될 수 있을까? 라는 고민을 해보아야 한다. 당연한 것은 없다. 누군가는 처음부터 시작한다고 생각할 수 있고, 누군가는 마지막부터 시작한다고 생각할 수 있다. 또한 일반적으로 사람들이 어떤 의미로 사용하는지도 고려해야 한다. 예를 들어, get 메서드는 일반적으로 내부 멤버를 반환한다고 생각한다. 만약 클래스 내에서 getMean 이라는 메서드를 만들었는데, 이 메서드가 내부 멤버 배열의 전체를 돌고, 중앙 값을 반환하는 메서드라면 get 대신 compute 라는 이름을 사용하는 것이 더 좋다. 오해를 발생시키지 않는 이름이 좋은 이름이다. 우리의 코드를 다른 사람이 읽을 때, 우리가 의도한 대로 이해할 수 ..

나이스페이 결제 프로세스 브라우저는 나이스페이에 인증 요청을 보냅니다. 나이스페이는 요청을 검토 후 인증 토큰을 포함한 결과를 브라우저로 전송합니다. 브라우저는 인증 토큰 및 구매 정보를 WAS로 전송합니다. WAS는 브라우저에게 받은 내용은 바탕으로 나이스페이에 승인 요청을 보냅니다. 나이스페이는 WAS에게 승인 결과를 전송합니다. WAS는 결제 결과에 대한 내용을 브라우저로 전송합니다. 나이스페이는 인증 토큰을 포함한 인증 결과를 브라우저에서 받습니다. 따라서, 인증 결과를 WAS로 전달해주는 과정(3번)이 필요합니다. 이니시스 결제 프로세스 브라우저는 이니시스에게 인증 요청을 보내고, 이 때 Redirect URL 을 함께 전송합니다. 이니시스는 Redirect URL로 인증 토큰을 포함한 결과를 ..

코드 스플리팅 기술에 대해 알아보았다. SPA의 경우, 사용하지 않는 컴포넌트들도 처음에 모두 가져오기 때문에, 초기 페이지가 나타나는데 시간이 SSR 보다 오래 걸린다는 단점이 있다. 이를 해결하기 위한 방법 중 하나가 코드 스플리팅인데, import 를 동적으로 한다는 것으로 보면 될 것 같다. import('./SplitMe').then(result => result.default()); 자바스크립트에서는 위의 방식으로 진행할 수 있다. 리액트에서는 크게 두 가지 방법이 있는데, 클래스형 컴포넌트를 사용해서, state에 로드하는 것과 React.laze 와 Suspense 를 사용하는 것이다. 일단 클래스형 컴포넌트의 사용법은 아래와 같다. class App extends React.Compone..

꿈 같았던 4주의 테크 러닝이 끝났다. 중간에 진행 방식을 바꾸기도 하는 큰 일(?)을 겪었지만, 많은 사람들이 끝까지 열정적으로 참여했고, 나도 동기부여가 많이 되었다. 그리고 민태님께서도 더 좋은 강의를 위해 많이 고민하신다는 것을 느꼈다. 첫 2주 동안은 노션을 만들어보는 시간을 가졌다. 사실 그동안 내 코드를 남에게 보여줄 일이 많지 않았다. 회사에서도 일단 제품을 정해진 기간에 만들어 내는 것에 급급했기 때문에 좋은 코드를 짜기위해 고민하는 시간이 부족했고, 어떻게든 동작하는 코드를 작성했다. 그런데 이번에는 내가 작성한 코드를 공개적으로 올려야하고, 이를 누가 볼 수도 있다는 압박감에 더 좋은 구조에 대해 고민하면서 코드를 짜게 됐다. 로그인 기능 하나를 넣는데도, 여러가지 고민과, 이 때 만..

OAuth 2.0을 사용해 소셜 로그인을 할 때의 장점은 우리의 서비스가 가지고 있는 사용자 정보를 최소화 할 수 있는 데에 있습니다. 사용자가 우리 제품이 아닌, 네이버, 카카오, 구글 등에 로그인하여 우리의 서비스를 사용할 수 있고, 이 때 우리는 사용자의 정보 중 필요한 부분(이메일, 이름, 프로필 사진 등)을 네이버, 카카오, 구글에게 요청해 받아옵니다. OAuth 2.0 구조 OAuth 2.0의 구조는 간단합니다. 사용자가 우리 제품의 소셜 로그인 버튼을 클릭하여 해당 사이트에 로그인 할 경우 `인가 토큰` 이 발행 됩니다. 우리는 이 인가 토큰을 다시 소셜로 전송해 `액세스 토큰` 을 받을 수 있습니다. 이 액세스 토큰으로 우리는 사용자의 정보를 요청하고 받을 수 있습니다. 인가 토큰 받기 인..

주말 모두를 사용해가며 에디터 팝업 띄우는 것은 성공했다. 예제가 나와있었는데, 이를 내 프로젝트에 적용하는 것이 쉽지 않았다. 일단 코드를 이해하는데 시간을 좀 사용해야 했고, 타입 에러 어떻게 하면 잡을 수 있을지에 대해서도 생각하게 됬다. 문제는 기존에 설정한 webpack에서 에디터의 한 기능이 제대로 동작하지 않는데, 같이 수업을 듣는 분께서 해결 방법에 대해 말씀해주셨다. 내 코드에서는 근데 알려주신 방법으로 해결이 되지 않았는데 다른 분들에게 도움이 되실 것 같다. 아무래도 내가 webpack 설정에 대해 잘 몰라서 에러가 발생하는 것으로 파악되는데, 시간이 되면 webpack에 대해 조금 더 공부해야겠다. 2주차 (06.08 ~ 06.14) 에디터 라이브러리 Slate.js 라이브러리를 사..