한땀한땀 코딩하기

동공 지진, 그 시작 자바스크립트를 이용해 본격적으로 웹 개발에 입문할 때, 주기적으로 세뇌(?)당하는 이야기가 있는데 바로 자바스크립트가 싱글 스레드 기반의 언어라는 것입니다. 취업 준비하면서도 종종 나오는 주제 중 하나로 언급되고, 관련한 문제도 봤던 기억이 있습니다만, 도대체 이게 왜 자꾸 강조가 되는지 마음속으로 받아들이지 못했던 것 같습니다. 무엇보다 싱글 스레드라면 굉장히 제한적일 거 같은데 가능한 것들 중에는 이런 질문들이 있었습니다. 비동기는 어떻게 가능한 것인가. 동시에 두 가지가 동작하려면 멀티 스레딩을 해야한다고 배웠는데! 그럼 node 기반의 서버는 무조건 하나의 스레드에서만 동작한다는 뜻일 텐데 느리지 않을까? 아쉽게도, 아니 정확히는 이 질문에 대해 이해를 시켜주기에는 넓은 영역..

워낙 좋은 기술이 많은 요즘은 프론트엔드를 공부할 때 바닐라 자바스크립트를 조금 맛본 뒤 바로 리액트, 뷰와 같은 라이브러리나 프레임워크로 넘어가는 것 같습니다. 저 또한 크게 다르지 않았고, 바닐라 자바스크립트로 '상태'라는 걸 굳이 만들어보지 않았던 것으로 기억합니다. 다만, 리액트로 넘어가기 전, 부스트캠프에서 '옵저버 패턴'을 소개한 적이 있는데, 리액트를 무작정 사용하기 전에 어떻게 변화하는 값에 맞춰 화면에 렌더링 되는지를 직접 만들어보며 이해하는 것이 맹점이었습니다. 그때는 리액트도, 리덕스도 경험해보기 전이라 어떤 장점이 있는지도, 어떻게 하는 느낌인지도 파악을 못 해 눈물을 흘리며 넘어갔던 기억이 납니다. 그리고 이래저래 맛보기를 해본 지금, 바닐라 자바스크립트로 todo list를 연습..

요약 1편 '변수'는 여기를 확인하세요. 들어가며 자바스크립트를 공부해보면 클로저가 등장합니다. this와 더불어 처음 접하는 입장에서 정확한 개념을 이해하기가 굉장히 난해한 축에 속한다고 생각합니다. 개념을 대충 알더라도, 또 의식적으로 활용하기가 어렵지 않나 싶습니다 (생각보다 우리는 모듈에서도 그렇고 클로저라고 모르고 사용하는 클로저가 많습니다). 특히 private, public 변수가 기본적으로 명시되지 않은 자바스크립트에선 클로저가 encapsulation을 위해선 필수로 등장합니다. You Don't Know JS Yet 2권은 전반에 걸쳐 클로저에 대한 정의, 흔히 하는 오해, 활용법 등을 설명하고 있는데, 사족을 몇 가지 곁들여가며 요약해보았습니다. 클로저? 외부 함수의 변수를 참조하고,..

Ch01 | this or That? 자바스크립트에서 this는 그 이름 때문에 많은 개발자들이 혼란을 느끼는 요소입니다. 알아보면 동작 자체가 굉장히 복잡하진 않지만, 이름에서 오는 혼동 때문에 많이들 잘못 사용하고 있다고 합니다. Why this? this를 활용하면 이용하여 하나의 함수가 컨텍스트를 특별히 인자로 받지 않아도 call같은 컨텍스트 변경 함수를 이용하여 원하는 결과를 줄 수 있게 됩니다. function identify() { return this.name.toUpperCase(); } var me = { name: "Grace" }; var you = { name: "Reader" }; identify.call( me ); // GRACE identify.call( you ); //..

들어가며 전반적인 introduction에 해당하는 1권 이후 스터디를 진행하며 You Don't Know JS Yet 2권을 읽어보았습니다. 2권은 부제에서 확인할 수 있듯 scope(스코프)와 closure(클로저)에 대한 이야기가 중점인데, 특히 클로저를 설명하기까지 필요한 기본적인 개념과 그 동작 원리를 독자들이 차근차근 이해할 수 있게 구성한 점이 굉장히 좋았습니다. 굉장히 당연시하고 넘어갔던 변수 선언이나 스코프에 대한 것도 JS의 특징과 함께 잘 엮어서 설명해주고 있습니다. 많은 이야기가 오가는 책인만큼, 모든 걸 요약하는 것보다는 제가 인상 깊게 읽은 부분을 가볍게 정리해보고자 합니다. 크게 꼽아보자면 아래와 같습니다. var 와 let (+hoisting) 글로벌 객체 window Clo..

오브젝트 스토리지와 이미지 예전에 이미지 데이터를 관리하는 법과 관련하여 오브젝트 스토리지에 대해 간략하게 알아본 적이 있습니다. 이번 글에서는 이 오브젝트 스토리지에 실제로 이미지 파일을 저장하는 방법에 대해 간단하게 적어보려고 합니다. 선택한 스토리지나 사용하고 있는 프레임워크, 언어에 따라 방법은 조금씩 차이가 있겠지만, 큰 흐름 자체는 동일할 거라고 예상합니다. 사용한 기술 및 환경 서버: node JS / Express JS 오브젝트 스토리지: ncloud 오브젝트 스토리지(S3와 연동) 프론트: 리액트 위의 환경을 기반으로 진행되는 순서는 이렇습니다. 프론트(웹)에서 input을 통해 파일을 업로드 → 해당 파일을 express 서버로 전송 → 서버가 파일을 오브젝트 스토리지로 전송 오브젝트 ..

https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org 프론트, 즉 어떤 웹 서비스의 클라이언트 영역에 해당하는 부분을 제작하다 보면 소스 파일이 점점 증식하는 것을 체험할 수 있습니다. 간단한 페이지라면 하나의 html, js, css 파일로 끝낼 수 있겠지만 하나의 페이지 안에서도 각각의 부분을 컴포넌트로 쪼개서 작업하는 요즘..

개인화된 서비스를 제작하려고 보면 항상 고민이 생기는 부분이 로그인/회원관리인 것 같습니다. 물론 처음부터 너무 본질적인 부분을 제하고 로그인에만 매몰되면 안 되겠지만, 공부를 하다보면 유저를 먼저 생성하고 그 정보가 어떤 식으로 서버에서 돌아다니는지(?) 알고 시작하는 것이 확실히 흐름을 파악하는 데 도움이 되는 것 같습니다. 기존 방식 기존에는 Oauth, jwt 같이 유저를 서버 차원에서 인증하는 별도의 방식 없이 단순히 db에 저장된 유저명, 비밀번호와 대조해서 로그인을 허용하는 식으로 진행을 해왔습니다. 유저가 계정과 비밀번호를 post로 전달하면, 서버에서 db에 저장된 내용과 일치하면 유저가 로그인 했다는 의미에서 세션에 유저 정보를 추가하고, 이 세션 id를 브라우저의 쿠키에 저장해둡니다...

최근 express를 이용해서 클라우드 서버에 올려둔 MySQL DB와 연결을 시도하던 중, 여러 튜토리얼에서 .env를 활용하여 진행하는 것을 발견하게 되었습니다. 지인을 통해서도 한번 들어보긴 했으나, express를 활용해서 백엔드를 직접 구성해본 경험은 없어서 어떤 용도의 것인지 알아보았습니다. 쉽게 생각하면 민감하고 예민한 정보를 은닉해주는 고마운 친구 정도로 요약이 될 것 같습니다. 민감한 정보란 민감하다, 다른 말로는 타인에게 공개되면 위험한 정보입니다. 단순 데이터일 수도 있겠지만, 만약 계정과 비밀번호 등을 알게 된다면 내가 돈을 내고 쓰는 클라우드 서버에 멋대로 접근할 수도 있게 되는 것이죠. 그래서 github과 같은 공개적인 곳에는 이런 정보가 올라가는 것을 막아야 합니다. 예를 들..

자바스크립트를 배워나가는 시점에서 가장 헷갈리는 것은 '비동기'인 것 같습니다. 어떤 개념인지는 이해하고, 대표적인 함수들은 알겠지만, 새로운 것을 가져올 때 의도한 대로 항상 동작하지 않아서 인터넷을 찾아보면 대부분 비동기였기 때문에 일어나는 문제였습니다. 자바스크립트에서도 다른 언어들처럼 db와 연결하여 쿼리문을 통해 데이터를 조회하거나 수정할 수 있습니다. 이걸 연습하던 도중, 쿼리문으로 조회한 내용을 어딘가 저장해두거나, 함수 안에서 받아서 추가적인 연산을 하고 싶거나, 혹은 그 값으로 다시 새로운 쿼리문을 작성해야 할 때 고민이 생겼습니다. 비동기다 보니, 그 값을 어딘가 담아두기도 애매하고 (node js 표준 입력에서 겪은 문제와 비슷한 거 같습니다) 하나를 처리하고 그다음으로 넘어가야 하는..