전체 글 썸네일형 리스트형 <Reactjs> 첫번째 컴포넌트 만들기 프로젝트를 성공적으로 생성하였으면 "컴포넌트"를 한번 만들어볼 것인데 본인도 지금 강의와 학원에서의 수업을 들으면서 나만의 개념으로 간단히 정의했을 때 "UI조각" 이라고 큰 틀의 개념으로 잡고 사용하고 있다.. 물론 이 컴포넌트가 class 와 fuction 두가지 방식으로 정의 할수 있고 props와 state를 가지고 있으며 그 둘은 변하지 않는 값과 어떤 걸 임포트 해주고 등의 자세한 개념도 탑재되어 있지만 크게 생각할 떄는 조각!! 이라고 보면 될 것 같다. 그럼 한번 같이 첫 컴포넌트를 생성하고 적용시켜보자 우선 위와 같이 Hello.js 라는 이름의 파일을 하나 만들어 준다. 그 안에서 리액트를 불러와서 쓸것이기 떄문에 import React 코드를 작성한뒤에 컴포넌트는 위에서도 잠시 언급했.. 더보기 <Reactjs> 프로젝트 만들기 리액트란 우선 간단히 무엇인지 알고 넘어가자 리액트는 페이스북에서 제공해주는 프론트엔드 "라이브러리" 이다. 또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. 리액트를 왜 사용하는가? 사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있다. 그러나 html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다.리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들어 줄 수 있다. 어느정도 규모있는 프로젝트를 진행하다보면 위의 사진과 같이 복잡한 관계를 가지게 된다. 리액트는 업데이트가 필요한 UI를 메모리에 있는 가상의 돔에 뿌려준뒤 실제 브라우.. 더보기 <javascript,jquery>변수와 상수 (var,let,const) 자바스크립트에서 값을 선언할 떄는 크게 2가지 종류가 있다. 1. 변수 2. 상수 변수는 말그대로 값이 변할 수 있는 것을 말한다. let a = 1; console.log(a); a = 2; let b = 'devilcute'; console.log(a); 위의 코드처럼 let 이라는 키워드를 이용해서 변수를 설정해 줄 수 있고 첫번쨰 a값과 두번쨰 a의 값이 다른 것을 보면 값이 바뀐 것을 확인 할수 있다. 하지만 동일한 이름으로 선언해주지는 못하는데 let a = 1; let a = 3; 이런 식으로 해주게 되면 a라는 변수가 이미존재하기 때문에 에러가 난다. 변수가 변하는 값을 넣을 수 있는 것이면 상수는 "변하지 않는 값"이다. java를 조금 다뤄보신 분들은 상수라는 단어를 들으면 final .. 더보기 <javascript,jQuery> 무한 스크롤형 다니고 있는 학원에서 새로운 프로젝트를 하게 되었는데 갑자기 문득 페이스북처럼 무한스크롤형으로 페이지를 꾸며보고 싶었다. 그래서 오늘은 무한스크롤에 대해 간단히 정리해보겄당> 어머 스크롤이 바닥에 거의 닿거나 내가 원하는곳에 갔네~? 2-1 > 블록하나 추가하고싶당 ㅠㅠ (바로 함수호출! 나는 fetchlist 함수) 2-2 > 서버돌면서 호다닥 데이터를 담아온다 두번쨰 사진의 success : function(camps) 의 camps 3 > 받아온 데이터가지고 본인이 원하는대로 본인이 원하는 위치에다가 추가 !! 끝!!> 더보기 <javascript, jquery>hide(), show(), toggle() 사용법 제이쿼리는 자바스크립트 '라이브러리'로써 순수 자바스크립트 코드로 구현할수 있는걸 보다 간편하게 해주는 기능이 있다. 페이지에서 많이 쓰이는 목록 숨기기와 보이기를 다루어 보겠다. See the Pen jOWGayp by Sang Hoon Jeong (@DevilFront) on CodePen. 이런식으로 클래스이름으로 효과를 줄 수 있고 직접 그떄마다 스타일을 먹여서 효과를 줄 수도 있다. 이걸 간단하게 제이쿼리를 이용해서 해보겠다. See the Pen wvMPepP by Sang Hoon Jeong (@DevilFront) on CodePen. 괄호안의 400은 ms로 transition 효과를 0.4초간 주겠다는 것이고 이것으로 간단하게 목록숨기기와 나타내기를 구현할 수 있다. 더보기 <javascript> mouseevent (onclick) 간단하게 마우스 이벤트 중 가장 보편적이고 많이 쓰인다고도 할 수 있는 바로 클릭!! 이벤트에 대해 간단한 예제로 흐름만 다뤄 볼까 한다. 박스옆에 버튼을 누르면 박스의 색이 바뀌는 아주 신기한? ㅋㅋㅋ 작업을 해볼 것이다! 두가지 방법으로 한번 정리해보겠다.. 1. 클래스이름을 이용하여 색 바꾸기!> 더보기 <HTML/CSS>이쁜 메뉴바 만들기 (sticky) (fixed) 보통의 웹사이트를 보면 화면 상단에 메뉴바가 되었든 사이트의 로고가 되었든 우리가 스크롤을 내리면 밑으로 따라 내려오는 것을 볼 수가 있다. 처음 CSS를 배웠을 때 엄청 배우고 싶었고 그만큼 자주 쓰고 있으니 한 번 알아보도록 하자. See the Pen NWxrVOr by Sang Hoon Jeong (@DevilFront) on CodePen. 자 배운대로 스티키를 써 봤지만 그냥 sticky만 선언해주면 안되고 무조건 top, left,right 등 하나이상의 위치속성으로 나타내는 것이 필요하다. 단순히 스티키를 써주면 안되고 따라 내려오는 지점이 어딘지를 top 속성등을 이용해서 나타내주면 된다. 필수다 필수! See the Pen GRoqaPK by Sang Hoon Jeong (@DevilF.. 더보기 <CSS>배경색깔 입히기 (opacity),(rgba) 우리가 원하는 블록에 텍스트 뒤에 배경색깔을 입힐 떄 종종 아래와 같은 상황이 발생하는 분들이 있을것이다. 기존의 색깔에서 로 투명도를 줫다고 생각했는데 입히고 나니까 뭔가 텍스트 위에 겹쳐서 뿌옇게 보이게 되는 경우가 있을 것이다. See the Pen GRoqaJP by Sang Hoon Jeong (@DevilFront) on CodePen. 내가 생각한대로 순차적으로 했지만 뭔가 텍스트가 뿌옇게 덮여진 느낌이다. 그럴떈 아래처럼 에서 rgba 속성을 이용하면 된다. See the Pen YzwWbyj by Sang Hoon Jeong (@DevilFront) on CodePen. 어찌보면 당연하게 뿌연 것이다. opacity 속성이 블록 전체에 먹은것이라 뿌옇게 보이는 것이고 배경색깔에만 집중해서.. 더보기 이전 1 ··· 20 21 22 23 24 다음
