공부/WIL 6

클론코딩 주차 WIL

1. 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점 ❗️ 아쉬운 점 1주일동안 오늘의 집을 클론코딩을 진행을 하였습니다. 저는 여기서 로그인, 회원가입파트를 담당하였는데 카카오톡 로그인을 처음 다뤄보면서 정확한 지식이 하나도 없다는 것을 깨닫고 제대로 이해하지 못한 상태에서 기능구현만 하려고 하니 많이 어려웠던거 같습니다. 또, 지난번에 처음으로 api 붙이는 작업을 하였을때 기본적으로 붙이는 과정만 진행하고 쿠키나 토큰같은 것은 다뤄보지 않았던게 이번 로그인, 회원가입 기능 구현을 할때 많이 힘들게 되었던거 같습니다. 헤더나 바디로 토큰을 전달해주는데 이것에 대해서 한번도 제대로 다뤄보지 않고 진행하니깐 많이 막막해서 같은 파트를 담당했던 백엔드분에게 많이 죄송한 마음이 들었던거 같습니다. ❗️ 뿌듯한 ..

공부/WIL 2023.07.31

Axios란?

1. Axios ⅰ. Axios Axios는 JavaScript에서 HTTP통신을 위한 라이브러리 Promise기반으로 작동하여 비동기 처리를 쉽게 할 수 있음 Axios를 사용하면 서버로 HTTP 요청을 보내고 응답을 받는 것이 간단해짐 ⅱ. Axios의 장점 Promise 기반 Axios는 Promise를 반환함. 이를 통해 비동기적인 동작을 쉽게처리할 수 있음 요청과 응답을 반환 사용자가 요청을 보내기 전이나 응답을 받은 후에 데이터를 변환할 수 있음 HTTP 요청 취소 가능 Axios는 HTTP 요청을 취소하는 기능을 제공함 HTTP 요청 재시도 네트워크 이슈나 서버의 일시적인 문제로 요청이 실패한 경우 자동으로 재시도하는 기능을 제공함 ⅲ. Axios설치 및 기본 사용 예제 Axios 설치 방법..

공부/WIL 2023.07.17

라이프사이클(클래스형 vs 함수형), react hooks

1. 라이프 사이클(클래스형 vs 함수형) 리액트는 자바스크립트를 기반으로 한 사용자 인터페이스(UI) 개발을 위한 인기있는 라이브러리 리액트 컴포넌트는 라이프 사이클이라고 불리는 여러 단계를 거쳐 생성되고 업데이트되며 소멸됨 리액트의 라이프 사이클은 클래스형 컴포넌트와 함수형 컴포넌트에서 약간 다르게 작동함 ⅰ. 클래스형 컴포넌트 라이프 사이클 - 클래스형 컴포넌트의 라이프 사이클은 다음과 같은 단계로 이루어짐 ① constructor - 컴포넌트가 생성될 때 처음으로 호출되는 메서드. 초기 상태값을 설정하거나 메서드를 바인딩하는 등의 작업을 수행함 ② componentDidlMount - 컴포넌트가 렌더링되기 전에 호출됨. 이 단계에서는 주로 API 호출이나 초기 데이터 로딩과 같은 작업을 수행함.D..

공부/WIL 2023.07.10

state, props, 리액트 리렌더링

1. state VS props props(“properties”의 줄임말) 와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다. ⅰ. state 와 props의 공통점 모두 일반 JS 객체 모두 렌더링 업데이트를 트리거함 ❓트리거(trigger)란? 데이터베이스가 미리 정해놓은 조건을 만족하거나 어떤 동작이 수행되면 자동적으로 수행되는 동작 ⅱ. state(상태) 가변 데이터 구성 요소에 의해 유지 변경 가능 ⅲ. props 불변의 데이터 부모컴포멈트로부터 전달됨 변경..

공부/WIL 2023.07.03

Virtual DOM, props, state

1. Virtual DOM React의 장점 중 Virtual DOM Virtual은 말 그대로 가상이라는 뜻이고, DOM은 Document Object Model의 약자로 그대로 해석하면 문서 객체 모델을 의미 문서 객체한 HTML, head, body와 같은 테그들을 JavaScript가 이용할 수 있는 개체를 의미함 div, input, a등이 DOM에 해당됨 ⅰ. DOM이란? DOM(Documet Object Model)은 HTML/XML 문서에 접근하기 위한 인터페이스 브라우저는 HTML 문서를 파싱하여 사용자에게 시각화해 줌 => 여러가지 이유로 브라우저가 띄워주는 HTML 문서에 어떤 동적 처리를 해주고 싶을때, 그 과정을 도와주는 인터페이스가 DOM 대표적인 DOM 규격 중 하나인 W3C ..

공부/WIL 2023.06.26

JavaScript ES, ES5 ES6 차이

1. JavaScript ES란? ⅰ. ECMAScript(or ES) Ecma Internationl 이 ECMA-262 규격에 따라 정의하고 잇는 표준화된 스크립트 프로그래밍 언어를 말함] 자바스크립트를 표준화하기 위해서 만들어짐 ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 사용하고 있음 역사 1993. 03 넷스케이프에서 넷스케이프 네비게이터 2.0을 출시함녀서 자바스크립트를 지원하기 시작 웹페이지 동작을 향상시키는 언어로서 자바스크립트의 성공은 마이크로소프트가 이와 적돵히 호환되는 J스크립트를 개발하는 계기가 됨 J스크립트는 1996년 8월 인터넷 익스플로러 3.0에 포함되서 출시됨 넷스케이프는 표준화 규격을..

공부/WIL 2023.06.19