post-thumbnail

React - 쇼핑몰 구현 - Pages

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

2023년 5월 22일
·
0개의 댓글
·
post-thumbnail

JS - 비동기 공부

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

2023년 5월 2일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - 에러 처리

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

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - Ajax

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

2023년 4월 13일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section3 카테고리(Tree UI)를 재귀함수로?

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

2023년 4월 12일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section3 JSON Stringify를 재귀함수로?

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

2023년 4월 12일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section2 Mini Node Server 의사코드

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

2023년 4월 6일
·
0개의 댓글
·
post-thumbnail

React - State 끌어올리기

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

2023년 4월 2일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section2 React 이용하여 간단한 Tweetler 제작

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

2023년 3월 28일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - async/await

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

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section2 BeeBeeBee 과제 의사코드

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

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - 프로토타입 체인

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

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - 프로토타입과 클래스

JavaScript는 프로토타입 기반 언어이다. 즉 JavaScript는 객체를 상속하기 위하여 프로토타입이라는 방식을 이용한다.모든 객체는 \[Prototype] 이라는 내부 슬롯을 가지는데, 슬롯의 값은 프로토타입의 참조이다. 객체가 생성될 때, 객체 생성 방식에

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - 객체지향 프로그래밍(OOP)

객체지향 프로그래밍이란 "클래스"라고 부르는 데이터 모델의 청사진을 사용하여 코드를 작성하는 프로그래밍으로, 대표적으로 Java, C++, CJavaScript 또한 객체 지향으로 코드 작성이 가능하다.객체지향 프로그래밍에서 중요한 역할을 하는 클래스는, 속성이 들어가

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - 클래스와 인스턴스

하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍여기서 말하는 청사진을 '클래스' 라고 하고, 그 청사진을 바탕으로 한 객체를 '인스턴스' 라고 한다.청사진, 즉 틀을 이야기하는데, 이 말만 들어보면 클래스만 만

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section1 My Agora States 제작(2)

뒷배경을 추가하였고, 5개씩 나눠서 페이지가 나오게끔 구현에 성공하였다!!💪💪주어진 index.html파일의 하단부에 <div class="page"></div>를 생성한 뒤, script.js파일에서 페이징을 할 수 있는 코드를 삽입하였다.stylesh

2023년 3월 13일
·
0개의 댓글
·
post-thumbnail

React Native에서 Navigation 효과 만들기(feat. Expo)

React Native를 활용하여 어플을 만드는 과정에서 화면 전환효과(Navigation)은 필수적으로 포함된다. 다양한 Navigation이 있지만 여기서는 Stack Navigation을 활용하였다. App.js 파일 내용이다. 여긴 Task2.js 파일의 내

2023년 3월 12일
·
0개의 댓글
·
post-thumbnail

JavaScript 공부 - 전역 변수의 문제점

어느 프로그램에서건 전역 변수를 남용하는 것은 코딩에서는 매우 위험한 일이다..! 이번 글에서는 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법에 대해서 다룬다.변수는 생성되고 소멸되는 생명주기를 가지고 있다. 만일 생명주기가 없다면 선언된 변수는 프로그

2023년 3월 12일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section1 계산기 제작(Feat. Nightmare)

이전 글에서 위 코드로 Nightmare 단계까지 통과했다고 언급했다.Nightmare가 뭘 테스트하길래 이렇게 간단한 프로그램이 코드가 길어진걸까...어이가없다 허허우선 대표적인 것들을 하나씩 살펴보면실수 연산의 경우는 .입력을 구현하면 된다! 이전 Advance 단

2023년 3월 10일
·
0개의 댓글
·
post-thumbnail

코드스테이츠 프론트엔드 부트캠프-Section1 My Agora States 제작(1)

아직 미완성단계...일단 위에 정보를 입력하면 리스트에 추가되게끔 구현은 성공하였다.내일까지 CSS파일과 JS파일을 최대한 더 건드려보자!여기까진 스크립트!저렇게만 했는데도 CSS가 120줄이다... 합칠수있는건 합치고 조금 더 추가하도록 해야겠다.

2023년 3월 9일
·
0개의 댓글
·