전체 글28

• 

  스파르타-내일배움캠프 vs 코드스테이츠 어디를 갈것인가.. 코드스테이를 기다리던 와중, 내일배움캠프에 합격하다. 9월 초, 코드스테이츠 프론트엔드 국비과정을 신청하고 아직까지 결과를 기다리고 있다. 11일쯤 결과가 나온다고 한다..ㅠㅠ 너무 오래걸려 기다리던 와중에 항해99를 운영하는 스파르타에서도 국비 부트캠프 과정이 있는것을 알았다. 마침 모집이 시작되었고 1차 서류지원, 2차 인터뷰면접 의 과정을 거쳐 결국 합격하게 되었다. 결과를 빨리 알려줘서 너무 좋았다. 코드스테이츠는 합격여부를 더 기다려야되고..기간으로 보면 내일배움캠프가 나한텐 더 맞는데 어딜가야되지? 코드스테이츠는 합격여부를 알려면 보름을 더 기다려야 된다. 코드스테이츠 : 9 to 6 주5일 6개월 과정, 4월10일 수료 내일배움캠프 : 9 to 9 주5일 5개월 과정, 3월7일 수료 개강일은.. 일상 2022. 9. 26.

• 제어문 - 블록문,조건문 제어문이란? 조건에 따라 코드 블록을 실행 or 반복 실행 할 때 사용합니다. 위에서 아래 방향으로 순차적으로 진행하는 것이 일반적인 실행 방법입니다. 블록문 블록문 정의 - 0개 이상의 문을 중괄호로 묶은 것, 코드블록 또는 블록이라 부르기도 합니다. - 블록문을 하나의 "실행단위" 로 취급 - 단독으로 사용할 수 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는게 일반적입니다. - 블록문의 끝에는 세미콜론( ; ) 을 붙이지 않습니다. 조건문 if , else 문 기본적인 문법이라 간단히 설명하겠습니다. if (조건식) { // 조건식이 참이면 이 코드 블록이 실행된다. } else if (조건식){ //위 if 조건식이 거짓이면 이 코드 블록이 실행된다. } else { // 위 if, els.. Javascript Deep Dive/제어문 2022. 9. 26.

• 

  9/15 클론코딩 오늘의 배운 점 - a 링크를 걸 때, 글자 만큼만 클릭할 수 있다. 이 때 display: inline-block; 을 css에 넣으면, 지정된 width만큼 클릭할 수 있게 된다. - css의 letter-spacing 이란, 글자 간격을 조정할 수 있다. - input 의 border를 없애도, input 클릭 시 테두리가 나타난다. 이걸 없애려면 input:focus {outline: none;} 을 주면 된다. - 네브바에 마우스를 올릴 시 글자색깔을 변하게 하는 자바스크립트는 반복문으로 클래스를 붙혔다 떼었다 하였다. const navSpan = document.querySelectorAll('nav span'); for (i = 0; i < 5; i++) { navSpan[i].addEven.. 클론코딩/Lush 2022. 9. 16.

• [일상/푸념]너무 힘들었던 5일.. 9월10일 쭉 따로살고 연락도 잘 안하던 아버지가 돌아가셨다는 연락을 받았다. 나에게 있어 아버지는.. 미운 존재 그 자체였다. 유치원생 때부터 안좋은 기억들과.. 엄마와 동생과 나를 너무 힘들게 했었기에... 결국 이혼을 하시고 아버지랑 동생과 나 셋이 같이 살았지만, 얼마 되지 않아 도망갔다.. 그 당시 50만원에 육박하는 외상값을 남기고..... 그 외에도 정말 아빠같지도 않은, 한 가족의 가장이 이럴 수 있을까 싶을 정도의 일도 많았었다.. 이 후 엄마와 같이 살게 됐고, 이 후 정말 간간히 엄마랑은 연락을 하는 것 같았는데 좋은 내용은 아니였다. 엄마가 힘들때.. 우리 집이 힘들때.. 전혀 도움도 안줬고 쌩판 남 마냥 살았기에 나는 아버지를 미워했다. 그런 생각을 가진채로 청소년기를 맞이했고 지.. 일상 2022. 9. 14.

• 연산자 우선순위, 연산자 결합 순서 연산자 우선순위 우선순위 연산자 1 () 2 new(매개변수 존재), ., [ ](프로퍼티 접근), ( )(함수 호출), ? .(옵셔널 체이닝 연산자) 3 new(매개변수 미존재) 4 x++, x-- 5 !x, +x, -x, ++x, --x, typeof, delete 6 **(이항 연산자 중 우선순위가 가장 높다) 7 *, /, % 8 +, - 9 =, in, instanceof 10 ==, !=, ===, !== 11 ??(null 병합 연산자) 12 && 13 ||(OR) 14 ? ... : ... (삼항연산자) 15 할당 연산자(=, +=, -=, ...) 16 , (쉼표연산자) 연산자 결합 순서 결합 순서 ( ---------->>>> ) ( Javascript Deep Dive/연산자 2022. 9. 9.

• 그룹 연산자,typeof 연산자, 지수 연산자, 그 외 연산자 그룹 연산자 소괄호 () 로 피연산자를 감싸는 연산자 이다. 자신의 피연산자인 표현식을 가장 먼저 평가한다. 따라서 연산의 우선순위를 조절할 수 있다. 10 * 2 + 3; // 23 // 그룹 연산자를 사용하여 우선순위를 조절 10 * (2 + 3); // 50 typeof 연산자 피연산자의 데이터 타입을 문자열로 반환하는 연산자이다. string , number , boolean , undefined , symbol , object , function 중 하나를 반환한다. null을 반환하는 경우는 없고, 함수는 function을 반환한다. null 타입인지 확인할 때는 일치 연산자(===)를 사용하여 비교하자. typeof 연산자가 반환하는 문자열은 위 7개 타입과 정확히 일치하지는 않는다. 선언하.. Javascript Deep Dive/연산자 2022. 9. 9.

• 삼항 조건 연산자, 논리 연산자, 쉼표 연산자 삼항 조건 연산자 var result = score >= 60 ? 'pass' : 'fail'; // 조건문 참일때 거짓일때 // 참일때 'pass'를 반환, 거짓일때 'fail'을 반환 삼항 조건 연산자의 표현식은 값으로 평가할 수 있는 표현식인 문이다. 같은 조건문인 if, else문은 표현식이 아닌 문이라 값처럼 사용할 수 없다. 조건에 따라 어떤 값을 결정해야 한다면 if, else문 보다 삼항 조건 연산자 표현식을 사용하는게 유리하다. 하지만 조건에 따라 수행해야 할 문이 하나가 아니라 여러개라면 if, else문의 가독성이 더 좋다. 논리 연산자 논리 연산자 의미 부수 효과 || 논리합(OR) X && 논리곱(AND) X ! 부정(NOT) X 논리 부정(!) 연산자는 언제나 불리언 값을 반환한.. Javascript Deep Dive/연산자 2022. 9. 9.

• 비교 연산자 동등/일치 비교 연산자 좌항과 우항의 피연산자가 "같은 값"으로 평가되는지 비교해 불리언 값을 반환한다. 차이점은 엄격성의 정도가 다르다. 비교 연산자 의미 사례 설명 부수 효과 == 동등 비교 x == y x와 y의 값이 같음 X === 일치 비교 x === y x와 y의 값과 타입이 같음 X != 부동등 비교 x != y x와 y의 값이 다름 X !== 불일치 비교 x !== y x와 y의 값과 타입이 다름 X 동등 비교 연산자 = 느슨한 비교 비교 할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교해서 타입이 달라도 같은 값이면 true를 반환한다. 편리하지만 결과를 예측하기 어렵고 실수하기 쉽다. 아래 예제는 안티패턴으로 참고만 하자.(가독성, 성능, 유지보수 등에 부정적인.. Javascript Deep Dive/연산자 2022. 9. 9.

• 할당 연산자 할당 연산자란? 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 좌항의 변수에 값을 할당하므로, 변수 값이 변하는 부수 효과가 있다. 할당문은 표현식인 문이다.(할당된 값으로 평가됨) 할당 연산자 예 동일 표현 부수 효과 = x = 5 x = 5 O += x += 5 x = x + 5 O -= x -= 5 x = x - 5 O *= x *= 5 x = x * 5 O /= x /= 5 x = x / 5 O %= x %= 5 x = x % 5 O 문자열 연결 연산자 var str = 'My name is '; str += 'Lee'; // str = str + 'Lee'; console.log(str); // 'My name is Lee' 연쇄 할당 var a, b, c; // 연쇄 할당은.. Javascript Deep Dive/연산자 2022. 9. 9.

• 데이터 정렬( .sort() ) / 문자열 내림차순,객체정렬 업데이트 해야됨 숫자 정렬 let a = [1,11,5,7,88,8,77,55] a.sort() // 결과 :[1,11,5,55,7,77,8,88] 숫자는 아스키코드를 기준으로 정렬하기 때문에 이처럼 혼선이 오기 쉽다. 이럴 때는 아래처럼 정렬해준다. //오름차순 a.sort(function(a, b){ return a-b; }); // 결과 : [1, 5, 7, 8, 11, 55, 77, 88] //내림차순 a.sort(function(a, b){ return b-a; }); // 결과 : [88, 77, 55, 11, 8, 7, 5, 1] 문자열 정렬 문자 오름차순은 상당히 간단하다. 위 대로 아스키코드를 기준으로 정렬하기 때문이다. 문자열의 앞글자만 따와서 정렬한다. // 오름차순 let a = ["cake", ".. JS실전-팁 2022. 9. 9.

• 

  state 기본 사용법, state 변경하기 state 사용법 기본 사용법 state 값이 변동 될 시 자동으로 html에 반영되게 만들고 싶을 때 사용한다. 자료를 잠깐 보관 할 때 state를 사용한다.(자주 변경되는것들) 자주 안바뀌는건 state를 사용할 필요 없다. import { useState } from 'react'; function App() { let post = '강남 우동 맛집'; let [a, b] = useState('남자 코트 추천') return ( ); } 위 처럼, useState() 를 기재하면 상단에 import가 자동으로 생성된다. let [a, b] 는 useState(보관한 자료)에서 보관한 자료를 뽑아쓸 때 사용한다. a = state에 보관했던 자료 나옴.(변수랑 똑같이 사용하면 됨) b = state.. 리액트 2022. 9. 8.

• 

  JSX 문법 JSX 문법 1. class 넣을 땐 className 사용 2. 변수 넣을 땐 {변수명} 중괄호 사용 ( 데이터바인딩 (데이터를 꽂아넣는다) ) ㄴ className , id 등 모든 곳에서 {변수명} 을 적용할 수 있다. function App() { let post = '강남 우동 맛집'; return ( 블로그임 {post} ); } export default App; 위 코드를 적용하면 개발자도구 에서는 아래와 같이 나온다. 3. 스타일 넣을 때는 { 무엇을 : '어떻게' } 이렇게 오브젝트 형식으로 사용 function App() { let post = '강남 우동 맛집'; return ( 블로그임 {post} 원래라면 css에서 글자크기는 font-size : 16px 이렇게 지정을 할 것이.. 리액트 2022. 9. 8.