이안의 평일코딩

불변성이란? (원시 타입 vs 참조 타입) 사전적 의미로는 값이나 상태를 변경할 수 없는 것을 의미하는데, 자바스크립트 타입을 통해 불변성 의미를 살펴보자. 원시 타입은 불변성(immutable)을 가지고 있고 참조 타입은 그렇지 않기 때문에(mutable) 둘을 비교해보자. 원시 타입 : Boolean, String, Number, null, undefined, Symbol (불변성을 가지고 있다.) 참조 타입 : Object, Array 기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call Stack 메모리 공간을 사용하지만, 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용한다. 이 경우 Call Stack은 개체 및 배열 값이 아닌 메모리에만 Heap 메..

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com CSS 프레임 워크 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. 종류로는 Material UI, React Bootstrap, Semantic UI, Ant Design, Materialize 등이 있다. TailWindCSS는 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임 ..

SPA(Single Page Application) public/index.html 템플릿 파일에서 div element의 id가 root로 되어있고, src/index.js 자바스크립트 시작점에서 root id를 가진 div element를 잡아준다. 그래서 element 안에서 화면을 꾸밀 수 있게 되는 것이다. index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮지만 두 개 이상의 페이지를 만들 때는? 원래 a 페이지를 만들면 a.html, b 페이지를 만들면 b.html 이런식으로 만들었다. 위와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application이다. 하지만 요즘에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 ..

리액트는 프레임워크가 아닌 라이브러리 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 다른 Tool인 Vue나 Angular와 많이 비교하지만 가장 큰 차이점은 프레임워크인 두 언어와 달리 React는 라이브러리라는 점이다. 간단하게 보면 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것이고, 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 즉, 프레임워크는 라이브러리를 포함하고 또한 우리가 작성한 소스 코드를 호출한다. 그리고 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다. 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있고, 라이브러리들은 특정 기능을 위해 모듈화 되어 있다. 리액트가 라이브러리인 이유는 전적으로 U..

책 소개 우리는 매일 스마트폰으로 메시지를 보내고, 컴퓨터로 일을 합니다. 또 음식점에서 키오스크로 주문하고, 가상현실에서 게임을 즐깁니다. IT는 더 이상 전문가들만의 이야기가 아닙니다. 우리의 삶 곳곳을 IT가 점령하고 있고, 그 속도는 계속해서 빨라지고 있습니다. 이제 IT를 모르고선 세상을 이해하기 어려운 시대가 되었습니다. 이 책은 비전공자를 위한 ‘IT 기초 문법서’로, 한 번쯤 들어봤을 프로그래밍 언어, 운영체제, 네트워크, API, JSON, 데이터베이스, 이미지 처리, 프레임워크, 라이브러리, 깃(Git), 디자인 이슈 등 다양한 지식을 담고 있습니다. 복잡하게 얽혀 있어 한 번에 이해하기 어려웠던 각각의 지식들을 친숙한 이야기로 쉽게 풀어냄으로써 IT 산업의 전체적인 큰 그림을 그릴 수..

책 소개 많은 IT 종사자들이 안 된다고 말하는 개발자로 인해 협업에 어려움을 겪는다. 우리는 IT 비전공자로서 소통을 잘하기 위해 개발자의 입장에서 많이 생각하게 됐고, 이 과정을 통해 개발자의 안 된다는 말에 담겨 있는 여러 가지 의미를 깨달았다. 이 책에는 우리의 성장 과정에서 발견한 협업 노하우들을 담아냈다. 2021년 03월 25일 출간 240쪽, 김종철, 김수저 저 리뷰 완독일: 2022-04-17 개발자로 회사에 취직한 지가 벌써 13개월이 지났다. 첫 일본계회사도 13개월을 다니고 관뒀었는데 인생에서 개발자로 일한 기간이 가장 긴 셈이다. 이전 회사에서 나는 내 담당일만 했고 내 팀원들과 대화를 나눴지만 다른 팀과는 가끔 점심 식사를 함께하거나 할 뿐이었다. 하지만 개발자는 달랐다. 프론트..

위의 유데미 강의 13강 Exports와 Imports의 내용이다. default 키워드와 같이 export하는 방법과 const와 함께 export하는 경우가 있다. 이 둘의 차이점이 뭘지 고민해보자. export의 두 종류 // person.js const person = { name: 'Max' } export default person // utility.js export const clean = () => { ... } export const baseData = 10; 위와 같이 export된 경우 import 시 다르다는 것을 알게되었다. 다른 export에 따른 import 방법 먼저, default 키워드로 export된 경우이다. // app.js import person from './..

이사를 가게 되어 새로운 개발 환경구축을 위해 인터넷 및 공유기 와이파이 설치를 딜라이브를 통했다. 하지만 취약한 보안(WPA) 문제가 아이폰, 아이패드, 맥북에서 뜨게되어 애플생태계를 사용하는 이라면 필요하지 않을까 하여 글을 작성해본다. 많은 블로그들의 글을 찾아보았지만 관리자 접속부터 문제가 있었지만 해결책은 생각보다 간단했다. 해결 방법 설정의 Wi-Fi 주소를 주소창에 입력하면 들어가진다는데 나의 경우 들어가지기는 커녕 기다리다 10분을 날려먹었다. http://192.168.200.254:8080/ 위의 주소로 들어가면 DLive의 Netis 공유기 관리자모드로 들어가진다. 위의 사진처럼 사용자 계정에는 admin을 사용자 암호에는 admin + 공유기 MAC주소의 뒤 4자리를 넣어서 로그인 ..