코딩하는 짱구

Unit4 - [React] 상태 관리 Side Effect Side Effect(부작용)는 프로그램의 실행 결과에 영향을 주는 작업이나 동작을 말합니다. 주로 순수하지 않은 함수나 외부 리소스에 대한 접근과 같은 작업들을 말합니다. 순수 함수는 동일한 인자에 대해 항상 동일한 결과를 반환하며 외부에 영향을 미치지 않는 반면, 부작용이 있는 함수는 외부 상태에 의존하거나 변경할 수 있습니다. React 컴포넌트에서의 부작용은 주로 생명주기 메서드, 이벤트 핸들러, 비동기 작업 등에서 발생합니다. 예를 들어, `componentDidMount` 메서드에서 외부 API와의 데이터 요청을 처리하거나, 이벤트 핸들러에서 DOM 요소의 속성을 변경하는 것은 부작용입니다. 이러한 부작용은 컴포넌트의 상태나 UI를 ..

프론트앤드 부트캠프/Day 2023. 6. 21. 11:10

UI와 UX _사용자 인터페이스와 사용자 경험의 차이점 UI와 UX는 현대의 디지털 제품 및 서비스 개발에서 필수적인 개념입니다. 좋은 UI와 UX는 사용자들에게 만족스러운 경험을 제공하고 제품 또는 서비스의 성공을 이끌어냅니다. 따라서 개발자와 디자이너는 UI와 UX를 모두 고려하여 사용자 중심의 디자인을 추구해야 합니다. UI와 UX는 웹 및 모바일 애플리케이션 개발에서 핵심적인 개념으로 사용됩니다. 이들은 사용자에게 좋은 디자인과 훌륭한 경험을 제공하는 데 중요한 역할을 합니다. 1. UI (사용자 인터페이스) 정의 : UI는 사용자와 시스템 간의 상호 작용을 위한 인터페이스를 디자인하는 과정 또는 결과물을 의미합니다. UI는 사용자가 시스템과 상호 작용할 때 직면하는 그래픽적인 요소들을 포함합니다..

프론트앤드 부트캠프/Day 2023. 6. 13. 14:10

JSON.stringify JSON.stringify() 함수는 JavaScript 객체나 값을 JSON 형식의 문자열로 변환하는 내장 함수입니다. 이 함수를 사용하면 JavaScript 객체를 직렬화하여 JSON 형식으로 표현할 수 있습니다. JSON.stringify() 함수의 기본적인 사용법은 다음과 같습니다 : const obj = { name: "John", age: 30, city: "New York" }; const jsonString = JSON.stringify(obj); console.log(jsonString); // 출력: {"name":"John","age":30,"city":"New York"} 위의 예시에서 obj 객체는 JSON.stringify() 함수를 사용하여 JSON ..

프론트앤드 부트캠프/Day 2023. 6. 12. 13:41

오늘은 Section3 시작 재귀함수를 공부 했다. 재귀 함수의 정의 재귀 함수는 함수 내에서 자기 자신을 호출하는 것을 말합니다. 이를 통해 함수는 반복적인 작업을 수행하거나 복잡한 문제를 해결하는 데 사용될 수 있습니다. 재귀 함수는 기본 경우(base case)와 재귀 호출(recursive call)로 구성됩니다. function recursiveFunction(parameters) { // 기본 경우(base case) 체크 if (기본 경우) { // 기본 경우에 대한 처리 return 기본 결과; } else { // 재귀 호출 return recursiveFunction(새로운 매개변수); } } 위의 형태에서 기본 경우는 함수가 무한히 호출되지 않도록 멈추는 조건을 정의하는 부분입니다. ..

프론트앤드 부트캠프/Day 2023. 6. 12. 10:46

벌써 6월이라니 2달이 금방 지나간 것 같다. 나는 처음 목표했던 K/T/P를 잘 지켰을까? 다시 보는 나의 목표와 K/T/P! 💡 Section 1 회고 블로깅 🙆🏻 목표 상기하기 2023년 나의 목표 나만의 프로젝트 만들어보기 개발자의 세계에 한 걸음 더 가까워지기 신입 개발자 역량 만들기 K/P/T 💡 Keep [x] 매일 학습 블로깅 [x] 매일 저녁 1시간 이상 복습 공부하기 [x] 개인 프로젝트 구상해 보기 [x] 매일 30분 이상 걷기 / 운동 [x] 자료이해를 위한 영어 학습 🤪 Problem 가끔 까먹고 학습 블로깅을 놓칠 때가 있음 정규 시간이 끝나면 밥 먹고 딴짓을 하다 보면 어느새 저녁 9시.. 매일 1시간 이상 복습 공부 힘들다.. 복습 시간을 끝내고 개인 프로젝트 구상할 시간을 ..

프론트앤드 부트캠프/회고록 2023. 6. 8. 14:36

오늘은 Section 2 의 마지막 날 Section 2의 강의 목표는 '서버와 통신이 가능한 구조적인 Web App을 만들수 있다.' 였다. Section 2를 마친뒤 현재로서는 서버와 통신이 무엇인지 알게된정도라고 볼수 있을거같다. JavaScript는 객체 지향 프로그래밍을 하는 언어이며 [React 와 Node.js 를 사용하여 서버와 통신이 가능한 구조적인 Web App을 만들수 있다는 것을 알수있었다.] 오늘의 섹션은 Section 2 이다. 1) 기술 면접 준비 2) 모의 면접 실습 3) 미니 잡 서칭 4) 회고 블로깅 으로 이루어져있다! 내일부터는 벌써 Section 3 이라니 시간이 정말 빠르다.. 1-1 ) 기술 면접 준비_면접 질문 리스트 JavaScript Promise의 기능과 필..

프론트앤드 부트캠프/Day 2023. 6. 8. 09:25

- app.js const express = require('express'); const cors = require('cors'); const app = express(); // 모든 서버는 요청을 받을수 있는 포트 번호를 필요로 합니다. // HTTP server의 표준 포트는 보통 80 번 이지만, 보통 다른 서버에서 사용중이기 때문에 접근할 수 없습니다. // 따라서 우리는 보통 테스트 서버 포트로 3000, 8080, 1337 등을 활용합니다. // PORT는 아파트의 호수와도 같습니다. 서버로 요청을 받기 위해서는 다음과 같이 포트 번호를 설정 합니다. // (* 때에 따라 다른 포트번호를 열고 싶다면, 환경 변수를 활용 하기도 합니다.) const port = 3001; const fligh..

프론트앤드 부트캠프/Day 2023. 6. 5. 09:03

Express란? 무엇인가요?? : Express는 Node.js를 위한 간결하고 유연한 웹 애플리케이션 프레임워크입니다. Express는 Node.js의 HTTP 모듈을 기반으로하여 웹 애플리케이션 및 API를 빠르고 간편하게 개발할 수 있는 도구를 제공합니다. Express 특징 1. 미니멀한 디자인 : Express는 가볍고 최소한의 추상화로 구성되어 있어 개발자가 필요한 기능을 유연하게 추가할 수 있습니다. 2. 라우팅 : Express는 HTTP 메소드(GET, POST, PUT, DELETE 등)에 따라 요청을 처리할 수 있는 간단하고 직관적인 라우팅 기능을 제공합니다. 경로 매개변수와 쿼리 문자열을 처리하여 동적인 라우팅을 구현할 수 있습니다. 3. 미들웨어 : Express는 미들웨어를 사..

프론트앤드 부트캠프/Day 2023. 6. 2. 13:52