1. CSS 는 전역이다.위의 그림처럼 다른 component 파일을 정의하고 각각의 파일마다 다른 css 파일을 import하여 사용했습니다. 그리고 각각의 css파일들은 아래와 같습니다. 예상대로라면 빨/파/주/하 서로 다른 4개의 div가 생성되여야 합니다. 과연 결과는 어떨까요? 어라? 분명 각각의 파일마다 다른 css 파일을 import 했는데 Container1, Container2 의 색깔이 파란색으로 같습니다! css파일 경로로 import 한다고 해서 지역 scope라고 단정지을 수 없습니다. 사실 css파일은 전역으로 적용되기 때문에 className이 같다면 다른 파일을 import해도 위와 같은 결과가 나오게 됩니다. 하지만 코드를 짜다보면 ClassName이 중복될 수 밖에 없는데..

해당 포스팅은 Window 에서 진행하였습니다. 1. 프론트앤드 / 백앤드가 햇갈려요! 많이 착각하는 부분이 React와 Express 서버에 관한 내용입니다. 만약 React 프로젝트를 생성했다면 React 서버가 따로 존재할 것이며, Express를 이용하여 Server를 따로 만든다면 Express서버가 따로 존재하게 됩니다. 개발하는 단계에서는 React와 Express 서버를 연결해줘야 합니다. 배포하는 단계에서는 npm build를 통해 하나의 서버로 합쳐주면 됩니다.  ReactExpress서버Nodejs 서버 사용Express를 이용해 커스텀마이징작업화면에 나타날 UI 및 로직 제작API 제작 및 프로토콜 통신 제어 백앤드 공부 참고 블로그(다른분) : https://velog.io/@ys..

해당 포스팅에선 FlexBox의 기본적이고 햇갈리는 개념을 중심으로 작성하였습니다.  FlexBox는 무엇일까? FlexBox란 유동적으로 배치하기 위한 layout 이라고 생각합니다. 이는 "유동적" 이기에 짧고 간단한 코드로 나타낼 수 있으며 정렬에 용이합니다. 그렇다면 Grid 보다 안 좋은 것 아닌가? 라고 생각하실 수 있지만, 이는 상황에 따라 다릅니다. 여기서 유심히 봐야할 것은 "유동적" 이라는 사실입니다. 해당 개념은 아래 예시들을 통해 알아보겠습니다.  출처 : https://www.acmicpc.net/problemset 제가 좋아하는 백준 사이트로 예시를 들어보겠습니다. (해당 예시는 "100% 맞다, 이렇다." 가 아니라 그저 "유동적" 이라는 느낌으로 받아드리면 될 것 같습니다.)..

1. 기본 타입 let Bool: boolean // True or False let num: number // 정수, 실수, (2,8,16)진수, NaN, Infinity 가능 let str: string // "문자", '${str1}' + str2 let arr1: number[] = [1,2,3] let arr2: Array = [1,2,3] 2. 형식 지정 x let a: any let u: unknown /// 형식 지정 x /// 사용을 지양하는 편이 좋음.. num = a // 아무 타입 = any 괜찮음 num = u // 아무 타입 = unknown 경고 num = u as number // 이 처럼 타입을 명시하면 괜찮음..

웹 개발 프로젝트를 진행하면서 typesciprt를 사용하게 됐습니다. 그래서 Typesciprt는 무엇이며 구지 왜 공부해서 써야하는 지 알아보도록 하겠습니다.1. Typescript는 무엇이고 왜 써야할까?타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. (wiki) 1) Javascript는 너무 자유롭다Javascript는 코딩하는 데 있어서 너무나도 제한이 없고 자유롭습니다. 처음 개발할 때는 편하게 느껴졌지만 이는 나중에 큰 프로젝트할 때 오히려 단점이 될 수 있습니다. "실행시간 오류" 를 제대로 catch해낼 수 없기 때문이죠! 그 중 가장 큰 문제의 원인은 변수의 type을 지정함으로 써 해결할 수 있습니..