코드스테이츠

2023년 회고록을 쓰려고 사진첩을 뒤졌는데, 딱히 찍은 사진이 없다. 그도 그럴것이, 어딜 다닐 시간이 없었기 때문이다. 하지만, 그 어떤 해보다도 나에게는 만족스러운 한 해였다. ​ ​ 내가 좋아하는 것을 찾고, 그것에 몰두했다​ ​ ​ 2월 ~ 7월 코드스테이츠 부트캠프 (프론트엔드) 처음 코딩을 배웠다. ​ 코드스테이츠라고 광고를 많이 하는 국비교육기관이 있다. 사진에 보여준 것처럼 정해진 틀을 주고, 그 안에서 코드를 짜라는 형식이다. 수업은 모두 비대면이고, 재미없는 문서를 주면서 거의 그 예제를 강사가 읽어준다. 응 그렇다 주입식이다. 그래서 시간대비 실력이 별로 안는다... ㅎ 그리고 재미도 없다 ㅠㅠ 주입식 교육방식 때문에 코딩하는 맛(?) 이 안난다.. ​하지만, 초심자에겐 시간이 필요..

Custom Hooks 개발자가 스스로 커스텀한 훅을 의미합니다 Custom Hooks은 코드 상에 반복되는 로직을 뽑아내어 재사용 하는 것을 말합니다 여러 url을 fetch 할때, 여러 input에 의한 상태변경 등 반복되는 로직을 동일한 함수에서 작동하고 싶을때 커스텀 훅을 사용합니다 (커스텀 훅도 일종의 함수, 다만 일반 함수와 다른 점은 커스텀 훅 내부에서 내장 hook을 불러 사용할 수 있다는 것) 아래의 두 컴포넌트는 동일한 로직을 포함하고 있습니다 //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { // 동일로직 const [isOnline, setIsOnline] = useState(nul..

React.lazy() 와 Suspense는 코드분할과 지연된 컴포넌트 로딩을 간편하게 구현할 수 있습니다. 코드분할과 지연된 컴포넌트 로딩은 초기시간이 감소, 성능향상 등의 장점이 있습니다. 코드분할은 무엇일까? React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것입니다. React 에서의 코드분할 form.addEventListener("submit", e => { e.preventDefault(); /* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */ import('library.moduleA') .then(module => module.default) .then(someFunction()) .catch(handleError()); }..

Component & Hook Function Component와 Class Component Hook은 class가 아닌 function형 컴포넌트에서만 동작한다. Hook 사용규칙 1. 리액트 함수의 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상대로 동작하지 않을 우려가 있다. 컴포넌트 안에는 useState나 useEffect와 같은 hook이 여러번 사용될 수 있는데. react는 이 hook을 호출되는 순서대로 저장을 해놓는다. 그런데 조건문, 반복문 내에서 hook을 호출하게 되면, 호출되는 순서대로 저장을 하기 어려워지고 결국 예기치 못한 버그를 초래할 수 있다. 2. 오직 리액트 함수 내에서 사용되어야 합니다. 이는 리액트 함수형 컴포넌트나 커스..

Virtual DOM React 는 UI 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트 할 수 있도록 Virtual DOM 이라는 가상의 DOM 객체를 활용합니다. 이는 실제 DOM 사본 같은 개념으로, React 는 실제 DOM객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용합니다 DOM은 계층적 형태의 트리 구조로 구성되어 있습니다. 자료구조 중에서도 특히 트리는 “데이터 저장”의 의미보다는 “저장된 데이터를 더 효과적으로 탐색” 하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있습니다. 그러나 DOM 이 변경되고 업데이트 된다는 것은 결국 브라우저의 렌더링 엔진 또한 리플로우(reflow) 한다는 것을 ..

Q. UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요. UI는 사용자 인터페이스를 의미합니다. 즉, 사용자가 애플리케이션 또는 웹사이트와 상호작용하는 방식을 디자인하는 것입니다. UI 디자인은 사용자가 더 쉽게 애플리케이션을 이해하고 사용할 수 있도록 하는 것이 목적입니다. 따라서 UI 디자인은 주로 디자인, 레이아웃, 색상, 폰트 등과 같은 시각적인 측면을 중심으로 합니다. 반면, UX는 사용자 경험을 의미합니다. UX 디자인은 사용자가 제품 또는 서비스를 사용하는 동안 느끼는 감정, 경험, 만족도 등을 고려하여 제품이나 서비스를 디자인하는 것입니다. 즉, UX 디자인은 사용자가 원하는 기능을 쉽고 간편하게 이용할 수 있도록 설계하는 것입니다. 따라서 UX 디자인은 UI 디자인뿐만 아니라 ..

네트워크 계층모델 OSI 7계층 모델 1계층: 물리계층 - 주로 전기신호를 전달하는데 초점, 들어온 전기신호를 그대로 잘 전달하는 것이 목적 2계층: 데이터링크 계층 - 네트워크 기기간 데이터 전송 및 물리주소를 결정하는 계층 3계층: 네트워크 계층 - 라우팅 담당, 빠르게 보낼 최적의 경로 선택 (IP 패킷 전송) 4계층: 전송 계층 - 해당 데이터들이 정상적으로 보내지는 지 확인하는 역할 (TCP/UDP 연결) 5계층: 세션 계층 - 세션의 연결의 설정과 해제를 수행 6계층: 표현계층 - 응용계층으로 전달하거나 전달받는 데이터를 인코딩 또는 디코딩하는 계층, 일종의 번역기 역할 수행 7계층: 응용계층 - 최종적으로 사용자와의 인터페이스를 제공하는 계층, 사용자가 실행하는 응용프로그램들이 해당(chro..

응 맞다! styled-component는 웹표준을 향상시킨다. 왜 그럴까? styled-components가 웹표준을 해치지 않는 이유는, 결국 styled-components가 생성하는 스타일 코드는 일반적인 CSS와 동일하기 때문이다. 생성된 CSS는 HTML 문서 내의 태그에 포함되며, 웹 브라우저가 이를 해석하여 렌더링한다. 아주 똘똘한 녀석이다 난 아직 styled-component 사용이 어색하니 오늘 과제한 내용을 포스팅 해보겠다. styled-component가 뭔데? styled-component는 리액트에서 css스타일을 작성하고 관리하기 위한 라이브러리 이다 기존의 css를 사용하는 방법과 달리, 'styled-components' 는 javascript 코드내에서 css 스타일을 ..