2. 우당탕탕 개발자/2-2. 상세 노트14 얕은 복사, 고차원의 깊은 복사 깊은 복사 vs 얕은 복사 우선 자바스크립트의 자주 쓰이는 타입들을 살펴보자. 복사의 차원에선 자바스크립트의 타입을 참조형과 기본형으로 나눌 수 있다. 값과 주소로 이루어진 참조형과 값 자체인 원시형 기본형 타입으로 나누어진다. 참조형 (Reference type) : 값 - 주소로 이루어짐. object (array 포함) function 기본형 (Primitive type) : 값 자체 number string boolean (true/false) null / undefined symbol 얕은 복사(Shallow Copy) 얕은 복사는 '주소'만 복사한다. 기본 타입은 주소가 없기 때문에 그 값을 복사한다. 문제는 참조형이 주소만 복사하기 때문에 원본이 변하면, 복사된 값도 변화한다는 것이다. 반대.. 2021. 7. 31. Docker를 이용해서 React.js를 배포하기 1 인프런의 따라하며 배우는 도커와 CI환경을 듣고 있다고 지난 포스팅에서 언급했는데요. 도커도 처음부터 끝까지 제대로 배우려면 그 엄청난 양으로 우리를 압도합니다. 해당 강의는 초보자를 위한 강의 답게 실제로 쓰이는 필수적인 내용들만 간추려서 예제와 함께 따라 배우는 거라 이해도 쉽습니다. 강추....! Dockerfile.dev 개발환경에서 사용하는 도커 파일은 Dockerfile 끝에 .dev를 덧붙여줍니다. Dockerfile과 마찬가지로 안에 쓰이는 구문은 같습니다만 터미널에서 해당 파일을 실행시킬 때는 다음과 같이 덧붙여줘야 합니다. -f 뒤에 Dockerfile.dev를 명시해주어 지금은 이 파일을 이용해서 이미지를 빌드해줄것이라고 알려주어야 합니다. 그렇지 않으면 Dockerfile을 찾을 것.. 2021. 7. 18. Docker volume & compose Docker volume & compose 도커 파일 작성법과 도커 볼륨과 컴포즈에 대해 정리하겠습니다. 인프런의 따라하며 배우는 도커와 CI 환경 강의를 듣고 있는데요(강추). 그동안 프론트엔드 CSS강의 듣다가 이 강의로 돌아오니 모든 내용이 새롭습니다. 역시 익숙하지 않은 내용은 짧은 텀으로 고반복 해줘야 하는게 진리입니다. 복습하고 강의를 듣다가 모르는 부분은 도커 공식사이트를 참조하며 추가했습니다. 도커는 배우면 배울 수록 신기하고, 사람들 마다 다른 컴퓨터 환경에서도 돌아갈 수 있도록 판을 짜준다는 점이 매력적입니다. docker file 작성법 & port mapping FROM node:10 WORKDIR /usr/src/app COPY package.json ./ RUN npm insta.. 2021. 7. 15. AWS Amplify로 Git 최신 merge 내용으로 자동 배포하기 AWS Amplify라는 너무나 간편한 git의 최신 merge된 내용을 자동으로 배포해주는 기능을 소개합니다. 기존엔 'netlify`를 이용해 git의 최신 내용을 자동으로 배포해주는 사이트를 이용했는데요. 로그인이 알 수 없는 이유로 안되면서... 여러차례 문의도 남겼지만... 해결은 못했다는 슬픈이야기... 결국 AWS로 돌아와 git action과 한참을 씨름하다 AWS Amplify를 알게되었습니다 🎉🎉🎉 netlify를 이용했던 이유 중 하나가 git의 main branch 를 업데이트할 때마다 netlify가 알아채고 빌드업 후 배포해주는 간편함때문이었습니다. 그런데 같은 기능을 AWS Amplify에서도 이용할 수 있습니다. 물론 netlify 는 git merge 100번까지 무료로 제.. 2021. 7. 13. Docker란 무엇인가? Docker docker는 다른 작업 환경에서도 신속하고 안정성 있게 소프트웨어를 설치 및 실행할 수 있도록 도와주는 오픈 플랫폼입니다. 여러 사람들과 협업하는 환경에서 docker를 빼놓고 작업하기는 어려워보입니다. 그래서 저도 docker에 대해서 배우기 위해 인프런에서 '따라하며 배우는 도커와 CI환경' 강의를 듣고 있습니다(강력 추천!). 배운 내용 중에서 기억해야될 내용을 위주로 간단하게 정리할 계획입니다. Container & Image 도커에서 핵심이라고 할 수 있는 container는 물류의 컨테이너처럼 application을 실행할 때 필요한 모든 것을 쉽게 전달할 수 있도록 패키징으로 묶은 것을 의미하는 것 같습니다. Image 는 프로그램을 실행하는데 필요한 설정과 종속성 정보를 담고.. 2021. 7. 1. [CSS] px | em | rem 차이를 알아보자 px | em | rem 차이를 알아보자 px은 고정된 절대값의 단위며, em과 rem환경에 따라 변하는 단위입니다. 고정된 px과 달리, 환경에 따라 변하는 em과 rem의 장점은 무엇이며, 어떤 경우에 각각의 단위를 쓰는 것이 좋은지 알아봅시다. em vs. rem 차이 : 변환되는 기준이 다름 em과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다. em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다. div { font-size: 10px; } div { font-size : 1em; /*1em 대략 10px*/ } rem은 최상위 엘리먼트에서 지정된 f.. 2021. 6. 28. 이전 1 2 3 다음
