Programming/WEB30 [JS] javascript의 화살표 함수 (arrow function) 이전에 js에서 함수 표현 방식에 대해 포스팅했었다. https://devkingdom.tistory.com/306 [JS] javascript의 함수 선언문과 함수 표현식 오늘은 간단하게 js 에서 함수를 사용하는 두가지 방법에 대해 정리해두려고한다. 함수 선언문 어디서든 호출이 가능함, javascript 내부 알고리즘에 의해서 javascript 실행 전 초기화 단계에서 코드 devkingdom.tistory.com 오늘은 함수 표현식을 화살표 함수로 변경해 보는 방법을 포스팅할 예정이다. 자바를 공부해 보신 분들은 자바의 lambda식을 활용해본 적이 있을 것이다. 자바스크립트에서 람다식을 사용할 수 있는데 이를 화살표 함수라 부른다. 실무에서 굉장히 많이 쓰이니 잘 익혀두자. let add = .. 2022. 1. 23. [JS] javascript의 함수 선언문과 함수 표현식 오늘은 간단하게 js 에서 함수를 사용하는 두가지 방법에 대해 정리해두려고한다. 함수 선언문 어디서든 호출이 가능함, javascript 내부 알고리즘에 의해서 javascript 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둠. sayHello(); function sayHello() { console.log('Hello!'); } 그렇기에 위 코드처럼 함수선언문보다 함수호출이 먼저나와도 정상적으로 실행되는 것임. (물론 함수선언문보다 코드가 아래에 나와도 동작한다.) 즉, 함수의 사용 가능 범위가 코드의 위치보다 위아래로 넓은데 이를 '호이스팅(hoisting)' 이라고 한다. 함수 표현식 코드를 한줄 한줄 읽으면서 코드에 도달할때 비로소 함수가 생성이 되고, 그 이후에 사용이 가.. 2022. 1. 22. [JS] javascript 에서 함수 사용할 때, default 값 세팅하는 방법 하이. 오늘도 간단하게 javascript 에 대해 정리해 보고자 한다. 어떤 언어든 함수를 잘 활용하고 잘 작성하는 것은 중요하다. 함수는 과한 중복을 줄여주고, 프로그램의 응집도를 향상할 수 있는 수단이 되기 때문이다. javascript에서 함수를 작성할때 default값을 세팅하는 몇 가지를 정리해보았다. 1. OR 연산자 활용 function inputName(name) { let myName = name || '홍길동'; let msg = "입력된 이름은 " + myName + " 입니다."; console.log(msg); } inputName('뽀야'); inputName(); 위 코드 의 결과는 아래와 같다. 파라미터로 값이 입력되면 myName 파라미터 값이, 입력되지 않으면 디폴트 값.. 2022. 1. 22. [JS] 명시적 형변환에 대하여 최근에 이직을 하면서 업무가 변경되어, 단순한 백엔드 쪽 API 개발뿐만아니라 프론트 쪽의 소스도 일부 수정하게 됐다. 특히 javascript 쪽을 건들일이 많을 것 같아서, 오래전의 기억을 살려서 하나씩 정리해보려고한다. 명시적 형변환 오늘 간단하게 정리해둘 내용은 명시적 형변환에 대한 내용이다. 얼마전에 후배한명이 자기가 구현한 소스가 뭐가 문제인지를 봐달라는 연락이 왔다. 아래 내용은 후배가 보낸 코드를 간단하게 만들어서 작성한 내용이다. const aHeight = prompt("a의 키?"); const bHeight = prompt("b의 키?"); const result = (aHeight + bHeight) / 2; alert(result); 코드는 아주 간단하다 . a의 키를 입력 받고.. 2022. 1. 22. [WEB] HTTP 상태 코드 정리 예전에 내가 HTTP 프로토콜에 대해 정리해둔 내용이있다. devkingdom.tistory.com/104?category=841890 [WEB] HTTP 프로토콜 하이 ~~~ 오늘은 Spring 공부를 하다가 문득 HTTP 프로토콜을 한번 정리해놔야겠다는 생각이 들어서 글을 쓴다. HTTP 프로토콜을 본격적으로 공부해 보기전에 웹 서비스가 무엇인지 간단하게 정리 해 devkingdom.tistory.com 위에 작성된 글처럼 Client 와 Server간 데이터를 주고받기 위해 정해놓은 규약이 Http프로토콜인데, 이렇게 데이터를 주고 받는 과정에서 우리가 잘 주고받았는지, 아니면 뭐 문제가 있는게 아닌지 이런걸 확인할 수 있는게 바로 HTTP 상태코드이다. 오늘은 이 http 상태코드에 대해 알아보도.. 2021. 4. 6. [Vue] Vue CLI 설치하기 (with VSCode) hihi ~~ 오늘은 vue CLI 를 한번 설치해볼까한다. 그냥 설치할 건 아니고, VSCode 에서 설치를 해보려고 한다. Vue CLI 란? 여기서 먼저 CLI 라는 뜻 부터 알아보자. 이는 Command Line Interface의 줄인말로서 터미널 창에서 사용자가 작업을 명령할 수 있는걸 의미한다. vue-cli는 기본적으로 vue 개발환경을 설정할 수 있게 도와주는 도구이다. 이 도구를 이용하면 아주 쉽게 프로젝트를 세팅해주는 게 가능하다. 그리고 기본적으로 프로젝트의 디렉토리 구조 , init, webpack 설정 등 다양한걸 잡아줘서 프로젝트 구성 시 많은 도움이 된다. Vue CLI 설치하기 VSCode 상단 탭에 보면 Terminal 이 있는데, 여기서 New Terminal로 새 터미.. 2021. 3. 21. [JS] 자바스크립트의 비동기 처리 패턴 - 콜백(callback), 프로미스(promise) 자바스크립트에서 비동기 처리를 하는 것은 특정 코드의 로직이 끝날때까지 코드의 실행을 멈추지 않고 다음 코드를 바로 실행하는 것을 의미한다. 보통 응답과 요청 구조로 되어있는 통신에서 비동기처리를 많이하는데, 자바스크립트에서는 이러한 비동기 처리를 위해 아래 네가지 패턴을 사용했다. 1. callback 먼저 비동기 처리의 대표적인 예시는 여러분들도 다들 아시는 ajax를 이용한 코드이다. ajax 통신은 예~~전에 웹프로젝트를 할때 이미지나 데이터를 서버에서 가져와서 화면에 뿌려줄때 사용했던 통신 방식이다. 아래 예제를 먼저 보자. function getUserInfo() { var userInfo; $.get('https://localhost:8443/users/testId1', function(re.. 2021. 3. 17. [WEB] HTTP 프로토콜 하이 ~~~ 오늘은 Spring 공부를 하다가 문득 HTTP 프로토콜을 한번 정리해놔야겠다는 생각이 들어서 글을 쓴다. HTTP 프로토콜을 본격적으로 공부해 보기전에 웹 서비스가 무엇인지 간단하게 정리 해보자. 웹서비스란? 먼저 서비스라는 용어를 알아보자. 서비스는 각각의 노드사이에서 통신이 일어나 데이터 교환을 하는것을 의미한다. 이러한 것을 서비스라고하는데 ... 이게 HTTP 에서 일어나면 웹서비스라고한다. 그런데 이 웹 서비스가 ... 누가 만드느냐에 따라 통신 방법이나 이런게 다 달라져 버리면 굉장히 혼란스럽겠지? 그래서 표준화 작업이 일어나는데 .. ! 이러한 표준 중 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이 바로HTTP 프로토콜이다. HTTP 프로토콜 이제 HTTP.. 2020. 3. 14. [AngularJS2] 부모-자식 컴포넌트 데이터 바인딩하기 (2) 지난 포스팅에 이어서 글을 쓴다. 지난 포스팅 링크 (https://devkingdom.tistory.com/100) 지난 포스팅에서는 자식 -> 부모 -> 자식 컴포넌트으로 데이터를 전송하기전에 각각의 컴포넌트를 만들어놓았었다. 오늘은 본격적으로 코딩을 해서 컴포넌트끼리 통신을하게 만들어보자. 자식 컴포넌트(ButtonComponent) 에서 데이터 보내기 먼저 button.component.ts 를열어서 Output에다가 Click Event를 달아보자. 코딩은 아래와 같이 해주면된다. 이렇게 해놓으면 부모 컴포넌트에 클릭을 통해 데이터를 넘겨주는게 가능해진다. 그리고 이 기능을 button.component.html 안에서 직접 사용해보자. 간단하게 버튼을 만들고 버튼의 클릭 이벤트에서 내가 컴포넌.. 2020. 3. 8. 이전 1 2 3 4 다음
