전체 글 썸네일형 리스트형 <javascript>연산자 (대입,산술,논리,비교) 코드를 작성하다보면 가장 많이 쓰이는것이 연산자 라고도 볼 수 있겠다. 그만큼 많이 쓰이기에 정리 할 겸 한번 더 간단하게 연산자에 대해 정리하고 넘어가겠다. let a = 1; 위의 코드가 바로 '대입연산자'이다. 말 그대로 변수 a에 1이라는 값을 대입해준 것이다. 더 설명하기에는 이 한마디로 정의 할 수 있기 때문에 넘어가도록 하겠다. 다음은 산술연산자인데 '+','-','/','*' 등을 써서 값을 연산 할 때 써준다. 주의할 점 까지는 아니고 헷갈릴만한 부분을 정리해보면은 let a = 1; console.log(a++); console.log(a); console.log(++a); 이런 식의 값이 나오는 것을 알 수있는데 '연산되는 시점의 차이'로 반복문 같은 것에 쓸 때 본인이 필요한 것에 .. 더보기 <CSS> @keyframes 애니메이션 나는 처음에 동적으로 움직이는 애니메이션 효과는 스크립트로만 처리를 해줄 수 있는 줄 알았는데 CSS 코드 만으로 충분히 애니매이션 효과가 가능하다. mdn을 뒤져보면 @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } 이런 식으로 기본적인 정의가 되어있다. 간단히 정리를 하면 slidein 이라는 블록에 애니메이션 효과를 맥이는 것인데 @keyframes 뒤에 본인이 스타일먹일 블록명 from >> 시작할 때의 스타일 to >> 끝났을 떄의 스타일 정도로 기초를 잡고 나도 처음 써봐서 구글링해서 나온 코드를 기반으로 한번 적용된 화면을 보자 See the Pen MWKBRmJ.. 더보기 <Bootstrap> 테이블 꾸미기 첫 부트스트랩 글에서 다루었듯이 이제 내가 쓸 테이블을 한번 꾸며보겠다. 스타일이 입혀지는 과정을 한 단계씩 한번 밟아보겠다. 우선 기본적으로 우리가 쓸 데이터에 맞게 태그와 태그를 작성해주자 당연하겠지만 아무 스타일도 입혀 놓지 않았기 때문에 무미건조한 테이블이 완성이 되었다. 부트스트랩 사용법은 전에도 말했듯이 본인이 사용할 스타일이 적용되어 있는 클래스명을 작성해주면 된다. 우선 보기 편하게 데이터를 추가적으로 더 넣어주고 "table" 이라는 클래스명을 붙여주고 변화를 살펴보자 벌써 클래스명을 입힌것만으로 큰 틀의 디자인이 바뀌었다!!..ㄷㄷ 추가적으로 "table-bordered" "table-hover", "table-striped" 등의 클래스명을 붙여주도록 하곘다. 자세히 보면 홀수 번째 .. 더보기 <Bootstrap>부트스트랩 (Bootstrap) 지금 학원에서 프로젝트를 중인데 게시판 형식의 페이지를 만들어야 해서 테이블 태그를 이용해서 화면을 꾸며야 한다. 물론 꾸밀수는 있지만 개인적으로 가장 귀찮고 손이 많이 가는 블록이라 꺼려했었다... 그런데 주위에서 그럼 부트스트랩 써보면 되지 않냐고 해서 강의를 듣게 됬는데 간단하게 정리해보겠다. 부트스트랩이란?! 간단히 내 식대로 정리하자면 "이미 남이 정리해놓은 CSS 를 갖다가 쓰는 것이다." 제이쿼리와도 매우 비슷한데 그 대상이 HTML CSS 로 바뀐것이다. 이 한마디로 표현 할 수 있겠다 간단히 사용방벙과 부트스트랩을 이용해서 버튼하나를 나타내 보겠다. 검색창에 bootstrap cdn 이라고 입력한 뒤에 화면이 보이는 곳으로 간뒤 CDN 링크를 복사 해준뒤에l 편집기를 열고 링크를 걸어주면.. 더보기 <Reactjs>Input상태 관리 , 여러개 Input 상태 관리 저번에 숫자 값의 상태 관리를 useState 를 이용해서 해보았는데 마찬가지로 비슷하게 이번엔 문자값을 변화해주면서 간단한 예제로 정리해보자. 우선 InputSample이라는 컴포넌트를 하나 만들어준뒤에 실행시켜주면 이렇게 정적으로 내가 써준 내용이 보여진다. 이 상태에서 글을 입력하게 되면 이런식으로 상태값이 바뀌고 초기화 버튼을 누르게 되면 다시 빈칸으로 설정 되는 것을 볼 수 있다. 저번 숫자값을 동적으로 변화시키는 글과 달라진 점은 우선 event 를 인자로 받아서 target.value 를 써준 것인데 현재 태그에 입력되어 있는 텍스트로 값을 변화시켜야 되기 때문에 e.target.value 로 값을 세팅해준 것이다. 포인트는 'useState' 를 사용해준 것과 필요에 따라 event 속성을.. 더보기 <Reactjs>useState로 동적 문서 만들기 정적인 문서 말고 사용자와의 인터랙션을 통해 컴포넌트에서 동적으로 보여주기 위해 어떻게 하면 되는지 알아보장. 아주 고전적이고도 많이 본 숫자 증감을 예로 들어서 간단하게 원리만 파헤쳐 보겠다. 이런식으로 Counter 컴포넌트를 만들어준 뒤에 버튼을 눌러서 콘솔창을 확인해주면 +1 과 =1 이 잘 찍히는 것을 볼 수 있을 것이다. 아직은 저 0 이라는 값을 조절해주지 못하는데 'useState'를 이용해서 한번 조작해보겠당! 위 코드의 const [number, setNumber] = useState(0); number는 현재상태 , setNumber는 상태를 바꿔주는 함수, useState(0) 은 초기값으로 0을 넣어주겠다는 뜻이다. 바뀐 상태값을 보여줘야 하기 때문에 정적으로 0을 박아놨던 부분에.. 더보기 <Reactjs> Props props 컴포넌트에 사용 할수 있는 속성값으로 properties 의 줄임말로 특정 값을 전달 해주고 싶을 때 사용하는 것이라고 간단하게 정의 할 수 있겠다. 위의 코드와 같이 헬로라는 컴포넌트를 불러와서 써줄 때 헬로컴포넌트의 'name'값을 원하는 것으로 설정, 'color'를 빨강색으로 설정을 해주려면 헬로컴포넌트에서 처리를 해주면 된다. 한번 Hello컴포넌트에서 name값과 색깔을 이용해보자. 출력되는 부분에서 제대로 작동한 것을 확인 할 수 있는데 일일이 props.~~ 식으로 써주기 상당히 귀찮을 것이다. 조금 더 간편하게 사용할 수 있는 법도 같이 알아보장>< 해서 본인이 다른 이름으로 해보았는데 작동하지 않으니 *children*키워드로 사용하기 바란다! 컴포넌트는 이전에 정리했던 것처.. 더보기 <Reactjs> JSX에 대하여 우선 간단하게 JSX에 대하여 짚어보자면 'JSX는 리액트에서 컴포넌트를 정의할 때 사용되는 문법이다.' 위 사진에서 return 뒤에 있는 Hello는 딱 봤을 때 HTML코드 처럼 보인다. 하지만 이렇게 언급을 하는 이유가 있듯이 위의 저 코드는 스크립트 코드이다. 한번 Babel로 넘어가서 확인을 해보자. 추후에 Babel이 무엇인지도 간단하게 다루어 보겠다. 위의 사진을 보면 그저 Hello 와 span 태그로 문구하나를 써준것이 오른쪽의 스크립트코드로 변환 된 것을 볼 수 있을 것이다. 하지만 이렇게 스크립트 코드로 변환시켜 주려면 지켜야 하는 규칙들이 몇가지 있다. 첫번쨰!!!!! 태그는 무조건 꼭 닫혀 있어야 한다> 더보기 이전 1 ··· 19 20 21 22 23 24 다음
