REturn 0;

멋쟁이 사자처럼 후롱트 회고 프론트엔드 파트에서 진행하는 모든 세션이 끝났다. 한 학기 정도를 멋사 활동으로 채웠는데 내가 지금까지 뭘 했나 돌아보는 시간을 가져보도록 하겠다. 가장 먼저 생각나는건… 역시 과제들이다. 매주 열심히 해서 완성한 내 과제들… 세션을 통해서 처음 배우는 것들이 많아서 세션을 듣고 과제에서 응용하는데 시간이 정말 오래 걸렸었다. + 작성한 코드가 시각적으로 눈에 보인다는 것에 매력을 느껴 프론트를 선택한만큼 디자인에 많이 신경쓰는 사람이라는 것도 깨달았다. 최근에는 성장해서 전처럼 오래걸리지는 않는다. 지금도 뭐 하나 만드는데 시간이 오래 걸린다. 이유를 생각해보면 과제를 수행하는데 작성하는 코드를 완벽히 이해하고 사용하는 것이 아니라 구글링 + GPT를 통해 이걸 쓰면 이렇게..

프로젝트를 시작하기 전 가장 중요한 것은??? ⭐설계⭐ 팀 프로젝트는 개발 전 논의를 통해 설계하는 것이 중요하다 커밋 컨벤션, 폴더 구조, 스타일링, 컴포넌트 등을 미리 얘기를 나눠야 한다. 어떤 배포 환경을 사용할 것인지?? 해커톤을 통해 개발 전 설계를 경험해보자👍🏻 폴더 구조 각 컴포넌트들을 용도에 맞게 분류하고 모아놓는 과정 라우트에 따라 기능 or 유형에 따라 atomic 아토믹 디자인 방식? 규모에 따라서 파일을 나눌 수도 있다. 가장 작은 단위로 컴포넌트가 분리 재사용성 보장 but 개발자마다 분류 기준 애매 폴더 구조는 리액트에서 정해준 표준이 존재하지 않기 때문에 각자 상황에 맞게 구성하고 사용하는 것이 좋다! 컴포넌트 규모에 따라 커지는 컴포넌트들 어떻게 관리? 폴더 구조 설계를 하면..

컴포넌트의 라이프사이클 모든 리액트 컴포넌트는 라이프 사이클을 지닌다. 컴포넌트 수명은 페이지에 렌더링 되기 전에 시작해 페이지에서 사라지면 끝 마운트 DOM이 생성되고 웹 브라우저상에 나타남 업데이트 컴포넌트 업데이트 언마운트 컴포넌트를 DOM에서 제거 라이프사이클 메서드 CLASS 형에만 사용 가능 BUT 지금은 함수 컴포넌트에서 Hooks 기능을 사용하여 비슷한 작업 처리 가능 Will 접두사 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사 어떤 작업을 작동한 후에 실행 아~ 그렇구나 하고 넘어가시면 됩니다. useEffect import { useEffect } from "react"; useEffect(() => { return () => {}; }, []); 첫 렌더링 때는 아무것도 ..

컴포넌트 분리 aaa aaa aaa bbb bbb bbb ccc ccc ccc 이런 코드는 재사용성이 낮아지고, 복잡도가 커지고, 유지보수가 불가능하다! 최대한 간결하게 어떤 컴포넌트들로 레이아웃이 구성되어있는지 구성하고 분리하여 import를 통해 가져와서 사용하는 것이 컴포넌트 분리의 예시이다. 컴포넌트 분리가 필요할 때? 같은 컴포넌트를 여기저기서 쓰고 싶을 때 예시) 각 페이지마다 생성한 버튼이 같다면 button.jsx를 따로 만들어 각 페이지에서 import를 통해 사용이 가능하게 하는 것 가장 큰 목적은 재사용성을 높이는 것 function App() { return ( aaa bbb ); } 위와 같은 코드보단 import React from "react"; const Btn = () =>..

리액트란? 웹 프레임 워크와의 비교 보통 Vue.js , Angular, React를 3대 프레임워크라고 한다. 하지만 리액트는 프레임워크가 아님 사용자 인터페이스를 만들기 위한 JS 라이브러리일 뿐 기술 면접에서 프레임워크와 라이브러리의 차이에 대해 물어볼 수 있으니 정리하고 넘어가자 프레임워크(Framework) 프레임워크는 개발자에게 애플리케이션의 구조와 흐름을 제공하는 도구나 환경 프레임워크는 어떤 문제를 해결하기 위한 기본적인 구조와 규칙들을 정의하고, 개발자는 이를 따라 애플리케이션을 개발 프레임워크는 주로 큰 범위의 기능을 포괄하며, 애플리케이션의 전체적인 틀과 공통 기능을 제공 개발자는 프레임워크가 제공하는 구조와 기능을 이용하여 애플리케이션을 개발하고, 프레임워크에 의해 제어되는 방식으로..

후롱트 다섯 번째 세션 API란? 데이터를 요청하고 응답을 받을 때 특정 기능을 사용 소프트웨어가 다른 소웨 기능 사용을 위해서 중간에 필요한 체계 다른 소프트웨어에서 빼내서 사용하고 싶을 때 사용한다고 보면 댐 클라이언트가 요청 / 서버가 응답 / API가 전달 브라우저에서 요청한 데이터를 서버에서 받아와서 전달해주는 ‘인터페이스’ API 진행방식 요청을 보내는 컴퓨터 = 클라이언트 응답을 주는 컴퓨터 = 서버 프론트는 요청, 백엔드는 응답 (?) 요청의 종류 확인 삭제 추가 응답의 종류(처리 상태) 데이터 미존재 요청 형식 오류 응답 측 오류 API 정의 서로 다른 컴퓨터에서 요청과 응답을 주고 받을 수 있게 만든 체계 API 요청의 종류 Create - 올려줭(생성) Read - 불러와줭(조회) U..

Object, Class가 나온 이유??(쭝요) 우리는 왜 개발을 하는 이유는 무엇일까요? 현실의 데이터를 빠르고, 자동화된 형태로 처리하기 위해서 개발자의 3가지 덕목은 게으름, 조급함, 오만 결론은 귀찮아서 객체란? Key와 Value로 이뤄진 데이터 프로퍼티: 객체 내부에 있는 값, 객체는 여러 개의 프로퍼티를 가질 수 있다. 원시 값을 제외한 JS의 모든 값은 객체 객체의 프로퍼티로 변수, 객체, 함수 모두 등록 가능 let angel = { name: "재영", age: 21 } 위와 같이 angel이라는 객체는 “name”, “age” 프로퍼티를 가지고 있다. 이에 접근하려면 console.log(angel.name); console.log(angel["age"]); 이런 식으로 마침표나 대괄..

자바스크립트? 한 줄 요약 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어 변수 결과값은 메모리 어딘가에 저장되는데, 해당 메모리의 주소 값을 모른다면 결과 값을 사용할 수 없다. 따라서 값을 사용하기 위해서는 값이 저장된 위치인 메모리 주소를 알고 접근해야한다. 값이 저장된 위치를 가리키는 상징적인 이름을 선언한 것이 변수 변수를 사용하는 것 === 참조 어떤 값을 구별하여 식별해낼 수 있는 고유한 이름(변수 이름) === 식별자 변수 선언 키워드와 스코프 변수 선언 키워드 var: 변수 중복선언 허용(에러가 발생하지 않음), let: 변수 중복선언 금지, 재할당 가능 const: 선언과 동시에 초기화, 재할당 불가 스코프 식별자에 유효하게 접근 가능한 범위 식별자를 참조할 수 있는 범위 변수..