리액트를 처음 배울 때는 너무 급하게 배워 도통 이 녀석을 왜 사용해야 하는 지 몰랐다. 그런데, 자바스크립트부터 천천히 하나씩 접근해나가다 보니, 리액트를 프로젝트에서 사용하면 좋을 이유, 그리고 굳이 리액트를 사용하지 않아도 되는 경우에 대해 생각하게 되기도 했다.

작년에 항해99에서 리액트와 자바스크립트를 열심히 공부한 걸 기반으로 계속해서 프론트엔드 학습을 하고 있다. 파이썬으로 간단한 서버를 만들 수 있어서 파이썬을 복습했다. 웹크로링과 서버에 데이터를 저장하는 간단한 서버를 만들면서 드는 생각이 있었다. html에서도 리액

UX/UI를 만들면서 간단한 랜딩페이지를 디자인했다. 디자인까지는 괜찮았다. 자바스크립트로 제이쿼리와 바닐라를 섞어서 인터랙션을 구현하려고 했다. 확실한 것은 라이브러리를 커스텀 하기가 워낙 까다롭다는 것이다. 일단은 이전에 배워뒀던 탭 기능과 스크롤 fix 기능을 구

clientHeight 는 요소의 내부 높이입니다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외됩니다.offsetHeight 는 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함됩니다. 마진은 제외됩니다.scrollHeight 는 요소에 들

벨로그에 새로운 시리즈를 연재하려고 한다. UX디자이너 라는 방향성, 그리고 IT서비스를 만드는 조직에서 일하겠다는 새로운 다짐에 따라서 관련해서 공부하는 것들을 이제는 정리하려고 한다.확 바뀔 정도로는 아니더라도 직업학교를 다닐 때 처음 만든 프로젝트의 메인페이지를

제이쿼리의 가장 많이 사용하는 라이브러리 중 하나가 slick이다. slick의 기본 버튼이 있긴 한데, 이전과 다음버튼은 css를 수정하기가 어렵게 느껴졌다. 구글을 뒤지다가 찾은 방법이 새로운 클래스를 만들고 slick의 기능에다가 내가 지정한 클래스로 바인딩을 해

이전에는 queryselector 등의 셀렉터 문법은 자바스크립트 문법인 줄 알았는데, 자바스크립트 문법은 우리가 아는 for, if, swich 등의 문법이 자바스크립트 문법이고, document로 시작하는 것은 브라우저 사용법이라고 한다.

위 사진은 제이쿼리와 자바스크립트 두 개로 다크모드를 구현한 것이다.

querySelector : 아이디 클래스 상관없이 찾아줌, css선택자를 사용하면 됨 getElementsByClassName : 클래스를 찾아줌, css선택자는 제외하고 클래스명을 사용하면 됨. 배열처럼 반드시 인덱싱하여 사용해야 함.getElementById :

//리액트에 대해서 배웠으니, 이제는 제이쿼리 구문을 사용하는 법을 하나씩 배워 나간다.//제이쿼리 replace메소드attr는 속성값을 가져오거나 가져온 속성값을 변경해주는 메소드이다.제이쿼리에는 다양한 메소드들이 있는데 그 중에서 replace라는 것은 잘 모르고

// 어렵다 어려워 // axios를 통한 서버 통신// 역시 팀리딩은 어려운듯 axios와 여러 서버통신을 해줄 수 있는 라이브러리가 있는데, 내가 사용한 것은 그 중 리덕스 툴킷이 제공하는 thunk를 사용하여 서버와 통신을 했다. axios 뒤에 온점과 함께 ge

// 리액트는 간단한 것도 복잡하게 만드는 재주가 있는 듯?// 오늘도 차곡차곡 간단한 것도 TIL로... 이거 나중에 찾아서 볼 수 있을까?// 탭과 애니메이션 같은 동적 ui를 리액트에서도 시도해볼 수 있을 듯 하다서버로부터 GET을 해오기 위해서는 위의 사진에 나

// 라우터에 대해서 많이 알게됨.//useEffcet에 대해서도 많이 알게 됨//스타일드 컴포넌트보다는 역시 css 파일을 만들어서 쓰는 게 좋을 듯 함. route 안에 route를 넣어서 정보만 바꿔 주게 만드는 것 이럴 경우에는 아래와 같이 outlet을 설정

// 알 지 못하는 오류를 가이드 해줄 수 있구나!// 유저보다는 개발자들 간의 유지보수를 편리하게 해주는 도구 같음// 콘솔에서 오류를 더 잘 구분할 수 있을 듯 예외 객체는 브라우저마다 조금씩 다르지만 모든 브라우저가 공통적으로 가지고 있는 속성은 'name', '

// 휴먼 에러라는 게 이런 것이구나!// 리덕스에서 구독하는 방법을 알다위에 있는 사진에서 줄이 쳐진 부분이 바로 내가 리덕스에서 가져온 state의 이름을 잘못 입력했다. 리덕스 사용이 처음이다보니, 리덕스에서 어떻게 값을 불러오는 지가 헷갈렸는데, 이 에러를 통해

// 에러를 만났습니다. // 깃허브로 리액트 배포하는 법을 배웠습니다분명 같은 것을 따라 쳤는데, 틀린 구문이 없었는데, 자꾸만 위와 같은 에러가 나타났다. 그래서 확인해본 결과, 파싱 과정에서의 호환문제라고 했다.JSX파일로 바꿨다가 JS 파일로 바꿨었는데, 그 과

// ES6 너는 누구냐!~ // ES6에서 나온 문법들 복사붙여넣기 신공!함수표현식을 화살표 함수를 사용하여 만든 예시즉시 호출 함수구조분해 할당\-두 개의 값을 서로 바꾸는 방법세 개의 값을 서로 바꾸는 방법맵과 필터함수를 같이 사용한 방법\-reduce 함수의 인

//DOM이란 무엇인가????/DOM과 HTML은 다르다구???DOM이란?: HTML과 밀접한 연관이 있지만, HTML,XML 등의 문서를 브라우저가 해석할 수 있도록 변환한 데이터구조. 즉 브라우저가 HTML이란 문서를 읽기 위한 데이터 구조(웹API 라고 부르는데,

1. 오늘 공부 핵심 키워드 // 구조분해 할당을 이해함. 구조분해 할당은 객체 다중할당과 비슷한 거였음 // useState 너는 누구냐아아~!! // html을 다르게 적다보니 너무 익숙하지가 않타아아아.... // 과제도 해야 하는데.... 2.

// 리액튼 나도 시작한다 //이렇게 공부해도 되는 걸까?// 초기 설정하는 거 조금 까다롭네....// 컴포넌트는 쉬운데... props는 쉬우면서도 헷갈리네...npm과 yarn 모두 소프트웨어 패키지를 설치하는 프로그램이지만, 패키지가 완전히 설치 될 때까지 기다