ALL (8) 썸네일형 리스트형 Next.js 어떻게 사용해야 할까 ? Why next.js ? 넥스트 JS를 본격적으로 알아보기에 앞서 왜 Next를 사용해야 할까요 ? 최근 프론트 엔드 채용 공고에 보면 정말 많은 회사에서 Next를 기술 스택으로 사용하는걸 볼 수 있는데요. 곧 제가 일하게 될 곳에서 사용하는 기술 스택이기도 하고, 이렇게 많은 회사가 이용하는데 이유가 있지 않을까 라는 생각에서 비롯되어 공부도 하고 정리할 겸 글을 작성하게 됬습니다. 제가 생각하는 next의 장점은 CSR, SSR(Client side rendering, Server side rendering)가 가능하다는 점, SSR의 특징으로 인해 SEO(검색 최적화)가 된다는 점. Pre-rendering을 통해 유의미한 컨텐츠가 우선적으로 나타나기 때문에 더 좋은 사용자 경험을 제공할 수 있다.. 바닐라코딩 부트캠프 수강 후기 안녕하세요 저는 바닐라코딩 부트캠프 9기를 수강했던 김원모라고 합니다. 5월 22일 2번째 프로젝트를 마무리 하고 취업 준비에 돌입하기 앞서 4달 가까이 되는 시간동안 어떤 과정을 겪었고, 어떤 마음 가짐으로 바코 부트캠프에 임했는지 회고하는 시간을 가지고, 결의를 다시 잡기 위해 글을 쓰게 됬습니다. 앞으로 부트캠프를 희망하시거나, 참여하고 계신 분들에게 이 글이 조금이라도 도움이 됬으면 좋겠네요 :) What I went through 부트캠프 초반부에는 과제를 시작하고 몇 주 동안의 첫 3일은 코드 한 줄 못 적고 모니터만 바라보는 시간으로 보냈던 것 같습니다. 그러다 보니 "내가 과연 이걸 할 수 있을까?" 라는 의문과 동시에 빠르게 과제를 뚝딱뚝딱 진행해나가는 동기들의 모습을 보면서 조바심, 열.. JavaScript 클로저(Closure) What is closure ? 다양한 자료에서 클로저를 다르게 정의 또는 설명하고 있는데 그 중에서 나에게 가장 쉽게 이해가 되었던건 이 문장이였다. 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수 - 송형주 고현준 . 한빛미디어 이 외에도 MDN에서는 클로저가 이렇게 정의되어있다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment) (함수와 그 함수가 선언될 당시의 lexical environment의 상호관계) MDN에서 정의된 클로저를 이해하기 위해 lexical enviroment에 대해서 알아.. 바닐라코딩 프렙 수강 후기 매 주차마다 배운 점들을 복습하면서 블로그에 글을 작성하고 있었는데 수업이 후반부로 가면서 과제만으로도 시간이 너무 촉박해지고, 후반부로 갈수록 중요개념 (prototype, closure, async, promise 등) 이 포함되어 이건 별도로 정리를 해두는게 낫겠다 싶어 나머지 주차들에 대한 포스팅은 미뤄두고 수강 후기를 작성하게 됬다. 혹여나 바닐라코딩의 프렙을 고려하시는 분들이 이 블로그를 보게 됬을 때 조금이라도 참조가 됬으면 하는 바램에서 내가 느낀 점들을 여과없이 적어보려고 한다. 정보 전달의 목적이라기 보단 제가 느낀점들을 적어나갈 생각이니 참고 부탁드리겠습니다 ㅎㅎ Why ? 코로나를 겪으면서 느꼇던 점은 앞으로의 시대는 어떤 한 분야에서 전문적인 지식을 가지고 있어야 한다는 필요성을 .. 바닐라코딩 프렙 4주차 this this 키워드는 항상 함수 내부에서 사용된다 this는 함수가 어떻게 실행되느냐가 중요하다. 실행이 어떻게 됬냐에 따라서 값이 바뀐다 모든 함수엔 this가 내제되어있다 함수의 선언이나 할당은 this와 무관하다 이렇게 this에는 몇가지 특성이 있는데 그 중 가장 중요한건 this의 값은 정적으로 정해져있는게 아니라 함수가 어떻게 실행되느냐에 따라서 달라지는 동적인 값이다. 함수를 호출하는 4가지 방법에 대해 알아보겠다 1. Regular function call 일반 함수 실행 방식일 경우 this 값은 window(브라우저 환경), global(Node.js 환경)을 가르킨다 console.log(this); //window console.log(this === window); //tru.. 바닐라코딩 프렙 3주차 let, const let을 이용한 변수는 Block scope(중괄호)를 기준으로 스코프가 생성되기 때문에 함수가 스코프 단위인 var와 달리 for loop 내부에서도 스코프를 생성한다. var로 선언한 변수는 전역객체의 프로퍼티에 추가되지만 let은 그렇지 않다. let을 이용하여 선연한 변수는 선언문 실행 전까지 초기값이 정해지지 않는다 (Temporal dead zone 참고) const는 재할당이 불가능하다(재할당이 불가능할 뿐 프로퍼티는 추가가 가능하다. const는 선언과 동시에 초기화가 이루어 져야한다 즉 상수는 선언과 동시에 실행 되어야 한다(고로 재할당되거나 재선언 불가) 원시값, 참조값 자바스크립트의 모든 값들은 자료형에 따라 7가지로 분류된다(string, Boolean, numb.. 바닐라코딩 프렙 2주차 이번 주 공부를 하면서 내가 몰랐거나 놓쳤던 부분들을 정리하는 형태로 적어보려고 한다. 중요하다고 판단 되는 개념은 따로 포스팅을 하여 좀 더 깊게 파고들 생각이다. 과제를 진행하면서 기초가 너무나도 부족하다는걸 뼈저리게 느낀다...반복과 복습만이 살길. Flex css 레이아웃을 할 때 Flex, Grid 이 두가지가 가장 많이 사용되는데 그 중 하나인 Flex, 아래와 같이 html이 작성되었을 때 helloflex abc helloflex 부모인 div속성을 플렉스 컨테이너라고 부르고, 자식 요소인 div들을 플렉스 아이템이라고 부른다. Flex속성은 container, item에 적용하는 속성 2가지로 나뉜다. justify는 메인축 align은 수직축 방향의 정렬을 뜻한다. flex-direct.. 바닐라코딩 프렙 1주차 값의 종류 1. 숫자(Number type) 2. 문자(String type) 3. null 4. undefined 5. Boolean 6. Object type 7. Symbol type NaN의 type은 number(NaN = nat a number) NaN은 주로 에러 상황(숫자가 아닌걸 숫자로 변환할 때)에서 나타남 isNaN()으로 판별 가능. type은 number이기 때문에 판별 불가 Falsy 값 목록 (0, -0, false, undefined, null, "", '', Nan => 모두 false로 변환되는 값) Operator ||(or 연산자)는 true를 우선적으로 찾고 &&(and 연산자)는 false를 우선적으로 찾는다 찾는 자료값이 없을 경우 후자에 있는 피연산자로 반환.. 이전 1 다음
