Javascript의 scope란? 스코프란 현재 접근할 수 있는 변수들의 범위를 뜻한다, 현재 위치에서 볼 수 있는 변수들의 범위. 어떠한 변수가 스코프 안에 선언되었으면 해당 스코프 안에서는 변수에 접근해서 읽거나, 쓸 수 있고 스코프 밖에서는 해당 변수에 접근할 수 없다. 변수는 전역 또는 코드 블록(if, for, while, try/catch...

SPA와 클라이언트 사이드 렌더링 서버사이드 렌더링을 정리해보았다. SPA : Single Page Application 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션 (하나의 html파일로만 동작함, 리액트 프로젝트 파일도 보면 다 html파일 하나로 작업) SPA는 클라이언트사이드렌더링 방식이다! Re...

노마드코더의 강의를 다시 들으려고 하면서 repository를 새로 만들게 되었다. 공부한 내용을 올리려고 하고 최초 커밋을 했는데 yarn.lock 파일에 보안취약문제가 있다고 alert를 받았다. image.png serialize-javascript 파일을 수정하는 작업을 진행했다. version을 2.1.1로 수정하고 다시 git에 커밋/푸쉬를...

ES6에 새롭게 추가된 문법들 christopher-robin-ebbinghaus-pgSkeh0yl8o-unsplash.jpg ES5에서 ES6로 넘어오면서 새롭게 추가된 문법 중 우리에게 많은 영향을 주는 것들 위주로 정리해보았다. 1. 기본함수 매개변수(default function parameter)의 사용 ES6에서는 기본 함수 매개변수를 ...

리액트의 특징 및 LifeCycle을 알아보자 1. 리액트란 무엇인가 ? SPA(Single Page Application) 가상 DOM을 활용하여 부분적인 렌더링을 하는 자바스크립트 라이브러리 2. 리액트의 특징 (1) 화면 view단을 구현하기 위한 최소단위로 재사용가능한 component를 사용 (2) component를 조립하여 완성된...

1. 함수의 표현방식 함수의 표현방식은 두가지로 나뉘어진다. 함수 선언식 - Function Declarations 함수 표현식 - Fucntion Expressions 두 가지 표현방식에 대해서 알아 보겠다. 1) 함수선언식 일반적으로 가장 많이 쓰는 함수의 선언과 비슷한 형식 함수선언식은 함수의 호이스팅이 적용된다. 2) 함수표현식 자바스크립트...

이벤트 캡처링 가장 하위에 있는 태그에 event 가 발생했을 때 제일 먼저 html 에 장착되어있는 event handler 가 실행되고, 그다음 body -> fildeset -> input (btn) 태그 방향으로 이벤트 핸들러가 호출되면 이벤트 캡처링 (부모에 있는 event handler -> 자식 event handler 방향으로 흘러가는 것...

Interface는 typescript에서 쓰이는 개념이지만, js에서는 해당 내용을 컴파일 하지 않는다. Interface와 비슷한 기능을 하지만, js에서도 컴파일 되는 것은 바로 Class! : Interface 가 typescript 측면에서는 더 안전하다, 하지만 리액트나 node, express와 같은 것을 사용할 때는 interface가 아닌...

typescript를 사용하면서 콘솔창에 있는 내용이 vs terminal 을 이용해서 보이기 하기 위해서는 니콜라스 초기세팅 1,2강 강의 참고하기 현재 tsc 명령어를 yarn start 로 변경해서 yarn start 로 ts 를 js 로 컴파일 할 때해당 명령어 사용가능 Typescript 타입스크립트를 사용해서 함수를 작성하면 함수 작성시 ...

비동기처리 비동기처리는 JAVASCRIPT 에서 AJAX 에서 쓸 수 있다. 여기서 A 는 Asynchronous 개발자도구의 네트워크탭은 웹서버와 웹브라우저의 통신을 보여준다. Ajax…….. Ajax를 제어할 때 우리가 비동기적으로 제어한다고 한다. ajax를 통해서 서버와 웹브라우저가 내부적으로 통신을 할 수 있다. 내가 다른 작업을 하고 있...

Ajax Asynchronous JavaScript and XML의 약자 Ajax는 빠르게 동작하는 동적인 웹페이지를 만들기 위해 쓰이는 개발 기법중 하나! Ajax는 웹페이지 전체를 다시 로딩하지 않고, 웹페이지의 일부분만을 갱신할 수 있음 ! Ajax는 JSON, XML, HTML, 텍스트 파일 등 다양한 형태의 데이터를 주고 받을 수 있음. 이러한...

자료구조 : 자료구조란 데이터에 편리하게 접근하고, 변경하기 위해서 데이터를 저장하거나 조직하는 방법을 말합니다. 모든 목적에 맞는 자료구조는 없습니다. 자료구조의 분류 자료구조는 현재 사진 속에 담긴 것 보다 종류가 훨씬 많다. image.png 제일 많이 쓰는 자료구조의 종류 배열(List) 인덱스가 있기때문에 randam access가 가능 (아...

class 를 활용해서 객체를 생성하는 것은 생성자함수를 만드는 것과 비슷하다. 그대신 class 생성자함수이름 { constructor(프로퍼티, 프로퍼티, 프로퍼티) { 프로퍼티 = 값; 프로퍼티 = 값, 프로퍼티 = 값 } method를 추가하고 싶다면 constructor 닫힌 후에 해당 함수를 정의 해준다. 그러면 class 생...

리액트 관련 문법정리 JSX Self-Closing Tags HTML 은 두가지 태그가 있다. 시작태그와 끝태그 그런데 img / input 같은 태그들은 하나의 태그만 가짐 이런 태그들은 self-closing tag라고 한다. self-closing tag를 사용할 때 HTML에서는 슬래쉬를 붙여도 되고 안붙여도 된다 근데 !JSX에서는 slash를...

Flexbox -> Flexbox는 해당 flex container에 묶인 아이템들의 공간 배분과 정렬을 수행하기 좋은 CSS의 속성 중 하나 flexbox의 두 개의 축 : flexbox를 다루기 위해서는 두개의 축을 알아야 함 row: 가로 줄 행(인라인방향으로 행따라 아이템이 정렬) column : 세로 줄 열 (페이지상단에서 하단으로 열따라 아이...

S2 발표자 : 김우현님 (spoqa) 프론트엔드 개발자로서 데이터 활용사례 공유 본인이 직접 경험하신 데이터 탐방기를 공유해주심 Spoqa는 무슨 회사인가? : dodo point 라고 해서 국내 1위 태블릿 기반 고객관리하는 서비스 제공하는 회사 휴대폰 번호로만 포인트 적립가능 / 얻은 데이터를 가지고 업주들은 마케팅프로모션을 함 PM / Prog...

발표자: 김인숙님 (가비아) 프론트엔드 개발자가 되기까지의 2번의 직무전환 경험 : 웹마스터 -> 웹 퍼블리셔 -> 프론트엔드 개발자 (18년의 경력 중 2번의 직군 전환 ) 웹마스터란 ? : 웹 서버를 관리하면서 프로그래밍도 하고 동시에 디자인 작업까지 맡아서 하는 직군, 풀스택 개발자와 좀 비슷하다고 보면 되는데 다양한 업무를 수행하셨어야 함 웹...

발표자: 김수진님(이롭게) RWD : Reponsive Web Design 반응형 웹 디자인 : 반응형 웹디자인은 flexible Image / Fluid Grid / Media Query 세가지로 구현 가능하며, 오늘의 주제는 미디어 쿠ㅓ리~! Media Query란 ? : Media (장치...) + Query (질문v ) -> 여러가지 ...

Array Methods Arrow function을 가장 많이 사용하는 경우 callback 함수로 사용할 때 callback 함수 : 인자로 전달되는 함수 Callback 함수 이 함수에서 map 이라는 method를 쓰면 다음에 오는 콜백함수의 obj는 매개변수 인자자리에는 모든지 다 올 수 있다. Array.map() map method는...

프론트엔드 프로젝트 중 해야할 것 ! 순서대로 (소스코드 초기세팅 후 깃 클론, 브랜치생성, push, pull 하는 법) 소스코드 초기세팅 create-react-app 기반, sass, react-router-dom, eslint, prettier 등 설치 디렉토리 구조 세팅(ex. pages, components) 초기 설정 (ex. routes....