1. 리액트에서 프로젝트 이름은 대문자가 포함되면 안되는 것 같다. 전부 소문자로 해야 create-react-app을 할 때 에러가 나지 않는다. 2. 명령 프롬프트에서 리액트 앱 실행 맨날 VSCode 터미널에서 npm start로 했었는데, CMD로는 처음 해보는데 신기했다. Local 주소는 3000번 포트를 이용하고(node.js) 내 네트워크에서는 192.168 ~ 로 시작되는걸 쓴다. 3. 리액트에서 웹팩과 바벨이 필요한 이유? 리액트는 비교적 최근에 나온 기술이라서 일부 브라우저는 이해할 수 없는 코드로 구성되어 있다. 그래서 웹팩과 바벨이라는 도구가 필요하고 이 도구로 리액트를 모든 브라우저가 이해할 수 있도록 컴파일 해야 한다. 4. package.lock.json이 무엇인가? npm을..

PHP 페이지를 유지보수 하던 중에 분명 background를 알맞게 설정했는데 적용이 안 되는 현상이 있었다. 그래서 혹시나 이전에 개발했던 부분의 캐시 문제인가?하고 ctrl+F5를 눌렀더니 바로 적용되었다. CSS에서 왜 이런 캐시 문제가 발생하는지 좀 더 자세히 찾아보았다. CSS를 고쳤는데도 그전과 똑같이 보인다면, 브라우저가 저장해놓은 '캐시'를 사용하기 때문에 그전에 내용이 그대로 보이는 경우가 많다. 해결책으로는 브라우저의 캐시를 지우거나, 파일명 변경해주는 것이 있다. 나 같은 경우에는 Ctrl+F5로 캐시를 삭제했다. * Cache란? 데이터를 임시로 저장해두는 장소. 사용자가 최근에 열어본 페이지로 다시 돌아왔을 때 브라우저는 시간을 줄이고 네트워크에 추가 부담을 덜기 위해, 원래의 ..

안녕하세요. brandy 입니다. VSCODE를 사용하던 중에 extension으로 설치해두었던 live server가 계속 MS Edge로 뜨는 현상이 있어 이를 변경하였습니다. (저는 계속 Edge로 뜨더라구요 ㅜㅜ) 아무래도 크롬으로 보는게 더 편리하고, 크롬에 더 최적화 되어있기 때문에 chrome으로 변경하고자 합니다. File > Preferences > Settings에서 검색창에 'live server config'를 클릭해주세요. Live Server : Custom Browser이 현재 null로 되어있는데, 이 null 부분을 변경하고자 합니다. chorme으로 live server가 변경된 모습입니다. 각자 편하신 live server로 변경해서 사용하시면 좋을 것 같네요 ! chr..

안녕하세요. brandy 입니다. Javascript를 공부하던 도중 Call stack의 개념에 대해서 알게 되었고, Event Loop 등 관련한 개념들을 정리해보고자 합니다. 이전에는 학교에서 자바스크립트는 HTML 페이지와 어떤 방식으로 상호작용 하는지만 알았다면, 내부 동작 원리를 이해하고자 합니다. 이제는 어떤 엔진으로 돌아가고 자바 시간에 배운 스레드와 맞물려 이해해보고자 합니다. * Single Thread : 일하는 주체가 1개 > 하나의 작업만 처리 가능 그런데 자바스크립트는 동시에 많은 작업을 처리하는 '것처럼 보인다' 왜 그럴까요? 바로 Event Loop 에 의 의해 가능한 일입니다. 출처 : https://joshua1988.github.io/web-development/tran..

VSCode를 이용하여 웹개발을 많이 진행합니다. 그중에서도 빠른 마크업을 위한 도구인 Emmet(에밋)이 있는데요, 저도 놓치고 있었던 부분이 있어서 한번 정리해보고자 합니다. 빠른 마크업이 중요한 이유 ? html이나 xml 같은 마크업 언어는 코드의 양이 많기 때문에 시간 단축이 중요합니다. 그래서 html에서는 emmet 같은 tool들이 개발자들이 좀 더 빠르게 코드를 작성할 수 있도록 지원해주죠. https://docs.emmet.io/abbreviations/syntax/ 정리하기 앞서, Nesting Operator에 대해 알아보도록 하겠습니다. Nesting Operator은 약어 요소를 생성된 트리 안에 배치하는데 사용하고, 컨텍스트 요소의 내부 또는 근처에 배치할지 여부를 결정합니다...

저는 잔나비를 삼행시로 한번 지어봤습니다. 밑의 잔 / 나 / 비 버튼을 하나씩 클릭하면 잔 = ~ / 나 = ~ / 비 = ~ 에 대한 삼행시 문구가 한 줄씩 출력되는 프로그램입니다. html과 Javascript를 이용하였습니다. '잔' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. '나' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. '비' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. 꼭 잔>나>비 순서대로 누르지 않아도 '나' 버튼만 클릭하였을 때 '나를 설레게 만든다' 문구가 먼저 출력될 수 있습니다. 다른 버튼도 마찬가지입니다. 사용환경은 VSCode입니다. html 코드 태그 안에서 index.js 파일을 가져오기 위하여 코드를 사용하였습니다. 삼행시 문구가 출력되기 ..