SW엔지니어트랙 80

18 :: 프론트엔드 vs 백엔드, JSON, fetch()

엘리스 SW 엔지니어 트랙 18일차 이고잉님 실시간 강의날 16일차 싱글어플리케이션 복습으로 시작 오늘은 만든 내용을 저장하는 백엔드로 들어간다 프론트엔드 웹 서버에 index.html 등 저장하지만 해석은 클라이언트 브라우저가 한다 클라이언트 사이드 기술 = 프론트엔드 백엔드 일반 웹 서버는 동작이 정해져있지만, 커스텀 웹 서버는 모든일을 할 수 있다 이 커스텀 웹서버는 python, php, node.js, spring 등으로 만들고 DB와 소통한다 서버 사이트 기술 = 백엔드 이번주는 백엔드가 주체 웹 서버가 클라이언트에 응답하는 주체가 Json, xml, csv 요즘은 Json이 압도적으로 우세 fetch가 대박 꼭 알아야겠군 이 코드는 꼭 이해하자 fetch('/topics') .then(fun..

Web Dev/ELICE 2021.11.18

17 :: 비동기, Promise 예시

엘리스 SW 엔지니어 트랙 17일차 온라인 강의날 비동기, Promise에 대해 조금 깊게 들어가는날 자바스크립트 엔진은 하나의 메인 스레드 코드를 한 줄씩 실행 동기 반복문, 함수 호출 등 오랜 시간을 메인 스레드를 오래 점유하면 프로그램이 멈춘다 가령 반복문 무한루프 등 비동기 대표적으로 setTimeout(), fetch() 있다. 한 코드가 종료되기전에 다른 코드가 진행된다 시간이 걸리는 행동을 기다리며 동시에 다른 일을 처리할 수 있다 비동기 코드는 정해진 함수(setTimeout, fetch, Promise ... ) 이 함수를 비동기 API라고 부른다 Promise 비동기 처리의 순서 조종 new Promise(callback) callback에는 resolve, reject를 받는다 순서를..

Web Dev/ELICE 2021.11.17

16 :: 리팩토링, url 바꾸기, 싱글 페이지 어플리케이션, Promise

엘리스 SW 엔지니어 트랙 16일차 이고잉님 실시간 강의날 저번주에 배운 Closure를 몰라도 괜찮다는 이고잉님의 격려의 말씀으로 시작 이번주 배울 Promise 지금은 다른 사람이 만든 Promise를 가지고 라이브러리를 이해할 정도만 가도 좋다 Ajax는 꼭 이해하자! 다음주에 나올 클린코드, TypeScript, 디자인 패턴 등 그냥 구경만 해도 좋다 시멘틱 태그 의미론적 태그라고도 불린다 검색 로봇이 사이트를 더욱 가치있게 사용할 수 있게 도와준다 앱을 구상할 때 데이터를 먼저 생각하자 let data = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'js', body..

Web Dev/ELICE 2021.11.16

15 :: node.js 개념, Hoisting, 내장객체, FormData

엘리스 SW 엔지니어 트랙 15일차 오티 빼고 한 주에 5일씩 오늘로 3주차 마지막 날이다 1~2 주차는 쉬엄쉬엄 가는듯 하다가 3주차부터 엑셀 사정없이 밟는다 오늘도 잘 모르는 내용 아니 이제 나오는 것들 대부분 잘 모르는 이야기 집중하자! 오늘은 "옛날 옛적에 자바스크립트가 있었는데" 느낌 어떻게 움직이고, 각 역할들에 대한 이야기 자바스크립트 코드는 자바스크립트 엔징을 통해 파싱되고 실행된다 Chrome 브라우저는 V8 엔진 사용 node.js 브라우저 외에서 자바스크립트 코드를 실행할 수 있게 해주는 프로그램!! 그렇구나~ 이거봐 알고나니 개념은 별거 아니잖아 웹을 벗어나기 위한 JavaScript의 도약이라고 알아두자 브라우저 환경, node.js 환경에서 같은 코드를 작성해도 다른 작동이 될 ..

Web Dev/ELICE 2021.11.13

14 :: 바인딩, this 조작 삼총사, Closure

엘리스 SW 엔지니어 트랙 14일차 온라인 강의날 자바스크립트 심화의 날 보니까 실시간 강의 다음날 온라인 강의는 실시간 강의에서 배운 내용을 복습하고 살을 붙이고 튼튼하게 만드는 내용을 담고 있는구나 계획적이었어.. 온라인 강의를 좀 더 성실히 들어야겠다 아무튼 이번 온라인 강의에서는 자바스크립트 함수가 실행되는 과정으로 시작되었다 이제는 알 때가 됐다 바인딩(binding) 우선 bind()는 언제 사용할까? this를 가지고 있는 객체(object)에 사용하는 것처럼 보인다 this를 자유자재로 사용하기 위해서처럼 보인다 this가 작동하지않는/사라지는 경우가 있다 예) setTimeOut() bind에 관한 좋은 설명 링크 => https://ko.javascript.info/bind 바인드 사용..

Web Dev/ELICE 2021.11.12

12 :: 노드 복습, 자바스크립트 카레이싱

엘리스 SW 엔지니어 트랙 12일차 온라인 강의날 오늘은 더욱 집중하고 싶은 내용! DOM, 노드 그리고 이벤트에 대한 날~ 어제 실시간 강의에서 들은 내용을 한번 더 복습도 하고, 새로운 내용을 실습하는 내용도 있다 노드 Node를 이번에는 제대로 잡자! HTML DOM에서 정보를 저장하는 계층적 단위라고 엘리스의 선생님은 말하신다 또누군가 이렇게도 설명을 했었다 A node is a connection or a branch in a hierarchy, etc. where node.js would refer to the software - but you can also just call it node for a short form and most people in the coding world will..

Web Dev/ELICE 2021.11.10

11 :: DOM, 노드

엘리스 SW 엔지니어 트랙 11일차 오규석 코치님 DOM 이해하는 날 Document Object Model 태그는 노드라고 할 수 있다고 하신다 DOM 구성 될 때 태그, 텍스트, 주석까지 모두 노드다 Test1 // h1 태그도 노드 Test2 // 들어있는 Test2도 노드 // 줄바꿈도 노드 Test3 Test4 // 이 녀석도 노드 // 모든게 노드!! 라고 적은 이 주석도 노드 노드 탐색 nextSibling firstChild previousSlbling nextElementSibling 등 하지만 직접 getElementyById, querySelector로 가져오기 때문에 잘 사용할 일은 없다고 한다 JavaScript에서 노드 만들어서 HTML에 넣기 let header = docume..

Web Dev/ELICE 2021.11.09

10 :: 자기소개 페이지 만들기

엘리스 SW 엔지니어 트랙 10일차 오늘은 한 가지만 하면 됐다 주어진 내용이 담긴 자기 소개 페이지를 만드는 것이다 지금까지 복습한 HTML, CSS, JavaScript 이용해서 만들었다 한 눈에 봐도 멋진 자기소개서를 만들려고, figma도 키고, 리소스도 찾아봤다 결과는 과연 . . . 굉장히 심플한 1페이지 자기소개서가 완성됐다 이 것도 시간이 꽤 걸렸다 갑자기 하려니까 쉽지 않구만~ 머리속에 있는 상상을 코드로 끄집어 내는 연습이 귀찮아도 해봐야 되나보다 결국엔 만족할 수 있는 포트폴리오를 만들어야 되니까

Web Dev/ELICE 2021.11.06

9 :: JavaScript 활용, 난이도 급 상승

엘리스 SW 엔지니어 트랙 9일차 온라인 강의날 오늘도 조금 일찍 시작했다 연산자, 조건문, 반복문의 기본 사용법을 알아보는 시간 이매 해봤던 내용이라 쑥쑥 넘어갔다 넘어가다 보니 JavaScript 활용해서 무언가를 만들어보는 내용으로 들어갔다 주사위 놀이, 소수출력 등 쉬운 문제를 풀었다 별거 아니ㄴ.. 갑자기 문제 난이도 급상승! 한번에 푸는 문제도 있고 시간이 걸려도 100점 통과 못하는 사태 속출중 readline 원 없이 써봤네 const readline = require('readline') 와우 오늘은 10시간을 넘겼다.. 한 문제 75점 빼고 전부 통과했다 75점 문제 때문에 평생 99% 유지예정 /********추가********/ 아니 11시간 넘겼고 다른 레이서들의 도움으로 못 풀은..

Web Dev/ELICE 2021.11.05

8 :: JavaScript 입출력, Number() parseInt(), 정규표현식 복습

엘리스 SW 엔지니어 트랙 8일차 온라인 강의날 오늘은 아침 일찍부터 시작!! 온라인 강의날의 좋은 점은 원하는 시간에 맞춰서 할 수 있다는 것 오늘은 일찍시작해서 일찍 끝난다~~ 점심쯤에는 추가적으로 뭐 할지 생각해봐야지 오늘은 JavaScript 데이터 타입 Property와 몇 개의 Method 그리고 JavaScript 문제를 풀었다. ES6 문법인 화살표 문법부터 console에서 입력을 받는 법 입력을 받아서 간단한 문제를 푸는 듯 알고리즘 코딩 테스트를 염두한 것일까? 풀릴 땐 참 재밌어~ 문제 중에 훅! 하고 정규표현식이 나왔네 다 까먹었는데.. freeCodeCamp에서 정규표현식 부분만 복습 해봐야겠다 복습중 match()랑 test() 방향이 같았으면 좋을텐데 오늘의 궁금증 해결 Nu..

Web Dev/ELICE 2021.11.04
728x90