모모의 IT성장수첩

오늘은 자바스크립트 부분으로 넘어왔다. 자바스크립트와 jquery 부분의 기본 개념을 집어주셨다. html/css와 달리 자바스크립트 영역은 심도가 있는 영역이라 아직도 조금 두려운 영역이라 알고 있어도 기초부터 다시 정리하면 도움이 되는 것 같다.. 반복문 let fruits = ['사과','배','감','귤'] fruits.forEach((a)=>{ console.log(a) }) //사과 배 감 귤 조건문 let age = 24 if (age > 20){ console.log("성인입니다.") }else{ console.log("청소년입니다.") { //성인입니다. 반복문과 조건문의 조합 let ages = [19,20,23,32,12] ages.forEach((age)=>{ if (age > 20..

성장일지 2023. 3. 15. 03:05

육아휴직 7개월 차 프론트개발자 이동 혹은 풀스택 가능한 인터렉션 잘하는 퍼블리셔가 되자는 기준을 잡고 공부 중이다. 정처기 실기 공부랑 병행하면서 온라인 강의를 신청했다. 인프런, 패스트캠퍼스, 노매드, 애플코딩 등등 유경험자로 이번에 스파르타 코딩은 어떨지 궁금했다. 우선 국비라서 완강하면 무료라서 너무 좋다. 스파르타 코딩클럽에서 개발일지 작성을 추천해 주셔서 이렇게 이날의 기분을 적어본다. 결혼 후 그동안 시간이 없어서 회사일만 급급하게 했는데 애 낳고 어린이집 보내고 시간이 나서 이렇게 자기 계발할 수 있어서 좋다. 스파르타 코딩클럽 1주 차는 html/css랑 부트스트랩 / 배포까지 라고 하는데... 퍼블리셔로 일하고 있지만 기본 개념을 다시 들어보고 혹시나 모르는 게 있는지 천천히 들어보았다..

성장일지 2023. 3. 14. 12:06

문제_ pdf 파일 플러그인 수정 중 내부 내용을 가운데 정렬 하는데 문제가 발생: 이미지 크기가 작을 때는 상관 없었는데.. 다음 처럼 상단이 짤리는 현상이 발생 다음 처럼 flexbox에서 가운데 세로 정렬 해결 방법: flex-derection: column을 추가 해당 박스::before/after 가상선택자에 margin auto를 삽입 #viewerContainer { display: flex; flex-direction: column; /* added */ } #viewerContainer::before, #viewerContainer::after { content: ''; } #viewerContainer::before { margin-top: auto; /* added */ } #view..

퍼블리싱 2022. 1. 12. 15:51

API란? Application Programming Interface라는 어려운 용어인데 실은 별거 아닙니다. 서로 다른 프로그램간에 소통할 수 있게 도와주는 통신 규약을 뜻합니다. 근데 이걸 웹에서 사용하면 '서버와 고객간의 통신 규약'을 뜻합니다. 조금 더 쉽게 풀어말하면 '서버에게 요청해서 데이터 가져오는 방법' 이 바로 API입니다. 여러분 지금까지 짠 코드가 "누군가 /write로 접속하면 write.html을 보내주세요" 같은 거였는데 바로 이게 서버의 API입니다. 여러분 서버랑 통신할 수 있는 방법이니까요. write.html을 보고싶으면 /write로 접속하라는 API를 정의하고 계셨던 것입니다. REST API는 무엇인가 Representational State Transfer 라는 ..

Javascript 2021. 10. 4. 20:17

server.js const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.listen(8080, function () { console.log('listening on 8080') }); app.get('/', function (요청, 응답) { 응답.sendFile(__dirname + '/index.html') }) app.get('/write', function (요청, 응답) { 응답.sendFile(__dirname + '/write.html') }) app.post('/..

Javascript 2021. 10. 4. 19:43

추가작업 Q. 점프 하강시 점점 속도가 빨라지게? Q. 공룡이 달리는 것처럼 보이게? Q. 배경 다가오는건? Q. 장애물이 나타나는 간격을 랜덤하게? Q. 점수표기는? #참고게임 https://www.trex-game.skipser.com/

Javascript 2021. 9. 24. 16:43

Ajax 요청 성공시 또 다른곳으로 Ajax 요청 var 프로미스 = new Promise((성공, 실패) => { $.get('https://codingapple1.github.io/hello.txt') .done(function (결과) { 성공(결과) }) }) 프로미스.then(function (결과) { console.log(결과) return new Promise((성공, 실패) => { $.get('https://codingapple1.github.io/hello2.txt').done(function (결과) { 성공(결과) }); }); }).then(function (결과) { console.log(결과) }) 축약해서 다시 정의 var 프로미스 = ajax해주는함수('https://co..

Javascript 2021. 9. 24. 15:29

var 이미지로딩 = new Promise(function (성공, 실패) { var img = document.querySelector('test'); img.addEventListener('load', function () { 성공(); }); img.addEventListener('error', function () { 실패(); }); }); 이미지로딩.then(function () { console.log('로딩성공했어요') }).catch(function () { console.log('로딩실패했어요') })

Javascript 2021. 9. 24. 15:01

//promise 형식 var 프로미스 = new Promise(function(성공, 실패){ 성공(); }); 프로미스.then(function(){ }).catch(function(){ new Promise() 문법으로 프로미스라는 변수 오브젝트를 하나 생성하시면 Promise 제작 끝입니다. 그럼 이제 프로미스라는 변수에다가 then()을 붙여서 실행가능합니다. 프로미스 안의 코드가 실행이 완료가 되었을 때 then() 함수 내의 코드를 실행시켜줍니다. 코드가 실행이 실패했을 경우엔 catch() 함수 내의 코드를 실행시켜줍니다. (지금은 프로미스 안에 코드가 암것도 없지만요) 이런 식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 바로 Promise입니다. Promise가 콜백함수보다..

Javascript 2021. 9. 24. 14:45

자바스크립트는 항상 동기식 처리 (synchronous) 동기식 처리가 뭐냐면 한번에 코드 한줄씩 차례차례 실행된다는 소리입니다. 자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행 공간이 있는데 거기서 코드를 한줄한줄 차례로 실행합니다. 콜백함수를 이용한 순차적 실행 그럼 아까 예시로 돌아와서, 자바스크립트에서 1초 후에 코드를 실행하고 싶으면 어떻게 하죠? console.log(1); setTimeout(function(){ console.log(2); }, 1000); console.log(3); 저렇게 setTimeout 안에 콜백함수안에 코드를 짜면 된다고 배우지 않았습니까. 맞습니다. 그러면 콘솔창에 1과 3이 먼저 빠르게 출현하고 그 다음 1초 후에 2라는 숫자가 출현합니다. 자바..

Javascript 2021. 9. 24. 14:16

웹 브라우저란 서버에서 받아온 HTML CSS JS를 실행시켜주는 프로그램입니다. 근데 브라우저가 자바스크립트를 실행하는데 일련의 과정이 있습니다. 이걸 알고계시면 앞으로 코드잘짤 수 있습니다. 브라우저는 C++ 이라는 언어로 코드가 짜여져있습니다. 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어 돌립니다. stack이 뭐냐고요? 그냥 다 집어넣고 맨 윗줄부터 하나하나 실행시키는 공간입니다. 처리가 오래걸리는 코드를 만나면 하지만 가끔가다가 특별한 코드를 실행해야할 경우가 있습니다. 서버로의 ajax 요청, 이벤트리스너, setTimeout 이런 코드들입니다. 이런 코드는 처리하기까지 시간이 오래걸립니다. ajax 요청은 서버에서 응답을 받기까지 시간이 오래걸리..

Javascript 2021. 9. 24. 12:41

var person = new Map(); person.set([1, 2, 3], 'Kim'); person.set('age', 20); console.log(person.get('age')); console.log(person.size); //2 person.delete('age') //자료가 사라짐 console.log(person.get('age')); //undefinded for (var key of person.keys()) { console.log(key) } //map 자료형에 직접 자료를 집어넣을 땐 var person = new Map([ ['name', 'Kim'], ['age', 20] ]) for (var key of person.keys()) { console.log(key) }..

Javascript 2021. 9. 24. 12:30