이번 프로젝트를 진행하며 배운 것

이직 후 새로운 회사에서 일하며 몰랐던 것들을 많이 배워가고 있다. 감사하게도 원하던 분야의 프로젝트를 맡게 되어 재밌게 일하기도 했고, 좋은 동료들 덕분에 모르는 부분은 도움을 받으며 프로젝트를 진행해 나가고 있다. 이번 프로젝트를 진행하면서 배운 것들을 기록해두려

2020년 12월 24일
·
0개의 댓글

시맨틱 태그

시맨틱 태그란 개발자와 브라우저에게 의미를 제공하는 태그를 뜻한다. 태그 안에 어떤 내용이 들어갈 지 유추할 수 있게 해준다. 웹 사용자의 사용성을 높여주고 검색 엔진 최적화(SEO)에 도움을 준다. div가 non-semantic 태그라면 article은 seman

2020년 12월 10일
·
0개의 댓글
post-thumbnail

스파르타 코딩클럽 5주차

SEOUL MOMENT서울의 관광지를 소개해주고 다녀온 관광지에 대한 감상을 기록할 수 있는 사이트서울의 주요 관광지를 카드 형식으로 소개한다.관광지 카드를 클릭하면 관광지 정보 url로 이동한다.'가고싶어요' 버튼을 클릭하면 '가고싶어요' 탭에 추가되어 모아볼 수 있

2020년 11월 4일
·
0개의 댓글

스파르타 코딩클럽 4주차

Application Programing Interface.응용 프로그램(application)에서 기능을 사용하거나 데이터를 주고 받기 위한 기능우리가 사용하는 API는 요청 정보, 서버가 제공할 기능, 응답 데이터를 미리 약속해두고 그대로 동작한다.요청 정보: 요청

2020년 11월 4일
·
0개의 댓글

스파르타 코딩클럽 3주차

파이썬(Python)을 설치한다는 것의 의미일종의 번역팩을 설치한다고 생각하면 된다.파이썬 문법으로 된 것을 컴퓨터가 알아들을 수 있도록 변환해주고 프로그래밍을 쉽게 할 수 있는 기본코드를 설치하는 것이다.파이썬 기초파이썬에서는 들여쓰기로 블록 단위를 나눈다.들여쓰기를

2020년 10월 25일
·
0개의 댓글

CSS 방법론

OOCSSObject Oriented CSSCSS를 캡슐화하여 중복을 최소화한다.컨테이너와 컨텐츠를 분리한다.구조와 모양을 분리한다.ex)컨테이너: .header, .footer컨텐츠: .common-width구조: .button, .box, .widget모양: .sk

2020년 10월 15일
·
0개의 댓글

스파르타 코딩클럽 2주차

2주차 Javascript로 서버에 데이터 요청하고 서버가 응답한 데이터 받아 조작하기 클라이언트(브라우저) - 서버 클라이언트가 서버에 데이터를 요청(Request)하면 서버가 응답(Response)하여 데이터를 전달해준다. 반복문과 딕셔너리의 활용 Ajax 통신

2020년 10월 12일
·
0개의 댓글
post-thumbnail

Vue.js - 같은 컴포넌트 레벨 간의 통신 방법

app-content의 pass 버튼을 눌렀을 때 같은 컴포넌트 레벨인 app-header로 passNum 값을 전달하고 싶다면?app-content에서 app-header로 바로 값을 보낼 수 없으므로 $emit을 이용하여 먼저 값을 Root로 보낸다.그 다음에 Ro

2020년 10월 12일
·
0개의 댓글
post-thumbnail

Vue.js - 컴포넌트 통신 방식 event emit

event emit 하위 컴포넌트에서 상위 컴포넌트로 통신하기 위해 신호를 보내는 것

2020년 10월 12일
·
0개의 댓글
post-thumbnail

Vue.js - 컴포넌트 통신 방식 props

뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다.따라서 컴포넌트 간에 데이터를 주고 받기 위해서는 다음과 같은 규칙을 따라야 한다.상위에서 하위로는 데이터를 내려준다. props 전달하위에서 상위로는 이벤트를 올려준다. 이벤트 발생 컴포넌트가 데이터를 주고 받을

2020년 10월 8일
·
0개의 댓글
post-thumbnail

Vue.js - 컴포넌트

컴포넌트화면의 영역을 구분하여 개발할 수 있는 뷰의 기능.컴포넌트 기반으로 화면을 개발하면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.전역 컴포넌트 생성 코드예시지역 컴포넌트 생성 코드인스턴스의 components 속성으로 생성해준다.예시결과

2020년 10월 8일
·
0개의 댓글

Vue.js - 인스턴스

인스턴스뷰로 개발할 때 필수로 생성해야 하는 코드new Vue(); 와 같이 작성한다.변수 안에 인스턴스를 담을 수 있다.일반적으로 JavaScript에서 인스턴스를 만드는 방법은 객체생성자를 이용하는 것이다.매번 함수를 정의하는 것이 아니라 미리 정의된 함수를 가져다

2020년 10월 8일
·
0개의 댓글

Vue.js 의 이해

Vue.jsMVVM패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리다음 순서대로 진행된다.View브라우저에서 사용자에게 비춰지는 화면 HTML.DOM을 이용하여 자바스크립에서 조작할 수 있다.\--> DOMDOM ListnersViewMo

2020년 10월 8일
·
0개의 댓글

비동기 처리의 이해

동기적(Synchronous) 처리한 작업이 끝나야 다른 작업이 시작된다.동시에 여러 작업을 처리할 수 없다.동기적 처리의 예시work() 라는 작업이 끝난 뒤에 다음 작업이 진행된다.비동기적(Asynchronous) 처리동시에 여러 작업을 처리할 수 있다.기다리는 동

2020년 10월 7일
·
0개의 댓글

Javascript - 단축 평가 논리 계산법

단축 평가 논리 계산법논리 연산자를 조금 더 유용하게 사용하는 방법파라미터에 객체값이 올바르게 들어갔을 때파라미터에 객체값이 올바르게 들어가지 않았을 때객체값이 올바르게 들어갔을 때만 결과 값을 반환하고 그렇지 않을 때는 undefined를 반환한다.&& 논리연산자를

2020년 10월 7일
·
0개의 댓글

Javascript - Truthy와 Falsy

위 다섯가지 값은 falsy 한 값이다.그래서 !로 반전시켜주면 모두 true가 된다.위 다섯가지 값이 이외는 모두 truthy한 값이다.위 다섯가지 값을 제외한 값에 !로 반전시켜주면 falsy한 값이 된다.다음과 같은 상황에서 사용할 수 있다.

2020년 10월 7일
·
0개의 댓글

Javascript - Class

ClassES6에서 추가된 문법이다.class는 C++, Java, CJavascript에는 없어서 객체생성자를 사용하여 비슷한 작업을 구현했다.class를 사용하면 객체생성자로 구현했던 코드를 좀 더 깔끔하게 구현할 수 있으며 상속도 훨씬 쉽게 할 수 있다.

2020년 10월 7일
·
0개의 댓글

Javascript - 객체생성자

객체생성자함수를 통해 새로운 객체를 만들고 넣고싶은 값 또는 함수를 구현할 수 있게 해준다.주로 대문자로 시작한다.프로토타입(prototype)지정한 객체생성자 안에 키와 값을 추가해준다.객체생성자 함수이름.prototype.원하는 키 = 코드객체생성자 상속하기새로운

2020년 10월 7일
·
0개의 댓글

Javascript - 배열 내장함수 Test

배열이 주어졌을 때 10보다 큰 값의 갯수 구하기for문forEachfilterreduce

2020년 10월 7일
·
0개의 댓글

Javascript - 배열 내장함수 reduce

reduce배열 안에 있는 모든 값들을 사용하여 어떤 값을 연산해야 할 때 사용한다.forEach로 배열의 값을 모두 더한다면 다음과 같다.reduce를 사용하면 다음과 같이 나타낼 수 있다.배열의 원소 값의 평균을 구하려면 다음과 같이 나타낼 수 있다.

2020년 10월 6일
·
0개의 댓글