분류 전체보기 170

[빡공단 41기] 7일차 함수형 컴포넌트 / 클래스형 컴포넌트

앞에 일차들은 VScode 설치와 같은 간단한 수업이여서 스킵했습니다 ! 클래스형 컴포넌트의 경우 JavaScript의 클래스 개념을 이용한다. React.Component를 상속받는 클래스형 컴포넌트 예시 코드 import React from "react"; class App extends React.Component { render() { return Hello; } } export default App; 클래스형 컴포넌트를 사용할 때는 반드시 render 함수가 정의되어야 한다. render는 반드시 JSX를 return하는 부분을 포함하고 있어야 한다. 함수형 컴포넌트는 function 키워드와 함수명, JSX를 return하는 부분으로 구성되어 있다. function App() { return ..

[빡공단 41기] JSX란 ?

JSX: 리액트의 강력한 확장 문법 리액트에서 컴포넌트를 작성할 때 우리는 JSX라는 특별한 문법을 사용한다. JSX는 자바스크립트의 확장 문법으로, HTML 태그처럼 생겼지만 실제로는 자바스크립트이다. 이것은 리액트가 제공하는 컴포넌트를 편리하게 작성하고 사용할 수 있도록 돕는 독자적인 문법이다. JSX의 특징 1. HTML과 자바스크립트의 결합 JSX는 자바스크립트의 확장 문법으로, 자바스크립트 코드 안에서 HTML 태그를 사용할 수 있게 해준다. 2. Babel을 통한 컴파일 리액트 애플리케이션은 JSX 코드를 브라우저가 이해할 수 있는 일반적인 자바스크립트 코드로 변환해야 한다. 이때 Babel이라는 도구를 사용하여 JSX를 자바스크립트로 컴파일한다. 3. 태그의 닫힘 HTML과 마찬가지로 JSX..

[빡공단 41기] 2일차 리액트는 컴포넌트를 사용한다.

컴포넌트란 무엇인가? 컴포넌트는 요소라는 뜻으로, 여러 요소들을 합쳐서 전체 요소를 만들 수 있다. 리액트가 컴포넌트를 사용하는 방법 ? 여러 컴포넌트들이 모여서 오브젝트를 구성하고, 전체 페이지를 만든다. 컴포넌트는 자바스크립트의 함수형으로, props를 입력받아 JSX를 리턴한다. 이러한 함수형 컴포넌트들을 모아 전체 리액트 앱을 구성한다 컴포넌트의 장점 ? 1. 가독성 : 각 컴포넌트는 명확한 기능을 수행하여 가독성을 높여준다. 2. 재사용성 : 컴포넌트는 특정 기능을 재사용함으로써 생산성과 재사용성을 향상시킨다. 3. 유지보수 : 모듈화된 구조는 코드 수정 및 업데이트를 간편하게 만들어 유지보수를 좋게한다. 이러한 장점들은 효과적인 개발과 유연한 유지보수를 가능하게 한다 ! 컴포넌트를 잘 사용해서..

[빡공단 41기] 1일차 리액트는 왜 탄생했을까?

리액트는 왜 탄생했을까? -> DOM을 체계적이고 직관적으로 바꾸기 위해 탄생했다. 여기서 DOM이란 ? -> 문서 객체 모델(Document Object Model)의 약자 페이지를 나타내는 트리구조 웹 페이지의 구조화된 표현을 프로그래밍 언어가 이해할 수 있는 객체로 변환는 인터페이스를 제공한다. 클라이언트인 인터넷 브라우저가 서버로 요청을 보내면 서버는 데이터라는 응답을 보내준다. 응답의 종류 중 HTML은 데이터를 구조적, 계층적으로 나타낸다. 이것을 트리 구조로 바꾸어서 컴퓨터에 저장하는 것이 DOM이다. 렌더링 : 저장된 후에 DOM이 실제 화면에 그려지는 것 리액트가 하는 일은 DOM을 어떻게 조작할지 도와주는 것이다. JavaScript는 DOM을 조작해서 화면을 나타내는데, 웹이 발전하면..

요즘근황 / 대개발시대에 디자이너로 살아가는 법 클래스 후기

싸피 근황 나는 요즘 드디어 싸피 2학기의 마지막 3번째 프로젝트를 진행 중이다. 2학기에 들어오면서 너무 바빠서 글을 한번도 쓰지 못했다 . . ! ! ! 프로젝트를 하면서 나는 많이 성장했다 ! (나만 그렇게 생각할수도 있음) 기존에 vue만 사용할줄 알았던 나는, 프로젝트를 하면서 react를 독학을 시도했다. 아래가 내 인프런 강의창이다 프로젝트에서 프론트를 담당하면서, 인터랙티브 웹 개발에 관심이 많이 생겼다. 그러면서 Three.js에 관심도 생겨 열심히 공부 중이다. 항상 새로운 것을 공부하는 건 재밌다 ! 이번 프로젝트는 앱을 개발 할 예정이여서 리액트 네이티브를 공부하고 있다. (리액트를 아직 잘 못해서 쉽지 않음) 그래도 나름 리액트랑 구조가 비슷하니, 리액트 복습한다 생각하고 열심히 ..

공부일지 2023.10.29

렛츠락페스티벌2023 양일 후기 ( 국카스텐 / 자우림 / 이승윤 / 쏜애플 )

드 디 어 렛츠락 페스티벌 에 갔다왔다 첫날엔 기타학원 갔다가 가느라 늦게 도착해서 노브레인 공연할 쯤 도착했다 . . !!! 날씨도 좋고, 하늘이 너무 이뻤다 무대는 너무 신났음 !!!!!!!!!! 나는 나의 최애 국카스텐을 보러왔기 때문에 !!!! 이번에 과연 신곡을 보여줄까 하는 기대감에 두근거리며 왔는데 드디어 신곡을 공개한 것이다 . . . 😂 넋놓고 보다가 후반부터 촬영한 영상 국카스텐 신곡 미리보기.mp4 노래가 너무 홀리해서 놀랬다 국카가 이런 노래를..? 오히려 좋아 나

공부일지 2023.09.05

하현우가 제 앞으로 튀어나왔다면 믿으시겠습니까 / 리액트 공부일지 / 일렉조아

7월 15일 바로 어제 이천에 국카스텐이 왔다 !!!!!!!!! 설봉공원 별빛축제 못참지 ㅋ 바로 달려갔ㄷㅏ 국카스텐 나오는 시간에 맞춰서 갔더니 앉을 자리는 없어서 사이드에서 그냥 서서 뛰어놀고 즐겼다. 옆에 모르는 여성분이랑 잼민이가 너무 신나게 놀아서 나도 맘껏 뛰어놀 수 있었다 !! 어쩐지 하현우씨가 이쪽을 자꾸 본다 했더니 우리 셋만 뛰어놀고 있었음 . . . (그래서 전광판에 나옴..) 여길 보고 있었다니 ~~ 더 재밌다 ㅋ 정말 이뻣던 걱정말아요 그대 무대 .. 조명 그 분위기 모두 너무 감동적 ㅠ 하지만 가장 감동이였던건 하현우가 바로 내앞으로 튀어나온거 ㅅ.. 진챠 심장마비 걸리는 줄 알았다 살다살다 이런날도 오는구나 맥주축제때 손 못잡아서 슬펐는데 그는 정말 . . 멋쟁이야 요즘은 리액..

공부일지 2023.07.16

락이 없는 인생은 인생이 아니다 ! (연세대 백주년기념관 J열 시야)

나의 소소한 놀러다닌 근황을 올려보겠다 . 1. 6월25일에 자우림 윤아언니 솔로콘서트에 갔다왔다. 가자마자 나의 자리 시야에 감동하였다. J열 24번 자리 강력추천합니다 완전 정면에 너무 가까이 잘보임 .. !!! 윤아언니의 솔로 콘서트 감동 그 자체였다.. 뭔가 울적하지만 마음에 위로가 되는 ! 역ㅅㅣ 자우림은 신이야 자우림 완전체 보려고 렛츠락 페스티벌도 예매했다네요. 2. 이번여름 맥주축제 ( 한양대 살곶이공원 ) 바로 어제인 6월 30일에 맥주축제를 갔다왔다 !! 사람이 엄청 많지 않아서 좋았음 같이 간 동생이 . . 엄청난 꿀자리를 찾아서 바로 앞에서 공연을 볼 수 있었다 로맨틱펀치 공연을 실제로 처음봤는데 저분은 정말 진짜 락스타시다. 저렇게 야무지게 무대를 할 수가 없다. 정말 저런 사람들..

공부일지 2023.07.01

유니티로 게임 만들기를 해보았다.

과제를 하면서 유니티로 게임 만들기를 해보았다 ! 유니티는 원하는 이미지에 C#스크립트를 연결하는 방식으로, 자신이 짠 코드대로 이미지를 동작시킬 수 있다 ! 만드는 김에 내가 좋아하는 아리스쨩과 블루아카이브 청휘석 이미지를 사용해보기로함 ! 나의 목표 -> 아리스가 청휘석을 먹으면 점수가 오르게 만들기 결론은 반만 성공했다. consol창에는 점수가 오르는게 뜨는데, 화면에 어떻게 띄우는지 모르겠음 ㅠㅠ 계속 개발해봐야할 것 같다. ~ 지피티짱이랑 힘을 합쳐서 노력한 결과물 ~ 게임이 실행되면 청휘석이 랜덤하게 생성되고, 아리스에 닿으면 사라진다 화면에 나타나는 청휘석을 모두 먹으면 CLEAR 가 뜸 ! 별다른 특별한 기능은 없지만 !!! 만드는 방법 아리스 Inspector 아리스에 연결한 C# 스크..

공부일지 2023.07.01