전체 글 썸네일형 리스트형 [TIL🍀] 2Day _ CSR SSR 24.02.28 오늘은 csr과 ssr에 대해 적어보고자 한다! NEXT배우면서 헷갈려서 찾아보기도하고 멘토님께 여쭤보기도한 주워모은 지식들 .. 🍀 CSR과 SSR 우선! 내가 이해하기로 csr와 ssr의 가장 큰 차이점은 HTML을 그리는 위치 이다. ☑️ CSR(Client-Side Rendering) - 클라이언트(브라우저)에서 HTML 생성 ! ☑️ SSR (Server-Side Rendering) - 서버에서 HTML 생성 ! - CSR은 클라이언트(브라우저)에서 JavaScript를 이용하여 HTML을 생성하고 렌더링하며 - SSR은 서버에서 완전한 HTML을 생성하여 클라이언트에게 전달한다. 🍀 CSR (Client-Side Rendering) CSR 작동방식 1. 클라이언트가 서버.. 더보기 [TIL🍀] 1Day _ Next.Js 24.02.27 🍀 Framework vs. Library ☑️ 통제권이 누구에게 있느냐! 의 차이(제어 역전) - 통제권이 나에게 있다! (내가 사용하고싶은 것만 취사선택해서 사용할 수 있다)-> 라이브러리 - 통제권이 나에게 없다! (정해진 구상을 내가 따라가야한다)-> 프레임워크 ☑️ 프레임워크 프레임워크는 `약속(컨벤션)` 이 많다. 이는 `[러닝커브](신기술을 학습하는 데에 소요되는 시간을 나타내는 곡선)`가 있다는 단점으로 이어지기도 하지만, 전체적인 소프트웨어 틀을 프레임워크 자체가 가지고 있기에 어떤 개발자가 개발하더라도 `최소한의 퀄리티`는 보장된다는 장점으로 이어지기도 한다. 🍀 Next.Js를 사용하는 이유 ☑️ React의 단점을 보완하기 위해서! - 리액트의 단점이 뭔데? [검색 .. 더보기 [JavaScript] 생일 카운트 다운 타이머 만들기 ☑️ JavaScript로 카운트 다운 타이머를 만들어 보았다. ☑️ 친구 생일이 얼마 남지 않아서, 직접 생일 디데이를 타이머를 만들주면 재밌을 것 같았다. ☑️ 구현 기능 - 달력에서 날짜 선택하고 설정버튼 누르면 생일 설정되도록 - 설정한 생일은 아래에서 보여주기 - 날짜 선택 하지않고 설정 누를 시, '생일을 선택해주세요' 알림 - 이미 지난 날짜를 설정했을 시 '이미 지난 생일입니다' 와 함께 빨간색으로 날짜 표시 - 초-> 분으로 넘어가기 10초전에 애니메이션 효과 - 화면 줄어들 때 반응형으로 크기 조정 타이머를 만들기 전, 넣어보고싶은 기능들을 전부 나열해보았다. 차례대로 하나씩 기능들을 설정해나갔는데, 결과물에는 전부 구현해내서 조금 성장했구나하고 뿌듯했던 프로젝트였다 ! ㅎㅎ^_^ HT.. 더보기 [모던 자바스크립트 Deep Dive] 13_스코프 스코프란? - 식별자가 유효한 범위 - 자바스크립트 엔진이 식별자를 검색할 때의 규칙(식별자의 값을 참조할 때) ☑️ 모든 식별자는 자신이 선언된 위치에 따라 다른 코드가 식별자 자신을 참조할 수 있는 유효범위 결정 -> 자신의 스코프 결정 if) 동일한 식별자가 여러개 존재한다면? => 자바스크립트 엔진은 스코프 체인을 통해 여러개의 변수 중 어떤 변수를 참조할 지 결정함 그런데, 애초에 동일한 식별자가 있을 수 있나? ☑️ 스코프가 다르면 이름이 같더라도 서로 다른 변수로 해석된다. (var을 let으로 변경해도 동일한 결과) var scope = "나는 전역변수야. 전역스코프를 지니지" function inner (){ var scope = "나는 지역변수야. 지역스코프를 지니지" console.l.. 더보기 [Study][모던 자바스크립트 Deep Dive] 05_표현식과 문 05- 표현식과 문 값: 식이 평가되어 해석된 결과. 평가: 식을 해석해서 참조하는 것. 변수: 하나의 값을 저장하기위해 확보한 메모리 var sum = 10+20에서 '10+20' 이 메모리공간에 저장되는게 아니라 '30'이 저장 값 => 10이랑 20은 이전에 저장되었어야함(평가되어 값 할당) 5-2) 리터럴(Literal) 값 : 자바스크립트가 식을 평가해서 만든 결과. 자바스크립트는 리터럴을 평가해서 값을 생성 => 리터럴은 값을 만들기 위해 미리 약속된 것! 문자열 불리언 null undefined 객체 배열 함수 5-3) 표현식 표현식; 값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 참조함. 리터럴도 값으로 평가됨 => 리터럴도 표현식 var score = 50+50 5.. 더보기 [모던 자바스크립트 Deep Dive] 06_데이터타입 데이터란? 값의 종류 총 7종류(+1) 원시타입[숫자,문자,불리언,undefined,null,심벌+Bight] - 불변하는 값 객체타입 - 변경할 수 있음. 6-1 숫자타입 다른 언어와 달리, 자바스크립트는 정수와 소수를 구분하지않음 - 모두 실수로 처리. 정수만 표현하기위한 데이터타입이 별도로 존재하지않음. 정수로 표현된다고해도 사실은 실수. 1 = 1.0 * 추가적으로 세 가지 특별한 값. infinity : 양의 무한대 -infinity:음의 무한대 nan: not-a-number : 산술 연산 불가. -> 오호! // 숫자 타입의 세 가지 특별한 값 console.log(10 / 0); // Infinity console.log(10 / -0); // -Infinity console.log(1 *.. 더보기 [JavaScript] 논리연산자 ( || / && ) 논리 합 | | (OR) 피연산자 중 하나라도 true면 true 반환. true가 하나도 없으면(= 피 연산자가 모두 false이면) false 반환 true || true // true false || true // true true || false // true false || false // false ☑️ 주어진 조건 중 하나라도 참 인지를 test하기 위해 if문과 함께 자주 쓰인다. let hour = 20; if (hour 18) { console.log( '지금은 상담가능 시간이 아닙니다.' ); } ☑️ 피연산자가 불린형이 아닌 경우에는 평가를 위해 불린형으로 변환한다. 1 || 0 // 1 null || 1 //1 null || null //(두번째)null .. 더보기 [모던 자바스크립트 Deep Dive] 04_변수 모던 자바스크립트 deep-dive 책을 학습한 후 이해한 것을 정리한 글입니다. 4.1 변수란 무엇인가? 왜 필요한가? key-words: 변수, 메모리, 변수 이름, 변수 값, 할당, 참조 ☑️ 자바스크립트는 데이터를 입력-처리-출력 하는 과정을 거침. 이때 필요한 데이터를 관리하기 위한 개념이 변수. ☑️ 컴퓨터는 연산(cpu)과 기억(메모리)을 수행하는 부품이 나누어져있음. ex) 10+20의 연산을 실행할 때, 10,20과 같은 데이터는 메모리에 저장 / 연산은 cpu에서 진행 / 연산 결과(30)는 메모리로 저장. 결과값인 30을 재사용할 수 가 없다. - 메모리에서 다시 꺼내면 되는거 아닌가? => 실수로 잘못 건드리면 치명적인 오류 발생. - 만약 접근했다고 하더라도 메모리 주소는 임의값... 더보기 이전 1 2 다음
