wecode

프론트에서 서버(백엔드) api를 호출하면 데이터를 받아올 수 있습니다. 자바스크립트 Web API fetch 함수를 쓰거나, axios 라이브러리를 사용하면 서버로부터 데이터를 받아올 수 있습니다.Web API는 클라이언트(프론트) 측에서 사용할 수 있는 자바스크립트

4주간 공부하고 실습해본 html,css,javascript,react에 대해 인스타그램 홈페이지를 클론했던 것을 통해서 복습해보려고 한다. 간략 소개 html, css, javascript만을 이용해서 인스타그램을 클론해보고, 똑같은 내용을 React로 다시 클론해

인증과 인가는 API에서 가장 자주 구현되는 기능중 하나다.Private한 API는 물론이고 Public한 API도 기본적인 인증과 인가를 요구한다.유저의 identification(아이디와 비밀번호)을 확인하는 절차다.인증을 하기 위해선, 먼저 유저의 아이디와 비번을

데이터를 저장 및 보존하는 시스템Application에서는 데이터가 메모리 상에서 존재한다. 그리고 메모리에 존재하는 데이터는 보존되지 않는다. 해당 애플리케이션이 종료하면 메모리에 있던 데이터들은 다시 읽어 들일 수 없다.그러므로 데이터를 장기간동안 저장 및 보존하기

HTTP 구조 및 핵심 요소 HTTP (HyperText Transfer Protocol) 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 protocol(통신 규약) 웹에서 네트워크로 서버끼리 통신을 할 때 서로 통신을 하자고 규정해 놓은 '통신 형식',

자료구조의 정의와 중요한 이유 > 자료 구조란 데이터의 편리한 접근과 조작을 가능하게 하는 데이터를 저장하거나 조직하는 방법입니다. 문맥과 데이터의 종류에 따라 적절한 자료 구조를 사용하는 것은 전체 개발 시스템에 큰 영향을 끼칩니다. 그렇기 때문에 자료구조의 다양한

웹은 어떻게 동작할까? > 사용자가 브라우저에 www.goolge.com을 검색하면 해당 www.goolge.com홈페이지 서버에 url을 요청합니다. 서버(컴퓨터)는 응답하기 위해 24시간 항상 켜져 있어야 합니다. 호스트 서버는 홈페이지의 구성파일들(html,

Git Branch > Git은 branch를 기반으로 사용되기 때문에, 중요하고 반드시 이해가 필요한 부분입니다. Git은 commit을 할 때마다 파일이 존재하는 순간을 중요하게 생각합니다. 만약 파일이 수정되지 않았다면, Git은 빠른 성능을 위해서 파일을 새로

Git이란? Git은 test.js 같은 파일인 소스코드 파일의 변경사항(version)을 관리해주는 시스템입니다. 최신 버전의 코드가 아닌 코드의 변경사항을 기록하고 관리해줘야 하는 이유는 무엇일까요? > 코드를 짤 때 내용이 복잡해져서 문제가 생기면, 수정한 후의

기존에 obj라는 객체를 생성하고 프로퍼티를 추가하고 싶을 때, 위와 같은 방식으로 값을 추가했습니다.그런데 객체는 키와 값을 변수를 통해서도 값을 할당해 줄 수 있습니다.이처럼 변수를 통해 객체의 키를 접근하면 변수 word가 가지는 값에 따라 다른 키와 값을 가질

객체(Object)의 다양한 키(프로퍼티 명) > 객체의 키는 마치 특정 값을 가지고 있는 변수와 같은 역할을 합니다. 키는 변수명에 해당되고 값은 변수의 내용과 같습니다. > 그런데 변수와 달리 객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있습니다.

👉 시맨틱 태그(Semantic Tags)는 html5에서 의미가 있는 태그를 말합니다.non-semantic tag와 달리 시맨틱 태그를 사용하면 태그만 보고 어떤 내용이 담겨져 있는지 대략적으로라도 유추할 수 있어서 가독성이 높아집니다. article을 보고 콘텐

JavaScript에서 변수를 선언하는 방식은 var, let, const 세가지 방식이 있다.원래 JavaScript의 변수 선언은 var를 통해서만 가능했는데, 버전이 올라가면서 필요에 따라 let과 const가 생겼다.변수를 선언하는 방식은 var와 같다.var와

float은 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록 하는 속성입니다.html문서에서 공간은 차지하지만, 다른 요소의 배치에는 영향을 주지 않고 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽

display는 css에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다. 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있는데 대부분의 HTML element는 block 요소입니다.예를 들어, header, footer, p, li, table, di

CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다.코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있습니다.static은 기본값이며, 위치가 지정된 것이 아니라고 표현하며,

4주간 공부하고 실습해본 html,css,javascript,react에 대해 인스타그램 홈페이지를 클론했던 것을 바탕으로 정리하며 한번 복습해보려고 한다.간략 소개html, css, javascript만을 이용해서 인스타그램을 클론해보고, 똑같은 내용을 React로

리액트에서는 컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동할 수 있습니다. 이러한 메서드들을 생명주기 메서드라고 부릅니다.생명주기 메서드는 위와 같이 실행되는 순서가 모두 정해져 있습니다. 현재까지는 Initial

위 컴포넌트는 First, Second, Third 상단 바를 공유하고 있는데, First를 누르면 First를, Second를 누르면 Second를, Third를 누르면 Third를 아래에 보여주는 기능을 가지고 있다.어떤 방법으로 이게 가능한 걸까?obj라는 객체의

처음에 리액트를 배울 때 리액트는 waterfall방식이기 때문에, state의 부모 컴포넌트에서 자식 컴포넌트로 단방향일 것이라고만 생각했다. 그런데 코드를 짜다보니 자식 컴포넌트의 state값을 부모 컴포넌트에게 전달해줘야 되는 상황이 발생하기 시작했다. 리액트에서

아래의 두 사진은 하나의 페이지에서 같은 형식을 유지하면서 url에 따라 받는 데이터가 달라진다. 그럴 때 사용되는 개념이 유동라우터라는 개념이다. Routes.js Routes.js에서 페이지의 형식이 재사용 되는 경우가 아니라면 login과 같이 path를 설정

react에서는 배열에 반복문을 사용할 때, for문이나 while문보다는 map함수를 사용하게 되는데, 사용하다보니 이중 혹은 그 이상의 반복문이 필요한 경우가 종종 발생했다.신발 상세 페이지의 mock data인데, 신발 하나당 배열안에 두개의 객체를 활용해서 해당

리액트의 라이프사이클은 constructor > render > componentDidMount 순으로 진행된다. 그런데, 나의 경우에는 fetch를 componentDidMount안에서 했기 때문에 그 전의 render에서는 state에 빈 값이 있을 수 밖에 없었

장바구니 기능을 만들때, 상품을 프론트엔드에서 관리해도 되고, 백엔드에서 관리해도 됐기 때문에 어느쪽에서 그 일을 맡을지 역할을 분담해야 됐었다. 보통의 사이트에서는 백엔드 쪽에서 관리한다고 들었는데, 공부를 하는 입장에서 내가 있는 프론트쪽에서 한번 구현해보고 싶어서

한달 동안 html, css, javascript, react 공부를 하고, 쉴틈없이 바로 2주간의 프로젝트에 들어갔다. 2주차 주말을 제외하면 정확히는 12일동안의 결과물이다.신발과 의류 등 세계적인 패션회사인 컨버스 홈페이지 클론코딩간략 소개나는 컨버스 팀에 속하게

여태까지 master와 branch사이에 update된 사항이 있으면 변경 사항을 맞춰주기 위해 각각의 branch로 이동해서 master의 내용을 merge해줬는데, merge가 아닌 rebase라는 기존과 다른 방식을 사용해서도 같은 기능을 수행할 수 있다. reb

기존의 로그인 기능이 아닌, 소셜 로그인 기능을 구현해보려고 해서 그 중 가장 처음에 접근이 쉽다는 카카오로 소셜로그인 기능을 구현해봤다. 라이브러리를 사용하면 더 쉽지만 기능의 전체적인 흐름을 한번 익혀보고자 이번에는 사용하지 않았다. 이거는 카카오 디벨로퍼

fetch와 axios 둘다 결국에는 서버와 통신하기 위해 사용하는 방법 중 하나일 뿐이다. 기능적으로는 동일하지만, 사용하는 방식이 다르다. 지난번엔 fetch를 사용해서, 이번에는 axios를 사용해봤는데 둘다 사용해보고 비교해보니 axios가 조금은 더 편한 것

처음에 테이블을 직접 구현해보려고 하다가, 테이블 만드는 데에 너무 많은 시간을 소요할 것 같기도 하고, 라이브러리를 사용해보고 싶기도 해서 material ui라는 라이브러리를 사용하여 데이터 테이블을 구현했다.

드디어 위코드 내에서 두번째 프로젝트가 끝났다. 첫번째 프로젝트가 끝난 여운이 채 사라지기도 전에 두번째 프로젝트가 시작되었는데, 벌써 두번째 프로젝트도 끝났다. 코로나 바이러스를 비롯한 여러 데이터를 수집, 분석 및 차트와 지도로 시각화한 dataUSA Web사이트

redux를 사용하는 이유는 뭘까? redux를 사용하는 이유는 컴포넌트 간에 state값이 이동해야 하는 경우에, depth가 깊어지는 것을 방지하고 state값을 전역에서 관리할 수 있기 때문이다. 생활코딩의 react-redux 강의를 보고 개념 공부를 해서 위

Vue에서는 전역 변수 상태 관리를 위해 vuex를 이용한다. redux와 기능적으로는 거의 동일해서 기존에 redux를 잘 알고 있다면 이해하기 어렵지 않을 것이다. 위는 vue공식 문서에 나와있는 vue의 흐름이다. 그리고 아래는 기존 vue에서 사용하던 것들과

v-on (@) 엘리먼트에 이벤트 리스너를 연결합니다. $emit v-bind v-model v-for

console.log(num)을 실행할 당시에는 add라는 함수가 정의되어 있지 않은 상태인데, console에 30이라는 값이 찍힌다. const나 let은 var와 같이 undefined가 아닌 Error가 뜨기 때문에 호이스팅이 되지 않는 것처럼 보이지만, 사실

var는 function scope에서 동작한다. 간단히 말해서, var로 변수를 선언하면, block scope는 없다고 생각하고 동작하고, function scope에서는 function내부와 외부의 변수값이 연결되지 않는다. function scope가 범위