Lpla 개발 블로그

etc

VSCode JQuery 코드힌트 안보이는 문제 해결

어느날부터 집에 설치된 VSCode에서 자바스크립트 코드힌트가 나오지 않았다. 아니, 자세히 살펴보니 자바스크립트는 문제 없었고 제이쿼리 코드힌트가 나오지 않았다. 문제 해결방법은 VSCode 터미널에 다음 명령어를 입력하면 된다. npm install @types/jquery --save 타입스크립트에서 제이쿼리를 사용하는 방법이라고 한다. ......난 타입스크립트를 쓸 줄 모르는데 뭘까? 예전에 node.js와 eslint를 설치하면서 문제가 생긴 모양이다. 결과적으로 제이쿼리 코드힌트가 아주 잘 보인다. 그런데 이번에는 제이쿼리 문법에 취소선이 생겼다. 실행은 문제없이 되지만 매우 거슬리는 관계로 없애는 방법을 찾아봤다. 원인은 on()이나 trigger() 방식을 사용하지 않아서였다. 그런데 j..

일상

입사 1년차

2018년 7월 웹디자인 공부를 시작하고 2018년 10월 웹코딩 공부를 시작했다. 긴 과정을 거쳐 2019년 7월 웹퍼블리셔로 첫 입사를 하고 이번 7월에 드디어 입사 1년차가 되었다. 사원수 50명 규모의 웹에이전시에 이력서를 넣고 면접을 보면서 자신감도 많이 얻었지만 부족한 부분도 알게 됐다. 결과는 당연히 최종 합격이었지만 이직을 할지, 지금 회사에 남아 부족한 부분을 채우며 공부를 이어 나갈지는 확신이 안 선다. 그래도 차근차근 성장하고 있는 모습을 스스로도 느낄 수 있어 좋았고 에이전시에서 원하는 인재상도 확인할 수 있어 만족한다.

JavaScript/기초

[JavaScript] 생성자 함수

자바스크립트 코드를 짜다 보면 비슷한 객체를 여러개 만들어야 하는 경우가 많다. 이 때 new 연산자와 생성자 함수를 이용할 수 있다. 생성자 함수는 일반 함수와 기술적으로 차이가 없기 때문에 이를 구별하기 위해 다음과 같은 규칙을 정해두고 있다. 함수의 첫 글자는 대문자 new와 함께 호출 function Member(name) { this.name = name; this.age = 29; } let member = new Member("Jin"); alert(member.name); // Jin alert(member.age); // 29 위 코드의 작동 원리는 다음과 같다. function Member(name) { // this = {}; 빈 객체가 임시로 만들어진다. // 새로운 프로퍼티를 th..

JavaScript/기초

[JavaScript] this (1)

자바스크립트에서 this는 매우 유연하게 쓸 수 있다. 메서드 내부에서 this를 사용하면 객체에 접근할 수 있다. let Jin = { 'name' : 'Jin', sayHello() { alert(this.name + " 안녕하세요."); } } let Yumi = { 'name' : 'Yumi', sayHello() { alert(this.name + " 안녕하세요."); } } Jin.sayHello(); // Jin 안녕하세요. Yumi.sayHello(); // Yumi 안녕하세요. 하지만 위 코드는 sayHello()가 Jin과 Yumi에 중복 작성되었기 때문에 깔끔하지 않다. 다음처럼 줄여 쓸 수 있다. let Jin = {'name' : 'Jin',} let Yumi = {'name' :..

JavaScript/기초

[JavaScript] 프로퍼티와 메서드와 리터럴

자바스크립트 공부를 하다 보니 프로퍼티와 메서드, 리터럴이라는 용어를 자주 접한다. 이를 짧게 정리해보았다. 프로퍼티 : 키(Key)와 값(Value)로 이루어진 객체(Object)의 일부 let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy' } member는 객체 'name', 'age', 'country' 는 키 'Jin', 30, 'italy' 는 값 'name' : 'Jin', 'age' : 30, 'country' : 'italy' 는 프로퍼티이다. let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy', sayHello() { alert("안녕하세요."); } } member.s..

JavaScript/기초

[JavaScript] 객체 (2)

계산된 프로퍼티 let color = prompt("색상을 정하세요."); let select = { [color]: "좋아요.", // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다. }; alert( select.blue ); // color에 "blue"이 할당되었다면, 5가 출력됩니다. 단축 프로퍼티 function info(name, age) { return { name, // name : name 과 같다. age // age : age 와 같다. }; } let user = info("Jin", 29); alert(user.name); // Jin 프로퍼티 조회 let user = { name: "Jin", age: 29, region: "Seoul", gender: "Man" }..

JavaScript/기초

[JavaScript] 자료형 종류

숫자형(number) – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용 bigint – 길이 제약 없이 정수를 나타낼 때 사용 문자형(string) – 하나 혹은 그 이상의 문자로 만들어진 문자열을 나타낼 때 사용 불린형(boolean) – true, false를 나타낼 때 사용 undefined - 할당되지 않은 값 null – 알 수 없는 값 객체형(object) – 복잡한 데이터 구조를 표현할 때 사용 심볼형(symbol) – 객체의 고유 식별자를 만들 때 사용

WordPress

우커머스 설치 후 샘플 상품 등록하기

워드프레스를 설치해도 바로 상품을 등록하고 판매할 수 없다. 기본 워드프레스는 단순한 블로그에 가까우며 워드프레스에 존재하는 5만 개가 넘는 플러그인 중 e커머스 플러그인을 설치해야 쇼핑몰 운영이 가능하다. e커머스 플러그인 중에서도 우커머스(Woocommerce)가 국내외 가릴 것 없이 가장 유명하며 특히 국내는 다른 선택지가 없다시피 하다. 워드프레스를 설치했다면 첫 화면은 위와 같다. 워드프레스 설치하는 방법은 아래 주소를 참고하자. https://lpla.tistory.com/40 AWS EC2에 Wordpress 간단 설치하기 AWS 계정만 있으면 서버에 워드프레스를 쉽게 설치할 수 있다. 서비스 -> EC2 로 이동한다. EC2 대시보드 아래 인스턴스 탭으로 이동한다. 처음에는 인스턴스가 없기..

JavaScript/기초

[JavaScript] 함수 정리(2)

함수 선언식 vs 함수 표현식 vs 화살표 함수 1) 함수 선언식 함수를 선언과 동시에 정의한다. function sayHello() { alert('Hello'); } 2) 함수 표현식 변수를 선언하고 변수에 함수를 할당한다. 이후 변수를 호출하면 함수가 실행된다. let sayHello = function() { alert('Hello'); }l 1) 함수 선언식 함수 선언식은 스크립트의 위치와 상관 없이 어디서든 사용할 수 있다. let region = 'Busan'; if (region == 'Busan') { welcome(); // 1번 실행 -> 고향이 같네요. function welcome() { alert('고향이 같네요.'); } welcome(); // 2번 실행 -> 고향이 같네요...

WordPress

AWS EC2 인스턴스에 고정 IP 사용하기

AWS EC2에 워드프레스를 설치하고 처음 겪는 문제 중에 하나가 인스턴스를 종료, 재부팅 할 때마다 IP주소가 바뀌는 점이다. IP주소가 유동적이면 사이트를 도메인에 연결 할 수도 없고 사용자가 사이트에 접근하는 것도 어렵다. 테스트 사이트일 경우에 문제가 덜 하지만 실제로 운영할 예정이라면 반드시 해결해야 한다. AWS에는 탄력적 IP(Elastic IP, EIP)로 고정IP를 만들 수 있다. 먼저 EC2 -> 네트워크 및 보안 -> 탄력적 IP로 이동한다. 우측 상단에 탄력적 IP 주소 할당을 클릭한다. 건드릴 것 없이 할당 버튼을 클릭하면 손쉽게 탄력적 IP가 생성된다. 이제 인스턴스에 연결만 하면 된다. Actions의 드랍다운 메뉴 중 탄력적 IP 주소 연결을 클릭한다. 연결하고자 하는 인스턴..