개발나라 스용공주

이번 글은 콜백함수에 대한 글이다.  [ 콜백함수 ]콜백함수는 자신이 아닌 함수에 인수로써 전달된 함수다.콜백함수는 중복되는 코드를 발생시키지 않으면서 일부 코드만 수정하여 비슷한 여러 코드를 생성 가능하게 한다. 아래 코드를 보면 sub()는 지금 당장 실행되는 것이 아닌 main()에 인수로 전달이 되어 main이 실행하도록 하므로 sub()가 콜백함수에 해당하게 된다.콜백함수는 메인 함수가 원하는 타이밍에 실행할 수 있다.function main(value) { value();}function sub() { console.log("sub");}main(sub);     [ 콜백 함수 예제 ]아래 코드를 보면 콜백함수 기능을 이용한 부분을 확인할 수 있다.같은 repeat()을 호출하지만 안에 내부 ..

이번 글은 함수 표현식에 대해 알아볼 것이다.  [ 함수표현식 ]아래 코드는 변수 varA 안에 함수 funcA()가 있는 구조다.이때 함수 funcA()는 함수 선언식이 아니라 변수의 값으로서 함수가 생성된 것이다.let varA = function funcA() { console.log("funcA");}  따라서 아래 코드와 같이 변수명을 이용하여 호출 시 아래 결과값 이미지와 같이 변수에 담긴 함수의 기능인 콘솔창에 "funcA"를 출력하는 것을 확인할 수 있다.varA();  하지만 아래 코드와 같이 변수의 값으로 담긴 함수를 일반적인 방법으로 선언된 함수를 호출하듯 함수명 자체로 호출하게 되면 오류가 발생하는 것을 확인 할 수 있다.funcA();  따라서 자바스크립트에서는 함수도 문자나..

이번 글은 함수를 작성할 때 작성을 간소화하는 방법인 화살표 함수에 대한 글이다.  [ 화살표 함수 ]화살표 함수란, 함수의 형태를 간략하게 하여 이전보다 더 빠르고 간결하게 생성되도록 도와주는 것이다. 아래 코드의 결과는 아래 이미지와 같다.let varB = function () { return 1;};console.log(varB());  위의 코드를 화살표 함수로 만들어주면 아래 코드와 같다.function 생략 후 () 뒤에 =>를 해줌반환값이 있을 경우 {}를 생략하고 반환값만 작성함let varB = () => 1;console.log(varB());  함수의 매개변수가 있을 경우 형태는 아래 코드와 같다.let varB = (plus) => plus + 1;console.log(var..

이번 글은 삼항 연산자에 대한 설명글이다.  [ 삼항 연산자 ]삼항 연산자는 항을 3개 사용하는 연산자이다.조건식을 이용해 참과 거짓에 따라 값이 다르게 반환되는 구조이다. 아래 코드는 변수 res에 var8의 값이 짝수이면 "짝수"를, 홀수이면 "홀수"를 반환한다.let var8 = 10;let res = var8 % 2 === 0 ? "짝수" : "홀수"; 위의 코드는 아래 이미지와 같이 ?를 기준 앞에 위치한 1번 위치에 해당하는 것이 조건식이고 해당 조건식이 true면 :을 기준으로 앞에 있는 2번 위치의 값을 반환하고 false면 3번 위치의 값을 반환한다.

이번 글은 null과 undefined의 설명과 둘의 차이점과 null 병합 연산자에 대해 알아볼 것이다.  [ NULL ]null type은 아무 것도 없는 것으로 명시적으로 값을 넣어줄 때 사용된다.let empty = null;   [ Undefined ]undefined type은 변수 선언 후 아무 값도 할당하지 않았을 때 자동으로 부여되는 것이다.let none;   [ NULL과 Undefined의 차이점 ]이 둘의 차이 점은 null은 비어있는 값 자체를 값으로서 넣어준 것이고 undefined의 경우 변수의 선언만 하고 아무런 값을 넣어주지 않았을 때 정의되지 않은 곳에 자동으로 undefined이 적용된 것이다.  [ NULL 병합 연산자 ]null 병합 연산자는 존재하는 값을 추려내는..

이번 글은 비주얼스튜디오 코드를 사용하여 코딩할 때 유용한 플러그인을 소개하는 글이다.  [ Error Lens ]오류가 나타날 경우 밑줄로만 표시해주지 않고 해당 오류를 빨간색으로 표시하여 더 눈에 잘 보이도록 해주고 오류가 왜 났는지 오류의 원인을 바로 알려주는 플러그인이다.  아래 사진과 같이 오류 발생 시 오류의 원인을 바로 알려주는 것을 확인할 수 있다.

이번 글은 아래 영상에 나온 탭메뉴를 만드는 코드 리뷰이다.해당 탭메뉴는 이미지를 버튼으로 사용하여 이미지를 누르게 되면 텍스트 내용이 변경되는 코드이다.    [ 개발 과정 ]첫번째로 아래 사진과 같이 아무것도 효과도 적용되어있지않는 아래 화면을 만들어준다. 그리고 맨 첫번째 이미지에 해당하는 텍스트를 제외한 나머지 텍스트들은 안보이도록 처리해준다.(맨 첫번째 나오는 이미지와 텍스트에는 추가적으로 클래스명을 따로 부여해 해당 클래스명의 기능으로 이미지가 색상이 있고 둥근 형태이고 텍스트가 보여지는 형태가 되도록 해준다. => 그리고 클릭 시 클릭한 이미지에 추가적으로 부여한 클래스명이 옮겨가는 구조 => 옮겨가면 위에서 만든 클래스의 기능이 옮겨가지는 것 => 옮기는 것은 제이쿼리로 해준다)    두번..

이번 글은 border를 활용한 탭 메뉴 애니메이션 실습에 대한 글이다.  * border는 늘어날 수 없으므로 가상클래스로 만들어줘야함  자기자신의 X축에서 크기값을 50% 빼줘야함 (정중앙 배치)left:50%;transform: translateX(-50%); [ html ] HOME ABOUT SERVICE PORTFOLIO CONTACT  [ css ]body { margin : 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4;}a..