front (13) 썸네일형 리스트형 [스터디] 내가 선호하는 CSS 전략과 클래스 네이밍 방식 ‼️내가 선호하는 CSS 전략과 클래스 네이밍 방식 개발을 하다 보면 자연스럽게 선택하게 되는 것이 있다.바로 CSS 스타일링 방식과 클래스 네이밍 전략이다. 하지만 평소에 무심코 사용하던 것들에 대해 진지하게 고민해 본 적이 있는가?나 역시 이번 스터디 주제로 이 내용을 처음 접했을 때는 꽤 당황스러웠다. 하지만 오히려 이 기회를 통해 나의 CSS 전략을 정리하고, 어떤 기준으로 스타일링을 선택하고 있었는지를 되돌아볼 수 있었다.이번 글에서는 CSS 사용 방식의 종류, 내가 실제로 선호하는 방식, 그리고 클래스 네이밍 전략에 대해 정리해보려 한다.✅ CSS를 사용하는 여러 가지 방식CSS는 웹 페이지의 스타일을 정의하는 핵심 기술이다.그러나 프로젝트 환경이나 개발자의 성향에 따라 다양한 방식으로 사용.. [스터디] 토이 프로젝트 - pomodoro, 배포부터 pwa 적용까지 이번 스터디 주제는 토이 프로젝트로, 내가 스피커였다.그동안 만들고 싶었지만 계속 뒤로 미루던 것들을 다같이 해보면 어떨까 싶어서 주제로 선정하게 되었다. 4주차 동안 진행하는 건데, 1주차는 기획안 작성이라 사실상 3주만에 프로젝트를 완성해야 했다.목표는 "실제로 운영 가능한 프로젝트"를 만드는 것이였다. 💡 토이 프로젝트 주제내가 정한 주제는 사이트 프로젝트 주제는 "뽀모도로 웹사이트"로 이전부터 생각해오던 것이었다. 원래 집중을 정말 못하다가 이대론 안되겠다 싶어서 시작한게 뽀모도로였는데,생각보다 나한테 잘맞아서 취준시절부터 꾸준히 사용하는 방법이다. 집에서는 뽀모도로 전용 시계를 사서 잘 애용하고 있는데,막상 회사에서 사용하려니 소리가 너무 크게 날 것 같아서 웹 사이트가 있으면 좋겠다.. React 19 톺아보기 - use 스터디의 두 번째 주제로 정한 hook은 use였다.이번 주는 갓생 살기로 다짐해서 나름 열심히 공부해 봤다. 1. Useconst value = use(resource); Promise나 Context와 같은 데이터를 참조하는 hook. 다른 React hook과 달리 use는 조건문과 반복문 내부에서 호출이 가능하다.다만, 컴포넌트 또는 훅 안에서만 호출해야 한다. resource : 참조 데이터. Promise나 Context일 수 있다.Promise나 Context에서 참조한 값을 반환한다. 1) Context 참조import { createContext, useState } from "react";import ThemeDisplay from "../components/ThemeDisplay".. React 19 톺아보기 - useTrasition 항해 플러스 부트캠프가 완료되고, 항해 사람들끼리 비대면 스터디를 진행하기로 했다.주제는 React19 톺아보기로 한 달 동안 진행하기로 했다! 신규 메서드 혹은 hook을 살펴보고,실무에 도입할만한 메서드가 있는지, 기존 코드를 어떻게 효율적으로 개선할 수 있을지 고민하는 것이 목표이다. 첫 주자차에는 hook을 살펴보며 어떤 변화가 있었는지 이야기하는 시간을 가졌다.대체로 "굳이 왜 사용해야 하는지 모르겠다"는 의견이 강했다.그래서 그 중 메서드들을 몇 개 꼽아서 실제로 구현해 보기로 했다.사용해 보면 다를 수도 있으니까! 처음 선택한 메서드는 useTransition이다. 1. UseTransitionconst [isPending, startTransition] = useTransition() u.. [React] React Hooks 항해 플러스 과제를 진행하기 전 React Hooks에 대해서 미리 공부하려 한다.이미 알고 있었고 많이 사용해 본 것들이지만, 공부하면서 새롭게 알게 된 사실들도 있어서 포스팅까지 하게 되었다. 특히 아무 생각 없이 사용했던 방식들을 "왜" 이렇게 써야만 하는지 알 수 있었다! 1. React HooksReact 16.8에 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수들을 말한다.Hooks을 사용하면 클래스 컴포넌트를 작성하지 않고도 React의 다양한 기능을 활용할 수 있다. 1) 등장배경React Hooks는 클래스 컴포넌트에서 발생하던 여러 문제를 해결하기 위해 등장했다. 컴포넌트 간 상태 로직 재사용의 어려움복잡한 컴.. [Javascript] 자바스크립트 디자인 패턴 항해 플러스 과제를 실행하는데 디자인 패턴이 나왔다. 들어만 봤지 실제로 해본 적은 없어서 헷갈리기도 했다.그래서 디자인패턴은 무엇인지, 왜 사용하는지 이번 기회에 한 번 정리해보려 한다. 1. Desing Pattern(디자인 패턴)디자인 패턴은 소프트웨어 개발 과정에서 자주 발생하는 문제들을 해결하기 위한 일반적이고 재사용 가능한 해결책을 말한다. 자바스크립트에서 주로 사용하는 디자인 패턴에는 Module Pattern(모듈 패턴), Observer Pattern(옵저버 패턴), Factory Pattern(팩토리 패턴), Singleton Pattern(싱글톤 패턴), Facade Pattern(퍼사드 패턴), Proxy Pattern(프록시 패턴) 등이 있다. 해당 포스팅에서는 모듈 패턴, .. [React] VirtualDOM 1. VirtualDOM이 생겨난 배경웹 개발에서 DOM(Document Object Model)은 HTML 문서를 개체로 표현한 구조를 말한다.전통적인 방식으로는 웹 페이지 내용이 변경될 때마다 실제 DOM에 접근해 직접적으로 업데이트를 진행한다.하지만, 이 과정에서 DOM 조작은 성능상의 부담을 줄 수 있다. 이러한 문제를 해결하기 위해 나온 것이 Virtual DOM(가상돔)이다. 1) 렌더링 과정에서의 성능 저하이는 브라우저 렌더링 과정을 알면 이해하기가 편하다.브라우저 렌더링은 DOM 트리 생성 > CSSOM 생성 > 렌더 트리 생성 > 레이아웃 > 페인트 과정을 거치게 된다.DOM을 조작하게 되면, 위의 렌더링 과정이 다시 시작될 수 있다. 즉, 해당 돔의 속성을 다시 그려야 할 수 있는 .. [자바스크립트] 실행 컨텍스트, 스코프와 클로저, 호이스팅, this 항해 플러스 과제를 진행하기 전 알아야하는 필수 지식을 미리 공부하려고 한다.이번 주제는 Exeution Context(실행 컨텍스트)이다.취준 시절 공부했던 내용이지만 3년이 지나면서 다 까먹어버려서 다시 공부한다ㅠ 1. Exeution Context(실행 컨텍스트) 란?실행 컨텍스트는 함수를 호출했을 때 실행될 수 있는 환경과 그 결과를 저장하는 영역을 말한다. 실행컨텍스트는 실행 가능한 코드를 만났을 때 생성되며, 실행 가능한 코드에는 함수코드, 글로벌 코드, eval 코드가 해당된다. 실행컨텍스트에는 위와 같이 구성되어 있는데 여기서 중요한 것은"Lexical Environment(렉시컬 환경)", "Declaration Binding Instantiation(This 바인딩)" 이다. 렉시.. 이전 1 2 다음
