분류 전체보기
-
[JS] 객체 알아보기Front-end/Javascript 2020. 11. 29. 21:56
객체 자바스크립트에서는 원시 타입을 제외한 모든 값이 객체입니다. JSON이라고도 하며 자바스크립트의 가장 중요한 데이터타입이라고 볼 수 있습니다. 객체를 생성하는 방법에는 총 2가지의 방법이 있습니다. 리터럴 방식 생성자 방식 리터럴 방식 리터럴 방식은 변수 내에 {...}을 사용하여 key와 value값을 선언하여 하나 이상의 프로퍼티를 만드는 방식입니다. var artist = { singer: "서태지", music: "Live Wire" }; artist 변수 안에 key로 singer, music을 주었고 value는 "서태지", "Live Wire"를 주었습니다. 여기서 key는 문자열로 선언할 수도 있습니다. key와 value는 콜론(:), {} 안의 프로퍼티는 쉼표(,)로 구분합니다. ..
-
[JS] 변수 알아보기Front-end/Javascript 2020. 11. 29. 21:41
변수 변수는 프로그램을 작성하는데 가장 중요한 요소입니다. 자바스크립트에서는 타입이 없는 변수를 var, let, const라는 선언자를 사용하여 선언하고, 이후 변수명을 입력해 최종적으로 변수를 선언하게 됩니다. 변수 선언 var age; // 1개의 변수 선언 var egg, lemon; // 2개 이상의 변수 선언 console.log(age); // undefined -> 변수를 선언하기만 하면 변수 값이 없다는 뜻인 undefined를 뱉어냅니다. age = 28; // = 연산자를 통해 age 변수에 28을 넣어줍니다. console.log(age); // 28 출력 var name = "junjang"; // 변수 선언과 함께 변수 값을 할당합니다. console.log(name); // j..
-
Next.js 프로젝트를 Github과 연동하여 Vercel로 배포해보기DevOps 2020. 11. 25. 00:19
Vercel vercel은 Next.js를 만든 팀에서 만들어낸 호스팅 사이트입니다. Vercel과 양대산맥인 Netlify라는 서비스도 있는데요, 둘 다 비슷한 서비스를 한다고 보면 됩니다. 개발자들이 코드 관리를 하기 위해 사용하고 있는 Github, GitLab, BitBucket 등 많은 저장소들의 Repository를 활용하여 빌드된 내용물을 배포해주는 아주 편안하고 친절한 서비스입니다. 이번에 Next.js를 활용하여 이력서 페이지를 만들면서 간단하게 배포를 해야할 일이 생겨 사용해 보았습니다. 위 세 가지의 코드 저장소중 하나의 계정에 배포할 next.js 프로젝트 Repository가 있다는 것을 전제로 진행하겠습니다. 배포 과정을 한 번 알아보겠습니다. Import 배포할 Next.js ..
-
[Node] express-generator로 빠르게 express 프로젝트 세팅하기Back-end/Node 2020. 11. 23. 01:35
Express express는 Node.js 진영의 웹을 개발하기 위한 프레임워크입니다. 2010년에 발표되어 현재까지도 주축으로 사용되는 아주 보편적이고 강력한 오픈소스인데요, 최근에는 express를 만든 팀이 만든 Koa 또한 증가하는 추세입니다. Express-generator express를 사용하기 위해서는 바닥부터 세팅을 해도 되지만 이런 세팅과 환경에 익숙해져있는 개발자라면 처음부터 굳이 세팅하지 않아도 되는 귀찮은 일로 전락하거나, 개발 시간을 뺏어먹는 일이 될 수도 있습니다. 그래서 이런 상황을 극복하기 위해 기본적인 골격을 가지고 있는 프로젝트를 구성하는 것도 하나의 방법인데요 여러가지 Boiler-Plate를 사용하거나 express에서 제공하는 generator를 사용하면 기본적인..
-
CSS scroll-snap 속성을 이용하여 스와이퍼 구현하기Front-end/CSS 2020. 11. 13. 01:18
scroll-snap scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성입니다. 예를들면 에어비앤비 모바일 환경의 숙소 사진을 볼 때 스와이퍼 형태가 바로 이런 방식인데요, 볼 때는 많은 기능들이 들어간 것 같지만 scroll-snap을 사용하면 쉽게 구현할 수 있습니다. 위의 기능을 똑같이 구현해보면서 사용법을 익혀보겠습니다. 예제는 iPhoneX를 기준으로 구현하였습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏 코드 전체 보기 index.html 슬라이더를 전체를 감싸는 컨테이너 하나, 그리고 이미지들을 감싸는 슬라이더, 그리고 이미지를 감싸..
-
[React] React-Router를 활용해 원하는 페이지로 이동하기Front-end/React 2020. 11. 9. 01:55
React-Router 리액트 라우터는 여러 페이지들을 연결시켜주는 역할을 하는 친구입니다. 리액트 자체에서 지원해주는 기술은 아니지만 리액트에서 라우팅을 한다면 이 서드파티를 사용하는 것이 국룰로 자리잡았습니다. 그만큼 간편하고 성능이 뛰어나단 소리겠죠? 이전에 순수 Javascript로 SPA를 구현해보면서 동작 방식을 이해 했었는데요, 이 글을 읽기 전 한 번 읽고 보시면 조금 더 이해는데 있어 좋을 것 같습니다. :) 구현할 예제는 헤더를 가지고 있는 페이지 2개와 헤더를 가지지 않는 페이지 1개를 이용해 각 상황을 고려한 라우팅을 해보려고 합니다. 핵심적인 내용을 살펴보면서 구현해보겠습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사..
-
완전 초 단순하게 캐러셀(Carousel) 구현해보기Front-end/Javascript 2020. 10. 27. 01:45
캐러셀(Carousel) 캐러셀이라는 용어가 조금 생소하실 수도 있는데요 캐러셀은 여러개의 이미지 혹은 영상을 슬라이더 형태로 만들어 표현해주는 것을 말합니다. 바로 위 움짤처럼 말이죠! 정말 간단하게 캐러셀을 구현해보면서 어떤식으로 만들어지는지 살펴보도록 하겠습니다. ❗️ 제가 구현하는 방법은 학습하며 얻은 정보와 지식을 바탕으로 구현한 자료입니다. 혹시 잘못된 정보가 있거나 코드가 있다면 말씀 부탁드리겠습니다. 🙏 전체 코드 보기 프로젝트 구조 엄청 간단하죠? 이제 차근차근 만들어보겠습니다. index.html prev next 먼저 캐러셀을 넣을 컨테이너와 리소스(예제에서는 이미지) 이전, 다음 버튼을 만들어줍니다. 위와 같이 만들어 주면 아래와 같은 화면이 나오게 됩니다. 자 이제 저 위의 사진 ..
-
webpack을 활용해 맛깔나게 번들링 해보기Front-end 2020. 10. 22. 03:12
webpack (웹팩) 현재 웹 시장에서는 bundler(번들러)를 아주 유용하게 사용하고 있습니다. 대표적으로 webpack, parcel, rollup 등 많은 번들러들이 있는데요, 그 많은 번들러들 중 웹팩은 가장 많이 사용되고 있으며 최고의 자리를 지키고 있는 번들러입니다. 최고의 자리를 지키는 이유에는 몇가지가 있는데 대표적인 이유는 바로 생태계가 넓으며, 광범위한 커스터마이징이 가능하다는 점입니다. 가장 많이 사용되고있는 만큼 생태계는 그만큼 넓을 수 밖에 없고 plugin을 통해 특정 기능을 내가 원하는대로 커스터마이징 할 수 있다는 것이 가장 장점입니다. bundle (번들) bundle의 뜻이 무엇일까요? 바로 "묶음"입니다. 여기에 -er이 붙어주면 묶어주는 역할을 하는 bundler가..