동기와 비동기 우선 동기와 비동기를 알기 전 자바스크립트는 동기식 언어이다. 자바스크립트는 단일(싱글) 스레드 방식의 언어로 한 번에 하나의 일만 처리한다. 그렇기 때문에 동기식 방식으로 작업을 처리한다. 그렇다면 만약 하나의 작업이 1시간 걸린다면 다음 작업은 1시간을 기다려야 한다. 이런 불상사를 해결하기 위해서 비동기 방식으로 작업을 처리해야 한다. 동기적(Synchronous) 동기식 방식은 직렬 형태로 작업을 수행하는데, 순차적으로 함수가 호출되고 각 함수의 작업이 끝나기 전 까지는 다음 작업을 실행하지 않는 형태다. Task1 실행 후 서버에서 데이터를 가져오는 작업을 실행하고 다음 Task2, Task3을 실행한다고 생각해보자. 여기서 동기적인 방식으로 작업을 진행할 경우, Task1 실행 ..
2021.07.21
리액트를 활용한 간단한 게시판 리액트를 공부하면서 정말 조금이라도 서버 단과 DB를 직접 구현해서 간단한 텍스트 게시판을 만들어보았습니다. 블로그 게시판처럼 위지윅 에디터인 Ckeditor5를 연동하려 했으나, 웹팩 설정에서 오류가 도저히 고쳐지지 않아 나중에 다시 시도해보거나 다른 에디터로 추가해야겠습니다. 연동하려면 이미지 업로드 기능 때문에 백엔드도 손봐야 합니다. * 작업환경 장비 : MacBook Pro 13인치(macOS BigSur) OS : Mac IDE : Visual Studio Code 브라우저 : PC : 크롬(Chrome) Mobile : Safari(iOS) * 개발환경 프론트엔드 : 리액트(Webpack, babel), CSS(반응형) - 라이브러리 : Material-UI,..
2021.07.18
history.push()/replace() 렌더링 문제 요즘 리액트와 몽고DB를 연동시켜 간단한 텍스트 CRUD 게시판을 구현하고 있는 도중 맞닥뜨린 문제다. 글 작성을 완료하고 목록으로 돌아가기 위해서 useHistory() push('/path~')로 연결해 줬다. 목록으로 돌아갔을 때는 다시 리렌더링 돼서 작성한 글까지 목록에 보여야 하는데... 작성한 글이 업데이트가 안 되는 것이 문제다. 기존 글 목록을 불러오는 방법은 아래와 같다. //main 컴포넌트 useEffect(()=>{ axios.get('/post/list') .then((res) => { setPost(res.data); //글 목록 업데이트 setNowload(false); //로딩종료 및 목록 렌더링 }).catch((er..
2021.07.12
로그인 폼 예제 보이는대로 그냥 구현해본 로그인 폼 See the Pen by junheeleeme (@junheeleeme) on CodePen.
2021.07.10
시멘틱 마크업이란? 시멘틱 마크업(Semantic Markup)은 적절한 위치에 올바른 HTML 태그를 사용하는 것을 말한다. 여러 종류의 HTML 태그들이 있지만 각각의 사용 목적과 의미가 담겨있다. 간단하게 말해 태그와 태그를 알고 있다면 이해하기 쉬울 것이다. 나는 HTML을 주먹구구식으로 배웠지만, 애드센스 블로그와 워드프레스 블로그를 운영하면서 검색엔진 최적화(SEO : Search Engine Optimization에 대해 공부하게 되었고 시멘틱 마크업을 알게 되었다. 단순하게 SEO는 포털사이트 검색 결과 상위에 자신의 웹 문서를 노출시키기 위한 작업이다. 요즘같이 광고/홍보가 예민하게 받아들여지는 시기에는 필수인 작업이다. 구글, 빙, 네이버 등 검색엔진이 인터넷에 연결된 HTML 문서를 ..
2021.07.10
간단하게 만들어본 패럴랙스 스크롤링 예제 See the Pen 패럴랙스 스크롤링 예제 by junheeleeme (@junheeleeme) on CodePen. 0.5 배율로 조정 후 스크롤을 내려야 함. 자바스크립트로만 작성해서 코드가 좀 난잡한데, 제이쿼리를 사용해서 다시 만들어봐야겠습니다.
2021.07.05
DB 이름 변경하기 & DB 복사하기 Mysql 데이터베이스 이름은 한 번 생성되면 다시 변경할 수 없습니다 .하지만 새롭게 데이터베이스를 생성한 다음 DB를 복사해서 덮어 씌우는 방법을 사용하면 됩니다. 우선 새롭게 데이터베이스를 만들어줍니다. Mysql> CREATE DATABASE NewDB; 그리고 Mysql 밖으로 나와 터미널에서 백업파일을 생성하는 명령어를 입력합니다. mysqldump -u root -p OldDB > OldDB.sql 만들어준 백업파일을 새롭게 만든 DB에 덮어씌워줍니다. mysql -u root -p NewDB < OldDB.sql 백업 파일을 만들거나 덮어씌울때에는 비밀번호를 쳐주어야 합니다.
2021.06.29
글자 수 초과시 (...) 표시하기 HTML 요소 크기에 비해 텍스트 길이가 길 때, (...)으로 표시하는 CSS속성으로 다음과 같다. text-overflow text-overflow : clip | ellipsis | string clip : (...) 생략 문자를 표기하지 않고 그냥 삭제시킨다. ellipsis : (...) 생략문자를 표기한다. string : 현재 지원되는 브라우저가 없다.(입력한 문자로 생략문자 표기) text-overflow: ellipsis; overflow: hidden; white-space: nowrap; white-space : 텍스트 길이가 초과했을때 다음줄로 넘어가지 않도록 해줌. See the Pen CSS 글씨 제한 by junheeleeme (@junhee..
2021.06.28
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev