자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다. 그래야 응용도 잘하고 혼자서 코드를 잘 작성 할 수 있다. 함수는 길고 복잡한 코드를 한 단어로 축약하고 싶을 때 쓰는 문법이다. 어려운말로 표현하면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법이다. function 문법 사용법 function 자유롭게작명() { 축약하고 싶은 긴 코드 } 위 코드를 작성하고 자유롭게작명() 이거 쓸 때 마다 그자리에 축약하고 싶은 긴 코드가 실행된다. function 문법 응용 예제 2023.03.26 - [Front end/JavaScript] - 동적 UI 만드는 방법 여기서 작성한 예제이다. 참고하면 더 빠른 이해가 될 것이다! 열기 알림창 여는 코드를 function ..
동적 UI 만드는 방법에 대해서 알아보자. 웹페이지에선 탭, 모달창, 서브메뉴, 툴팅 등 수백개의 동적인 UI를 만들 수 있다. 하지만 수많은 UI들을 하나하나 다 외워서 만드는게 아니라 동적인 UI 만드는 방법을 알면 다 응용해서 만들 수 있다. 동적 UI 만드는 방법 1. HTML CSS로 미리 UI 디자인을 해놓는다. (필요없을땐 숨기기) 2. 버튼을 누르거나 할 경우 UI를 보여달라고 자바스크립트 코드짜기 1. HTML CSS로 미리 디자인하기 알림창임 .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } 여기서 미리 html css로 디자인 해놓고 display..
프로그래밍이란 컴퓨터에게 일을 시키는것이다. 코드를 짜서 컴퓨터에게 저거해라 이거해라 일을 시키는거다. 여기서 컴퓨터에게 일을 시킬때는 사람과 대화하듯이 하면 안된다. 사람은 "너 저기가서 저것좀 바꿔와" 하면 잘 알아듣는다. 컴퓨터는 "너 저기가서 저것좀 바꿔와" 하면 절대 못알아듣는다. 왜냐하면 컴퓨터는 사람처럼 유추, 상상을 할 수가 없어서 정말 정확히 설명해줘야 알아듣는다. "너 저기가서 저것좀 바꿔" 이게 아니라 "너 id가 hello인 html요소 찾아서 텍스트 내용을 강동욱이라고 바꿔" 이렇게 말해야 알아듣는다. 이렇게 컴퓨터와 사람과의 차이점을 잘 알고 있어야 코딩,프로그래밍을 잘할 수 있다.
요즘 자바스크립트는 많은 곳에서 쓰이고 있다. 서버도 만들고 머신러닝도 하고 등등 많은 분야에서 쓰이고있다. 하지만 자바스크립트의 근본 목적은 HTML 조작이 목적이다. 자바스크립트를 쓰는 가장 큰 이유는 HTML 조작가능해서 쓰는것이다. 자바스크립트를 사용해서 HTML 조작을 하면 뭐가 좋은가? => 동적인 UI 만들수 있다. 그 외에도 자바스크립트를 사용하면 아래와 같은 기능들을 사용할 수 있다. 서버와 통신가능 클릭, 타이핑 감지 비동기처리 자료다루기 등등 다른 많은 기능들이 있음. 자바스크립트로 HTML 조작 및 변경하는 법 안녕하세요! document.getElementById('???').??? = '???'; 여기 물음표만 맘대로 바꿔주면 html의 모든걸 변경하고 조작할 수 있다. docu..
리액트에 대한 입문자들의 착각 리액트를 뭔가 특별한 것이라고 생각한다. 그것은 엄청난 착각이다. 결국에는 웹브라우저는 html,css,js밖에 못읽는다. 특히 화면을 구성하는것은 html,css 이여야 하고, 그에 대한 동작은 js여야 한다. 여기서 리액트라는게 뭔가 새로운 존재가 아니라 리액트도 결국은 자바스크립트일 뿐이고, 자바스크립트로 html,css를 만들어내는 그런 존재일뿐이다. 그래서 우리는 리액트로 프로그래밍을 하더라도 결과물은 html,css,js가 나와야지만 브라우저가 파일들을 읽고 화면에 표시 할 수 있다. 리액트가 특별한게 아니라 자바스크립트라는점 이부분을 꼭 명심하자! create-react-app 을 하면 초반에 셋팅이 쫙 되고 그걸 실행하면 "hello world"같은 앱이 딱 ..
리액트를 사용하는이유 - 복잡한 웹앱에서 데이터와 화면일치 문제를 쉽게 해결 해준다. 리액트를 사용한다고해서 무조건 장점만 있는것이 아님(무지성 리액트 ❌) 리액트를 사용하는 이유는 복잡한 웹앱에서 데이터와 화면의 일치 문제를 리액트가 쉽게 풀어주기 때문에 쓰는것이다. 그럼 고전적인 문서같은 웹 사이트들은 리액트를 굳이 쓸 필요가 없다. 하지만 요즘 트렌드는 문서같은 웹 사이트들도 싱글 페이지 애플리케이션으로 만드는 추세이긴 하다. 대신에 리액트를 도입한다고 해서 무조건 장점만 있는것이 아니다. 페이지 깜빡임 새로고침없이 자연스럽게 넘어가는 그런효과, 데이터와 화면일치문제 이런것들을 해결하기 쉽지만 데이터들이 자바스크립트로만 이루어져 있다 보니까 검색엔진 노출에 어려움이 있을수 있다. 검색엔진 노출 때문..
OSI 7계층 모델 해당 계층 모델은 ISO(International Organization for Standardization)라고 하는 국제표준화기구에서 1984년에 제정한 표준 규격입니다. 왜 네트워크에 대한 표준 규격을 정해야만 했을까요? 지금은 상상하기 어렵지만 같은 회사에서 만든 컴퓨터끼리만 통신이 가능했던 시절이 있었습니다. 따라서 다른 회사의 시스템이라도 네트워크 유형에 관계없이 상호 통신이 가능한 규약, 즉 프로토콜(Protocol)이 필요했습니다. 그래서 ISO에서는 제조사에 상관없이 공통으로 사용할 수 있는 네트워크 표준 규격을 정의했습니다. OSI 7계층 모델은 네트워크를 이루고 있는 구성요소들을 7단계로 나누고, 각 계층의 표준을 정하였습니다. OSI 7계층 모델의 목적은 표준화를..
네트워크의 시작 인터넷이 대중화되면서 네트워크는 컴퓨터 기술에서 빼놓을 수 없는 분야가 되었습니다. 우리는 언제 어디서나 인터넷에 접속하여 필요한 정보를 찾고 사람들과 연락을 주고받을 수 있습니다. 이러한 네트워크는 어디서부터 시작된 걸까요? 지금 우리가 사용하는 인터넷 프로토콜, 즉 IP 기반의 네트워크는 미 국방성에서 1969년 진행했던 아르파넷(ARPANET) 프로젝트에서 시작되었습니다. 이 프로젝트는 당시 냉전시대에서 핵전쟁을 대비하기 위한 통신망 구축을 위해 추진되었습니다. 이때 기존에 사용되었던 회선교환 방식이 아닌 패킷교환 방식으로 네트워크를 구축하게 되는데 이를 토대로 현재의 인터넷 통신 방식의 기반이 세워졌습니다. 그럼 패킷교환 이전에 사용되었던 회선교환 방식은 어떻게 통신을 했을까요? ..
웹 애플리케이션(SPA)은 웹사이트에 비해서 데이터가 많음 -> 복잡하고 어려움 -> 프론트엔드 개발자가 나온 이유 데이터가 바뀌면 화면도 바뀌어야 하기 때문에 javascript로만 구현하기 힘듬 이러한 문제를 해결하기 위해서 angular, react, vue, svelte 같은 싱글 페이지 어플리케이션 프레임워크들이 나오기 시작함 (참고) 리액트는 라이브러리이기는 하지만 Redux나 MobX, react-router와 함께 프레임워크처럼 사용된다. 이런 것들의 주목적은 프론트에서 데이트를 갖고 있고 데이터를 바꾸면 화면도 알아서 데이터와 일치되게 바뀌는 것 페이스북은 기존의 mvc 패턴으로 만들었던 웹사이트를 버리고 react를 만들어서 데이터와 화면의 불일치 문제를 해결함. → 복잡한 웹앱에서 데..
오늘은 얕은복사와 깊은복사의 차이점에 대해 알아보려고 한다. 우선 얕은복사와 깊은복사의에 대해 알아보기 전에 참조에 관한 개념을 이해해야한다. 참조란? let 강동욱 = { name: '강동욱', age: 26, job: 'frontEndDeveloper' } let 손흥민 = 강동욱; // 강동욱과 손흥민은 참조관계가 된다. 손흥민.name = '손흥민'; 손흥민.age = 30; 손흥민.job = 'soccer player' console.log(손흥민); // {name: '손흥민', age: 30, job: 'soccer player'} console.log(강동욱); // {name: '손흥민', age: 30, job: 'soccer player'} 위처럼 참조관계가 되면 손흥민의 속성(nam..
