분류 전체보기

https://hi-claire.tistory.com/61 [Javascript] 불변성이란 무엇인가(상) 리액트를 공부해본 당신.... 리액트가 지향하는 개념 중 하나인 "불변성"에 대해 알고 계시나요? 저는 useState, spread 연산자를 사용하면 되는 건줄로만 알고 있었는데... 정확히는 "왜?🤔" 사용하는 hi-claire.tistory.com 이번 포스팅은 위 포스팅에서 이어집니다. 원시 타입과 참조 타입에 대해 알고 포스팅을 읽으면 수월하게 이해하실 수 있습니다! 안녕하세요! 이번 포스팅은 "리액트의 불변성"에 대해 알아보도록 하겠습니다. 0. 들어가기 전 저번 포스팅에서 원시 타입과 참조 타입으로 "불변성"이 무엇인지 알아보았습니다. 다시 복습하자면 다음과 같습니다. 불변성 : 메모리..

리액트를 공부해본 당신.... 리액트가 지향하는 개념 중 하나인 "불변성"에 대해 알고 계시나요? 저는 useState, spread 연산자를 사용하면 되는 건줄로만 알고 있었는데... 정확히는 "왜?🤔" 사용하는지 모르겠더라구요...!!!!! 그래서 이번 시리즈는 "리액트의 불변성" 에 대해 알아보도록 하겠습니다. 그 전에 Javascript의 메모리 구조와 데이터 타입을 통해서 정확히 "불변성"이 무엇인지, "불변성"은 어떻게 지키는 것인지 알아보는 시간을 갖도록 하겠습니다! (그래서 상 편 ㅋㅅㅋ) 1. JS의 메모리 구조와 데이터 타입에 대해 알아보자.. Javascript 엔진은 Call Stack과 Heap 두 가지의 메모리 공간을 가집니다. 더보기 콜 스택 : 실행 중인 함수를 추적해 계산을..

문득 프론트엔드 모집공고를 보다가.. [우대사항] - GraphQL 경험이 있으신 분 를 보았다. GraphQL..? GraphQL이 뭘까? 하다가 작성하게 된 오늘의 포스팅! (두둥-) 오늘은 GraphQL에 대해 알아보고, 자주 비교되는 REST API 와도 차이점을 알아보겠다!!! 1. 그래서.. GraphQL이 뭔데? 🧐 GraphQL은 페이스북에서 만든 쿼리 언어입니다. React를 만든 곳에서 만들었으니 호환성도 좋겠죠? GraphQL은 데이터 쿼리 언어이자, API용 서버에서 작동하는 프로그램입니다. GraphQL은 SQL과 마찬가지로 "쿼리 언어" 이다! 둘의 차이점이라 하면 SQL은 데이터베이스 시스템에서 저장된 데이터를 효율적으로 가져오는 것이 목적이고, GQL은 웹 클라이언트가 데이터..

프로젝트를 새로 들어가면서 페어와 디렉토리 구조 개편(?)에 대해 논의해보았다. 어떤 디렉토리 구조가 과연 좋은 것일까..🤔 폴더 구조에 정답은 없다고 하지만... 분명 보다 나은 방법은 있을 것이라 생각해 이것저것 찾아보았다. 그러다 발견하게 된 "아토믹 디자인 패턴" !! 실제 현업에서도 많이 사용된다고하니 이참에 한 번 알아보기로 하자. 0. 들어가기 전 이전에는 개발을 할 때 페이지 단위로 디자인 하였기에, "재사용이 가능한 컴포넌트를 만들어 조립하는 방식으로 디자인한다." 라는 대중적인 인식이 생기게 된 시기는 그리 오래되지 않는다. 하지만, 개발자들도 항상 쓰이던 놈은 쓰이고 또 쓰인다는 것을 알고 있었을 것이다. 반복해서 쓰이는 부품들을 잘 정리만 할 수 있다면 효율적으로 개발을 할 수 있지..

새로 진행하는 프로젝트에서 Next.js를 도입할 뻔(?) 했다. 타이트한 프로젝트 일정 때문에 Next.js의 러닝커브와 넥제 이외의 기술들을 습득해야 하는 상황에서 Next.js를 제대로 알고 사용할 수 있을까 고민이 되어 아쉽게 이번 프로젝트에서 사용은 못 하게 되었다. 하지만 언젠가 꼭 사용해보고 싶은 프레임워크이다!! Next.js 가 SSR을 지원하기에 SEO 최적화를 할 수 있다, 또 많은 기업들에서 그러한 이유로 Next.js를 많이 사용한다 정도만 알고, 세세한 이유들은 잘 알지 못해서 이번주 주제로 Next.js에 대해 다뤄볼까 한다. 1. Next.js란 뭘까? 💡 Next.js? Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크이다. React와의 가장 큰 차이..

1. 프론트엔드.. 테스트가 필요할까요? 예전에는 프론트엔드 환경이 엄청나게 복잡하지 않아 프론트엔드 테스트를 잘 진행하지 않았습니다. 하지만, 최근 몇 년간 프론트엔드 개발 환경이 급격하게 발전함에 따라 프론트엔드가 점점 더 중요해지고, 프론트엔드를 관리할 필요성이 생김에 따라 프론트엔드 테스팅도 같이 주목을 받기 시작했습니다. 테스트가 뭔가요? 테스트란, 우리가 작성한 코드가 잘 작동한다는 것을 검증하는 작업을 의미합니다. 즉, 테스트 코드는 개발자가 코드를 작성한 의도대로 프로그램이 동작한다는 것을 보장해 줍니다. 하지만 우리가 만든 프로젝트의 모든 기능을 사람이 수동으로 하나하나 확인하는 것은 정말 번거롭습니다. 그래서 '테스트자동화' 작업을 시행합니다. 사람이 직접 확인하는 것이 아니라 테스트를..

1. 라이프 사이클(생명주기) 💡 라이프 사이클(생명주기)이란? '컴포넌트가 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지' 를 뜻한다. 컴포넌트는 크게 세 가지 카테고리로 나뉜다. 1. 생성(Mount) : DOM이 생성되고 웹 브라우저 상에 나타나는 것 2. 수정(Update) : 컴포넌트가 업데이트 되는 경우 3. 제거(Unmount) : 컴포넌트를 DOM에서 제거하는 과정 프로젝트에서 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하는지, 또는 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 하는지를 알아야 불필요한 업데이트를 방지할 수 있다. 그렇기 때문에 우리는 리액트의 라이프 사이클에 대해 알아야 한다. 2. React LifeCycle(리액트 라이프 사이클) 들어가기 앞서, ..

1. 웹팩(Webpack) 💡 웹팩이란? 웹팩은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, 이미지 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. 의존성 있는 .js, css, 이미지 등은 하나의 파일로 번들링을 하기 때문에 별도의 모듈 로더가 필요없고, 여러 .js 파일을 하나로 묶어주기 때문에 HTML에서는 script tag를 여러 개로 로드해야 하는 번거로움을 줄일 수 있다. 웹팩은 의존성을 분석해 모듈을 번들시켜주는 역할을 한다. 웹팩은 크게 5가지 이유때문에 사용된다. 모듈화 지원: 코드를 여러 모듈로 나누어 작성, 관리할 수 있음 → 재사용可, 유지보수 ..

이번 포스팅에서는 SPA와 MPA의 개념 및 장단점에 대해 다뤄볼 것이다. SPA와 MPA는 모두 웹 애플리케이션의 두 가지 주요 아키텍쳐 패턴이다. SPA와 MPA가 등장하게 된 배경은 무엇일까? 0. 웹 애플리케이션의 발전 MPA는 초기 웹 사이트가 나타났을 때부터 사용되었다. 초기의 웹 사이트는 단순한 HTML 파일들의 집합으로 구성되어 있었기 때문에, 다른 페이지로 이동할 때마다 서버에서 새로운 HTML 파일을 다시 로드해야 했다. 이러한 MPA 방식은 웹 기술이 발전함에 따라 점차 로드해야할 페이지가 많아지면서 MPA 방식의 단점들이 부각되었다. 웹 애플리케이션의 복잡도가 증가하면서 SPA 모델이 등장하게 되었다. SPA는 AJAX 기술을 이용하여 필요한 데이터만 서버에서 받아와서 필요한 부분만..

이번 포스팅에서는 Javascript의 객체지향 프로그래밍에 대해 다뤄볼 것이다. 1. 객체지향 프로그래밍이란(OOP)? 💡 객체지향 프로그래밍이란? → 객체(Object) 지향(Oriented) 프로그래밍(Programing)은 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 객체들간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법 그래서 객체가 뭐고 추상화가 뭔데? 클래스(Class) : 집단에 속하는 속성(attribute)과 행위(behavior)를 변수와 메서드로 정의한 것 객체(Object) : 클래스에서 정의한 것을 토대로 실제 메모리에 할당된 것 추상화 : 공통의 속성이나 기능을 묶어 이름을 붙이는 것 // 클래스 선언문 class Person { //..