profile
✨감명깊은 앞단을 향한 꾸준한 여정✨
post-thumbnail

[기술] SSR 등장배경과 Next.js

📝 SSR의 등장배경을 학습하며 웹 동향 트렌드를 파악하고 Next.js에 대해 간단하게 정리해보고자 합니다! 📌 Static Sites (1990's 중반) : 서버에 이미 잘 만들어진 html 문서들이 있고, 사용자가 브라우저에서 www.hello.com

2일 전
·
0개의 댓글
post-thumbnail

[기술] CORS의 개념과 동작원리

📝 CORS 및 SOP의 개념을 정리해보려고 합니다!: CORS의 개념을 알아보기 전에 이해해야 하는 Origin에 대해 살펴보자!Origin은 URL에서 프로토콜(Protocol), 도메인(Host), 포트 번호(Port)를 합친 부분을 의미한다.origin 이미지

3일 전
·
0개의 댓글
post-thumbnail

[기술] 브라우저 렌더링 원리

📝 이번 글에선 브라우저의 렌더링 원리에 대해 정리해보겠습니다!출처: https://www.youtube.com/watch?v=kP-H1GXD_nI: 렌더링 엔진은 html, css, javascript의 내용을 토대로 브라우저 화면에 표시하는 일을 합니다.

4일 전
·
0개의 댓글
post-thumbnail

[React] React의 생명 주기 (Life cycle)

📝 React를 사용하는 데 있어 꼭 알아야할 개념인 라이프사이클에 대해서 설명해보려고 한다!mount : 페이지에 장착됨update : 업데이트 됨 = 재렌더링 (ex. state가 변동될 때)unmount : 필요없으면 제거됨 (ex. 페이지를 벗어나면 해당 컴포

6일 전
·
0개의 댓글
post-thumbnail

[JavaScript] 배열 내장 함수 정리

📝 JS에도 많이 사용하지만 React에서도 많이 사용하는 배열 내장 함수에 대해 정리해보려고 합니다!: 반환값(return)이 없고, 단순 for문과 같이 작동한다.👉 forEach가 알아서 회전을 하면서 매번 (배열에 있는) 아이템을 하나씩 넘기는 식으로 동작한

2022년 6월 22일
·
0개의 댓글
post-thumbnail

[SCSS] 핵심 기능 정리!

📝 이번 글에선 SCSS를 배우며 가장 유용하게 쓰일 핵심 기능들을 정리해보고자 한다.: nesting은 SCSS의 핵심 중의 핵심이지만 가장 기본적인 기능이라고 보면 된다.위 코드에서 시각적으로도 확인할 수 있듯, css에서는 자식 요소 하나하나를 선택하여 속성을

2022년 6월 7일
·
0개의 댓글
post-thumbnail

[JavaScript ES6] this 바인딩의 모든 것(Arrow Function, 메소드, strict mode...)

📝 이번 글에선 JavaScript ES6 문법을 공부하며 배운 여러 경우의 this 바인딩에 대해 정리해보려고 한다!: this의 값이 무엇인지 파악하려면 함수가 쓰인 위치가 어디인지만 파악하면 된다 JS의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체

2022년 6월 5일
·
0개의 댓글
post-thumbnail

[기술] REST API & GET/POST 정리

: REST는 Representational State Transfor라는 용어의 약자로 로이 필딩이라는 사람이 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 한다.자원(RESOURCE) : URI행위(Verb) : HTTP METHOD표현(Re

2022년 6월 2일
·
0개의 댓글
post-thumbnail

[기술] Hoisting 정리

📌 Hoisting(호이스팅)? : 선언하기도 전에 그 값들을 모두 끌어올려 최상단에 선언하는 것을 말함 > " Move declaration from bottom to top " var hoisting = 이 개념은 var 변수 선언/함수 선언문에서만 일어난다

2022년 5월 31일
·
0개의 댓글
post-thumbnail

[CSS] grid 정리

🗒 반응형 웹사이트 제작에 유용한 flex와 grid 중 grid에 대해 간단하게 정리해보겠습니다!: flexible box는 아이템을 배치할 때 가로/세로 둘 중 하나를 주축으로 정해놓고 배치하지만, grid는 가로와 세로를 모두 사용한다. (flex: 1차원, g

2022년 5월 24일
·
0개의 댓글
post-thumbnail

[JavaScript] DOM 개념정리와 load 이벤트

: DOM = Document Object Model개념 정리에 앞서, 자바스크립트는 HTML 조작에 특화된 언어이다.그런데 자바스크립트는 어떻게 HTML을 조작할 수 있는 걸까?그 원리는 바로,HTML을 자바스크립트가 해석할 수 있는 문법으로 변환하면 되는 것이다!브

2022년 4월 23일
·
0개의 댓글
post-thumbnail

[jQuery] animation vs animate의 차이점?

🗒 비슷해보이지만 확실히 다른 animation과 animate의 차이점을 정리해보겠습니다!간단하게,animation은 숨기거나 표시하기, 아래로 펼쳐짐 등등의 효과로 태그를 동작시키는 것이고,animate는 css스타일을 통해 태그를 동작시키는 것입니다.| 중요 명

2022년 4월 12일
·
0개의 댓글
post-thumbnail

[jQuery] 이벤트들, index(), $(this) 정리

: mouseenter + mouseleave: 기본기능(default)이 있는 태그에 대해서 기능을 못하게 막는다.예를들어, a태그가 걸려있는 곳에 이벤트를 주면 a태그가 가장 우선순위에 있어서, 이벤트 명령이 작동하지 않는다. 따라서 기본기능을 작동하지 않도록 막는

2022년 4월 12일
·
0개의 댓글
post-thumbnail

[jQuery] 선택자, 객체조작 메서드들

🗒 jQuery에서 자주 사용하는 선택자 및 메서드들을 간단하게 정리해보겠습니다!: 선택한 요소에 스타일(css) 속성값을 반환 또는 변환함: 선택한 요소 내에 텍스트를 불러오거나 텍스트를 바꿀 떄 사용함: 선택한 요소에 속성값을 반환 또는 변환함: 선택한 요소의 지

2022년 4월 11일
·
0개의 댓글
post-thumbnail

[JavaScript] 함수(function) 개념 정리

: 특정기능을 하는 구문(알고리즘,로직)을 독립된 부품으로 만들어 재사용하고자 할 때 사용하는 문법| 종류 |1) 일반함수2) 매개변수(parameter)가 있는 함수3) return 값이 잇는 함수: 함수 외부에서 함수 내부로 데이터를 전달하기 위한 용도로 사용하는

2022년 4월 8일
·
0개의 댓글
post-thumbnail

[JavaScript] switch문, 반복문

: if문과 용도는 비슷하나 if문은 만족하는 데이터가 여러개일 경우 주로 사용하고, switch문은 여러 경우의 값중 일치하는 데이터를 찾아 그에 해당하는 실행문을 실행시킬 때 사용한다.즉, switch문은 if문에서 else가 없다고 보면 된다| 종류 |: for문

2022년 4월 8일
·
0개의 댓글
post-thumbnail

[JavaScript] 형변환, 배열(array), 객체(object)

| 종류 |암시적 형변환: 자바스크립트에 의해 자동으로 형변환이 일어나는 것명시적 형변환: 개발자가 직접 스크립트를 이용해 명시해서 형변환이 일어나는 것숫자를 문자로 형변환암시적 형변환 이용: 숫자에 문자를 더하면 문자가 됨String()을 이용한 방법toString(

2022년 4월 7일
·
0개의 댓글
post-thumbnail

[CS] 배열과 리스트, 선택 정렬

: 여러 개의 원소를 저장해야 한다면 배열과 리스트라는 두 가지 방법 중 하나를 사용해야 합니다! 단점 : 원소를 추가하기에 좋지 않음배열에 새 원소를 추가하는 일은 쉽지 않음만약 공간이 모자라서 매번 모든 원소를 메모리의 새로운 위치로 옮긴다면 배열에 원소를 추가하

2022년 4월 6일
·
0개의 댓글
post-thumbnail

[JavaScript] 변수, 자료형과 연산자

📝 객체 기반 언어 JavaScript 기초 내용을 정리해보겠습니다!: 프로그램이 실행되는 도중에 계속해서 바뀌는 값을 저장하기 위한 공간변수에는 1개의 데이터만 담을 수 있다 (업데이트되면 이전 데이터를 버림) \*여러개 넣을 수 있는 것 : 배열var: 변수를 중

2022년 4월 6일
·
0개의 댓글
post-thumbnail

[CS] 알고리즘, 이진탐색, 단순탐색, 빅오 표기법

🗒 본 내용은 Hello Coding 알고리즘 책을 공부하며 정리한 게시글입니다!: 알고리즘은 어떤 일을 하기 위한 명령의 집합이다.: 이진 탐색은 알고리즘임. 입력으로 '정렬된 원소 리스트'를 받음.리스트에 원하는 원소가 있으면 그 원소의 위치를 반환하고, 아니면

2022년 4월 5일
·
0개의 댓글