profile
필기하고 기록하고
post-thumbnail

생활코딩 - Node.js

http://opentutorials.org:3000/main?id=HTML&page=12http protocol 통신규칙, 사용자가 서버에 접속할 때 어떤방식으로 통신할 것인가에 대한 부분. 웹브라우저와 웹서버가 서로 데이터를 주고받기 위해서 만든 통신 규

2023년 5월 22일
·
0개의 댓글
·
post-thumbnail

퍼블리셔가 사용한 chart.js

대시보드 페이지를 퍼블리싱하면서 차트를 만지작 해야하는 순간이 왔다.지난 번에는 굉장히 얕게 파악을 해서 완전 새로 다시 파보는거나 다름없던 chart.js ! 이번엔 개발자분들의 도움을 받아 데이터를 뿌리면서 화면을 그리다보니 다른 부분도 좀 더 공부가 됐다😊무튼

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

SCSS) 반복문 사용하기

프론트엔드 멘토로 꾸준히(요즘은 일하느라 조금은 빼먹으며..) 시안을 받아 퍼블리싱을 하고있다 :)회사에서는 SCSS를 사용하지 않는다. 하지만 나는 SCSS가 좋고 계속 쓰고 싶어서 혼자 개인 포폴을 만들며 사용한다!그리고 그냥 쓰지말고 블로그에 기록을 남겨보려 한다

2022년 10월 11일
·
0개의 댓글
·

JavaScript) DOM _ 1

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.HTML 요소는 HTML 문

2022년 10월 3일
·
0개의 댓글
·

JavaScript) 브라우저의 렌더링 과정

브라우저의 렌더링 과정 >구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다. 대부분의 프로그래밍 언어는 운영체제

2022년 9월 25일
·
0개의 댓글
·

JavaScript) Set과 Map_Map

Map 2. Map Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. |구분|객체|Map객체| |--|:--:|:--:| |키로 사용할 수 있는 값|문자열 또는 심벌 값|객체를 포함한 모든 값| |이터

2022년 9월 13일
·
0개의 댓글
·

CSS) 이론정리

CSS 기본관련 이론정리내장 방식html 파일에 … 태그 안에 내용을 입력해 스타일링하는 방식. 따로 파일을 만들지 않아도 된다는 장점이 있지만, html과 css 각각의 코드가 길어질 경우 작업효율이 떨어지고 가급적 모든 파일을 따로 분류해 만드는것을 권장한다.링크

2022년 8월 27일
·
0개의 댓글
·

HTML) 전역속성

html파일 내 태그들마다 공통적으로 사용할 수 있는 속성들title : 요소의 정보나 설명을 지정할 때 사용하며, 입력 시 해당 요소에 마우스오버를 하면 툴팁으로 노출된다.style : 요소에 적용할 스타일을 지정한다.class : 요소를 지칭할 이름.(중복으로 설

2022년 8월 27일
·
0개의 댓글
·

React) 감정일기 클론코딩

클론코딩도 코딩이구나 싶을정도로 강의와 다른 에러들이 발생하면 찾고 또찾고.. 혼공은 자문을 구할 사람이 어렵다는 단점이 있다.. 그나마 인강의 이점을 이용해 삽질해도 해결이 안되는것은 질문을 올려가며 구현했다. 이번에도 복습차원에서 readme파일에 정리한거에 추가내

2022년 8월 8일
·
0개의 댓글
·

React 기초다지기-(심플다이어리 클론코딩)

survey-pie 프로젝트 클론코딩하면서 알게된것도 많지만 그만큼 부족한 부분도 느꼈다. 제일 중요한건 기초. 특히 기능구현 부분에서 많이 느꼈다. 물론 계속 해보고 클론코딩이 아닌 직접 만들어가야 늘어가는것임을 알지만, 좀 더 기초를 다지고 시도해보고싶달까?(혼공은

2022년 8월 7일
·
0개의 댓글
·

JavaScript) Set과 Map_Set

Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 차이가 있다.Set 객체의 특성 1\. 수학적 집합의 특성과 일치한다. 2\. 수학적 집합을 구현하기 위한 자료구조다. 3\. Set을 통해 교집합, 합집합, 차집합, 여집합

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

HTTP 요청하기 (HTTP Method)

클론코딩하면서 알게된것들을 추가적으로 알아보고, 터득한것을 상기시키기 위한 메모같은 포스팅:) w3chools에서 보고 정리를 해봤다. HTTP란? HTTP는 클라이언트와 서버 간의 통신을 가능하게 하도록 설계된것이다. HTTP는 클라이언트와 서버 간의 요청-응답

2022년 8월 3일
·
0개의 댓글
·

JavaScript) 디스트럭처링 할당

디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.ES5에서

2022년 8월 3일
·
0개의 댓글
·

SurveyProject_admin) 클론코딩 정리하기

survey프론트단을 클론 코딩하고 바로 뒤이어 시작한 어드민페이지 클론코딩. 만들어낸 설문페이지의 각 설문들을 관리하는 영역이다. 이것도 프론트와 마찬가지로 흐름을 이해하고 라이브러리를 사용하는 이유를 살펴보기에 좋은 프로젝트였다. >1. 프론트단과 마찬가지로 기획

2022년 8월 2일
·
0개의 댓글
·

SurveyProject_Front) 클론코딩 정리하기

리액트의 실무기회를 접할 수 없는 나는 인강이나 서적을 따라하는 위주로 공부를 했다.(직접 무언가를 만들어보면 좋으련만 혼공에 막힘이 꽤있다..하지만 이런식의 래퍼런스를 쌓고 꼭 도전해봐야 하는것 중 하나!!!) 이것 저것 따라하며 막히기도 하면서 기본적인것에 대한 이

2022년 7월 29일
·
0개의 댓글
·

SurveyProject) Recoil_상태관리 라이브러리

상태관리 라이브러리로 대표적이고 내가 배운것은 Redux가 있었는데 설문폼 클론코딩을 하며 Recoil을 알게되었다. 그래서 기본 사용법 정리해보기.왜 Redux 대신 Recoil 을?Redux의 복잡한 코드 Redux 를 사용하고자 할 때 마주하는 가장 큰 어려움은

2022년 7월 28일
·
0개의 댓글
·

SurveyProject) 스타일변수 만들기(feat.style-components)

설문폼 프로젝트를 클론코딩해보며 이것저것 새로 알기도하고, 알던걸 또 되새기며 조금씩 깨우치고있다. 그중 style-components를 사용하며 이렇게도 쓰는구나를 배운것이 있다.(style-components를 사용하는 법이기도하지만 CSS-in-JS의 사용법? 편

2022년 7월 27일
·
0개의 댓글
·

MemoProject) lodash를 사용해 성능최적화시켜보기

메모프로젝트를 클론코딩하며 이런저런 배움이 있었는데 그중에서도 성능최적화부분이 기억에 남았다. 이 부분은 많은 영역에서 필히 사용될것이고 이전에도 랜딩페이지를 제작해보며 배웠던 영역이라 필기를 해본다.메모 타이틀이나 컨테이너를 입력하면 해당 데이터가 로컬스토리지에 저장

2022년 7월 25일
·
0개의 댓글
·

MemoProject) localStorage에 보관해보기

memo-project를 클론코딩하며 단순히 화면만 그려내는것이 아니라, 데이터를 로컬스토리지에 저장하여 브라우저창이 껐다 켜질때도 기록이 남도록 하였다. 그 과정에서 로컬스토리지를 사용했던것을 기록해보기로컬스토리지는 키-값 쌍으로 데이터를 넣을 수 있다. 그때 값은

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

React) Form값 가져오기

useState에 간단한 폼양식을 넣어두고 onChange를 사용해 인풋, 셀렉박스에서 그 값을 가져와 넣어보기.규칙이 있다면이름과 사는곳을 입력해야만 저장버튼이 활성화되기사는곳이 한국이면 추가로 입력폼을 열어주기알맞게 입력후 저장버튼을 누르면 alert창을 띄우고 폼

2022년 7월 24일
·
0개의 댓글
·