본문 바로가기

분류 전체보기

 (108)
weather api를 이용해 날씨 데이터 가져오기(수정중) https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org 위 사이트에 들어가서 회원가입 후 api를 받아온다. fetch(url) 은 url로 ..
[ 수정중 ]Vuex란?! vuex란?vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다.애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.Vue의 구조?!State :  컴포넌트 간에 공유하는 데이터 data()View : 데이터를 표시하는 화면 templeateAction : 사용자의 입력에 따라 데이터를 변경하는 methodsView(template)에서 버튼을 클릭했을 때, 클릭이라는 Action(Method)이 발생한다.Action이 동작을 통해서 State(data)를 변경한다. Vuex의 구조뷰 컴포넌트 → 비동기 로직 → 동기 로직 → 상태 시작은 Vue Components컴포넌트에서 비동기로직(method를 선언해서 API를 콜하는 부분..
디자인패턴 - MVC / MVP / MVVM 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리하여 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리해 특정한 규약을 통해 쉽게 쓸 수 있는 형태를 만든 것을 말한다. MVC, MVVM 등 은 소프트웨어 설계와 관련된 디자인 패턴이다. 소프트웨어 공학에서의 '흔히 사용되는' 설계 패턴을 의미한다. 1. MVC Model + View + Controller 를 합친 용어이다. model 데이터베이스와 소통하며, 데이터를 가지고 올 수 도 있고 가지고 있을 수 도 있다. Controller에게 데이터를 전달한다. model이 view와 직접 소통하는 일을 없다! View 유저가 보는 화면을 보여주게 하는 역할이다. 데이터를 받고 그리는 역할을 수행한다. 오직 Cont..
HTTP VS HTTPS HTTP - Hyper Text Transfer Protocol 서버/클라이언트 모델에 따라 데이터를 주고 받기 위한 프로토콜이다. HTTP는 인터넷에서 하이퍼 텍스트를 교환하기 위한 통신 규약으로 80번 포트를 사용하고 있다. HTTP 서버가 80번 포트에서 요청을 기다리고 있으며 클라이언트는 80번 포트로 요청을 보낸다. 하지만 HTTP는 암호화가 되지 않은 평문 데이터를 전송하는 프로토콜이기 때문에 HTTP로 비밀번호나 주민등록번호등을 주고 받으면 제 3자가 정보를 조회할 수 있다. 이런 문제를 해결하기 위해 등장한 것이 HTTPS!! HTTPS - Hyper Text Transfer Protocol Secure HTTP에 데이터 암호화가 추가된 프로토콜이다. HTTPS는 HTTP와 다르게 443번..
스레드 프로세스(Process) 프로세스란 단순히 실행 중인 프로그램이라고 할 수 있다. 즉, 사용자가 작성한 프로그램이 운영체제에 의해 메모리 공간을 할당 받아 실행 중인 것을 말한다. 프로세스는 프로그램에 사용되는 데이터, 메모리등의 자원, 스레드로 구성된다. 스레드(thread) 스레드란 프로세스내에서 실제로 작업을 수행하는 주체를 의미한다. 모든 프로세스에는 한 개 이상의 스레드가 존재하여 작업을 수행하는데, 두 개 이상의 스레드를 가지는 프로세스를 멀티스레드 프로세스(multi-threaded process)라고 한다. Javascript 와 스레드(Thread) 자바스크립트의 메인 쓰레드인 이벤트 루프가 싱글 쓰레드이기 때문에 자바스크립트를 싱글 쓰레드 언어라고 부른다.하지만 이벤트 루프만 독립적으로..
Flex VS Grid Flex VS GridFlex 1차원. 수평, 수직 영역중 하나의 방향으로만 레이아웃을 나눌 수 있다. ( 컨텐츠 )개발자가 다양한 크기의 화면 내에서 반응형 요소를 적절하게 배치할 수 있다.개발자가 동적 레이아웃의 여러 인스턴스를 만들고 컨테이너 내에서 콘텐츠를 손쉽게 정렬 할 수 있도록 한다. Grid 2차원. 수평과 수직을 동시에 영역을 나눌 수 있다. ( 컨테이너 ) 열과 행의 항목을 정렬하여 개발자가 데스크탑, 태블릿 및 스마트폰 디스플레이를 위한 큰 레이아웃과 전체 페이지의 렌더링 및 모양을 쉽게 제어할 수 있도록 한다.그리드로 정의된 셀 내부에 배치된다. 전체 레이아웃을 만들고 정의하는 것은 여전히 css grid의 강력한 장점!  Grid의 문제점IE11에서 일부 속성을 제외하고 지원한다...
[GIT] Github.io 페이지 만들기 1. 새로운 Repository를 만든다.이때 username.github.io 형식으로 이름을 만들어야 한다. 2. clone 하기 3. commit 하기 해당 파일로 이동하여 내가 만들어둔 웹페이지를 복붙해 주었다.commit 해준다.git add .git commit -m ""git push -u origin master https://[username].github.io다음 주소에 내가 만든 웹페이지가 올라왔다.올리자마자 들어가니까 이렇게 떠서 당황했는데 조금 기다리니까 웹페이지가 올라왔다!
[스타벅스 클론코딩] 드롭다운 메뉴 - 위에서 아래로 내려오는 효과 메뉴에 마우스를 올렸을 때 메뉴 드롭 다운이 위에서 아래로 스르륵 내려오는 효과를 주고싶다! ( 아래 사진은 짤 만드는 방법을 몰라서...ㅎㅎ 저런식으로 만들 생각이다!) 현재는 마우스를 올리면 메뉴 드롭다운이 뙇! 하고 아무런 효과 없이 나타난다..! 1. display 사용 먼저 서브 메뉴 (드롭다운했을 때 보여지는 메뉴) 를display : none으로 해주고 hover를 했을때 서브메뉴의 display를 block으로 보여주게 했다. 그런데 transition이 작동하지 않는다. 이유는 display를 사용하면 transition이 먹질 않는다고 한다..!!ㅠㅡㅠ 2. opacitiy 사용 다음으로 쓴 방법은 opacity를 사용했다. 서브 메뉴를 opacity :0 으로 줘서 안보이게 해주고 h..

티스토리툴바