본문 바로가기

분류 전체보기

(39)
CSR(Client Side Rendering)과 SSR(Server Side Rendering) 공부 일지 CSR와 SSR을 알려면 먼저 SPA (Single Page Application) 와 MPA (Multiple Page Application)를 알아야 한다. ( 난 두개씩 영어라서 같은 건줄..) SPA와 MPA SPA (Single Page Application) 하나( 싱글 ! ) 의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다. MPA (Multiple Page Application) 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 전통적인 방식을 이용한다면, SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다. 각 ..
멋쟁이 사자처럼 프론트엔드 스쿨 3주차 회고 뭔가 이유는 잘 모르겠지만 힘들었던 주였다... 제대로 쉬지를 않아서 그런건가? 이유를 모르겠다 ㅠ 이해를 못한 부분들이 많아서 그랬을수도 있다 ㅠ 난 어려워도 자바스크립트는 괜찮던데 CSS는 너무 힘들다.. 좋았던 점 사실 그렇게 기억에 남을 만큼 좋았던 점이 없다.. 어떡해 ㄱ- ㅋㅋㅋㅋㅋㅋ 뭐 제대로 한것도 없는데 번아웃이 왔을리는 없겠지? 아무래도 휴식에 문제가 있는 듯 싶다! 주말 동안 콘서트 때문에 몸이 쉬질 못했다.. 아무래도 I 인간인 나에게 콘서트같은 재밌는 것도 휴식은 아니니깐 ㅎ (그래도 아이유 콘서트는 재밌었다 ㅎㅎ) 아쉬운 점 운동을 1도 안했다... 꾸준하게 있던 의욕이 신기하게 싹 사라졌다. 산책이라도 나가야겠다. 사실 3주차 전체가 아쉽다. 뭔가 잘 하다가 삐걱거리는 느낌이 ..
함수 표현식 vs 함수 선언문 난 함수를 선언문 먼저 배웠기 때문에 선언문이 편해서 그냥 다 선언문으로 코드를 작성하곤 했다. 오늘 모던 JS 튜토리얼로 공부하는데 그게 굉..장히 잘못된 방법이란걸 알게됐다...너무 충격 방법이 잘 못됐다고 말해도 되나? 여튼... 내가 몰랐던 차이들이 있었다. 좀 창피 ㅠ 둘의 차이는 여러 가지가 있다. 내가 오늘 배운건 3가지! 차이 1. 문법 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다. // 함수 선언문 function sum(a, b) { return a + b; } 함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다. // 함수..
멋쟁이 사자처럼 프론트엔드 스쿨 2주차 회고 멋쟁이 사자처럼 프론트엔드 스쿨 2주차 회고 금요일 부터 추석 연휴여서 4일 밖에 없어서 그런지 짧다는 체감이 확! 되었다. 특강도 듣고, 런데이도 꾸준히 한 뿌듯한 한 주였다. 배운 내용들 HTML 마크업에 대해 상세하게 배우고 직접 마크업 하면서 익힐 시간이 충분하게 주어졌다고 생각한다. 확실히 나는 실습하면서 공부하는게 잠도 안오고 머리에 남는게 많은 느낌이다. 1만 시간의 법칙, 버킷 과제를 하면서 여러 내용들을 다시 살펴보고 만드니깐 재밌었다. 특히 빔캠프 이종찬 강사님 과제가 전보다 술술 되는걸 보고 너무 신기하고 기뻤다..... CSS이제 좀 재밌을지도? 배운 내용은 아니지만 조원들이랑 게더타운에서 캐치마인드도 하고 친해진 한 주였다! 조원들이랑 한주 목표로 매일 2시간 게더타운 스터디하고 ..
합격하는 신입 개발자? https://www.youtube.com/watch?v=2to3IQFhZVo '내가 어떤 역량을 키워야 하는가'를 고민하다가 발견한 영상과 조은님의 블로그 여러가지가 있다. 1.태도/자세 2.문제인지,해결 능력 3.성장가능성(중요) -> 만약에 무제한의 리소스가 주어진다면 어떤 일을 하고 싶은지 ( 회사에서 비즈니스를 기술적으로 풀어낼 수 있는지) 4.약간의 커뮤니케이션 능력 5. 메타인지 ( 내가 뭘 잘하고 못하는지, 내가 왜하는지) 6. 필요한 질문을 하는 역량 https://euncho.medium.com/ 조은, John Cho – Medium Read writing from 조은, John Cho on Medium. Business: choeun@techhtml.dev. Every day, 조..
벤더 프리픽스(Vendor Prefix) , 딱 정리하자 벤더 프리픽스..? 처음 들어보는데 뭐지? 일단 TCP스쿨에 써있는 개념을 잠깐 살펴보자 ! 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다 응..응.... 웹..브라우저가 .. 또 문제라는거지? 그런거지? 뭐라는거야..? 💢 그래서 벤더 프리픽스가 뭔데? 웹 관련 ..
브라우저별 스타일 잠깐 멈촤! RESET CSS / Normalize 오늘의 주제 : RESET CSS 🌏 세상에 존재하는 수 많은 브라우저들 세상엔 참 많은 브라우저가 있다... 다양성이라는건 장점이라고 생각한다. 각기 다른 스타일에 사용자들은 선택해서 사용할 수 있으니깐. 하지만 FE개발자라면 조금... 슬플지도? 우리에겐 크로스 브라우징 이슈가 있으니깐. 울지말고 얘기해보자. 크로스 브라우징. 브라우저별로 다르게 구현되는 기술을 고려해 여러 환경에서도 이상없이 작동되도록 웹페이지를 제작하는 방법론. 우리가 짠 코드가 브라우저 별 기본 스타일로 다르게 표현되는걸 막기 위해 Reset css가 존재한다. 말 그대로 , 존재하는 css를 리셋 시킨다는 의미. 🌗 RESET CSS VS CSS Normalize 브라우저별 스타일을 초기화 시키는데에는 많은 방법이 있지만 대표..
서로가 믿을 수 있게! TCP 3 way handshake 인터넷에서 컴퓨터가 통신하는 방법? 컴퓨터끼리 통신은 요청과 응답으로 이뤄진다. 옆에 있는 컴퓨터라면 그렇겠지.. 그런데 이게 인터넷을 통한다면 어떻게 될까? 클라이언트는 서버에 요청을 보내지만 바로 가지 못한다. 인터넷에 있는 수많은 노드들을 거쳐서 갈 수 있는데 그래서 최소한의 규칙이 필요해진다. 내가 친구한테 택배를 보내는데 출발지와 도착지를 모른다면 택배가 올바르게 도착할 수 없듯이, 인터넷에서 통신하는 컴퓨터에서도 주소가 필요하다. 이때 IP가 등장한다. IP 인터넷 프로토콜 역할 - 지정한 IP 주소 ( IP Address)에 데이터 전달 - 패킷(Packet)이라는 통신 단위로 데이터 전달 등의 특징을 가진다. IP패킷의 특징은 출발지IP와 목적지IP를 담고 있다는 것이다. 하지만 IP프로토..