til47 원시 타입(Primitive type)과 참조 타입(Reference Type) Javascript의 변수 타입 자바스크립트의 변수 타입에는 크게 '원시 타입'과 '참조 타입'으로 나뉜다. 원시타입의 변수들은 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장하며, 참조타입은 메모리에 직접 접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근한다는 특징이 있다. 원시 타입 원시타입에는 아래와 같은 변수들이 있다. 숫자(Number) 문자열(String) 불리언(Boolean) null undefiend 심볼(Symbol) : ES6에서 추가된 원시타입으로, 유일하고 변경 불가능한 값을 생성하는 데 사용된다. 원수 타입은 변수에 직접 값을 저장한다. 즉, 변수에 원시 값을 할당하면 해당 변수에는 실제 값이 저장되며, 변수 간에 값 복사가 이.. 2023. 8. 2. 상태관리도구 Redux Toolkit 리덕스툴킷(Redux Toolkit) 리덕스툴킷은 리덕스 사용 시에 아래와 같이 우려되는 것들을 해결하기 위해 만들어졌다. "저장소를 설정하는 것이 너무 복잡하다" "쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다" "보일러플레이트 코드를 너무 많이 필요로 한다" 리덕스를 만든 Dan Abramov는 모든 리덕스 앱에 리덕스 툴킷을 사용하기를 강력히 권장하고 있다. 리덕스툴킷은 무슨 장점을 가지고 있기에 이렇게 강력추천 하는 걸까? 리덕스툴킷의 장점 초기 설정이 매우 간편하다. 더 이상 다양한 패키지들을 설치하지 않아도 된다. 기존에는 반복되는 코드가 많아 코드가 복잡해지고 실수를 많이 유발했지만, 이런 부분들이 많이 개선되었다. 리듀서, 액션타입, 액션 생성함수, 초기상태를 하나의 함수로 편하게.. 2023. 8. 1. 단반향 바인딩과 양방향 바인딩 데이터 바인딩(Data Binding)이란? 화면상에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다. 예를 들어 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주었을 때, 해당 값이 변경될 경우 다시 HTML상에 데이터를 변경된 값에 따라서 맞추어 주는 동작을 데이터 바인딩이라고 한다. 단반향 바인딩 장점 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능하다. 데이터 흐름이 단방향(부모 -> 하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다. 단점 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다. 대표적인 프레임워크 리액트 단방향 데이터 바인딩은 .. 2023. 7. 29. modal 컴포넌트의 아이콘의 크기가 페이지마다 달라지는 현상 import styled from 'styled-components'; import { close } from '../../redux/reducers/modalSlice'; import { useDispatch } from 'react-redux'; const ModalWrapper = styled.div` position: absolute; width: 100%; height: 100%; `; const ModalBackDrop = styled.div` background-color: rgba(0, 0, 0, 0.3); position: fixed; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-.. 2023. 6. 23. 공통 컴포넌트인 Header가 페이지마다 다르게 나오는 현상 const HeaderContainer = styled.header` position: sticky; min-width: auto; width: 100%; height: 3.5rem; display: flex; align-items: center; border-top: 3px solid var(--orange); border-bottom: 1px solid var(--black-100); box-sizing: border-box; top: 0; background-color: var(--white); z-index: 9999; `; 1. Header의 높이가 페이지마다 달라지는 현상 발생 : 처음엔 별 문제없어 보였으나, 게시글을 여러개 가져와서 스크롤이 생기는 페이지에서 Header의 높이가 달라지는.. 2023. 6. 22. 프리프로젝트 진행 중.... 스택오버플로우를 클론코딩하는 프리프로젝트를 진행 중이다. 내가 맡은 부분은 로그인페이지와 회원가입페이지. UI는 구현했고, 이제 기능구현을 위해 열심히 달리고 있다. 간단한 일일줄 알았더니, 생각보다 할 일이 많다. 그리고 무엇보다 잘잘한 오류들을 처리하는 것에 시간이 많이 쓰인다. 개발은 문제를 해결하는 것이라더니.... 정말 공감이 된다. UI를 구현하기까지도 수많은 오류들에 부딪혔었고, 해결해나갔었는데 시간에 쫓겨 상세히 기록을 해두지 못한 것이 아쉽다. 프리프로젝트는 일주일 정도 더 진행될테고, 그 다음에 메인프로젝트가 진행될텐데 아무리 시간에 쫓기더라도, 나의 성장을 위해서 매일 30분 ~ 1시간은 투자하여 내가 마주친 오류들과 그것들을 해결하는 과정을 기록으로 남겨두어야 겠다. 지금부터라도 기.. 2023. 6. 21. 이전 1 2 3 4 ··· 8 다음
