본문 바로가기 메뉴 바로가기

공부 기록일지📚

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

공부 기록일지📚

검색하기 폼
  • 분류 전체보기 (387)
    • Frontend (278)
      • CSS, HTML (50)
      • CSS 프레임워크 (5)
      • JavaScript (114)
      • TypeScript (22)
      • react.js (49)
      • Next.js (9)
      • jQuery (8)
      • WIL😎 (20)
    • 코딩테스트 (27)
      • 알고리즘 & 자료구조 개념 (18)
      • 연습문제 (9)
    • 프로그래밍 (77)
      • Node.js (6)
      • Python (3)
      • 유용한 사이트 | 정보 (16)
      • Git, Github (24)
      • 정리하지 못한 내용 (3)
      • CS 지식 (25)
    • private (1)
      • interest (0)
      • 자격증 (1)
  • 방명록

Frontend/JavaScript (114)
[생활코딩] JS문법(함수)- 유효범위: 전역변수와 지역변수

자바스크립트를 함수형 언어라고도 합니다. 자바스크립트에서 함수란 모듈화의 근간이다. 유효범위(scope)는 변수의 수명을 말합니다. 함수를 사용할 때에는 전역변수와 지역변수를 제대로 사용해야합니다. 함수 밖에서 변수를 선언하면 전역변수 - 애플리케이션 전역에서 사용가능한 변수이기 때문에 함수 내부에서 전역변수에 접근이 가능합니다. 함수 내부에서 변수를 선언하면 지역변수- 애플리케이션 전역에서 사용불가능한 변수이며 함수 밖에서는 접근이 불가능합니다. 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다 const, let, var 이 쓰여있지않은 지역변수는 전역변수가 된다. -> 하지만 내부에 한번 const, let, var로 선언된 적이 있는 변수는 그 다음에 함수 내부 코드에서..

Frontend/JavaScript 2022. 1. 9. 20:55
[생활코딩] JS문법: UI와 API 문서보는 법

User Interface(UI) ->일반사용자가 사용하여 어플리케이션(웹브라우저 등)을 제어 간단히 말하자면 사용자 접점 Application Programming Interface(API) ->alert()등의 명령어로 알림창을 띄우는 것 등 개발자가 주 사용자 애플리케이션을 프로그래밍하기 위한 개발자의 접점 레퍼런스와 튜토리얼 프로그래밍을 공부하기 위한 두 가지 큰 자료(reference & tutorial ) 튜토리얼(tutorial) - 언어의 문법 설명 레퍼런스(reference) - 명령어의 사전 자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트환경의 API로 구분 자바스크립트의 호스트환경에 대한 API -> 웹 브라우저, node.js *ECMAScri..

Frontend/JavaScript 2022. 1. 8. 20:45
[생활코딩] JS문법: 모듈(Module)

모듈화(파일로 분리하기)를 통해 얻을 수 있는 효과 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다. 한 번 다운로드된 모듈(JS)은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을 절약할 수 있다.(브라우저에서만 해당) 모듈이란? 순수한 자바스크립트에서는 모듈(module)의 개념이 분명하게 존재하지 않는다. 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공됨 모듈은 프로그램을 구성하는 작은 부품으로 이해하면 쉽습니다. ->자바스크립트의 대표적인 호스트 환경인 웹 브라우저에서 로직을 모듈화하는 방법에 대..

Frontend/JavaScript 2022. 1. 7. 20:58
[생활코딩]JS문법: 객체(Object)

객체(Object)는 데이터를 담아내는 컨테이너라는 점에서 배열과 아주 유사하다. 가시적인 차이가 있다면 배열은 중복되지 않는 인덱스(색인)이 데이터가 추가될 때마다 자동으로 지정되지만 객체는 배열에서 자동으로 지정되는 '인덱스'를 직접 지정할 수 있다. //인덱스를 문자열로 지정하고 싶다면 객체를 사용하면 됩니다. *다른 언어에서 연관배열(associative array) 또는 맵(map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당합니다. 객체의 생성 배열은 [] 대괄호로 여닫지만 객체는 {}중괄호로 여닫습니다. 구분은 콤마로 합니다. 객체는 key : value 로 이루어져 있습니다. // 아래 코드에서 key는 cong, vella, sollar 가 되겠죠 const grades..

Frontend/JavaScript 2022. 1. 6. 23:32
[생활코딩] JS문법: 배열(Array)

배열(Array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것 기본형식: 대괄호 [ element1, element2 ... ]; let member = ['감자', '고구마', '호박']; 배열의 내부에 있는 데이터 각각을 '원소' 즉, element라고 합니다. 또한, 원소끼리의 구분은 ,(콤마)로 해줍니다. 그리고 그 원소들이 갖고있는 고유값(문맥적으론 배열의 원소가 갖고있는 순서)을 한국어로 '색인' 영어로는 index라고 합니다. index는 0부터 시작합니다. // arrayName[index] alert(member[0]); //output: '감자' 배열이..

Frontend/JavaScript 2022. 1. 5. 18:41
[생활코딩] JS문법: 함수(Function)

함수(Function) - 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. (유지보수의 용이, 가독성 높아짐) 기본형식 function 함수명( [인자...[,인자]] ){ 코드 return 반환값 } /*함수 numbering을 1000번 실행하라 */ //주의: 변수 앞에 let, const 를 꼭 써줘야합니다. function numbering() { let i = 0; while (i < 20) { document.write(i + ""); i++; } } for (let i = 0; i < 1000; i++) { numbering(); } 입력과 출력 return(출력) return이 하는 일은 2가지가 있습니다. return뒤에 따라오는 값을 함수의 결과로 반환 re..

Frontend/JavaScript 2022. 1. 3. 23:57
[생활코딩] JS문법: 반복문(loop or iterate)

▶반복문의 문법은 몇 가지가 있으며 각각의 구문은 서로 대체 가능하기 때문에 상황과 취향에 따라서 선택하여 사용하면 된다. while 기본형식 while(조건){ // 반복해서 실행할 코드 } 조건에는 당연히 Boolean데이터타입이 와야 합니다. 조건의 Boolean이 true 에서 false가 될 때까지 반복됩니다. 조건식이 계속해서 true일 경우, 무한루프에 빠지게 되며 이는 쉽게 발생할 수 있는 오류입니다. let i = 0; //초기화 while (i < 10) { document.write(`Coding EveryBody! I am number ${i + 1} `); i = i + 1;} for 기본형식 for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){ 반복해서 실행될 코드 } ..

Frontend/JavaScript 2022. 1. 2. 23:50
[생활코딩] JS문법: 조건문(Conditional Statement)

Boolean: 비교 연산의 결과로 참이거나 거짓을 얻을 수 있다. 여기서 참(true)과 거짓(false)은 언어에서 제공하는 데이터형이다. 이를 Boolean이라 부르고 불린은 위에 말한 두 가지 밖에 없다. 참과 거짓에 따라 조건문을 실행하기도 안하기도 하기 때문에 조건문에서 핵심적인 역할을 담당한다. if문 if(true){ alert(1); alert(2); alert(3); alert(4); } alert(5); //output: 1~5까지 알림창 if(false){ alert(1); alert(2); alert(3); alert(4); } alert(5); //output:5만 알림창에 뜬다. else -if로는 좀 더 복잡한 상황을 처리하는데 부족하다. -else는 조건문의 반대상황에 적용..

Frontend/JavaScript 2021. 12. 31. 22:48
이전 1 ··· 7 8 9 10 11 12 13 ··· 15 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • 항해99프론트후기
  • 틸드와 캐럿
  • 항해99추천비추천
  • nvm경로 오류
  • nvm 설치순서
  • 원티드 프리온보딩 프론트엔드 챌린지 3일차
  • grid flex
  • 형제 요소 선택자
  • 타입스크립트 DT
  • 프리온보딩 프론트엔드 챌린지 3월
  • && 셸 명령어
  • fs모듈 넥스트
  • getServerSideProps
  • D 플래그
  • 원티드 프리온보딩 FE 챌린지
  • 프리렌더링확인법
  • is()
  • aspect-ratio
  • 타입스크립트 장점
  • reactAPI
  • getStaticPaths
  • Prittier
  • tilde caret
  • float 레이아웃
  • 부트캠프항해
  • ~ ^
  • 원티드 FE 프리온보딩 챌린지
  • 원티드 3월 프론트엔드 챌린지
  • 항해99프론트
  • text input pattern
more
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바