가까이 가면 뜨껍고, 멀어지면 차가워지는 관계

이번 글을 리액트의 기본적인 개념을 간단하게 적어보려고 한다. 개념을 알고 리액트를 공부하면 기본적인 것을 왜 사용하는지에 대한 이유를 알 수 있을 것이다. 1. React란 무엇인가?React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다.재사용 가능한 UI 컴포넌트를 생성하는 데 사용된다. 페이스북에서 개발하고 관리한다.2. React를 사용하는 이유는 무엇인가?동적 애플리케이션 쉽게 만들 수 있다.React를 사용하면 적은 코딩으로 더 많은 기능을 제공하여 동적 웹 애플리케이션을 쉽게 만들 수 있다.성능 향상React는 가상 DOM을 사용하여 웹 애플리케이션의 성능을 높임재사용 가능한 컴포넌트컴포넌트는 React 애플리케이션의 구성 요소로, 애플리케이션 전체에서 재사용할 수 ..

필자는 css -> scss 순으로 공부하고, Bootstrap을 직접 적용해봄으로써 편리함에 대해 알게되었다. 그래서 css프레임워크의 각 장단점을 알아보고, 그 중 하나를 선택해서 배워보려고 한다. 필자가 제일 관심있어하는 3가지 프레임워크 Tailwind CSS, PureCSS, Bootstrap 장단점을 알아보자. 목차 1. CSS 프레임워크 정의 2. CSS 프레임워크 종류 1. CSS 프레임워크 정의 CSS 프레임워크(CSS Framework)는 웹 개발에서 일반적으로 사용되는 CSS 코드와 JavaScript 코드, HTML 코드 등의 모음이다. 프레임워크를 사용하면 개발자는 빠르고 쉽게 웹 페이지를 개발할 수 있다. 위는 2023년 css 프레임워크 만족도이다. 1위가 Tailwind CS..

js로 토이 프로젝트를 하는 도중 트러블 슈팅(?)이 발생하여 이번 기회로 트러블 슈팅 첫 기록을 남기려고 한다. 나중에 같은 오류와 버그를 마주했을 때 문제해결 과정 기록을 보고 쉽게 해결할 수 있다는 바램이다. 목차 1. 문제 발생 2. 문제에 대한 정보 수집 3. 원인 추론 4. 문제 해결 1. 문제 발생 회원 등록 페이지에서 빈 문자열에서 추가를 하면 유효성 검사로 막혀서 modal창이 닫히지 않아야 한다. 그런데 회원 정보 추가하고, 등록한 후 다시 회원 등록 페이지에서 빈 문자열을 등록하면 modal창이 닫히는 문제가 발생하였다. const $add = document.getElementById("add"); /* 유효성 검사 */ const formValidation = () => { if ..

우리는 보통 css로 작업하다가 display: block, inline의 개념을 모르고 쓸 경우가 허다하다. 그래서 필자는 css의 인라인/블록 요소, flex,grid 차이점에 대해 정리해보고자 한다. 밑에서 알아보자. ※ 부족한 부분이 있으면 추후에 추가하겠다. 목차 1. 인라인 요소는 무엇인가요? 2. 블록 요소는 무엇인가요? 3. 인라인 요소와 블록 요소의 차이점은 무엇인가요? 4. flex,grid 차이점 무엇인가요? 1. 인라인 요소는 무엇인가요? 인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소는 블록 요소를 자식을 포함할 수 없다. width, hegith(너비,높이) 속성이 적용되지 않는다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고, text-a..

우리는 package.json을 사용하지만 각 구성요소의 의미하는 바를 모르고 쓰는 경우가 많다. 나 또한, 그러한 경우가 허다해서 package.json에 대해 조사하고자 하여 이와같이 정리하였다..밑에서는 package.json에 대해 알아보자.목차1. package.json의 개념2. package.json의 구성요소1. package.json의 개념프로젝트에 대한 정보, 설정, 사용중인 패키지를 기록하는 파일이다.npm(node package manager)npm(node package manager)은 자바스크립트 패키지 매니저이자 node.js를 위한 오픈소스 생태계이다.Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Comman..

리액트 기초부터 공부하는 와중에 친구의 추천으로 리액트 기본기 질문 영상을 보았는데 "예상 결괏값"을 맞춘게 하나도 없어서 필자는 react의 기본기에 대해 부족한 것 같아 영상에 말한 것을 정리해보았다. 이 글을 보고 있는 당신도 영상을 한번 보는 것을 권장한다. 1번 결과 값은 어떻게 되는지? function App() { console.log("init"); const [state, setState] = useState(0); console.log("state:", state); useEffect(() => { console.log("effect"); setState(1); }, []); return ; } [정답] function App() { console.log("init"); const [s..

프론트엔드를 공부하다보면 SPA, MPA, SSR, CSR에 관해 들어본적 있을 것이다. 나 또한, 리액트를 공부하다가 알게되었지만 개념을 정확하게 인지하지 못한채 넘어갔었다. 마침 프리온보딩에서 SSR, CSR에 관해 설명을 해주어 이번 기회에 개념을 짚고 넘어가보려고 한다. SSR, CSR의 정의 및 차이점과 어느 상황에서 선택해야하는지 밑에서 알아보자.목차1. SSR과 CSR의 정의 및 차이점2. SSR과 CSR의 정의 및 차이점 3. SSR 또는 CSR을 선택해야 하는 상황 1. MPA vs SPA 개념MPA(multi page application)서버 사이드 렌더링 방식인 멜터 페이지 애플리케이션은 여러 페이지로 구성된 웹 애플리케이션이다.사용자의 클릭과 같이 인터렉션(상호작용)이 발생할 때마..

이 글을 보는 여러분은 프론트엔드 학습에 대해 궁금하여 들어왔을 것이라고 생각하여 밑에서 프론트엔드 간략한 학습 순서에 대해 적어보겠다. 학습 순서의 내용은 시니어 개발자님에게 1:1 멘토링을 하면서 들었던 내용이니 참고바란다.  학습 순서1. 자바스크립트 공부 (유튜브 무료강의)2. **코어 자바스크립트 학습하기2-1. [js등의 기본 구조 살펴보기](https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리)3. 깃허브 공부 드림코딩 깃허브 및 얄코의 깃허브 둘 중 하나 유료 영상4. [학습 내용 기록하면서 마크다운 문법 학습하기] (https://github.com/cheese10yun/TIL)(https://github.com/YuHyeonWook/TIL..

1장 협력하는 객체들의 공동체 이런 객체지향 한줄요약은 대부분의 사람들은 "객체지향이란 실세계를 직접적이고 직관적으로 모델링할 수 있는 패러다임" 이라는 설명과 마주하게 된다고 한다. 그래서 보통 현실세계를 가져와서 객체를 현실 세계에 존재하는 사물에 대한 추상화라고 표현하게 된다. 아쉽게도 이런 아이디어는 객체지향패러다임을 쉽게 설명해주기는 하지만 완벽한 설명은 아니다. 객체 지향의 목표는 실세계를 모방하는 것이 아니라. 현실 세계의 생명체처럼 생각하는 객체를 만드는 것이다. 협력하는 사람들 커피 공화국의 아침 커피집에서 커피를 먹는다고 생각해보자. 커피를 구매하기 위해 카운터에 가서 캐시어에게 커피한잔을 주문한다. 캐시어는 바리스타에게 커피를 제조하도록 이야기를 한다. 그러곤 바리스타는 커피를 제조한..