비전공 개발자 캐나다 브리

리액트, 앵귤러, 뷰 이 세가지 프론트엔드 프레임워크에 대해 잘 정리해 둔 글이 있어서 공유합니다. https://www.freecodecamp.org/news/front-end-javascript-development-react-angular-vue-compared/ Front End JavaScript Development Handbook – React, Angular, and Vue ComparedFrontend frameworks are indispensable in web development. They provide structured approaches and pre-defined components to streamline the coding process. These tools can a..

node v18으로 다운받은 후 리액트 create-react-app에서 오류가 발생해서 검색해보니 node version 18과의 문제라고 함. 그래서 node 버전을 v17.9.1로 바꿈. node -v으로 현재 버전을 확인하고 (v18.16.0) npm install -g n n 17.9.1 여기서 오류 발생 mkdir: /usr/local/n: Permission denied Error: sudo required (or change ownership, or define N_PREFIX) 이럴 땐 sudo를 사용해서 sudo n 17.9.1 다시 node -v으로 버전을 확인하니 v17.9.1 -> 다행히 node v17과는 문제없이 작동됨. * 참고 https://stackoverflow.com/..

데브리입니다. 이제 가능하면 새로운 프로젝트를 만들 때 자바스크립트가 아닌 타입스크립트를 쓰고 싶은데 맛보기로 무료 강의를 찾아보다가 노마드코터 니코쌤 무료 강의가 있어서 듣게 되었어요. 그야말로 맛보기로 들었고, 뒤에 어려운 부분은 흘려들었지만 타입스크립트가 처음이신 분들은 한번쯤 들어보셔도 좋을 것 같네요. 아직 어떤 type이 될지 모를 때 let a: unknown; if(typeof a === "number"){ let b = a + 1 } if(typeof a === "string"){ let b = a.toUpperCase(); } void 아무것도 return하지 않는 functionfunction hello(){ console.log('x') 마우스오버하면 function hello():..

프로젝트 만들 때 마다 헷갈리지 않도록 2023년 기준으로 찾았어요. 1. @media only screen and (...) { } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } 2. Bootstrap 기준 // X-Small devices (portrait phones, less than 576px)..

Angular 장점 Create dynamic frontend apps & UIs Full featured framework (router, http, etc) Integrated TypeScript (optional) RxJS - efficient, asynchronus programming Test-friendly Popular in enterprise business More robust Better for large scale applications (for enterprise level) * Angular is a complete client-side solution Angular features like form validation, dependencies and data binding giv..

최근 워드프레스랑 쇼피파이만 다뤘다보니 css 만지는 거 말고는 실력이 전혀 늘지 않고 있는 요즘입니당;;; 한국가서 두달정도 푹 쉬다오고, 사실 그 전에도 공부를 제대로 안해서 아무래도 감을 잃은 것 같아요... 반성하고 이제 이벤트들도 찾아보고 참석하고, 공부도 다시 시작하려고 합니다!! 이력서, 포트폴리오 내버려둔지가 너무 오래되서 새로 싹 손도 보려구요. 유료 Courses Frontend Masters https://frontendmasters.com Frontend Masters — Learn JavaScript, React, Vue & Angular from Masters of Front-End Development! Advance your skills with in-depth, modern..

APIs : Application Programming Interfaces is a set of commands, functions, protocols, and objects that programmers can use to create software or interact with an external system. ex) Facebook, Police data Endpoint 주소 Paths 주소/this part (category) Parameters ? this & this= this & this. # like settings or the configuration of an HTTP request Authentication 인증 JSON : JavaScript Object Notation cons..

빌드 속도가 빠르고 편리한 프론트엔드 툴 Vite를 처음으로 써봤어요. 원래는 뷰(Vue.js) 전용 빌트 툴이었다고 하는데 현재는 리액트로도 가능합니다. Vite + React 평소 리액트 프로젝트 올릴 때와 같이 .gitignore에 .env 넣어서 올려도 자꾸 깃헙에 그대로 노출되길래 검색해서 찾아봤어요. 혹시 같은 문제로 헤매시는 분들을 위해 정리해둡니다. * 참고로 vitejs.dev - Guide에서 Env variables and modes로 들어가시면 더 자세한 내용을 보실 수 있습니다. SECURITY NOTES .env.*.local files are local-only and can contain sensitive variables. You should add *.local to yo..

SQL : Structured Query Language 대표적으로 MySQL, PostgreSQL 등이 있음 MySQL - used with mutiple languages (PHP, Node, Python, C#...), cross platform Management Tools Terminal / Command Line / Shell Desktop Tools - MySQL Workbench Web Based Tools - PHOMyAdmin SQL Tutorial https://www.w3schools.com/sql/default.asp SQL Tutorial W3Schools offers free online tutorials, references and exercises in all the maj..

데브리입니다. 오늘은 제가 구독하고 있는 웹개발 관련 뉴스레터들을 정리해봤어요! 좀 더 정확하게 말하자면 구독만 하고 90%는 읽지 않고 있는 뉴스레터들... 😅 이거 올리느라 덕분에 저도 오랜만에 하나하나 들어가서 살펴봤네요. 한동안 공부를 너무 안해서 감이 떨어진 탓에 올해는 어떤 자료들로 공부를 시작해야하나 고민하고 있었는데, 이런 좋은 뉴스레터들을 구독하고 있으면서 다른 방법만 찾고 있었다니;;; 이제부터 매일매일은 아니더라도 일주일에 1-2개라도 꼭 읽고 공부하고 트렌드도 파악하고 하려구요. 보다가 괜찮은 글이 있으면 여기에도 공유할게요! 1. Collective the latest news and resources from the web design & web development commun..