본문 바로가기

분류 전체보기64

0033. JavaScript 공부하기8 - 클로저, 내부함수, 외부함수, private variables, 함수지향, argument, parameter, apply 섹션 15. 함수지향 - 클로저 1강. 내부함수, 외부함수 1) 클로저(closure) 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 말한다. JavaScript를 이용한 고난도의 테크닉을 구사하는데 필수적인 개념이다. 외부 함수 outter의 내부에는 내부 함수 inner가 정의되어 있다. 내부함수는 외부함수의 지역변수에 접근할 수 있다. function outter() { var title = 'coding everyday'; function inner() { alert(title); } inner(); } outter(); inner에 title에 대한 정의가 없기 때문에 outter에서 title = 'coding everyday'를 가져온다. 2강. 클로저란? 외부함수가 더 .. 2024. 1. 5.
0032. JavaScript 공부하기7 - (시즌2) 유효범위, 전역변수, 지역변수, 함수지향, 콜백, 비동기적 처리, Ajax 섹션 13. 함수지향 - 유효범위 (시즌2 시작) 1강. 전역변수와 지역변수 JavaScript : 함수형 언어, 함수가 매우 중요하다. 유효범위(Scope) : 변수의 수명 1) 지역(local) 변수와 전역(global) 변수 지역변수는 함수의 안( { 와 } 사이)에서 먼저 변수를 찾고, 없으면 밖에서 변수를 찾는다. 전역에서 접근할 수 있다는 의미로 전역변수라고 칭한다. 함수 안에서만 접근 가능한 변수가 지역변수이다. 로컬 변수를 만들 때 var이라는 키워드를 쓰게 되면 var 뒤에 따라오는 변수는 local 변수가 된다. var를 사용하지 않으면 전역 변수로 인식하기 때문에 전역 변수로서의 결괏값이 출력된다. var vscope = 'global'; function fscope() { var v.. 2024. 1. 5.
0031. JavaScript 공부하기6 - UI, API 소개 및 JavaScript 정규표현식 섹션 11. UI와 API 그리고 문서 보는 법 1강. UI와 API 수업 소개 API란? Application Programming Interface 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치 프로그래밍 언어를 통해 조작할 수 있음 https://opentutorials.org/course/743/6533 UI와 API 그리고 문서보는 법 - 생활코딩 API란? Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다. 아래 영 opentutorials.org 2강. UI와 API 소개 UI : User Interface API .. 2024. 1. 4.
0030. JavaScript 공부하기5 - 모듈(Module), 라이브러리(Library), jQuery 섹션 10. 모듈 1강. 모듈이란? 1) 모듈 부품을 의미 재사용할 수 있는 단위로 구획화하여 모듈화 하고, 다른 프로그램에 사용한다. 자주 사용하는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 2) 호스트 환경 자바스크립트가 구동되는 환경을 의미한다. 2강. 모듈화 src : 속성 main.html 파일 greeting.js 파일이 모듈이다. function welcome(){ return 'Hello World^_^'; } 이 모듈은 여러 군데에서 쓰일 수 있다. sub.html 파일 위의 예시에서는 greeting.js가 main, sub에서만 쓰였지만 실제로는 더 복잡한 함수를 더 많은 페이지에 넣기 때문에 일을 훨씬 간편하게 할 수 있.. 2024. 1. 3.
0029. JavaScript 공부하기4 - 함수(Function), 배열(Array), 객체(Object) 섹션 7. 함수 1강. 함수란? 함수(function) : 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 1) 함수의 형식 function 함수명( [인자...[,인자]] ) { 코드 내용 return 반환값 } numbering 뒤에 ()는 함수라는 뜻 함수를 정의하고 함수를 원하는 만큼 호출하면 앞에서 정의한 함수를 찾아서(1번) 2번에서 원하는 만큼 함수가 호출됨 2) 함수의 재사용성 함수는 정의가 잘 되어 있으면 재사용하기가 쉽다. 2강. 함수의 효용 만일, 함수가 없다면? 반복문 : 일정한 반복을 그 자리에서 실행할 때 용이함 함수 : 반복적으로 실행되는 로직이 여러가지 맥락에서 반복되어 사용될 때 용이함 (재사용성 ↑) 재사용성이 높아지면? 유지보수(Maintana.. 2024. 1. 3.
0028. JavaScript 공부하기3 - 반복문(while, for, break, continue) 섹션 6. 반복분 1강. 반복문 기본 문법 - while 컴퓨터에게 반복적인 작업을 지시하는 방법 1) 반복 : loop, iterate 반복문과 조건문은 매우 중요하다. 조건문 : 컴퓨터를 똑똑하게 함 반복문 : 컴퓨터를 강력하게 함 2) 반복문의 문법 : while, for while (조건, Boolean) { 반복해서 실행할 코드 } 조건이 true에서 false가 될 때까지 반복해서 실행 2강. 반복조건 반복 조건을 설정해주지 않으면 while(true)가 무한적으로 생성(무한루프)되기 때문에 과부하가 걸린다. 그래서 반복 조건을 설정해서 적당히 끊어줘야 한다. i라는 변수를 설정해서 0부터 카운트하게 하고, 9까지만 실행되도록 설정했다. 그리고 출력값에는 몇 개가 출력되었는지 나타나도록 넘버링.. 2024. 1. 3.
0027. JavaScript 공부하기2 - 연산자, 부정, 부등호, 조건문, Boolean (Feat. 잘못된 코딩 공부순서) 섹션 4. 비교 1강. 연산자 연산자 : 어떤 작업을 컴퓨터에 지시하기 위한 기호 예 : a=1 a : 변수 = : 대입연산자 (좌항에 있는 값에 우항을 대입한다) 1 : 값 (상수, 변수에 대항되는 개념) 비교 연산자 : >, = : 좌항이 우항보다 크거나 같다. DOCTYPE html> var id = prompt('아이디를 입력해주세요.'); if(id == 'egoing'){ var password = prompt('비밀번호를 입력해 주세요.'); if(password == '111111'){ alert('로그인 되었습니다. '+id+'님 반갑습니다!') } else { alert('비밀번호가 다릅니다.') } } else { alert('아이디가 일치하지 않습니다.'); } 4강. 논리 연산자 .. 2024. 1. 2.
0026. JavaScript 공부하기 1 - 크롬 개발자 도구, 콘솔, 숫자와 문자, 변수 (Feat. 생활코딩) 지난 시간까지 React를 배웠다. 그런데 다 배우고 나서 에러를 잡다가 느끼는 것은 역설적이게도 '자바스크립트를 배워야겠다'는 것이었다. 그래서 일단 오류를 잡는 것을 뒤로하고 JS 강의를 듣기로 했다. 이번에도 인프런에서 강의를 듣는데, 생활코딩 - 자바스크립트(JavaScript) 기본 강의이다. https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard [지금 무료] 생활코딩 - 자바스크립트(JavaScript) 기본 강의 - 인프런 생활코딩의 자바스크립트 언어 기본 수업입니다. 기본 문법을 통한 자바스크립트 기본에 .. 2024. 1. 2.
0026. Front-end 공부하기17 - Project 실습(2), 코드 에러잡기 전쟁 섹션 16. Mini Project 6강. (실습) App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기 1. (실습) App.js 파일 수정하기 라우팅 기능이 구현된 앱 컴포넌트 코드 react-router-dom을 이용해 총 3가지 패스에 대해서 라우팅을 제공 인덱스 경로인 slash로 접속하면 메인 페이지 컴포넌트를 보여줌 경로에 콜론을 사용하고 아이디를 입력하면 실제 컴포넌트에 useParams 훅을 사용해 ID로 해당 값을 가져올 수 있다. App 컴포넌트의 코드는 실제로 매우 단순함 라우팅 이외에는 특별히 해주는 역할이 없음 2. (실습) index.js 파일 설명 앱으로 생성한 프로젝트에는 이미 앱 컴포넌트가 기본적으로 들어가 있음 원한다면 앱 컴포넌트가 아니라 다른 .. 2024. 1. 2.
0025. Front-end 공부하기16 - Project 실습, 미니 블로그 만들기 섹션 16. Mini Projects 1강. (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치 소스코드 모음 https://github.com/soaple/mini-blog GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트 소플의 처음 만난 리액트 실습 프로젝트. Contribute to soaple/mini-blog development by creating an account on GitHub. github.com 프로젝트 : 미니 블로그 기획하기 개발을 시작하기 전에 정해야 할 것들 항상 어떤 제품을 개발하기 전에는 기획과 필요한 기능, 전체 디자인에 대해서 간단하게나마 정리 필요 미니 블로그에 필요한 기능 글 목록 보기 기능(리스트 형태) 글 .. 2023. 12. 27.

티스토리툴바