ALL

[프리온보딩 챌린지 사전과제] 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라는 ..

게으른 완벽주의를 벗어나는 법 - 나는 천재가 아니고 조팝이다

(이 글은 주관적인 견해와 해결방법이 들어가 있습니다. 다양한 사람이 살아가는 지구촌에서 이 방법과 견해가 맞지 않을 수도 있다는 점을 고지합니다.) 개발 공부를 하다 보면 그냥 삶을 살다 보면 딜레마에 빠지는 순간이 있다. 잘해야 하는데 하기는 싫고 그렇지만 잘하고는 싶고... 그런데 아무것도 안 하고 있는!!! 게으른 완벽주의! 게으른 완벽주의는 왜 생겨난 거고 왜 내 마음속에 자리 잡아 나를 이다지도 고생시키는 걸까? 기가 막혀. ~ 목차(Index) ~ 게으른 완벽주의의 치명적인 부작용 게으른 완벽주의를 벗어나는 방법 만약에 이미 게으른 완벽주의에 함몰된 상태라면? 게으른 완벽주의의 치명적인 부작용 회피, 떨어지는 에너지, 가중된 부담감 1. 회피 이 게으른 완벽주의에 역사는 나의 고등학교 시절로..

[INFCON2022] 인프콘 후기

되면 가야지 생각했던 인프콘에 참가자로 선정되었다🙌 인프콘에 가는 사람 누구예요? 나야 나야 나~ 경쟁률이 높았다고 하는데..... 이런 제가 가도 될런지? 갈 수 있는 기회가 생겨서 너무 감사했고 알차게 세션을 듣고 와야겠다고 마음먹었다. 이때는 몰랐다. 내가 그렇게 까지 체력이 없을 줄은 개발자가 되기 위해선 체력과 근력은 필수다. 헬스장 추석 이후로 간다...... 터미널에서 야무지게 수제비 한 그릇 먹어주고 9호선을 타고 봉은사역으로 향했다. 코엑스 스타필드... 항상 가면 길 잃었던 곳 과연 잘 찾아갈 수 있을까 당연한 걱정과 함께 당차게 갔다. 나는 자랑스러운 길치 방향치였다. 💎세션후기💎 1. 진유림 - 만들면서 배우는 리액트 기초 (핸즈온 세션) 👉 듣고 싶었던 이유 핸즈온 세션 신청이 선..

[JS] 프로그래머스 : 폰켓몬

Question 제한사항 nums는 폰켓몬의 종류 번호가 담긴 1차원 배열입니다. nums의 길이(N)는 1 이상 10,000 이하의 자연수이며, 항상 짝수로 주어집니다. 폰켓몬의 종류 번호는 1 이상 200,000 이하의 자연수로 나타냅니다. 가장 많은 종류의 폰켓몬을 선택하는 방법이 여러 가지인 경우에도, 선택할 수 있는 폰켓몬 종류 개수의 최댓값 하나만 return 하면 됩니다. 입출력 예시 My Code function solution(nums) { let n = nums.length/2; let set = new Set(nums); return set.size > n ? n : set.size; } 저렇게 긴 문제를 보면 순간 멈칫하게 된다. 아직 레벨1이면서 왜 이렇게 기시죠? 요약해서 중요한..

[JS] 프로그래머스 : x만큼 간격이 있는 n개의 숫자

Question 함수 solution은 정수 x와 자연수 n을 입력받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. https://school.programmers.co.kr/learn/courses/30/lessons/12954 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 제한조건 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 입출력 예시 My Code function solution(..

[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..