profile
끊임없이 노력하는 프론트엔드 개발자 (⸝⸝⍢⸝⸝) ෆ
post-thumbnail

[Vue]Vuex Store 사용법

Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리이다. 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙을 사용하여 응용 프로그램의 모든 구성 요소에 대한 집중식 저장소 역할을 한다. 만약 이게 없다면, 컴포넌트 간 데이터를 주고받기 위해 부모는 자식에서 props의 방식으로, 자식은 부모에게 Emit event의 방법으로...

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

Nuxt.js

🧐Nuxt.js 뭔데? Nuxt.js는 Vue.js를 기반으로 하여 SSR 기반의 Web Application을 컴포넌트 단위로 개발 할 수 있게 해주는 프레임워크이다. > Nuxt.js에 대해 알아보기 전에, CSR과 SSR에 대해 알아보는것 먼저해야한다! 이 두가지 개념이 Nuxt.js의 가장 큰 특징이라고 할 수 있다. ✳️ CSR &n...

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

[Vue] 뷰 인스턴스

갑자기 Vue는 왜하세요 ? ✅ 위코드를 통해 기업협업 나온 회사에서 Vue.js 와 Nuxt.js를 사용하므로 당분간 열심히 공부를 할 예정 ...!! 화이팅 화이팅 화이팅 💡뷰 인스턴스 인스턴스는 뷰로 화면을 개발할 때 필수로 생성해야 하는 코드이다. 👩‍💻인스턴스 생성 인스턴스는 아래와 같이 생성한다. 인스턴스를 생성하고 나면 아래와 같이 ...

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

[JS]즉시 실행 함수

🧐즉시실행함수 즉시실행함수(Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 함수이다. 즉시실행함수는 다음과 같이 소괄호로 함수를 감싸서 실행하는 문법이다. > 즉시실행함수에 이름을 붙일 순 없을까 ? : 즉시실행함수에도 이름을 붙여 사용할 수 있지만, 선언과 동시에 호출되어 반환되면 재사용을 할 수 ...

2023년 1월 12일
·
0개의 댓글
·

1차 프로젝트 회고

위코드에서 진행한 1차 프로젝트가 끝이났다. 길다면 길고, 짧다면 짧은 2주였지만, 나름 만족스럽게 끝이났다고 생각하며 회고시간을 가져보고자 한다! 프로젝트 소개 이번에 우리가 진행한 프로젝트는 코스메틱 브랜드(Aesop)를 모델링 한 Cesop 웹 사이트이다. 프로젝트를 시작하기에 앞서 PET 분석을 통해 사이트에 대해 자세히 분석을 하게 되었다. 우...

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

[React]동적라우팅

📓동적라우팅 라우팅을 설정하는 가장 기본적인 방법은 정적(static, pre-defined)라우팅이다. 즉, Router 컴포넌트에서 미리 프로젝트에서 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식이다. 하지만, 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 방식으로는 처리가 힘들다. 정적 라우팅...

2022년 12월 20일
·
0개의 댓글
·
post-thumbnail

AWS

📓AWS란? Amazon Web Service의 줄임말로 아마존에서 제공하는 클라우드 서비스이다. 클라우드 서비스란 다양한 컴퓨팅 자원을 온디맨드로 사용할 수 있는 서비스이기 때문에 AWS 사용자는 직접 물리적인 서버 장비를 구입하거나 임대하여 설치할 필요없이 원격으로 손쉽고 빠르게 서버를 구축할 수 있다. 💡AWS를 사용하는 이유 AWS는 클라우드 ...

2022년 12월 19일
·
0개의 댓글
·
post-thumbnail

Cloud Computing Services -(2)

(1)에 이어서 운영 서버를 구축하는 방법에 대해 알아보려고 한다. 💻온프레미스(On-premise) 💾온프레미스란? IT 서비스를 기업이 자체적으로 보유한 물리적인 서버에 직접 설치해 운영하는 방식. 이러한 방식은 클라우드 컴퓨팅 기술이 나오기 전까지 기업들이 사용하던 일반적인 인프라 구축 방식이기도 하다. 💾온프레미스의 특징 인프라를 물리적으로...

2022년 12월 18일
·
0개의 댓글
·
post-thumbnail

Cloud Computing Services -(1)

💻운영 서버와 아키텍쳐 💾운영 서버란? 애플리케이션을 개발할 때에는 주로 로컬 환경에서 개발, 테스트를 진행한다. 이런 로컬환경에서 실행되는 애플리케이션은 사용자에게 서비스를 제공할 수 없다. 운영 서버는 실제 사용자들을 대상으로 서비스하는 서버이다. 운영 서버는 트래픽 대응도 해야하고, 빠른 응답 속도와 높은 가용성을 보장해 안정적으로 제품이 서비스될...

2022년 12월 18일
·
0개의 댓글
·
post-thumbnail

[인증&인가] - Session | Token

사용자와 시스템간 데이터를 교환하기 위해 HTTP 방식을 사용한다. HTTP 통신은 요청과 응답에 의해 동작하며, HTTP 특징 중 가장 중요한 특징은 Stateless이다. 각각의 HTTP 통신은 독립적이기 때문에 과거의 통신에 대한 내용을 알지 못한다. 이전의 상태를 전혀 알지 못하면 매 통신마다 필요한 모든 정보를 담아서 요청을 보내야 한다. 이런...

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

[인증&인가] - 인증과 인가

📓인증(Authentication) 🧐인증이란? 누군가 또는 시스템이 실제로 그 누구인지 또는 시스템인지를 결정하는 과정이다. 인증 기술은 사용자의 자격 증명 정보와 인증 버서의 자격 증명 정보를 비교하여 시스템에 대한 엑세스 권한을 제공한다. > ex)은행에 가면 통장과 도장을 제시해야 하고, 경우에 따라서 신분증을 추가적인 정보로 제공해야 한다. ...

2022년 12월 2일
·
0개의 댓글
·
post-thumbnail

[JS]fetch

📓fetch의 정의 특정 정보가 필요할 때 클라이언트는 서버에 HTTP 통신으로 요청(request)을 보내고, 정보를 응답(response) 받을 수 있다. 이때 사용되는 메서드가 fetch 메서드이다. 클라이언트는 fetch 메서드로 서버로 데이터를 요청해서 받을 수도 있고, 데이터를 생성, 수정, 삭제 할 수 있다. 📓fetch 요청(reques...

2022년 11월 30일
·
0개의 댓글
·
post-thumbnail

[React] Mock Data

📓Mock Data 📙 Mock Data란? UI 구성에 필요한 백엔드 API가 완성되기 전에 프론트엔드는 데이터가 들어오는 상황에 대비해 의도한대로 UI가 구현되는지 확인을 해야한다. 이때 사용되는 데이터가 Mock Data이다. 즉, 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다. 📙Mock Data...

2022년 11월 30일
·
0개의 댓글
·
post-thumbnail

[React] 상수 데이터

📓상수 데이터 📙상수 데이터란? 페이지를 구성하다 보면 UI 구성에는 필요하지만 값이 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있다.이런 데이터들을 상수 데이터로 만들어 UI를 구성할 수 있다. 즉, 상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 의미한다. GitHub 페이지를 예로 들어 상단의 드롭다운 메뉴는 ...

2022년 11월 29일
·
0개의 댓글
·
post-thumbnail

[React] 구조 분해 할당

컴포넌트를 나누어 props를 받아와 comment 컴포넌트 구현을 하던 중, 오류는 없지만 코드상으로 노란줄이 찍히면서 아래의 문구가 찍혔다. Must use destructuring props assignmenteslintreact/destructuring-assignment 처음엔 무시할까.. 하다가 아무리 오류 내용을 찾아봐도 알 수가 없어 멘토님께...

2022년 11월 29일
·
0개의 댓글
·
post-thumbnail

[React] useEffect

📓useEffect Data Fetching, 구독 등의 side effect는 매우 조심스럽게 다뤄야 한다. 리액트에서 side effect는 언제 어떻게 발생시켜야 할까 ? 📙React에서 side effect의 올바른 발생 시점 위의 코드에서 Hello World형태의 JSX를 브라우저에 렌더링 한다. 이 상황에서 side effect를 발생시...

2022년 11월 29일
·
0개의 댓글
·
post-thumbnail

[React] Side Effect

📕Side Effect란? 📔Side Effect 개념 side effect를 번역하자면 부작용 정도로 번역이 된다. 프로그래밍에서의 부작용은 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과라고 할 수 있다. 특히, 프로그램을 이루는 가장 작은 단위인 함수에서 쓰이는 용어이다. 프로그래밍에서 함수의 주된 목적은 Input을 받아서 output을...

2022년 11월 28일
·
0개의 댓글
·
post-thumbnail

[React] map 함수 적용 시 key prop을 부여하는 이유

React로 인스타그램 댓글을 구현 시, map 함수를 사용하게 된다. 이 map함수를 사용할 시 key prop을 부여해야만 한다는 사실을 알게되어서 기억하고자 블로그에 작성한다! 🧐Map map() 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로우 배열을 반환하는 함수이다. 위와 같은 형식으로 작성되며, 매개변수 ...

2022년 11월 27일
·
0개의 댓글
·
post-thumbnail

[React] - Props

📝Props의 정의 props란 컴포넌트의 속성값을 의미하며, 더 정확히는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. props를 이용해서 전달하고자 하는 어떤 값이든(변수, 함수, state값, event handler 등..) 모두 자식 컴포넌트에 전달할 수 있다. 📝Props는 언제 사용할까? 🖍 부모 컴포넌트에서의 데이터 ...

2022년 11월 26일
·
0개의 댓글
·
post-thumbnail

[React] - Hook

📔Hook이란? ✍️ Hook의 정의 Hook은 클래스 컴포넌트에서만 사용할 수 있었던 state(상태)관리와 lifecycle(라이프사이클)관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미 Hook들의 모음을 Hooks라고 한다. ✍️ Hook 등장 배경 클래스 컴포넌트와 함수 컴포넌트 리액트에서 컴포넌트는 클래스형과 함수형으...

2022년 11월 25일
·
0개의 댓글
·