여느때와 다름없이 똑같이 지내고 있었는데 어느새 4학년 1학기가 종강을 맞이해버렸습니다. 물론 아직 6월 중순이지만 상반기에 대해 회고를 하면서 돌아보도록 하는 시간을 가져볼까 합니다.4학년 졸업반이므로 경험을 쌓자는 의미에서 여러 회사들의 코딩 테스트를 치뤄봤습니다.
오늘은 자바스크립트를 처음 시작할 때 부터 우리와 함께한 Console에 대해서 다뤄볼까 합니다. 브라우저들은 클라이언트측의 개발을 보조하기 위해 개발자 도구를 지원하고 있는데, 이 개발자 도구를 조작할 수 있도록 하는 기능들을 제공하는 객체가 바로 Console 객체
이번 포스트에서는 SCSS(SASS)의 또 다른 강력한 문법인 @Mixin과 @include(보통 둘이 합쳐 Mixins이라고 부르는 사람들도 있습니다.)에 대해서 알아보도록 하겠습니다.Mixins은 스타일시트에서 재사용이 가능한 스타일을 정의할 수 있도록 하는 문법이
SCSS는 연산을 위한 연산자들을 지원하고 있습니다. SCSS 타입이 지원하는 값이라면 연산자를 통한 연산으로 다양한 값을 표현할 수 있습니다. 연산자의 종류와 사용가능한 타입들은 아래표와 같습니다.SCSS를 다루실 정도라면 연산자의 의미정도는 아실거라고 생각되어 연산
SCSS(SASS)에서도 @import 구문을 사용할 수 있습니다. SCSS에서 파일을 import할 경우 기본적으로 SCSS(SASS) 파일로 가져오게 됩니다.파일을 import 하게 되면 해당 파일의 내용이 현재 파일에 추가되는 효과를 가져옵니다.컴파일 결과만약,
Nesting은 '중첩'이라는 뜻을 가진 단어입니다. SCSS(SASS)는 중첩이라는 기능을 지원해서 기존 CSS에서 셀렉터를 활용하는데 발생했던 여러 불편함들을 없애주고 있습니다.예를들어 CSS에서 어떤 자식요소를 선택하기 위해서는 다음과 같이 사용했어야 했습니다.C
문제가 된 코드에러 로그마찬가지로 리액트를 다루는 기술 개정판을 학습하던 중 오류를 만나게 되었습니다. 로그인/회원가입 과정에서 로그인/회원가입 버튼을 누르면 홈으로 이동하도록 하는 상황이었는데, 그 과정에서 아래와 같은 오류를 내뱉습니다.withRouter를 reac
이번 포스트부터 SCSS의 문법에 대해서 다루도록 하겠습니다. 진행을 하다가 SASS와 다른 부분이 존재하는 문법에 대해서는 차이점도 함께 소개하려고 합니다.먼저 SCSS에서 주석을 다는 방법은 CSS에서 주석을 다는 방식과 동일하게 /\* \*/를 이용합니다.SASS
프로그래밍 언어로 코드를 작성하고 실행시키는 방식 중 가장 유명하고 대표적인 두 가지 방식에 대해서 소개해볼까 합니다.먼저, 인터프리터 방식을 소개해드리겠습니다.인터프리터 방식은 프로그램을 실행할 때 인터프리터를 이용하여 코드를 한 줄 씩 읽어나가며 실행하는 방식입니다
비구조적 프로그래밍은 하나의 함수나, 코드 몸체에 연속된 코드를 작성하는 프로그래밍 패러다임입니다. 이 방식은 구조(함수, 서브루틴 등)를 따로 두지 않고, 하나의 큰 코드 안에 전체 프로그램 코드가 들어있는 형태로 작성하는 프로그래밍 방식입니다. 이 방식은 주로 초기
지난 포스트에서 SCSS를 소개하면서 SCSS를 웹에서 사용하기 위해서 컴파일 과정을 거쳐야한다고 언급했습니다. 그래서 이번 포스트에서는 SCSS 사용법에 앞서 SCSS를 컴파일하는 여러 방식들에 대해서 알아보도록 하겠습니다.SassMeister는 온라인으로 .scss
CSS를 어느정도 배우다보면 CSS 전처리기(Preprocessor)라는 말을 많이 들어보셨을 것 입니다. 이름 그대로 전처리기는 CSS가 동작하기 전에 먼저 동작을 하는 코드입니다. 그러면 무엇을 위해서 전처리기를 사용하는 것 일까요?CSS를 사용하면서 작성이 어렵다
코딩하면서 가장 많이 만나는 단어 중 하나는 에러(Error)라고 생각합니다. 저도 공부하면서 꽤 많은 양의 코드를 작성해 봤지만 실패한 코드가 훨씬 많을정도로 수많은 에러를 발생시켜봤습니다.단순히 코드를 따라해보고 이해하는 것도 공부가 되지만, 에러가 발생하면 이 에
Velopert님의 리액트를 다루는 기술 개정판 21장 부터 시작하는 블로그를 클론코딩을 공부하다가 에러에 부딛혔습니다. 분명 책에 있는 그대로 작성했고, 오타도 없음을 확인했는데 왜 이럴까 싶었습니다.문제가 된 코드에러 로그에러로그가 꽤 길지만 결국 중요한 문장은 M
충돌(conflict)는 병합 과정에서 일어나는 현상입니다. 깃으로 작업을 진행하면서 작업 파일의 같은 위치를 동시에 수정했을 경우 발생합니다. 혼자서 개발하는 경우 잘 일어나지 않지만, 여러명이서 개발하는 경우 제법 자주 볼 수 있습니다.충돌이 발생하는 경우 깃에서는
fetch는 git pull 명령처럼 원격 저장소로 부터 파일을 내려받는 명령입니다. pull은 내려받을 때 자동으로 병합을 해주었으나, fetch명령은 자동으로 병합이 되지 않습니다.fetch를 수행하게 되면 원격 저장소의 최신 커밋을 임시 브랜치로 내려받습니다. 그
3-way 병합 지난 포스트에서 다룬 Fast-Forward 병합은 순차적으로 분기되어 작업된 브랜치를 병합하는데 사용한 병합 방식이었습니다. 작업이 순차적으로 진행되기 때문에 병합과정에서 따로 신경써야할 부분은 없었습니다. 오늘 다루는 3-way 병합은 좀 더 복잡
예전 포스트에서 두 브랜치를 병합하는 방법을 간단하게만 다뤘습니다. 오늘 다룰 병합 방식은 Fast-Forward 병합 방식인데, 이 병합 방식이 무엇이고, 어떻게 이루어지는지 알아보도록하겠습니다.Fast-Forward는 가장 간단한 병합 방식입니다. 이 방식은 혼자
styled-components는 인기있는 컴포넌트 스타일링 라이브러리입니다. 기존에 CSS를 활용하여 스타일링을 할 때는 따로 CSS 만들어서 import 시켜야했었는데요. styled-components를 이용하면 자바스크립트 파일 내부에 스타일을 정의할 수 있습니