본문 바로가기
반응형

전체 글

<Linux> 리눅스에서 링크란?? 리눅스에는 링크개념이 존재하는데 쉽게 말하면 우리가 좋아하는 게임을 C드라이브 설치된 폴더에서 실행시키는 것이 아니라 바탕화면에서 아이콘을 통해 실행시킬수 있는 것과 같은 원리다. 우선 링크에는 크게 하드링크, 소프트링크 2가지가 있는데 그렇다면 파일 링크는 왜 쓸까 여러 이유가 있겠지만 대표적으로, 경로단축을 위해 링크를 설정하는 경우와, 데이터를 안전하게 보관하고 싶을 경우, 또 파일들의 통일성을 주기 위한 경우 등 여러 이유를 들 수 있겠다. 먼저 소프트링크를 만드는 방법에 대해서 알아보겠다. 소프트링크는 나중에 서비스를 만들고 배포할 때 참조하는 라이브러리가 바뀔 때 마다 쉽게 바꾸어 줄 수 있기 때문에 잘 알아두장 우선 소프트링크를 하는 법은 ln 명령어 뒤에 -s 를 붙여주고 링크시킬 파일과 .. 더보기
<Linux> 리눅스 기본 명령어들 (1) 개발자라면 리눅스와 친하게 지낼수 밖에 없다. 리눅스는 OS 로써 그럼 우리가 맥이나 윈도우즈 말고 리눅스를 메인 OS 로 삼아서 사용한다는 것이 아니라 프로그래밍 중이나 개발중에 리눅스에서 서버를 돌리는 등 리눅스 관련 작업을 많이 하게 된다는 것이다. 그럼 기본적인 명령어들을 알아보겠다. 1. pwd : 자신이 현재 어느 디렉토리에 있는지 알수 있는 명령어 2. ls : 디렉토리에 어떤 파일들이 있는지 알려주는 명령어 2-1. ls -l : 파일들의 좀 더 자세한 내용까지 알려주는 명령어 2-2. ls -al : 숨겨진 파일들까지 알려주는 명령어 (리눅스에서는 파일이름앞에 . 이 붙으면 숨김파일이라는 뜻) 위 사진에서 첫 번쨰 글씨가 ㅡ , d , l 로 시작하는거에서 각각 파일, 디렉토리, 링크 로.. 더보기
싱글페이지 어플리케이션 (SPA) 리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션 (single page application) 방식으로 개발하는 것이 정석이다. 단일 페이지 어플리케이션은 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션이다. 기존의 전통적인 방식의 웹 페이지는 페이지를 전환 할 때마다 렌더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있었다. 단일 페이지 애플리케이션은 페이지 전환에 의한 렌더링을 클라이언트에서 처리하기 때문에 자연스럽게 작동한다. SPA 구현이 가능하려면 다음 두가지 기능이 필요하다 1. 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단 브라우저는 서버로 요청을 보내지 않아야 한다. 2. 브라우저의 뒤로 가기와 같.. 더보기
반응형 웹 (간단한 예제 Header 만들기) 반응형웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 간단히 말하면 당신이 가로 10m 선에 맞춰서 가구나 예쁜 화분들을 정리해 놓았다고 치자. 물론 10m 짜리에 맞춰서 했을 때는 이쁘게 해놓았을 것이지만 주변에서 미안한데 5m 공간만 써라해서 공간이 줄어들었을 때도 이쁘게 정리가 되어있을 까 하는 것이다. 포인트는 5m 공간에 대비한 배치나 디자인도 신경을 써야 한다는 것이다. 반응형 웹을 구축하기 위해서는 CSS의 미디어 쿼리가 필요하다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일.. 더보기
append(), prepend()의 차이점 오늘은 비슷하지만 매우 다른 용도와 알고나면 엄청 편한 두 함수에 대해 알아보겠다. 우선 간단하게 말하면 1. append() 는 그냥 선택한 블록에 제일 마지막으로 넣어주는 것 (기존의 내용이 있으면 그 뒤에) 2. prepend() 는 그냥 선택한 블록에 제일 첫번째로 넣어주는 것 (기존의 내용이 있어도 그 앞에) See the Pen ExKaJaq by Sang Hoon Jeong (@DevilFront) on CodePen. 위에서 각각 버튼을 눌러보다 보면 두 함수의 차이점을 알 수 있을 것이다. 매우 유용한 것이 가령 본인도 프로젝트 진행 간 게시판 부분에서 특정 캠핑장에 대한 정보를 꼽아주는 부분이 있었는데 사용자 입장에서 생각해보면 사용자는 정해져있는 틀이 없다 후기를 작성하다가 중간에 파.. 더보기
<jQuery> empty(), remove()의 차이점 및 활용 방안 각자 싱글페이지를 구현하다 보면 거의 특정부분의 데이터를 지우고 다시 새로 불러온 내용으로 불러오기 위해 기존에 있던 내용들을 지워야 할 떄가 있을 것이다. 1.remove() : 선택한 노드 까지 삭제 2.empty() : 선택한 노드의 자식들을 삭제 라고 볼 수 있겠는데 각자 필요한 부분에 따라 사용하면 되겠다. $(".rec-Button").click(function(){ $(".box").remove(); // box-wrap 클래스안에 있는 box 클래스들을 지워준다 getRecList(); }); function getRecList(){ $.ajax({ type: "get", url : "/camp/reclist", async:"true", success : function(recommend).. 더보기
<jQuery> 페이지 이동 시키기 (location.replace()) 우선 이건 내가 프로젝트 진행중에 겪었던 일을 바탕으로 했기 때문에 필요한 사람만 참고하면 될 것 같다. 우리 페이지의 게시판 후기 등록 페이지인데 기존의 태그를 사용하지 않고 진행중이어서 저 등록버튼도 기능을 담고 있지 않은 그저 일반 버튼에 불과한 상태다. 데이터를 컨트롤러단에 보내는 작업은 전부다 jquery ajax 를 이용해서 처리했다. 물론 을 이용해서 submit 으로 편하게 처리를 해줄 수 있었지만 한번 새롭게 해보고 싶어서 데이터를 주고 받고 하는 작업을 ajax를 통해서 했었다. 문제점은 post 방식으로 보내주고 나서 컨트롤러에서 redirect 로 페이지를 변경해주고 싶었지만 작동을 하지 않았다. 글을 등록하면 바로 그 등록된 페이지(detail 페이지)로 가고 싶었는데 그 방법을 .. 더보기
FontAwesome 및 구글 웹 폰트 사용방법 우리가 UI 를 볼때 폰트 하나만으로도 분위기가 확 달라지는 것을 다들 알고 있을 것이다. 만약 느끼지 못했다면 기본 폰트만으로 한번 페이지를 작성해보면 바로 느끼게 될 것이다... 우선 FontAwesome 은 간단하게 말해서 아이콘이다. 근데 스타일먹이기가 너무 편하다 (폰트로 먹여진다) 처음 쓸 때는 이게 편할까 라고 생각했었는데 한번 쓰고 난 뒤로는 필요하다고 생각되면 바로 적용시킬정도로 이 글을 보는 분들도 자주 찾게 될 것이다. 두가지 사용법이 있는데 1. CDN 링크 이용 2. 직접 다운로드 나는 CDN 을 이용해서 했기 때문에 https://cdn.fontawesome.com/링크에 들어가서 CDN 링크를 받아줄 이메일을 입력해서 코드를 받는다. 받은 CDN 링크를 복사해서 이런식으로 프로.. 더보기
반응형

티스토리툴바