본문 바로가기

분류 전체보기346

Docker - 도커 컨테이너 각티슈 케이스 리뷰 오늘 포스팅할 친구는 도커를 사랑하는 개발자라면 지나칠 수 없는 도커 컨테이너 각티슈 케이스를 소개해보려고 한다 :) 도커는 컨테이너 기반으로 실행된다. 그 컨테이너 개념을 쉽게 설명할 때는 배에 실은 실제 컨테이너에 비유한다. 오늘 소개하는 도커 컨테이너 각티슈 케이스는 도커에 진심인 인카토스가 만든 소장용 도커 컨테이너의 등장이다. 도커를 사용(혹은 사랑)하는 서버 개발자라면 누구나 가지고 싶은 소장 욕구를 불러 일으킨다. **해당 제품은 협찬을 받아 리뷰를 진행하게 되었습니다 Docker - 도커 컨테이너 각티슈 케이스 도커 러버인 우리 팀원들의 도움을 받아 조립된 케이스. 깔끔하고 디자인이 생각보다 힙했다. 일단 어디에나 놓아도 어울릴 정도로 인테리어 용품으로도 손색이 없을 정도였다 :) 조립 후.. 2023. 3. 1.
React(94) useState 알아보기 (공식문서정리) updated 03/09/23 리액트에서 상태(state) 값은 매우매우 중요하다. 화면에서 일어나는 모든 변화들은 변수(state) 안에 담아서 표현될 수 있고, 업데이트도 자주 일어나기 때문에 렌더링(a.k.a 새로고침) 되면서 항상 최신 데이터(a.k.a state)를 유지해야 한다. 너무너무 기본이지만 확실히 알고 넘어가고자 공식문서를 참고하여 한번 더 정리해보았다. React(93) useState 알아보기 (공식문서정리) useState 는 리액트 내장 함수이고, state 를 나타내는 변수로 사용할 수 있다. useState 는 리액트 훅이기 때문에 컴포넌트 최상단에서 호출하여야 한다. 조건문이나 반복문에서의 사용은 안된다. (strict 모드에서는 pure func 인지 검사을 위해 2번 .. 2023. 2. 21.
React(93) TypeScript - 유사객체배열에서 원하는 값 사용하기 유사 객체 배열은 {객체 안에 {객체} 들이 배열} 처럼 들어있는 객체 형식을 말한다. 배열과 유사객체배열의 차이는 Array 와 Object 의 차이와 같다. 배열은 순서가 있으며, index 로 요소를 찾는다. 유사객체배열은 순서가 없으며, key 로 요소를 찾는다. 순서가 있고 없고의 차이는 크다. 배열은 메모리에서 연속된 공간을 할당 받는다. 그래서 맨 앞에 요소를 추가한다면 배열의 요소들은 순서대로 한 칸씩 옆으로 옮겨야만 한다. 객체는 메모리에 할당될 때 객체의 값에 참조 값을 통해 접근한다. 그렇기 때문에 순서를 가진 것 같이 나열해놔도 각자 주소가 다르다. 그래서 동적으로 생성되는 데이터의 경우 배열보다는 객체 형식으로 표현하는게 성능 상 더 좋다. 자 그럼 유사객체배열에서 원하는 값을 핸.. 2023. 2. 16.
Git(39) 로컬 브랜치 덮어쓰기 내가 작업하던 브랜치에서 다른 분이 작업한 브랜치를 덮어씌워서 업데이트 사항을 확인하다가 꼬여버렸다. 내가 작업하던 브랜치로 돌아가려고 git reset @HEAD{n} 으로 시간을 되돌리니 얘는 내가 한 커밋만 돌아가버려서 다른 브랜치에서 받아온 커밋들은 사라지지 않고 남아 있었다. 한마디로 업데이트는 업데이트대로 되고 내 작업물은 작업물대로 없어져버린 상황이다. 아예 브랜치를 받아오기 이전, 특정 커밋 시점으로 완벽하게 돌아가고 싶다면? Git(39) 로컬 브랜치 덮어쓰기 커밋 히스토리를 보고 돌아갈 시점을 찾는다. checkout 해서 그 시점으로 돌아간 후, 해당 브랜치에 체크아웃을 해줘서 그시점의 브랜치로 돌아가자 $ git llg // 커밋 히스토리를 나름 가시적으로 볼수있다. 여기서 필요한 .. 2023. 2. 9.
웹최적화 - Reflow 와 Repaint Reflow ? Repaint ? 브라우저 렌더링 과정을 공부할 때 나왔던 단어들이다. 그 전까지는 그렇게 깊이 생각해본 적은 없었지만, 최적화를 공부하면서 이들의 존재감에 대해서 깨닫게 되었다. 이들은 무엇이고 왜 존재감이 생겼을까? 브라우저 렌더링의 과정을 간단히 알아보면 dom + cssom 트리를 각각 만들어서 → 렌더 트리를 만들어내고 → 각 요소들의 사이즈를 계산해 자리를 배치하는 레이아웃을 거친 뒤 → 그 레이아웃 요소들에 페인트하는 페인트 단계를 거친다 → 그 모든 걸 조합하는 컴포짓해서 화면에 내보낸다 웹최적화 - Reflow 와 Repaint 여기서 css 요소가 변경이 되면 Reflow 와 Repaint 를 거친다. Reflow는 이모든 단계를 다시 거치는 것이고 DOM + CSSOM.. 2023. 2. 4.
React(92) useRef 알아보기 (공식문서 정리) 요즘은 공식문서 읽기에 재미가 붙었다. 리액트 beta 공식문서를 통해 기본적인 훅들과 기능들을 다시한번 훑어보며 정리 중이다. 오늘은 useRef 에 대해서 읽어보았다. 그러다 추억의 포스팅도 발견했다. 2년 전쯤 정리했던 포스팅인데 정말 무지했음을 다시 한번 느꼈다. (화이팅🥲) React(27) 리액트 훅 useRef 란 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 us devbirdfeet.tistory.com React(92) useRef 알아보기 (공식문서 정리) useRef 는 렌더링이 필요하지 .. 2023. 2. 1.
React(91) 탭 클릭시 지정 영역으로 스크롤 이동 / 스크롤시 해당 탭 자동선택 이 녀석은 반응형 탭에 대한 고민의 흔적이 담긴 꽤 오래 묵혀놓은 포스팅이다. 재작년에 짰던 코드라 부족할 수 있지만 최대한 고쳐 올려보겠다. 상품 판매 페이지의 중간에 메뉴 탭이 붙게 되는데, 이 메뉴를 클릭시 해당 내용이 있는 곳으로 스크롤이 이동한다. 또한 그냥 스크롤 다운 하다가 해당 영역이 있는 지점에 들어서면 이번엔 반대로 탭이 해당 메뉴로 이동한다. 그럼 구현하러 가보자 ! React(91) 탭 클릭시 지정영역으로 스크롤 이동 / 스크롤시 해당 탭 자동선택 아래 상품 상세 페이지에는 포트폴리오라는 탭이 보인다. 이 탭을 클릭해보자 요렇게 스크롤이 딱 포트폴리오를 설명하는 부분으로 이동한다. 반대의 경우도 마찬가지이다. 포트폴리오를 설명하는 부분으로 스크롤을 내리다보면 해당 영역으로 진입하면 .. 2023. 1. 25.
React(90) useEffect 알아보기 (공식문서 정리) React 를 만지면서 useEffect 는 사실 1년 이상을 동거동락해왔다. 하지만 처음 강의를 들을 때 공부하거나 실무에서 그때그때 얻은 조각난 지식말고는 제대로 아는 게 없다는 것을 깨닫고 부끄러웠다. 그래서 리액트 공식문서 구버전과 신버전(beta) 을 참고하여 useEffect 에 대해서 조각난 퍼즐을 맞춰 정리해보았다. React(90) useEffect 에 대해서 (공식문서 정리) useEffect 는 리액트 16.8 에서 도입된 Hook(리액트의 내장함수)이다. 코드를 짜다보면 화면이 새로고침되거나(렌더링) 데이터가 뭐가 바뀔 때(업데이트), 어떤 함수가 실행되야 할 때가 있다. 얘는 그런 needs 가 탄생시킨 함수이다. side effects 는 렌더 후에 일어나는 코드의 실행을 말하고.. 2023. 1. 19.
JavaScript - 조합 구하기 (재귀함수) 조합은 순서 상관없이 경우의 수를 구하는 것이다. 그림을 보면 한번에 이해가 될 것이다. [1,2,3] 배열의 경우 [1,2], [2,3], [1,3] 이렇게 세가지 조합이 나온다 JavaScript - 조합 구하기 (재귀함수) 조합을 구하기 위해서는 재귀함수를 응용한다. 반복문으로 구할 수 있지만 일일이 구하고자 하는 숫자만큼 반복해주어야되어 코드가 길고 복잡해질 수 있기 때문이다. // 1 function getCombination(arr, selectNum){ const result = []; // 결과값을 담은 배열선언 if(selectNum === 1) { // selectNum 이 1 일 떄 (재귀함수의 종료조건, 탈출구!) return arr.map(item => [item]) // ex) .. 2023. 1. 4.
반응형

티스토리툴바