Newest

• Front-End

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

  2022.09.30

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

• JavaScript

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

  2022.09.21

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

• Life

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

  2022.09.20

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

• Conference

  [INFCON2022] 인프콘 후기

  2022.09.06

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

• Programmers

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

  2022.07.14

  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이면서 왜 이렇게 기시죠? 요약해서 중요한..

• Programmers

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

  2022.07.13

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

• HTML & CSS

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

  2022.07.04

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

• React

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

  2022.06.16

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

• Baekjoon

  [JS] 백준 11478번 : 서로 다른 부분 문자열의 개수

  2022.06.15

  Question [JS-자바스크립트] 백준 11478번 : 서로 다른 부분 문자열의 개수 문자열 S가 주어졌을 때, S의 서로 다른 부분 문자열의 개수를 구하는 프로그램을 작성하시오. 부분 문자열은 S에서 연속된 일부분을 말하며, 길이가 1보다 크거나 같아야 한다. 예를 들어, ababc의 부분 문자열은 a, b, a, b, c, ab, ba, ab, bc, aba, bab, abc, abab, babc, ababc가 있고, 서로 다른 것의 개수는 12개이다. 11478번: 서로 다른 부분 문자열의 개수 첫째 줄에 문자열 S가 주어진다. S는 알파벳 소문자로만 이루어져 있고, 길이는 1,000 이하이다. www.acmicpc.net 입력 첫째 줄에 문자열 S가 주어진다. S는 알파벳 소문자로만 이루어져 ..

• React

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

  2022.06.14

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

• JavaScript

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

  2022.06.13

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

• Baekjoon

  [JS] 백준 10816번 : 숫자 카드 2

  2022.06.12

  Question 백준 10816번 : 숫자 카드2 숫자 카드는 정수 하나가 적혀져 있는 카드이다. 상근이는 숫자 카드 N개를 가지고 있다. 정수 M개가 주어졌을 때, 이 수가 적혀있는 숫자 카드를 상근이가 몇 개 가지고 있는지 구하는 프로그램을 작성하시오. 10816번: 숫자 카드 2 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10, www.acmicpc.net 입력 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 ..

• Baekjoon

  [JS] 백준 7568번 : 덩치

  2022.06.08

  Question 우리는 사람의 덩치를 키와 몸무게, 이 두 개의 값으로 표현하여 그 등수를 매겨보려고 한다. 어떤 사람의 몸무게가 x kg이고 키가 y cm라면 이 사람의 덩치는 (x, y)로 표시된다. 두 사람 A 와 B의 덩치가 각각 (x, y), (p, q)라고 할 때 x > p 그리고 y > q 이라면 우리는 A의 덩치가 B의 덩치보다 "더 크다"고 말한다. 예를 들어 어떤 A, B 두 사람의 덩치가 각각 (56, 177), (45, 165) 라고 한다면 A의 덩치가 B보다 큰 셈이 된다. 그런데 서로 다른 덩치끼리 크기를 정할 수 없는 경우도 있다. 예를 들어 두 사람 C와 D의 덩치가 각각 (45, 181), (55, 173)이라면 몸무게는 D가 C보다 더 무겁고, 키는 C가 더 크므로, "덩..

• JavaScript

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

  2022.06.07

  이 포스팅은 이 문제로부터 시작되었다. [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을 생성. 이 트러블 객체를 전달받으면(대개 배열) 그 ..

• Baekjoon

  [JS] 백준 10815번 : 숫자 카드

  2022.06.05

  Question 백준 10815번 : 숫자 카드 숫자 카드는 정수 하나가 적혀져 있는 카드이다. 상근이는 숫자 카드 N개를 가지고 있다. 정수 M개가 주어졌을 때, 이 수가 적혀있는 숫자 카드를 상근이가 가지고 있는지 아닌지를 구하는 프로그램을 작성하시오. 10815번: 숫자 카드 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10, www.acmicpc.net 입력 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는..

• Life

  코딩(과제)할때 듣는음악 모음

  2022.06.04

  개인적인 취향이 100% 가미된 음악추천 포스팅 나는 잡귀다(귀신아님) 듣기 좋다고 생각하는 노래는 모조리 다 듣는다. 쌀국수 집에서 들었던 태국노래 찾아서 주구장창 듣고 티비보다가 오래만에 들었던 애니오프닝곡이 좋아서 주구장창 들었다. 어떤 노래 후렴구에 꽂혀서 그 노래만 2시간이상 듣기도 한다. 그런데 코딩할때면 손이 가는 노래가 따로있다. 🎧 코딩할때 듣는 음악 🎧 Throttle의 Where u are EP는 미쳤다. 사실은 표지가 마음에들어서 들어봤다가 한동안 못빠져나왔다. 잔잔한데 내적인 리듬이 생긴다. 몸을 들썩이고 싶은데 그러지 못하는 상황일때 들어도 괜찮다. 밤에 선선한 공기 마시면서 드라이브를 할때 듣는것도 추천한다. 아침에 일어나서 몸을 움직이기 시작하기 위해 들어도 좋다. Away가..

• Programmers

  [JS] 프로그래머스 : 2016년

  2022.06.04

  Question 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT 입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 제한조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) 코딩테스트 연습 - 2016년 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지..

• JavaScript

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

  2022.05.31

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

• HTML & CSS

  [CSS 반응형 단위] Rem, Em 정리 및 활용 (feat. 드림코딩)

  2022.05.30

  반응형 웹사이트를 구축하기 위해서는 창에 사이즈에 따라 유동성 있게 움직이는 콘텐츠를 담아내야 한다. 예전에 스마트폰으로 어떤 웹사이트를 들어갔다가 피씨버전으로 뜨는 걸 보고 불편해서 바로 나왔던 적이 있다. 상품을 구매하기 위해 들어갔다가 제품도 안 보고 도로 나오게 된 것이다. 그 기업 입장에서는 모바일 버전을 제대로 구축해놓지 않아 고객 한 명을 바이 바이 한 것일 수도 있다. 반응형으로 페이지를 구축하고 어떤 사용자가 이용하든 보기 편리하게 만들어내야 한다. 그러기 위해선 px과 같은 절대적인 고정형 단위가 아닌 상대적인 단위를 활용할 줄 알아야 한다. 콘텐츠가 물처럼 어디든 담길 수 있게 말이다! CSS의 상대적인 단위 rem, rem, vw, vh, % 1. Rem 웹에 가장 최상위인 루트 요..

• Programmers

  [JS] 프로그래머스 : K번째 수

  2022.05.29

  Question 프로그래머스 : K번째수 입출력 예시 입출력 예 설명 [1, 5, 2, 6, 3, 7, 4]를 2번째부터 5번째까지 자른 후 정렬합니다. [2, 3, 5, 6]의 세 번째 숫자는 5입니다. [1, 5, 2, 6, 3, 7, 4]를 4번째부터 4번째까지 자른 후 정렬합니다. [6]의 첫 번째 숫자는 6입니다. [1, 5, 2, 6, 3, 7, 4]를 1번째부터 7번째까지 자릅니다. [1, 2, 3, 4, 5, 6, 7]의 세 번째 숫자는 3입니다. My Code 1. for문을 돌려서 answer에 push 하는 코드 function solution(array, commands) { let answer = []; let len = commands.length; for (let i = 0; ..