영최의 개발켈로그

1.state란? state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. React에서 앱의 유동적인 데이터를 다루기 위한 개체로, 계속해서 변하는 특정 상태이다. 상태에 따라 다른 동작을 할 수 있게 한다. 사용하는 이유는 동적인 데이터이므로, 변수와 달리 state가 변경될 시 자동적으로 재랜더링해야하기 때문이다. state와 props의 다른 점은 아래와 같다. 즉, state는 해당 컴포넌트 내부에서 사용되는 값이고, props는 부모 컴포넌트에서 상속받아서 자식컴포넌트에서 사용되는 값이다. 앞선 포스팅에서도 말했듯이 2023.04.23 - [프론트앤드/React] - [포스코x코딩온] 웹개발자 입문 과정 8주차 | 컴포넌트(함수형|클래스형) [포스코x코딩온] 웹개발자 입문 과정 8주차 | ..

1.Props란? props는 properties를 줄인 표현으로, 컴포넌트의 속성을 설정할 때 사용하는 요소이다. props값은 부모 컴포넌트에서 설정할 수 있다. 가.사용 방법 아래와 같이 MyComponent컴포넌트(자식 컴포넌트)를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링한다고 하면 아래와 같이 코드를 작성할 수 있다. props값은 (자식)컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할 때는 앞서 배웠던 것처럼 JSX내부에서 {}기호로 감싸주면 된다. [ MyComponent컴포넌트(자식 컴포넌트) ] import React from 'react'; const MyComponent = (props) => { return 안녕하세요, 제 이름은 {pr..

1. 컴포넌트란? 리액트에서 앱을 이루는 최소 단위를 컴포넌트라고 한다. 리액트에서 화면의 UI요소를 구분할 때 사용하는 단위로, 하나의 가장 작은 조각으로 이해하면 된다. 앞선 블로그 설명에서 설명한 '아토믹 디자인 패턴'에서 가장 작은 단위인 원소를 지칭한다. 2023.04.20 - [프론트앤드/React] - [포스코x코딩온] 웹개발자 입문 과정 8주차 | React.js 정의 및 설치(MAC) 컴포넌트를 사용하는 이유는 반복이 가능한 장점이 있기 때문이다. 컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주고, 변화가 일어날 때 주어진 작업들을 처리한다. 또한 임의 메서드를 만들어 기능을 추가할 수도 있다. 컴포넌트를 선언하는 방식은 두가지가 있다. 하나는 함수형 컴포넌트이고, 다른 하나..

1.JSX란? JSX는 JavascriptXML의 줄임말로, "자바스크립트에 XML을 추가한 확장형 문법" 이다. 한마디로, JSX = JavaScript + XML *XML: 데이터를 저장하고 전달할 목적으로 만들어진 언어로, HTML과 매우 비슷한 문자기반의 마크업언어 (text-basedmarkuplanguage)이다. EJS와 같은 템플릿 언어와 차이점: EJS는 *트랜스파일링과정을 거치면 HTML파일로 변환되지만 JSX는 자바스크립트 파일로 변환된다. *트랜스파일링과정: 특정언어를 다른언어로 변환하는 작업 다음 코드 에서 return 안의 부분이 JSX이다. import React from 'react'; //node_modules 디렉터리에 react모듈 불러옴 //function ~ 함수형 ..

1.React란? 한마디로, 화면을 만들기 위한 자바스크립트 라이브러리이다. (*라이브러리 : 자주 쓰는 기능들을 모아 놓은 것) 가. Virtual DOM(가상 돔) 자바스크립트 언어를 사용해서 웹 애플리케이션이 많이 생성되고 있으나 큰 규모의 애플리케이션 구조를 관리하려면 순수하게 자바스크립트만으로는 어려움이 존재한다. 따라서 지금까지 수많은 프레임워크(Vue.js, Anlgular 등)들이 이러한 어려움을 해결하기 위해 노력해 왔다. (*프레임워크: 필요한 기능들이 이미 만들어져 있는 기본 틀) 이 프레임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-ViewModel) 아키텍처를 사용하는데, 보통 뷰를 변형하여 변경된 사항을 반영한다. 그러나 애플리케이..

1.클래스란? 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. 왜 필요한가? 실무에선 사용자나 물건같이 동일한 종류의 객체를 여러 개 생성해야 하는 경우가 잦다. 예를 들면 아래 코드와 같이 동일한 형식의 객체를 계속 생성했어야한다. 만약 객체 안에 실수로 키값을 정의하지 않으면 다음처럼 price 값이 undefined가 된다. let tv1 = { name: "aaa tv", price: 2000, size: "56inch", }; let tv2 = { name: "bbb tv", price: 3000, size: "27inch", }; let tv3 = { name: "ccc tv..

1.구조 분해 할당이란? 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법이다. 풀어 설명하면, 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 왜 필요한가? 개발을 하다보면 배열이나 객체의 전체가 아닌, 일부만 필요한 경우가 있다. 이럴 때 구조 분해 할당이 유용하게 사용된다고 한다. 또한 함수에서 매개변수가 너무 많거나 매개변수의 기본 값이 필요할 경우에도 유용하게 사용된다고 한다. 가.[배열]의 구조 분해 할당 1)배열 분해 할당 기존 배열 요소 확인 방법 const lists = ["apple", "grape"]; console.log(lists[0]); //기존 배열 요소 확인 방법 1. 배열 구조 분해 할당 - 요소마다..

일단 모든 팀원들과 나 자신에게 수고했다고 말하고 싶다. 계속 밤을 샜는데도 시간이 너무 부족했던 것 같다. 프로젝트 설명 잘한 점 전반적인 디자인을 글꼴, 헤더, 메인화면 지도 등을 담당했었는데 정말 재밌어서 밤을 새는데도 그렇게 힘들지 않았다. 또한 미로찾기 부분에서 대각선으로 이동하는 문제를 해결하기 위해서 밤을 또 샜었는데 후천적으로 처리를 결국엔 해내서 성취감이 있었다. 근본 문제는 교민님이 해결하셨는데 그 과정에서 배우는 점이 많았다. 아쉬운 점 피드백 대로 차차 수정해나가야겠다.