Daily16 원시 타입(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. 프리프로젝트 회고(스택오버플로우 클론코딩) 프리프로젝트 시작 전, 코드스테이츠 프론트엔드 부트캠프 과정을 나름대로는(?) 잘 따라가고 있다고 생각했지만 실전경험이 부족한 탓(수업 끝나고 주도적인 학습을 했었어야 했는데....!)에 팀원들에게 민폐를 끼칠까 봐 매우 염려되었다. 머리로 이해하는 것과 손가락이 기억하는 것은 분명히 다르니까. 그래도 정말 운이 좋게도 좋은 팀원들을 만나서 프리프로젝트를 나름 성공적으로 해낸 것 같아서 뿌듯하다. 팀장 & 팀원분들이 원활한 의사 소통을 할 수 있도록 여러 가지 초기 환경을 구성해 주셨고(기본적인 규칙이라던지, 슬랙을 활용한 커뮤니케이션 등등) 나는 그 위에서 맡은 분야를 코딩만 하면 됐으니 얼마나 고마운 일인가? 어느 정도 역할분담을 나눈뒤에는 주로 프론트는 프론트끼리 백엔드는 백엔드끼리 나뉘어서 작업을.. 2023. 6. 27. 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. 이전 1 2 3 다음
