일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 리액트
- github
- git
- 타입스크립트
- Supabase
- 실기
- JS
- JavaScript
- jQuery
- CSS
- 슬라이드전환
- 정보처리기사
- PROJECT
- react
- 렛츠기릿자바스크립트
- 코딩독학
- 세로메뉴바
- 코드공유
- HTML
- web
- 웹디실기
- 생활코딩
- 프론트엔드
- 자바스크립트
- 연산자
- 웹퍼블리셔
- 비전공자
- 웹디자인기능사
- 깃
- 웹디자인기능사실기
- Today
- Total
목록전체 글 (146)
코딩하는라민

[책 리뷰] 개발자가 되고 싶습니다 내가 개발자가 되기 위해 준비하기 시작한지는 1년이 채 되지 않았다. 10살의 나는 동네 컴퓨터 학원을 다니면서 워드프로세스 자격증을 배우기 위해 한글 및 영어 타이핑 연습을 하고, 한글 프로그램을 익혔다. 주변의 언니, 오빠들이 나모웹에디터로 홈페이지를 만드는 모습을 보면서 나도 홈페이지를 만들어보고싶다! 라고 생각했었는데 학원 선생님이 내가 너무 어리다는 이유로 알려주지 않았었다.. 이때 당시에 내가 배우고 싶은 걸 다 못배웠던 기억이 있는데, 이때도 '개발자가 되고 싶습니다'와 같은 가이드북 같은 존재가 있었다면 얼마나 좋았을까 생각이 들었다. 나는 비전공자로 개발자가 되기 위해 공부를 시작한건 작년 7월부터였다. 처음에는 개발의 종류도 모르고, 기술 스택도, 무..

[React] React router 와 React router dom 에 대해 📌 React router 와 React router dom ? 리액트 팀 프로젝트를 하고있을 때였다. 리액트 라우터로 SPA(Single Page Application) 를 구현했다. 그러던 중 package.json 에 아래의 사진처럼 react-router 와 react-router-dom 이 두 가지가 설치되어 있는 것을 발견했다. 왜 두가지나 있는거지? 하고 구글링을 했다. 요약하면, React Router는 라우팅을 처리하는 핵심 라이브러리이고, React Router DOM은 React Router를 웹에서 사용하기 쉽도록 확장한 라이브러리이다. 즉 React Router DOM 은 React Router 을 포..

[Web] HTTP Request Methods 란? 🧶 HTTP Request Methods 란? 클라이언트가 웹 서버에게 요청하는 목적 및 그 종류를 알리는 명령어를 말한다. HTTP 요청 메서드는 서버에게 어떤 동작을 수행해야 하는지 알려준다. 가장 흔히 사용되는 HTTP 요청 메서드에는 GET, POST, PUT, DELETE, HEAD 가 있고, 이외에도 OPTIONS, TRACE, CONNECT 등의 다른 HTTP 요청 메서드가 있다. javascript 에서는 이 HTTP Request Methods 를 사용하기 위해서 XMLHttpRequest 객체 또는 Fetch API를 사용할 수 있다. XMLHttpRequest 보다는 간결하고 강력한 기능을 제공하는 Fetch API 를 더많이 사용..

[Web] 쿠키(Cookie)와 세션(Session) 이란? 🧶 HTTP(Hyper Text Transfer Protocol) 세션과 쿠키는 HTTP 프로토콜과 관련이 아주 깊다. HTTP 는 웹에서 데이터를 교환하기 위한 통신 규약이다. 세션과 쿠키는 HTTP 프로토콜을 기반으로 동작하며, 웹 개발에서 상태 정보를 유지하고 사용자를 식별하기 위해 사용한다. HTTP 프로토콜은 기본적으로 상태를 유지하지 않는 Stateless 프로토콜이다. 즉 서버는 클라이언트의 각 요청을 독립적으로 처리하고 요청 간의 연관성을 알지 못한다. 이로 인해 쿠키와 세션이 필요해지는 것이다! 🧶 Cookie 란? 쿠키(Cookie)는 클라이언트 측에서 상태 정보를 저장하는 작은 데이터 조각이다. 서버는 클라이언트에게 응답을 ..

[Web] 웹 브라우저가 어떻게 동작하는가? 이번 포스팅에서는 주소창에 github.com 을 입력하고 브라우저 화면에 github.com 페이지가 표시될 때까지 어떤 일이 일어나는지 확인해볼 것이다. 🧶 브라우저의 동작 원리 우리가 자주 사용되는 주요 브라우저에는 Chrome, Internet Explorer, Firefox, Safari, Opera 이 있다. 그 중에서 Chrome, Firefox, Safari 가 전 세계 데스크톱 브라우저 사용량의 71%를 차지할 만큼 많이 사용된다. 브라우저는 웹 리소스를 서버에 요청하고, 브라우저에 표시하는 기능이 있다. 웹 리소스는 보통 HTML 문서이다. 하지만 이 외에도 PDF 문서나 이미지 또는 기타 콘텐츠 유형일 수도 있다. 이 리소스의 위치는 사용자..

[Refact/웹접근성] input file 요소에 잘못된 커스터마이징으로 스크린리더에서 읽을 수 없던 문제 개선하기 지난 프로젝트에서 파일 업로드를 하기 위해 input type file 부분을 커스터마이징했다. 그러는 과정에서 input 요소에 display: none; 을 적용했고, label 요소의 background 로 원하는 이미지를 적용해주었다. 하지만 이런 방법은 tabindex 가 적용되지 않을 뿐더러 스크린리더가 해당 요소를 잡지 못하는 문제점이 발생했다. 이렇게 된다면 웹접근성을 고려하지 않는 방법이라 수정하는 게 좋다는 피드백을 받았다. 📌 접근 가능한 숨김 텍스트 🚫 내가 사용한 잘못된 방법 input{ disaply: none; } 못생긴 input file 의 기존 디자인을 숨..
[정처기 실기] 프로그래밍 언어 활용 - 자료형, 식별자, 연산자 📌 자료형 ✏️ 자바 파이썬 HashSet - Set 의 자식 클래스 - 중복 원소 허용 ❌ - 순서 ❌ add(값) 중복된 값이 있으면 추가 ❌ remove(값) 선언 set 변수명 = new HashSet( ); HashSet 변수명 = new HashSet( ); size( ) 원소의 개수를 얻는 메서드 ArrayList - List 의 자식 클래스 - 크기가 가변변적로 변하는 선형 리스트 성질 - 순서 중요⭕ add(값) add(인덱스, 값) 선언 List 변수명 = new ArrayList( ); ArrayList 변수명 = new ArrayList( ); remove(인덱스) size( ) HashMap - 키와 값으로 구성된 ..
[정처기 실기] 프로그래밍 언어 활용 - 배열과 포인터 📌 데이터 타입 ✏️ 데이터 타입 유형 유형 파이썬 자바 C언어 불린 Boolean 참 : true 거짓 : false 참 : True 거짓 : False - 문자 Character 데이터 유형을 명시적으로 선언할 필요가 없다. 변수에 할당한 값을 기반으로 변수의 데이터 유형을 유추. (동적으로 유형이 지정됨) char char 문자열 타입 String String char [ ] 정수 타입 Integer int int 부동 소수점 Floating Point float, double float, double 📌 배열 같은 타입의 변수들로 이루어진 연속된 공간 ✏️ 1차원 배열(Array) C언어 자바 초기값이 없는 경우 타입 배열명[요소개수]; 타입..

[React] React.lazy 코드 스플리팅으로 프로젝트 성능 개선하기 📌 React.lazy 함수를 사용하게 된 이유 리액트 프로젝트를 진행하면서 중간중간 Light House 를 이용해 성능 검사를 진행했다. 다른 점수는 항상 90점 이상으로 나왔는데 '성능' 점수만 항상 주황색으로 60~70점 정도가 나왔다. 이 6, 70점도 잘나온 편이었고 정말 성능이 좋지 않은 페이지의 경우에는 4, 50점대까지 나왔다. 성능 최적화는 코드를 작성하고 나서 수행해야 하기 때문에 일단 프로젝트에 집중했고, 추가적으로 성능 개선을 진행하였다. 📌 React.lazy 함수란? React.lazy() 는 동적으로 코드를 로드하고 렌더링할 수 있게 해주는 React의 기능 중 하나이다. 이 기능을 사용하면 일반적인 ..

[React] useLayoutEffect 는 언제 사용할까? 📌 useEffect 이란? [React] Hooks - useEffect ( ) [React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 ramincoding.tistory.com 앞의 포스팅에서 알아본 바와같이 useEffect 는 클래스형 컴포넌트 생명주기의 componentDidMount, componentDidUpdate, componentWillUnmount 훅을 하나의 API 로 합친 것으로 의존성 배열 deps..