본문 바로가기

분류 전체보기

(95)
[React 강의 노트(2)] CRUD react강의 노트 | Byte Degree [3주차] 배열 렌더링하기 Read import React from "react"; function User({ user }) { //파일안에 새로운 component 만들기 return ( {user.username} {user.email} ); } function UserList() { const users = [ { id: 1, username: "heeyeon", email: "junghy@gmail.com", }, { id: 2, username: "ggtt", email: "ggtt@gmail.com", }, { id: 3, username: "ssdd", email: "ssdd@gmail.com", }, ]; /*return ( );*/ retur..
[Project - A] 레이아웃과 구성요소 | Issue & Solution & Review - 웹 프로젝트를 진행하면서 생긴 Issues와 Solution기록 - Review 내용을 정리하고 Refactoring Project A-1 (레이아웃 만들기) 🙌 Reviews - flex는 IE 하위 브라우저 크로스브라우징 이슈가 존재해 웹 프로젝트 사용엔 조심스럽다. 참고사항 - ':hover' 는 클릭 가능한 요소에 선언하여 태그에 바로 :hover를 선언하는 것이 좋음 Project A-2 (구성요소 만들기) 🤷‍♀️ Issues 1. table의 thead와 tbody사이에 알 수 없는 여백이 생김 - thead인 구분과 tbody인 미국남아를 보면 border가 묘하게 두껍게 나타났다. ✅ 해결 - 알고보니 table의 caption 문제였다. 공통요소를 묶어서 소제목은 h4로 마크업하기 ..
JavaScript의 class ✅ 자바스크립트에 class가 추가되기 전 !!! ES6 이전 !!! 함수 : 함수기반 단위 - 포장 : 특정 기능을 하는 변수+ 알고리즘 - 기능 : 기능 단위의 코드 그룹화, 기능 단위의 중복 코드 제거, 코드 재사용성 클래스 (생성자 함수) : 클래스 기반 단위 - 포장 : 연관 있는 변수와 함수 포장 - 기능 : 객체 단위로 변수와 함수를 그룹화, 객체 단위의 중복 코드 제거, 코드 재사용 자바스크립트에서 클래스 만들기 - 사실 자바스크립에는 객체지향 프로그래밍 언어에서 기본적으로 제공하는 클래스라는 개념을 제공하지 않는다. - `생성자 함수`가 다른 언어에서의 클래스(Class)와 유사한 개념이기 때문에 클래스를 사용할 수 있는 방법이 있다. 그렇기 때문에 자바스크립트에서는 클래스는 없지만 OO..
네트워크 기본 지식 ✅ IP - 인터넷에 연결된 모든 컴퓨터 자원을 구분하기 위한 고유 주소 - IPv6 - IPv4의 주소 부족 문제를 해결하기 위해 개발된 것 - 16비트를 8부분으로 16진수로 표시 ex) 2016:2020:dfdf:dfdf:0000:0000:asdd:1111 - 128비트 체계로 거의 무한대 -IPv4 - 4개의 '.' 으로 구분하며 이렇게 구분된 각각의 숫자들은 0 ~ 255 까지의 숫자를 사용할 수 있고 이 숫자는 전 세계적으로 하나만 존재 - 32비트 체계 ✅ HTTP 와 HTTPS - HTTP 프로토콜은 웹 브라우저와 웹 서버 사이의 데이터 통신 규칙 - 웹 페이지의 링크를 클릭하면, 웹 브라우저는 HTTP 요청 형식에 따라 웹 서버에 데이터를 전송, 웹 서버는 웹 브라우저가 보낸 데이터를 분..
[React 강의 노트(1)] React react강의 노트 | Byte Degree [3주차] react virtual DOM component 작업환경세팅 - node.js / yarn(npm과 비슷한데 패키지 설치시 npm보다 빠르다.) / VScode (+ git bash에서 자신의 경로 확인하기-pwd) JSX의 기본 규칙 알아보기 - html처럼 생겼지만 js이다 -> babel이라는 도구가 변환해줌 - 닫는 태그는 꼭 작성해야한다. - 두개 이상의 태그는 하나의 태그로 감싸야한다 flagment - '-'말고 camelCase로 작성해야한다. - style 적용시 html 처럼 inline으로 작성 X, 객체로 만들어서 사용해야한다. style={style} - class X, classname 사용 - 주석은 대괄호로 감싸기 {/..
SSR, CSR과 SPA의 등장배경 📌 용어 정리 SSR = Server Side Rendering - 서버 사이드 렌더링 CSR = Client Side Rendering - 클라이언트 사이드 렌더링 SPA = Single Page Application - 싱글 페이지 어플리케이션 📌 SSR 기본적으로 웹은 클라이언트의 요청으로 서버에서 응답받아 HTML을 받아온다. 클라이언트는 이 HTML을 받아 DOM을 그리게된다.(DOM을 그리며 css와 js를 로드하며 브라우저를 렌더링한다) 단점 - 웹의 정보도 많아지고 데이터의 양이 커지며 서버는 수많은 응답을 처리해야되기 때문에 부하가 커지게 되고, 클라이언트(사용자) 입장에서도 페이지 깜빡임이 발생하게 된다. 이로인해 Ajax가 등장하고 비동기 처리가 가능하게 되었다 📌CSR 더나아가 SP..
React에서 'onClick' Event 실행해보기 1. 아무 parameter도 넘지기 않는 경우 간단한 이벤트는 인라인으로 onclick을 넣어서 작성하지만, import React from "react"; import "./styles.css"; export default function App() { return ( alert("hi")}>button ); } 보통 그렇게 단순하지 않기 때문에 함수 표현식으로 위로 빼서 선언한다. ⭕ import React from "react"; import "./styles.css"; export default function App() { const onclickHandler = () => alert("hi"); return ( button ); } 위와 같은 경우는 어떤 parameter도 받지 않고 있는데..
[JS - Project] 검색어 자동완성 기능 구현하기 | Issue & Solution ByteDgree 1차 과제로 검색어 자동완성 기능을 구현하는 페이지를 만들고 있다. 배열 처리 / string 자료형 가공 / Mock API 활용한 비동기 처리를 활용하여 서비스 구현하기 🔥 Issues 1. favicon 오류가 생겼다 Failed to load resource: the server responded with a status of 500 (Internal Server Error) ❌ 캐시 삭제를 했는데도 react 파비콘이 그대로 남아있었다 ❗ 구글링 한 결과, 아래 코드를 HTML에 추가하면 된대서 넣어봄 → error 해결 - Chrome이나 FireFox에서는 favicon.ico에 링크가 걸려있지 않으면 서버를 다시 호출하고 404 에러가 발생한다. 이를 막기 위해서 favi..