300x250 개발 공부/웹개발54 [react] CSS-in-JS 관련 라이브러리 Styled Component Styled Component 정의 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 만들어졌다. styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다. styled Component 1. Automatic critical CSS : 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입된다. 2. No class name bugs : 스스로 유니크한 className 을 생성한다. 이는 className 의 중복이나 오타로 인한 버그를 줄여준다. 3.Easier deletion of CSS : 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴.. 2021. 6. 1. [CSS] 구조적인 CSS 작성에 대한 발전 과정 Component-Driven Development(CDD) 부품 단위로 UI컴포넌트를 만들어 나가는 개발 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야할 팀원 수도 많아짐에 따라 CSS를 작성하는데 일관된 패턴이 필요해졌다. 또 다양한 디바이스들과 디스플레이를 커버해야 하기 때문에 css는 더욱 복잡해졌다. 이러한 문제점을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 나타났다. css를 작성할 때는 많은 반복적인 작업을 요구한다. color값을 찾는 일, tag를 닫는 일 등 뿐만 아니라 클래스의 상속과 같은 사항으로 css의 문서는 점점 양이 많아지고 유지관리에 많은 영향을 끼친다. CSS 전처리기 자체만으로는 웹서버가 인지하지 못하기 때문에 각 css전처리기에 맞.. 2021. 6. 1. [JavaScript] 객체 메소드assign()와 배열메소드 findIndex() 개념정리 객체 메소드 findIndex()와 assign() 2가지 알아보기 findIndex() 1 2 3 4 5 6 7 const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber)); // 3 이 나온다. Colored by Color Scripter cs findIndex라는 매소드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다. 1 2 3 4 5 6 7 const array = ["google", "naver", "kakao", "facebook", "coupang.. 2021. 6. 1. [NodeJS] express 기본 개념_nodejs, express, framework 한줄설명 NODE JS 란? back-end (서버기술)로 프론트가 아닌 백엔드에서도 javascript기술을 쓸수 있게 고안된 언어입니다. express 란? Node.js 애플리케이션을 위한 빠르고 개방적인 간결한 웹 프레임워크입니다. 일반적으로 “Express.js”보다 “Express”가 선호되지만, “Express.js”도 허용됩니다. 관련 기능으론 라우팅, 정적인 파일 호스팅 관리, 템플릿 엔진, 보안, 세션, 그리고 여러 API를 제공합니다. 프레임워크 란? 프레임워크란 개발을 하는데 있어 표준을 제공해주고 다른 여러 서비스들을 통합, 편리하게 제공해주는 환경을 의미합니다. 설치 방법 npm install express -g 를 치시면 됩니다. 더확인하고 싶으시다면 https://expressjs.c.. 2021. 5. 31. [NodeJS] nodemon 설치, 실행 방법(자동으로 서버를 restart해주는 모듈) 개발시에 코드를 수정하고 서버를 껐다가 다시 켜야하는게 매우 번거롭기 때문에 코드 수정이 있으면 서버를 자동으로 restart해주는 모듈을 nodemon이라 합니다. 설치 방법은 다음과 같습니다. npm install nodemon -g 설치하고 난 뒤, 터미널에 다음과 같이 치면 연결이 가능하다 다른 방법도 있다. package.json안에 script부분을 다음과 같이 작성해주면 서버를 실행시킬 때 명령어를 다음과 같이 할 수 있다. start 확인 그리고 터미널에는 npm start 만 써주면 된다. 2021. 5. 31. [NodeJS]포트가 사용중 해결방법_address already in use 문제 작업을 하다보면 포트가 현재 다른 프로세스에서 사용 중이기 때문에 해당 포트를 사용하는 서비스를 시작할 수 없다는 에러 메시지를 보입니다. 저 같은 경우는 8080번의 포트로 연습도중 이런 문제를 발생하였습니다. 해결 방법은 다음과 같습니다. 1) lsof -i TCP:[포트번호] ex) lsof -i TCP:8080 2) kill -9 [PID] ex) kill -9 49065 밑에 있는 이미지에서 한번 비교해보시면 이해가 빠르실 겁니다. 2021. 5. 31. React 노마드코더 기초강의 무비앱 만들기 완료 리액트가 너무 부족한 거 같아 찾아보다가 무료 강의가 있어해 봤는데 좋은 강의 같습니다! ReactJS로 영화 웹 서비스 만들기 https://github.com/dydwns2441/movie-app-2021 dydwns2441/movie-app-2021 react JS Fundamentals COurse (2021 update!) pratice nomadcoder - dydwns2441/movie-app-2021 github.com 2021. 5. 23. 우분투_Visual Studio Code 업그레이드 방법_ubuntu 우분투 업그레이드 하는 방법 순서 1. deb파일 다운받기 밑에 사이트에 들어가서 deb파일 다운 받기 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. deb 파일 다운받은 폴더 터미널 열기.. 2021. 5. 23. 자바스크립트_동기/비동기 개념정리(callback_promise_async/await) 오늘은 비동기에 대해서 알아보겠습니다. 동기(Synchronous): 요청에 대한 결과가 동시에 일어난다. 비동기(Asynchronous): 요청에 대한 결과가 동시에 일어나지 않는다. 동기는 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어집니다. 비동기는 요청과 결과가 동시에 일어나지 않을거란 약속입니다. 동기방식은 매우 간단하고 직관적이지만, 결과가 주어질 때까지 아무것도 못하고 기다려야 하기에 효율적이지 않다는 단점이 있습니다. 비동기 방식은 동기보다 복잡할 순 있지만, 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 효율적으로 사용할 수 있습니다. 비동기와 동기의 일상생활의 예시를 들면, 커피를 마시고 카페에 갔는데 줄이 있습니다. 우리는 1. .. 2021. 5. 21. 이전 1 2 3 4 5 6 다음 반응형
