분류 전체보기 (21) 썸네일형 리스트형 [새싹 프론트엔드] 22.12.18 TypeScript 에 대해서도 배웠는데 그걸 적기엔 이 공간의 여백이 너무 좁아서 여기에 적지 않겠다 Git 에 대해 알아보자 ! Git 은 어둠의 개발자들도 빛의 개발자들과 함께 일을 할 수 있게 해주는 엄청나게 좋은 시스템이다 사실 나는 아직 제대로 써본 적이 없어서 잘은 모르지만 느낌이 그렇다 아무튼 개발자들은 깃을 이용해서 소스 코드를 효율적으로 관리 할 수 있다고 한다 나같은 아싸 찐따 개발 지원자도 피해 갈 수 없는 필수코스 ' 협업 ' 듣기만해도 가슴이 철렁이고 숨쉬기가 힘들지만 밥 먹고 살기 위해선 어쩔 수 없는 운명이다 깃허브에서 어떤 녀석이 장난질을 하는지 지능이 낮은지 한번에 알 수 있어서 인간관계를 수월하게 정리 할 수도 있다 Git Program ( 깃 프로그램 ) ● 깃허브 데.. [새싹 프론트엔드] 22.12.05 나는 코딩 머리는 확실히 없다. 하지만 코딩 머리가 없다고 비관할 필요는 없다. 코딩 머리가 없다고 한다면 그것을 습득하면 되니까 낮은 지능을 높여보자 import React, { useState } from 'react'; const Prac1 = () => { const [names, setNames] = useState(['초콜렛', '사탕']); const [input, setInput] = useState(''); function InputChange(e) { setInput(e.target.value); } function uploadInput() { setNames(function (prevState) { return [...prevState, input]; }); } return ( 추가 .. [새싹 프론트엔트] 22.12.04 리액트를 잘 쓰려면 자바스크립트를 잘 이해해야 하는데 자바스크립트를 아직 잘못하니까 리액트도 덤으로 못하게 되었다. 노력하면 언젠간 잘 할 수 있게 될 거라고 믿는다. 오늘은 자바스크립트의 문법 중 하나인 map 과 filter 에 대해 알아보자 ! 예를 들어서 'numArr' 이란 이름의 배열이 있다 . 그리고 'num_1' 을 map 함수를 이용하여 새롭게 만들어 볼거다. 어쩌고.map( ( dk ) => { return dk } ) 이렇게 화살표 함수를 이용해여 사용하면 된다. 저기 map 안에 있는 ( num )에 있는 num 은 뭐로 하든 상관없다. 사과든 바나나든 자기가 하기싶은거로 이름을 정해주면 된다. 저 num 은 이제 numArr 에 있던 배열값들을 한바퀴 쓱 돈다. 10 에서 시작해서.. [새싹 프론트엔드] 22.11.26 새싹에서 개인프로젝트 발표를 끝난 뒤, 수준높은 연극도 보여주고 피자와 치킨 그리고 정체불명 떡볶이도 사줬다. 새싹은 정말로 수강생들에게 많이 신경써주고 잘대해준다. 필요한게 있으면 지원해주고 간식들도 자주 사준다. 하지만 대가 없는 친절은 없다. 친절한 새싹과 서로 웃으면서 끝나고싶다. React 에 대해 알아보자 ! JSX 문법을 사용한다고 되어 있는데 이건 JavaScript 에 XML 을 추가한 문법이라고 한다. 아직 JS 마저도 소화를 못시켜서 소화기관에 무리가 가고있는데 대참사가 따로 없다. JSX 의 장점을 찾아봤는데 다음과 같다 - 개발자 경험 개선 : 표현력이 뛰어나 코드를 읽기 쉽다. - 팀의 생산성 향상 : 전문 개발자 외에도 개발 지식이 있는 팀원이 있다면 코드를 수정 할 수도 있따.. [새싹 프론트엔드] 22.11.18 가끔 마주한 현실이 마치 산처럼 높고 험란해보이지만 넘어야 할 산은 어디에나 있는 것 ! 그 산을 점프로 넘어버리는 '버섯대모험' 을 소개한다 ! ( 원래는 프로젝트로 간단한 게임을 만들어보고 싶어서 도전한거지만 간단한 게임이라도 이렇게 어렵고 이해안가는 코드로 이뤄져있다는 걸 알아서 결국 포기했다 포기도 용기와 결단이 있어야 가능한거니까 긍정적인 포기이다 ) 일단 말하자면 나도 구글에서 영상을 보면서 만든거다 ' 코딩애플 크롬공룡 ' 이라고 치면 이런 간단한 망겜을 만드는데 필요한 정보를 잘 설명해준다 canvas 라는걸 이용해서 그림을 그리는 것 같다 여기서 웃긴게 나는 배경음악을 줄라고 저렇게 했는데 새로고침을 막 하다보면 어쩔 땐 나오고 어쩔 땐 안나오고 아주 그냥 지 맘대로다 대충 영상에서 알려.. [새싹 프론트엔드] 22.11.11 빼빼로데이다. 급식때는 그냥 빼빼로 먹는 날로 인식해서 기분이 좋았는데 나이를 잔뜩 먹고보니 이 날은 곧 1년이 끝나간다는 뜻이다 이렇게 이번 년도 끝나가는데, 과연 내 1년은 보람찼을까? 아무튼 JavaScript 에서 중요한 이벤트에 대해 알아보자 ! 이 세상에 깜짝 이벤트를 싫어하는 사람이 있을까? 잘 알아두면 남들에게 이쁨 받는 그런 사람이 될 수 있을 것이다. window 는 html 만물의 아버지이다. onload 는 웹 페이지 로딩 완료시 호출되는 이벤트 리스너라고 한다. 라디오 버튼은 다중선택이 되지않는다. form 태그안에 input 타입을 radio 로 주면 된다. 밑에 getElementsByName()으로 위에 name 으로 주었던 city 들을 한번에 잡아냈다. 늘 말하지만 난 이.. [새싹 프론트엔드] 22.11.09 나작생 (나만의 작은 선생님) 성현님께서 무지한 나를 이해시켜주신 내용들 Class 에 대해서 배웠는데 내 기준 많이 어려웠다. 그럼 배운 것 중에 쉬운건 뭐였냐고 물어보면 대답은 못하는데 아무튼 특히 더 어려웠다 이 말임. 보면 알겠지만 일반 함수와 생성자 함수의 차이는 단 한 가지라고 한다 ( ) 이거 안에 단어를 넣는 것도 아니고 this. 를 사용하는 것도 아닌 function 다음에 대문자를 쓰는거라고 한다. 근데 이게 무조건 지켜지면 상관이 없는데 누군 소문자로 하고 누군 대문자로 하고 딱 정해진게 없으니까 확립된 개념이 있으면 좋겠다 싶어서 만들어진게 Class 라고 한다. 이게 클래스인데 우선 class 뒤에 대문자로 작성해준다. (약속) 그리고 constructor 는 '생산자'라는 뜻인.. [새싹 프론트엔드] 22.11.08 함수에 대해서 알아보자 함수는 여러가지 일을 해야될 떄 하나의 식을 깔끔하게 정리해서 반복 작업을 간단하게 할 수 있다. 자바스크립트에서 제공하는 전역 함수라고 한다. parseInt 와 isNaN 은 사용한 적이 있다. 간단한 구구단 출력 함수이다. 이걸 보면서 간단한 함수 작성의 원리를 이해하면 좋겠다ㅎㅎ prompt 와는 다른 cofirm (메세지) 함수이다. 확인과 취소로 true 와 false를 구분한다. alert 함수이다 이건 그냥 경고문처럼 사용하면 좋을 것 같다. 숫자를 입력해달라고 했는데 문자를 입력하거나 문자를 입력해달라고 했는데 숫자를 입력하는 장난꾸러기 방지용 잘하는 사람들은 이걸로 많이 하던데 나는 아직도 이거 개념이 좀 헷갈린다. 어쩔 수 없다 한번에 이해했으면 머리가 좋은 편.. [새싹 프론트엔드] 22.11.07 오늘 배운건 JavaScript 의 '객체' 다. 자바스크립트 객체 구성은 여러 개의 프로퍼티와 메소드로 구성되어있다. 보면 person 이라는 객체 안에 firstName 과 lastName 은 프로퍼티라고 부르고 sayHello 는 메소드라고 부른다 대충 이런 느낌인듯하다 배열과 객체의 차이점 이 있다. 배열은 원소에 접근 할 때, 숫자를 사용하지만 객체는 원소에 접근 할 때, 문자열을 사용한다 그 문자열을 키(Key) 또는 프로퍼티(property)라고 부른다 배열은 여러 개체를 표현할 때 사용하고 (여러 동물의 이름이 나열된 배열) 객체는 다양한 특성이나 속성이 있는 하나의 개체를 표현할 때 사용한다 (한 동물과 관련된 여러 정보) 이런 식으로 객체를 줄 수 있다. 대괄호나 따옴표를 사용해서 객체.. [새싹 프론트엔드] 22.11.04 JavaScript 의 문제 풀이를 더 해보자 우선 적혀져 있는 것처럼 '반복' 이라는 것이 키 포인트다. 조건은 if 반복은 for 즉 for 를 이용해서 풀 수 있는 문제다. 반복문인 for 를 먼저 열어준 다음 출력할 숫자의 변수를 i 로 지정한다 즉 let i = 1; i 라는 변수는 지금 1이야~ i 이전 1 2 3 다음
