뭘 배웠지?

엘리스 SW 엔지니어 트랙에서 배운것 웹 개발의 핵심? 핵심이 되는 것을 탄탄하게 해두자 웹 개발의 핵심은 HTML React, express.js, Mongo 등 삐까뻔쩍한 기술은 그때그때 배우면 된다. 당연하게 사용하던 것들을 강의를 들으니 엄청 새롭다 인코딩과 디코딩 정해진 규칙에 따라 저장을 하는게 인코딩 정해진 규칙에 따라 불러오는게 디코딩 클라이언트와 서버 클라우드 호스팅의 트렌디한 말이 클라우드 4개월간 할 것 개인 프로젝트 / 포트폴리오 내가 뭘 할 수 있는지 나와 타인에게 보여주는 것 지식 정리 나와 타인을 위한 정리 커뮤니티 활동 질문도 포트폴리오 사이트에 링크 버전 관리의 중요성 버전 관리의 유무는 인생이 달라진다

웹팩이 (조금이라도) 이해됬다면 이제는 모듈 문법(syntax)를 알아볼 차례 단 두 가지 구성요소가 있다. import export 쉽게 사용할 수 있다. export // functionOne.js 파일 const functionOne = () => console.log('FUNCTION ONE!') export { functionOne } import import { functionOne } from './functionOne' functionOne() //this should work as expected! 모듈로 코드를 작성하는 많은 장점이 있는데, 그 중 가장 좋은것은 '코드 재사용' 다른 이점은 factory function 또는 module pattern으로 코드를 감쌀 수 있다는 것 참고..

웹팩(Webpack)은? 간단히 말해 모듈(HTML, CSS, JavaScript, sass, png 등 각각 모듈)을 묶어주는거다. 인터넷은 어렵고, 복잡하지만, 우리는 조금 있으면 되고, 원하는 설정도 간단하다. 이런것 도와주는거다 엄청 강력한 도구다, 꽤 복잡한 config file에서 강한 파워가 나온다. 코드가 많아지면 유용하다고 한다. 시작해보자 설치하면 CLI 및 API를 통해 웹팩과 상호작용 가능 다른 bundlers와 비교 경고: webpack5를 돌리기 위한 Node.js 최소 버전 10.13.0(LTS) 기본 설정 디렉토리를 만들고 npm 실행하고 웹팩을 로컬에 설치 webpack-cli도 설치(커맨드라인에서 웹팩 사용하기 위한 도구) 디렉토리는 이렇게 구성될거다 project web..

npm(node package manager) 방대한 플러그인, 라이브러리, 도구의 플러그인 저장소에 액세스 할 수 있게 도와주는 커맨드 라인 도구 여기서 수많은 개발자들이 공유한다. 공개하는 패키지에는 꼭 package.json 파일이 있어야된다. package.json 파일은 프로젝트가 의존하는 파일을 나열한다 빌드를 복제할 수 있게 해줘서 다른 개발자와 쉽게 공유할 수 있게 한다. package.json 필드 name과 version 필드 필수 name 필드에는 패키지 이름이 들어가고, 하이픈(-), 언더스코어(_), 소문자 사용가능 version 필드는 x.x.x 형태를 따라야 된다. { "name": "my-awesome-package", "version": "1.0.0" } Author 필드 ..

클래스란? 클래스는 특별한 함수(function)다. 오브젝트를 만들어주는 템플릿이다. class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); } } alert(typeof User); //function이 나온다 여기서 class User { ... }이 한일을 알아보자 1. function 이름 User란 놈을 만든다. function의 코드는 constructor 메소드에서 가져온다(constructor 메소드를 안만들어주면 비어있다고 가정된다). 2. class 메소드를 저장해준다, User.prototype 안에 있는 sayHi 처럼 new User 오브젝트가 만들어지고, 안의 메소드를 부르면, 프로토타입 ..

Module Pattern는 자바스크립트에서 가장 흔한 디자인 패턴중 하나 코드를 캡슐화 시키기 쉬운 방법이다. 보통 싱글톤 방식으로 한번만 사용되도록 쓰인다. 모듈 만들기 쉽다, 함수에 괄호를 두르고, 뒤에 괄호를 하나더 써주면된다. annoymous closure 이라고도 부르는듯 하다 (function() { 'use strict'; // Your code here // All function and variables are scoped to this function })(); 모듈 내보내기 그저 변수(myModule)에 집어넣는 일이다. 다음에 부를 수 있도록 var myModule = (function() { 'use strict'; })(); 그다음에 공개 메소드(publicMethod) 만들..

IIFE(immediately invoked function expression) '이삐(iffy)' 라고 읽는다 function delaration: 함수 이름을 주는 '보통' 방법 function myFunction () { } function expression: 변수나 프로퍼티에 함수를 넣어주는 방법 // 변수에 function expression 넣어주기 var myFunction = function () { /* logic here */ }; // 프로퍼티에 function expression 넣어주기 var myObj = { myFunction: function () { /* logic here */ } }; 이런것도 function expression 이라고 부른다 // 괄호안에도 expr..

개츠비 설치와 프로젝트 생성을 안했다면 -> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기 이미지 그냥 올리면 안되나? 개츠비는 기본적으로 이미지를 어떻게 처리할줄 몰라한다고 한다. 이미지를 올리고 싶으면 밑의 플러그인 4가지를 깔아줘야 한다. 비주얼 스튜디오 코드에서 밑의 명령어를 이용해 설치하면 된다. gatsby-transformer-remark: 개츠비에서 마크다운을 사용할 수 있게 해준다 [ 주인공 ] gatsby-plugin-sharp: 개츠비 플러그인으로 이미지를 처리하는데 도와준다. gatsby-remark-images: 마크다운(markdown)문서에서 이미지를 사용할 수 있게 해준다. gatsby-remark-relative-images: 파일에서 이미지 위치를 찾아준다. 이렇게..

개츠비 설치와 프로젝트 생성을 안했다면 -> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기 개츠비의 강점 개츠비의 강점 중 하는 데이터를 가져와서 사용할 수 있다는 것이다. CMS: 워드프레스, 컨텐츠풀, 두루팔 같은 컨텐츠 매니지먼트 시스템 마크다운(Markdown): 문서나 포스트 데이터(Data): API, 데이터베이스, CSV, JSON 등 이런 데이터를 가져와서 보여줄 수 있다. GraphQL 이런 데이터는 GraphQL API을 통해 볼 수 있는데 GraphQL API를 비주얼적으로 확인할 수 있는 GraphQL IDE인 GraphiQL에 접속하면 볼 수 있다. 들어가는 방법은 우선 개츠비 develop 모드로 들어가고, localhost:8000/___graphql 위의 주소로 들어가..

개츠비 설치와 프로젝트 생성을 안했다면 -> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기 CSS 적용방법 1. src폴더 안에 styles(이름은 마음대로)폴더 만들기 2. styles폴더안에 index.css 폴더 만들기 3. layout.js(원하는 곳)에 index.css 불러오기(import) 레이아웃을 관리하기 좋게 만든 layout.js 사용방법은 -> [Gatsby] 개츠비 페이지 레이아웃 만들기 이렇게 하면 기본적인 CSS가 연결됐다. 원하는 스타일을 리액트에 주면된다. 플러그인 설치하는 방법 1. 원하는 플러그인을 찾아보자 개츠비 공식홈페이지에서 수많은 플러그인을 찾아볼 수 있다. 여기서는 Scss를 사용할 수 있게 만드는 gatsby-plugin-sass를 설치하는 방법을 알아..