분류 전체보기
-
함수 심화와 thisjavascript 2023. 6. 24. 05:42
변수의 유효범위와 클로저 렉시컬 환경 스크립트 전체와 관련된 렉시컬 환경은 전역 렉시컬 환경(global Lexical Environment)이라고 한다. ’변수’는 특수 내부 객체인 환경 레코드의 프로퍼티일 뿐이고, 변수를 가져오거나 변경’하는 것은 '환경 레코드의 프로퍼티를 가져오거나 변경’함을 의미한다. 즉, 스크립트가 시작되면 스크립트 내에서 선언한 변수 전체가 렉시컬 환경에 올라가게 되고, 프로퍼티 값은 undefined이다가 값이 할당되게 된다. 가비지 컬렉션 함수 호출이 끝나면 함수에 대응하는 렉시컬 환경이 메모리에서 제거되고 함수와 관련된 변수들은 이때 모두 사라진다. this Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. 하지만 자바스크립트의 경우 자바와 다르..
-
리액트 스타일 라이브러리 (StyledComponents, Stitches, Tailwind) 비교web 2023. 6. 14. 03:32
리액트에서 컴포넌트를 스타일링할 때 사용할 수 있는 방식은 굉장히 다양하다. 일반적인 CSS, Sass, CSS Module, styled-components 등 다양한 스타일 방식이 존재한다. 그동안에는 가장 선호된다는 스타일 라이브러리인 styled-components를 많이 이용해왔는데, 리액트 스타일 라이브러리 중에서도, StyledComponents, Stitches, Tailwind에 대해 알아보고 비교해보고자 한다. Styled Components 스타일드 컴포넌트란 '컴포넌트 이름을 쓰듯 스타일을 지정하는 것'을 의미한다. 스타일드 컴포넌트는 자바스크립트 파일 안에 스타일을 선언하는 방식이다. 이러한 방식을 CSS-in-JS라고 부르고, 이런 방식의 라이브러리는 정말 많지만 CSS-in-J..
-
리액트의 데이터관리 - 피드백 바탕카테고리 없음 2023. 6. 9. 16:50
https://seojisoosoo.tistory.com/12 리액트의 데이터 관리 React Query vs Asynchronous Recoil 들어가며 리액트의 서버 데이터 관리란? 리액트의 데이터 관리 방법에 대해 알아보기 이전에, '데이터 관리'란 무엇인지 짚고 넘어갈 필요가 있다. 데이터 관리란 변화하는 데이터들을 관리하는 seojisoosoo.tistory.com - ✅ Context와 Redux 부분에서, "로딩/에러 처리를 할 때 useEffect 를 사용하기 때문에 코드양이 방대해진다"라고 이해했어요. 컴포넌트 단에서는 쿼리와 같이 early return이나 조건부 렌더링을 할 수는 없나요? 그렇게 상태를 설계할 수는 없을까요? 컴포넌트 단에서의 처리가 줄어든다면, 문제점이 계속해서 유효..
-
5월 데보션 테크 세미나 클라우드 비용 최적화 후기javascript 2023. 5. 28. 21:42
최근 스프링을 공부하기 시작하면서, DB를 구축하고 또 서버를 배포할 때 AWS를 접했어요. 그만큼 클라우드에 관심을 갖고 있던 차에 클라우드 비용 최적화에 대한 테크 세미나를 듣게 되어서 정말 유익했습니다. 그럼, 테크 세미나를 듣고 어떤 점을 느끼고 학습했는지 그 이야기를 들어보러 가시죠! 🌈 TANGO 비용최적화 운영 EC2/RDS Auto Stop/Start AWS 클라우드 비용이 빌려서 1억원이 나왔다!라는 말이 밈처럼 돌만큼 클라우드 비용을 최적화하기는 어렵다고 알고 있었는데요, SKT에서는 어떻게 클라우드 비용을 최적화하는지 알려주셔서 흥미로웠습니다. 평일 7~22시, 주말과 공휴일에는 자동으로 off해서 비용을 최적화한다고 하셨는데요, 특히 instance schedular를 이용해서 람다..
-
자바스크립트 함수 심화javascript 2023. 5. 13. 11:12
재귀와 스택 재귀적 구조 재귀란 함수 내부에서 자기 자신을 호출하는 것을 나타내는 프로그래밍 용어이다. 재귀적 자료 구조는 자기 자신의 일부를 복제하는 형태의 자료구조이다. 재귀적 구조는 배열이나 연결리스트로 표현할 수 있다. 연결리스트 배열의 경우, 삭제와 삽입에 들어가는 비용이 크기 때문에 빠른 삽입과 삭제를 위해서는 배열보다 연결리스트를 사용한다. 연결리스트는 아래와 같이 두 가지 방법으로 생성할 수 있다. //1 let list = { value: 1, next: { value: 2, next: { value: 3, next: { value: 4, next: null } } } }; //2 let list = { value: 1 }; list.next = { value: 2 }; list.next..
-
리액트의 데이터 관리 React Query vs Asynchronous Recoilweb 2023. 5. 8. 05:38
들어가며 리액트의 서버 데이터 관리란? 리액트의 데이터 관리 방법에 대해 알아보기 이전에, '데이터 관리'란 무엇인지 짚고 넘어갈 필요가 있다. 데이터 관리란 변화하는 데이터들을 관리하는 것인데, 상태의 초기 값을 저장하거나, 현재 상태의 값을 읽거나, 새로운 데이터로 상태를 업데이트 하는 등의 행위를 일컫는다. 데이터 관리는 곧 상태 관리라고 보아도 무방하다. 많은 상태들 중에서도 서버에서 받아오는 서버 데이터의 상태를 관리하는 것이 데이터 관리이기 때문이다. 리액트에서 관리해야하는 상태들은 크게 내부 상태와 서버 데이터가 있을 텐데, 오늘은 그 중에서도 서버 데이터를 관리하는 방법에 대해 집중적으로 공부해보자. 기존의 서버 데이터 관리 (1) state와 props 리액트에서 상태를 관리할 때에는 s..
-
자료구조와 자료형javascript 2023. 5. 7. 04:37
배열 배열은 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조이다. let fruits = new Array(); let fruits = []; let fruits = ["사과", "오렌지", "자두"];위와 같은 방법으로 빈 배열을 선언해주거나 혹은 초기 요소를 넣어서 초기화해줄 수 있다. 만일 배열을 수정하고 싶다면 fruits[2] = '배';위와 같이 인덱스로 접근해서 수정하면 된다. 자바스크립트에서는 배열 요소 자료형에 제약이 없기 때문에 아래와 같이 여러가지 자료형을 섞어서 만들어도 된다. let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];큐와 스택 자바스크..
-
리액트 반응형 완벽 구현하기web 2023. 4. 23. 19:00
유저들이 사용하는 사이트를 위해서는 반응형이 꽤나 필수적이다. 어떤 기기에서 접속해도 잘리지 않고 잘 보여야하기 때문. 오늘은 리액트로 구현한 반응형에 대해 이야기해보려고 한다. 반응형을 구현하는 것은 사실 어렵다기 보다는 귀찮은 일에 가깝다. 여기저기 찾아보아도 아주 정확한 값을 제공하는 곳이 없기 때문이다. 반응형을 구현하기 위해서는 아래의 두 가지 테스크를 수행해야한다. (1) globalStyle 미디어쿼리 적용 (2) svg 이미지 width 값 적용 데스크탑 뷰 반응형 (1) globalStyle 미디어쿼리 적용 리액트로 초기세팅을 마쳤다면 보통 globalStyle파일을 만들었을 것이다. 그렇지 않더라도, html에 다음과 같이 미디어쿼리를 적용하면 된다. 이 프로젝트의 경우는 rem단위를 ..