\(@^0^@)/

오늘 읽은 범위 : (클로저) p115 ~ p.124 클로저 클로저의 의미 자신을 내포하는 함수의 콘텍스트에 접근할 수 있는 함수 함수를 선언할 때 만들어지는 유효 범위가 사라진 후에도 호출할 수 있는 함수 로컬 변수를 참조하고 있는 함수 내의 함수 어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상 클로저의 원리 일반적인 외부 함수의 변수를 참조하는 내부 함수 var outer = function () { var a = 1; var inner = function () { console.log(++a); }; inner(); }; outer(); 클로저 발생하는 외부 함수의 변수를 참조하는 내부 함수 var outer = function () { var ..

server가 없는 개발서버에서는 SSR, SSG의 차이점을 구분하기가 어려우니, 간단한 server를 만들어, 프로덕션 환경에서 둘의 특징과 차이점을 파악해보자. 💥 Server 구축 1. 서버용으로 프로젝트를 하나 생성하여 터미널에 npm install express cors를 설치하여 서버를 구축해주고, 2. 3. data.js 파일을 만들고, json 형식의 데이터 생성.(나의 경우에는 jsonplaceholder의 fake data를 사용했음) 4. 터미널에 node app.js를 입력하여 서버를 작동하고, 5. 브라우저에서 내가 지정한 port 번호 + 주소로 들어가 보면 (나의 경우에는 http://localhost:8080/api/posts ) 위와 같이 json 형식으로 data가 받아지..

오늘 읽은 범위 : 8장, 경계 (p. 144 ~152) 외부에서 가져온 패키지를 사용하고 싶다면 우리 자신을 위해 우리가 사용할 코드를 테스트하는 편이 바람직하다. 문서를 읽으며 사용법을 결정하고, 우리쪽 코드를 작성해 라이브러리가 예상대로 동작하는지 확인한다. 학습 테스트 우리쪽 코드를 작성해 외부 코드를 호출하는 대신 먼저 간단한 테스트 케이스를 작성해 외부 코드를 익히는 것. 학습 테스트는 이해도를 높여주는 정확한 실험. 학습 테스트를 이용한 학습이 필요하든 그렇지 않든, 실제 코드와 동일한 방식으로 인터페이스를 사용하는 테스트 케이스가 필요하다. 이런 경계 테스트가 있다면 패키지의 새 버전으로 이전하기 쉬워진다. 그렇지 않다면 낡은 버전을 필요 이상으로 오랫동안..

Keyword How to create carousel function to my website 같은 긴 문장을 검색하는 대신 주요 키워드만 적어주자. 1. implement (구현하다) carousel (구현하고자 하는 대상) html javascript react(스택) 2. carousel (구현하고자 하는 대상) javascript (스택) example demo sample (원하는 것) Exact match 더 강조하고 싶은 단어 또는 문장에 쌍따옴표("") 를 사용할 경우, 더 정확한 검색 결과가 노출된다. Exclude 특정 키워드를 검색 결과에서 제외시키고 싶은 경우, 대시(-)를 사용하면 된다. 예를들어 리액트 관련 검색결과들을 얻고 싶지 않다면, implement carousel ja..

오늘 읽은 범위 : 7장, 오류 처리 (p. 130 ~ 142) 오류 코드보다 예외를 사용하라 오류가 발생하면 예외를 던지는 편이 낫다. 그러면 호출자 코드가 더 깔끔해진다. 논리가 오류 처리 코드와 뒤섞이지 않으니까. Try-Catch-Finally 문부터 작성하라 미확인(unchecked) 예외를 사용하라 예외에 의미를 제공하라 예외를 던질 때는 전후 상황을 충분히 덧붙인다. 그러면 오류가 발생한 원인과 위치를 찾기가 쉬워진다. 호출자를 고려해 예외 클래스를 정의하라 정상 흐름을 정의하라 null을 반환하지 마라 null을 반환하는 코드는 일거리를 늘릴 뿐만 아니라 호출자에게 문제를 떠넘긴다. null을 전달하지 마라 깨끗한 코드는 읽기도 좋아야 하지만 안정성도 높아..

코딩하다가 Html Head 부분에 title, meta 같은 코드를 추가하고서 잘 들어갔는지 페이지 소스를 확인할 때 이제까지는 마우스 우클릭 - 페이지 소스 보기를 이용하였는데, 그럴 때마다 위의 이미지처럼 자동 줄 바꿈을 해주어도 가독성이 많이 떨어지는 불편함이 있었다. (해결방안을 찾아보지 않고 그냥 불편해만 했던 나 자신.... 반성해!) 우연히 좋은 크롬 익스텐션을 찾아서 저장해두려한다 :) Quick source viewer를 설치하고 해당 익스텐션을 통해서 html 소스를 볼 경우 (물론 다른 소스들도 볼 수 있음) 위의 이미지와 같이 깔끔하게 소스들을 볼 수 있어 매우 매우 유용할 것으로 판단!! 앞으로 얘를 요리조리 잘 사용해보자 오른쪽 상단을 보면 카피도 가능하고, Beautify 속..

오늘 읽은 범위 : 6장, 객체와 자료 구조 (p. 118 ~128) 객체 지향 코드에서 어려운 변경은 절차적인 코드에서 쉬우며, 절차적인 코드에서 어려운 변경은 객체 지향 코드에서 쉽다. 새로운 자료 타입이 필요한 경우에는 클래스와 객체 지향 기법이 가장 적합하다. 새로운 함수가 필요한 경우에는 절차적인 코드와 자료 구조가 좀 더 적합하다. 디미터 법칙 : 휴리스틱으로, 모듈은 자신이 조작하는 객체의 속사정을 몰라야 한다는 법칙. 잡종 구조는 중요한 기능을 수행하는 함수도 있고 공개 변수나 공개 조회/설정 함수도 있다. 잡종 구조는 새로운 함수는 물론이고 새로운 자료 구조도 추가하기 어렵다. 자료 전달 객체 자료 구조체의 전형적인 형태는 공개 변수만 있고 함수가 없는 ..

오늘 읽은 범위 : (콜백 함수) p.94 ~ p.114 콜백 함수 콜백 함수 (callback function)는 다른 코드의 인자로 넘겨주는 함수. 콜백 함수는 제어권과 관련이 깊다. 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것. 제어권 var count = 0; var cbFunc = function () { console.log(count); if (++count > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); // -- 실행 결과 -- // ..

프리온보딩을 하며 Next.js를 처음 접했는데 우리 팀이 선택했던 과제는 페이지가 하나인 프로젝트여서 Next.js의 맛을 전혀 느낄 수가 없었다. 그래서 선택하지 않은 좀 더 큰 규모였던 과제를 혼자 차근차근 만들면서 Next.js를 공부해보려 한다. 강의를 듣고 있는 중인데, Next.js하면 빠질 수 없는 CSR과 SSR를 한번 짚고 넘어가야 할 것 같아서 프로젝트 들어가기 전에 후딱 정리해보자! 💡 SSR이란? Server Side Rendering의 약자로, 말 그대로 서버 측에서 렌더링 하는 방식. 브라우저에서 서버로 컨텐츠를 요청하면, 서버에는 즉시 페이지에 필요한 데이터를 얻어와 모두 삽입하고 CSS까지 모두 적용해서 렌더링 준비를 마친 HTML, JS code를 브라우저에 전달한다. 전..

오늘 읽은 범위 : (this) p.80 ~ p.93 명시적으로 this를 바인딩하는 방법 1️⃣ call 메서드 Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로. 함수를 그냥 실행하면 this는 전역 객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. 객체의 메서드를 그냥 호출하면 this는 객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. // 함수 var func = function (a, b, c) { co..