Front-End

[프리온보딩 챌린지 사전과제] CSR 장단점 / SPA, SSR 개념 with Next.js

CSR과 SSR은 간단하게 설명하자면 웹에 보여지는 방식을 말한다. 두 방식 전부 장단점이 존재하고 각 기업마다 이를 활용하여 서비스를 제공하고 있다. 이 둘을 알아보기 전에 지금까지 웹의 역사를 간단하게 살펴보자. 1세대 웹 : 정보전달, 브라우저를 통해 웹서버로 HTML파일 받아옴 - 정적인 웹사이트 (HTML,CSS) 2세대 웹 : JS등장으로 User Interaction 증가(정보 주고받음) - 동적인 웹사이트 (JS,SSR) 3세대 웹 : SPA등장으로 Frontend, Backend 구분 - 동적인 웹사이트 (CSR,AJAX,실시간 데이터 전송) 웹이 시간이 지나 점차 발전하면서 SPA가 트렌드가 되고 PC 성능들이 좋아지면서 웹안에서 많은 것들을 처리할 수 있게 되었다. 표준화로 정리가 된..

[자바스크립트 기본] 자바스크립트 변수 선언 var/let/const (var를 사용해선 안되는이유)

대다수 자바스크립트 어플리케이션(Application)은 사용자 또는 서버로부터 받은 정보를 처리하는 방식으로 동작한다. 예시) 온라인 쇼핑몰 - 판매중인 상품이나 장바구니 등의 데이터를 이용해서 결제창으로 넘어감 채팅 어플 - 사용자, 메시지 등의 데이터를 이용해서 서로 대화할 수 있는 채팅장을 동작함 이러한 데이터를 저장하는 용도로 사용되는 것이 '변수(Variables)'이다. 다양하고 수시로 바뀌는 데이터들을 저장도 없이 막 보내게 되면 지저분해지고 관리가 어려워질 것이다. 변수(Variables) 변수(variables) : 데이터(data)를 저장할 때 쓰는 이름이 붙은 저장소 1. let 을 이용한 변수선언 let message; // let은 변수를 생성할때 사용, 현재 message라는 ..

[CSS] IE(인터넷 익스플로러)에서 position absolute가 작동되지 않을때

인터넷 익스플로러는 RIP 했지만 죽어서 구천을 떠도는 망령 짓을 여전히 하고 있다. 크롬, 파이어폭스, 사파리와 같은 여타의 브라우저에서 position absolute가 그대로 적용돼서 나왔지만 IE에서는 적용이 안될 때가 있다. width와 height를 100% 가득으로 채워주고 top, bottom도 0으로 나올 수 있게 설정했다. 게다가 부모의 position 도 relative였다. 하지만 콘텐츠 이미지 크기가 좁쌀만 하게 나오고 transform의 rotate까지 줬더니 영역 밖을 벗어났다. 영어로 구글링을 하던 중 친절하게 한글로 알려준 블로그가 있었다. 부모 요소의 태그가 td인지 확인해야 한다. td태그 (display:table-cell) 일 경우에는 일부 브라우저에서는 positi..

[리액트 TIL] 생활코딩 리액트 2022 - 소스코드 수정방법(수정)

이 포스팅은 공식 React 자습서를 보고 생활코딩 리액트 강의를 듣고 얻은 지식과 결과물을 정리한 내용이므로 자세하고 확실한 정보를 얻기 위해서는 공식 사이트를 확인 바랍니다. (👋 공식 사이트 최고) 리액트 소스코드 수정방법 리액트는 사용자 정의 태그를 만드는 것이다. 오늘 강의를 들으면서 느낀 점 a to z 가 아니라 a 랑 z를 알려줘서 신기했다. 설치해서 배포하는 과정까지가 아니라 설치! 수정! 배포! 는 이거다! 느낌이었다. ✅ 설치 - 🟩 수정 - 🟩 배포 과정 중에 설치까지는 끝냈다. 이제는 수정에 대해서 알아볼 차례다. 수정을 잘하기는 어렵다 인생을 바쳐야 하는 일이다. < 예? 하지만 수정하는 방법은 5분이면 알 수 있다. src - index.js npm 을 이용해서 creative..

[리액트 TIL] 생활코딩 리액트 2022 - 기본개념(리액트/라이브러리), 실습환경 구축

이 포스팅은 공식 React 자습서를 보고 생활코딩 리액트 강의를 듣고 얻은 지식과 결과물을 정리한 내용이므로 자세하고 확실한 정보를 얻기 위해서는 공식 사이트를 확인 바랍니다. (👋 공식 사이트 최고) React......? React는 사용자 인터페이스를 구축하기 위해 만들어진 효율적이고 유연한 Javascript Library이다. 'component'라고 불리는 독립적인 코드의 파편을 이용해 복잡한 UI구성을 돕는다. 라이브러리 넌 뭔데? 🤷‍♂️ 라이브러리를 간략하게 설명하자면 남이 써놓은 유용한 코드를 갖다 쓰는것, 내가 원할 때 불러서 사용 가능. 예를 들어 제이쿼리가 있음, 코딩하다가 필요하면 제이쿼리 불러서 쓰고 코딩함! 제이쿼리가 마음에 안 들면 다른 거 가져다가 써도 됨 라이브러리와 ..

[자바스크립트 기본] 자바스크립트 자료형 Map 개념정리

백준 문제를 단계별로 풀어가다 보면 집합과 맵에서 set과 map을 이용해서 알고리즘을 풀어야 했다. 배열로 풀수 있지만 시간이 초과됐다. 다른 자료구조가 필요하다!!! 다른 자료구조를 공부해보자...!!!! 저번에는 set에 대해서 정리해봤으니 map에 대해서 정리해보겠다. map과 set을 왜 쓸까 알아보니 현실세계를 반영하기 위해서는 객체와 배열만으로는 역부족이었다. 그러므로 새로운 자료구조인 Map과 Set을 이용하게 됐다고 한다. 1. Map 개념 key와 가 있는 data를 저장 ➡️ 객체와 유사 key에 다양한 자료형(boolean, number, string, object)을 허용 ➡️ 객체와 다른 점 2. 주요 메서드(Method) 2-1. 주요 메서드 new Map() : Map을 생성..

[자바스크립트 기본] 자바스크립트 자료형 Set 개념정리

이 포스팅은 이 문제로부터 시작되었다. [JS] 백준 10815번 : 숫자 카드 Question 백준 10815번 : 숫자 카드 숫자 카드는 정수 하나가 적혀져 있는 카드이다. 상근이는 숫자 카드 N개를 가지고 있다. 정수 M개가 주어졌을 때, 이 수가 적혀있는 숫자 카드를 상근이가 가지고 hawaiian-pizza-it.tistory.com 자료형 Set을 이용해서 풀어야 했던 알고리즘 문제 Set니가뭔데 몰라서 틀리게 만드냐 그러니까 지금부터 알아보자 1. Set 개념 Set은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션 Key가 없는 값이 저장 2. 주요 메서드(Method) 2-1. 주요 메서드 new Set(iterable) : Set을 생성. 이 트러블 객체를 전달받으면(대개 배열) 그 ..

[자바스크립트 기본] 배열(Array)의 개념과 예시 (feat.드림코딩)

자바스크립트로 알고리즘을 풀면서 느낀 점 배열을 제대로 알아야겠다. 그래서 정리해본다. 덤벼라 배열