butterwalnut

0. 라우팅 1. Image 2. Link 3. getServerSideProps 4. query

신입 프론트엔드 개발자로 출근한지 오늘부로 4일째다. 나는야 응애 회사원 👼 이번주는 첫주차여서 환경세팅하고 클론받고, 향후 계획에 따른 웹 작업을 착수했다. 버벅대니까 클론은 사수님께서 해주셨다.. 헤헤 >< 회사에서 사용하는 스택은 next js이고 css작업을 용이하게 하기 위해 tailwindcss 및 ui를 사용한다. IDE는 웹스톰을 사용. 컴퓨터는 맥을 쓰는데 일주일 내내 맥을 알아가느라 맥빠졌다 ㅠ. 단축키 암기 돌입이다... 하고 있는 작업은 폴더 구조 보완 및 와이어프레임에 따른 컴포넌트 개발이다. 아마 차주에 결과물 개발을 하고 시간이 얼추 맞다면, 조만간 서버쪽도 간단히 프로젝트를 진행하면서 배우게 될 것 같다. 신난다..해피해피.. 아련해보이지만.. 정말 신난다..꺄륵ㅎ 항해는 3..

다음 두 언어 모두 각자의 방식으로 비슷한 효과(정보를 담은 객체의 생성)를 얻는다. class 기반 언어 '상속'을 사용한다. (ex. java) 객체 '클래스' : 객체의 기본적인 틀, 기능을 정의 : 메소드(동작 방식)의 모임으로 동작 '인스턴스' : "사용할 수 있는" 객체, 특정 클래스의 template 기반 : 모든 인스턴스의 구조는 동일 : 객체의 자료를 가지고 있음 prototype 기반 언어 어떤 객체를 원형=prototype으로 삼고 이를 복제(참조)한다. 정확히 말하면 복제가 아닌 프로토타입 링크를 통해 원형을 참조한다고. 대부분 interpreter 방식이고 동적 타입 프로그래밍 언어이지만, 정적 타입의 체계가 기술적으로 가능하다. (ex. 오메가)객체 기본 객체 프로토타입 - Ob..

클로저의 의미 및 원리 이해 클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. 다른 책에서는 자스에서 클로저를 어떻게 요약할까? 자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수 by 더글라스 크록포드, 자바스크립트 핵심 가이드 함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 것 by 에단 브라운, 러닝 자바스크립트 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 by 존 레식, 자바스크립트 닌자 비급 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수 by 송형주 고현준, 인사이드 자바스크립트 자유변수가 있는 함수와 자유변수를 알 수 있는 환경의 결합 by 에릭 프리먼, Head First Javascript Progra..

자바스크립트는 너무 길다. 자스로 하겠다... ✨ 자바스크립트의 this ✨ 대부분의 객체지향 언어의 this = 클래스로 생성한 인스턴스 객체 🔎 객체지향 언어? : (...) 클래스에서만 사용할 수 있기 때문에, 혼란의 여지가 거의 없다. 그러나 자스의 this는 어디서든 사용 가능하다. 그래서 다음과 같은 경우가 자주 일어나는데, 정확한 작동 방식을 이해하지 않으면 디버깅이 힘들다. - 원인 파악 어렵다 - 예상과 다르게 엉뚱한 대상을 바라본다 함수와 객체(메서드)의 구분이 느슨한 자스. this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다. 상황별로 this는 어떻게 달라질까? 왜 그럴까? 어떻게 추적할까? 상황마다 다른 this 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 함수를..

들어가며, 웹과 인터넷은 같지 않다. 인터넷은 연결망이며, 웹은 이 연결망을 토대로 어떤 사이트 등에 '접속' 할 수 있게 한다. 아래는 MDN 문서로부터의 스크랩 및 +알파 정리본이다. 웹 기술 웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을 제작하려는 사람들에게 많은 기회를 제공한다. ⛓ 기본 기술 1. HTML (HyperText Markup Language) : 웹페이지에 내용을 기술하고 정의하는 데 사용 : 프로그래밍 언어가 아닌(!), 컨텐츠의 구조를 정의하는 마크업 언어 - Hypertext 웹 페이지를 다른 페이지로 연결하는 링크 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써 모든 사용자는 월드 와이드 웹 세계의 능..

javascript에서 변수명 짓는 규칙은? 1. 문자(대/소문자), 밑줄(_), $로 시작해야 한다. 2. 다음 예약어는 사용 불가. abstract arguments boolean break byte case catch char class const continue debugger default delete do double else enum eval export extends FALSE final fianlly float for function goto if implements import in instanceof int interface let long native new null package private protected public return short static super switch..

false, true는 boolean을 기대하는 문맥에서 쓰이는 값이다. 아래 표는 falsy 값이다. truthy는 falsy를 제외한 값이라 생각하면 되고, 예를 들면 true, 1이 있다. false 키워드 false 0 숫자 zero -0 음수 zero 0n BigInt. 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. 0n은 거짓 같은 값. "" 빈 string null null - 아무런 값도 없음 undefined undefined - 원시값 NaN NaN - 숫자가 아님

루프 var a = 10; var b = 2; for(var i=1; i

* inflearn의 '[리뉴얼] React로 NodeBird SNS 만들기' 강의를 보며 진행하는 프로젝트 * 백엔드(1, nodeJS) + 프론트엔드(1, reactJS) ❕ Next.js를 사용하는 이유? SSR + CSR 첫 방문만 SSR 방식이고, 이후는 CSR 방식이다. Next.js는 'React를 사용한 프레임워크'로서 실무를 위해서 갖춰진 것들이 많다. 대신, 자유도가 떨어진다. 서버라고 한다면 나같은 경우에 서버 = 백엔드라고 생각했었다. 하지만, 서버의 주체가 3개 (+1)다! 말그대로 server, 요청을 받는 주체라고 이해할 수 있었다. 브라우저 / 프론트 서버 / 백엔드 서버 / 데이터베이스 ❕ SSR(Server Side Rendering)이 뭘까? 전통적인 렌더링 방식으로 말..