주어진 더미 데이터 API를 활용하여 쇼핑몰을 구현하는 프로젝트이다.크게 위와 같이 구조를 잡고 프로젝트를 진행하였다.Other 기능 중 Toast 기능은 App의 제일 위에 올려져야 한 번만 실행되므로 App.js에 삽입하였다.const MainPage = () =>

먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 하지 않고, 해당 작업이 끝나야지만 다음 작업을 시작할 수 있는 방식.먼저 실행된 작업이 끝나기도 전에 다음 작업을 수행. 즉 한 번에 여러 작업을 동시에 수행할 수 있는 방식Java Script는 싱글 스레드 런타임

웹 표준을 알기에 앞서 인터넷과 웹을 구분하는 것을 알아야 한다.따라서 인터넷을 웹을 포함하는 개념이다.그렇다면 웹 표준이란 무엇일까?2000년대 초반까지만 하더라도 인터넷 익스플로러, 파이퍼폭스, 사파리 등 다양한 브라우저가 있었지만, 익스플로러에서는 작동이 되어도

일반적으로 JavaScript의 에러 처리는 두 번째 방법을 의미한다.대부분의 개발자들에게 에러가 발생하지 않는 코드를 작성하는 것은 불가능에 가깝다. 즉 에러는 언제든지 발생할 수 있다. 만일 에러 발생 부분을 방치하게 되면 프로그램은 실행되지 않고 강제로 종료된다.

MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node.js를 지칭하는 말이다.이 중에서 Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프

자바스크립트 앱에서 예측가능한 상태관리를 해주는 Container상태가 관리되는 오직 하나의 공간, 저장소컴포넌트 3의 변화로 인해 컴포넌트 6도 상태변화가 일어나야 한다면 Store가 없을 경우 상태변화의 흐름은 3->1->최상위->2->6으로 가게된다.하지만 Sto

웹 개발을 하다보면 반드시, 혹은 정말 자주 마주치는 에러가 바로 CORS 이다. 누구나 한 번 이상은 무조건 적으로 겪는 에러로, 많은 신입 개발자들이 이로 인해 골머리를 앓는다..우선 CORS를 학습하기 이전에 SOP에 대해서 알고 넘어가야 한다.Same-Origi

말 그대로 사용자 인터페이스를 말한다. 사람들이 컴퓨터와 직접적으로 상호작용을 하는 시스템을 말하며, 화면상의 그래픽 요소 외에도 키보드, 마우스, 터치스크린 등의 물리적 요소도 UI에 포함된다.PC의 경우를 예로 들면 UI의 종류 중 하나인 그래픽 요소가 엄청난 비중

Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식으로, 브라우저에서 제공하는 Wep API인 XMLHttpRequest 객체를 기반으로 동작한다.1999

재귀함수가 자주 쓰일 법한 카테고리, Tree UI에 관해서 구현을 시도해보자위와 같이 평소에도 흔히 볼 수 있는 구조이다. 당장 윈도우 탐색기만 키더라도 왼편에 바로 보인다😂😂생각해보면 루트 폴더가 있고, 루트 폴더를 펼치면 다양한 파일들도 있겠지만, 디렉토리들도

브라우저에는 JSON.Stringify 라는 함수가 존재한다.쉽게 표현하면 위와 같다. 객체로 되어있는 형태를 JSON의 형태로 변환하는 것!예를 들면객체 형태였던 message가 JSON 형태로 변경되면서 직렬화가 된 것을 알 수 있다.어찌되었든 객체 형태가 JSON

Mino Node Server를 제작하는 코드를 의사코드로 생성해보자...🐝🐝🐝🐝🐝

React를 사용해서 State를 끌어올리는 개념을 이해해보자!트위터와 같은 간단한 SNS를 예로 들어보자일반적인 트위터를 트리구조로 표현하면 위와 같다.이 중에서 변하지 않는 값은 무엇일까?사용자가 입력을 실시간을 하는 Tweet Form의 경우 계속해서 상태가 변하

REST API란? Representational State Transfer의 약자로, 웹에서 사용되는 Data나 Resource를 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 의미한다. 쉽게 말하면 다른 사이트의 핵심 컨텐츠

LG에서 AI 인재 양성을 위해 청년 대상으로 LG Aimers라는 교육 프로그램을 실시하는데, 1기 때 꽤나 성공했는지, 2기를 뽑는다고 했다. 비록 나는 AI 관련 지식이 크게 없는 편이지만, 알아두면 좋겠다는 마인드로 지원하였고, 합격해서 LG Aimers 2기

Section2에서는 React를 메인으로 학습하였다.이번에는 React를 이용하여 유사 SNS를 만들어보자늘 그랬듯 결과물부터~아 물론 데이터들은 실제 서버에서 불러온 것이 아닌 Dummy Data를 활용하였다.메인 js파일은 7개로 구성된다.App.jsTweets.

아이디와 비밀번호를 생성하는 단계(회원가입)에서 흔히 볼 수 있는 유효성검사를 간단하게 제작해보았다!춘식이는 덤으로...ㅎ😊파일은 총 3개로 index.html과 script.js, style.css로 구성되어 있다. DOM 객체를 주로 사용한 것이기에 script의

이번에는 async함수와 await 키워드에 대해서 알아보자우선 그 전에 제너레이터에 대해서 간단히 짚고 넘어가야 할 듯 싶다.코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개시킬 수 있는 함수function\* 키워드로 선언되며, 하나 이상의 yield 표현식을

실수로 인해 종합퀴즈 2문제를 드랍해버렸다...결국 3문제가 틀리면서 반딧불(나머지)공부 대상자가 되어버렸다뭐 실수도 실력이니 일단 과제를 진행해보자├── Grub│ └── Bee│ ├── HoneyMakerBee│ └── ForagerBee부

프로토타입 체인은 프로토타입이 단방향 링크드 리스트 형태로 연결되어 있는 상속구조를 말한다. 즉 객체지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때 이러한 프로토타입 체인을 사용하게 된다.예를 들어 이전에 객체지향 프로그래밍 포스트에서 살짝 언급했던