분류 전체보기 274

[JavaScript] Map의 사용방법과 동작 방식

#1 map의 기본 동작 방식 [1,2,3].map(function(){ console.log('확인') }) (1) map은 array 자료의 개수만큼 함수안의 코드를 반복하여 실행해 줍니다. (2) 작성은 '배열.map.콜백함수' 이후 실행할 내용순으로 적습니다. *위와 같이 작성할 경우 배열[1,2,3]의 수만큼(3) console.log를 실행해 줍니다. 결과 #2 map의 첫번째 파라미터 [1,2,3].map(function(a){ console.log(a) }) (2) 함수안에 있는 파라미터 a는 배열에 있는 각각의 자료입니다. #3 map의 두번째 파라미터 [1,2,3].map(function(a, i){ console.log("자료" + a) console.log("인덱스" + i) }) ..

[JavaScript] 사용 위치에 따른 this의 변화

#1 일반 함수에서 사용될 경우 function 디스(){ console.log(this); } 디스(); this = Window 단, strict mode라면 undefined 'use strict' function 디스(){ console.log(this); } 디스(); #2 오브젝트 내에서 함수(Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: function(){ console.log(this) } } 오브젝트.디스(); this = 속해있는 object #3 오브젝트 내에서 화살표 함수(Arrow Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: () => { console.log(this) } } 오브젝트.디스(); this ..

React 스타일 적용하는 방법

#1 css파일에서 수정하기위해 클래스를 적용하는 방법 카멜케이스 방식으로 작성하는 className으로 class지정. * 자바스크립트 기반이기때문에 class는 이미 다른용도로 사용되고 있기 때문 (App.jsx) Title #2 인라인 방식으로 스타일 지정하는 방법 style={ { 속성명 : '속성값' } } 형식으로 사용합니다. {} 안에 {}자료형 으로 넣기 때문에 2번 사용됩니다. 여러가지 속성을 사용할때는 ,로 함께 지정할 수 있으며, font-size, background-color 같이 하이픈(-)이 있는 속성들은 -을 빼고 단어들을 붙여 카멜 케이스 형식으로 작성합니다. (App.jsx) Title

React 이미지를 넣는 방법

#1 src 폴더에 파일이 있을 경우 1) css에 background로 적용하는 방법 일반적인 css 적용 방법과 동일. (App.css) .logo { background-image : url('./logo.png'); } 2) html 내부에서 적용하는 방법 import [이름] from [경로]를 적은 후, 이미지를 삽입하고 싶은 위치에 img src = {} 태그를 사용 (App.js) import logo from './logo.png' function App(){ return ( ) } #2 public 폴더에 파일이 있는 경우 그냥 /로 시작해서 이미지 경로를 입력하는것으로도 적용은 된다. 하지만, 빌드하여 배포할때 도메인이 아닌 하위 경로에 위치하게되면 파일을 찾지 못하기 때문에 다음과 ..

티스토리 이용자 제작 스킨 설치 및 적용하기

유저들이 제작한 이용자 제작 스킨을 자신의 블로그에 적용하는 방법입니다. #1 스킨 파일을 다운 이용자가 직접 제작한 스킨 파일을 다운 받습니다. 공유 방식이 어떻든 압축이 되어있다면 압축을 다 풀어줍니다. #2 스킨 파일을 업로드 1) '블로그 관리 > 꾸미기 > 스킨 변경'으로 이동합니다 2) '스킨 등록' 버튼을 클릭 3) '추가' 버튼을 눌러 다운 받은 파일을 모두 업로드 해 줍니다. * 파일은 폴더째로 업로드 되지 않기 때문에 바깥에 있는 파일을 모두 업로드 한 후, images 폴더 안에 파일들도 다시한번 모두 업로드 해 줍니다. (폴더는 자동으로 지정되니 신경스지 않아도 됩니다) 4) 업로드가 완료되었다면 '저장'을 합니다. #3 블로그에 적용 1) '꾸미기 > 스킨 변경'에서 '스킨 보관함..

웹 개발자/디자이너가 사용하면 좋은 Google의 Tools

#1 모바일 친화성 테스트 모바일 친화적인 사이트를 보유하는 것은 온라인 인지도를 유지하는 데 중요한 역할을 합니다. 여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있습니다. 아직 사이트를 모바일 친화적으로 만들지 않았다면 모바일 친화적인 사이트를 만들어야 합니다. Search Console의 모바일 친화성 테스트 도구를 사용하면 사이트가 모바일 친화적인지 빠르고 간편하게 테스트할 수 있습니다. 사용 방법은 매우 간단합니다. 테스트 하려는 웹페이지의 전체 URL만 입력하면 됩니다. 모바일 친화성 테스트 페이지로 바로가기 > #2 PageSpeed Insights 웹페이지의 전반적인 속도를 측정하여 사이트 성능을 파악할 수 있습니다. 사이트를 로드하여 시뮬레이션을 한 후 속도에 관한 다양한 분..

Sass(SCSS) 설치와 기본적인 사용방법

#1 설치 다양한 설치 방법과 컴파일러가 존재하지만 VSCode를 사용하고 있다면, 확장 마켓플레이스에서 'Live Sass Compiler'를 검색하여 설치만 하면 모든 준비 과정은 끝입니다. * 각종 블로그에서 node.js설치부터 시작해서 이것저것 너무 건들여대는 설명이 많아서 이 글 적어봄. #2 사용방법 (1) CSS 파일을 사용하는것과 큰 차이는 없습니다. (2) 새로운 파일의 확장자를 *.scss로 생성하여 코드를 작성. (3) 웹 브라우저는 html, css, js만 읽을수 있기 때문에 scss로 작성된 파일은 웹 브라우저가 읽을수 있도록 변환(Compile)해줄 필요가 있습니다. (4) 컴파일을 하는 방법은 화면 하단의 Watch Sass 버튼을 클릭하면 끝. *만일 하단 바가 안보이면 ..

이미지를 랜덤으로 삽입하기 (Unsplash)

웹 개발을 하다 보면 이미지 소스가 필요한 경우가 상당히 많습니다. 매번 사이즈를 확인하고 작업 중인 폴더로 이미지를 옮기는 과정도 귀찮아지기 시작하는데... Unsplash에서 제공해주는 API를 이용하면 이러한 고민이 쉽게 해결됩니다. #1 Unsplash Developers 사이트 주소는 다음과 같습니다. https://unsplash.com/developers 개발자로 등록(Register as a developer)한 후 다양하게 사용하는 방법도 있지만, 웹 개발용 샘플 이미지만 사용할 거라면 등록은 물론이고 특별히 거쳐야 할 과정도 없어 매우 편리합니다. 예전에는 샘플 이미지와 함께 복붙만 하세요 처럼 샘플 이미지와 함께 디테일한 설명이 있었던 거 같은데, 다 사라진 거 같아서 정리할 겸 글을..

임팩트 있는 코딩을 해보자: Power Mode

쓸데없지만 멋있는!? 마치 스타벅스 한복판에 자리잡고 이걸로 코딩을 하고있으면 주변의 이목을 끌수있을거 같은. 그런 확장앱을 하나 소개해보고자 합니다. #1 Power Mode 당신의 코드가 파워풀해진다! Power Mode는 VSCODE, Brakets 등에서 사용할 수 있는 확장 툴입니다. 코딩을 할때 지진과 같이 화면이 흔들리면서 이펙트와 콤보수(연속 타이핑수)를 표시해 줍니다. #2 설치 방법 확장 마켓 플레이스로 이동한 후, power mode를 검색하면 쉽게 설치 할 수 있습니다. #3 사용방법 (1) 설정 창으로 이동 하여 power mode를 검색합니다. (2) 가장 위쪽에 위치한 powermode: Enabled를 체크해주면 사용 상태가 됩니다. 설정을 통해 찾아 들어가는게 귀찮다면 명령..

네이버 로그인 API 활용하여 로그인 기능 구현하기

#1 네이버 개발자 센터에 접속 네이버 개발자 센터에 접속한 후 로그인을 하고 오픈 API 이용 신청을 합니다. 다음은 네이버 아이디로 로그인 오픈 API 신청 페이지입니다. 하단의 [오픈 API 이용 신청]을 눌러 다음으로 진행합니다. https://developers.naver.com/products/login/api/api.md #2 애플리케이션 등록 (API 이용신청) 자신에게 맞는 형태로 이름과 로그인 제공 정보를 선택. 서비스 환경 설정 등을 진행해 줍니다. 서비스 URL은 자신의 홈페이지 주소를, 로그인 Callback URL은 이후에 생성할 callback페이지를 연결할 주소입니다. 모든 설정을 완료하고 등록을 하면 Client ID와 Client Secret 코드가 등록된 페이지가 나타납..

반응형