main 썸네일형 리스트형 CSR, SSR, Next.js의 start command에 대하여 | 원티드 프리온보딩 챌린지 사전 과제 CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR에서 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드한다. 그런 다음 JavaScript를 사용하여 DOM을 업데이트하고 페이지를 렌더링한다. 애플리케이션이 처음 로드될 때 사용자는 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있다. 이는 모든 JavaScript가 다운로드, 구문 분석 및 실행될 때까지 페이지가 완전히 렌더링되지 않기 때문이다. 페이지가 처음으로 로드된 후 필요한 데이터만 가져오면 되고, JavaScript는 전체 페이지를 새로 고치지 않고도 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 더 빠르다... 더보기 React innerHTML, DOM에 HTML텍스트 삽입하기. Apply dangerouslySetInnerHTML 웹에서 에디터를 개발하거나 게시판 등에서 글을 보여줄 때는 HTML 태그로 감싸진 string들이 필요하게 된다. 이 string 데이터를 서버와 통신해야 하는데 만약 여기에 알수없는 태그가 포함되어 있다면 (XSS 공격 같은) 어떤 일이 일어날 지 알 수 없기 때문에 😱 React에서는 innerHTML을 대신하여 dangerouslySetInnerHTML를 사용하게 된다. 공식 문서에도 이 내용이 잘 나와 있고 코드를 그대로 사용해 보았다. const createMarkup = (content: string) => { return {__html: content}; } const MyComponent = () => { const content = "TEST"; return ; } 그런데 서버에서 내려오.. 더보기 웹 서버의 SSL 인증서를 확인하고 싶을 때 SSL Checker Use our fast SSL Checker to help you quickly diagnose problems with your SSL certificate installation. You can verify the SSL certificate on your web server to make sure it is correctly installed, valid, trusted and doesn't give any errors to any of your u www.sslshopper.com Let's Encrypt 인증서를 사용하고 있는 웹 서버가 있는데, 이상하게 Expiry Date가 아직 지나지 않았는데도 Cert Error를 자꾸 뱉어 데이터를 불러오지 않는 것이다. 인증서를 .. 더보기 [React] Re-Rendering과 Memoization 프론트엔드 성능 개선을 위해 리액트 컴포넌트의 리렌더링 제어하기 Re-Rendering이 발생하는 세 가지 조건 1. State가 업데이트된 컴포넌트 2. Props가 변경된 컴포넌트 3. Re-Rendering 된 컴포넌트 아래의 모든 컴포넌트 이 중 3번의 경우, 리렌더링 된 어떤 컴포넌트 아래의 자식 컴포넌트들은 불필요한 렌더링이 일어난다. 메모이제이션을 통해 이전 처리 결과를 저장해둠으로써 처리 속도를 높일 수 있다. React.memo const Component = memo(() => {}); 이렇게 컴포넌트를 괄호로 감싸면 해당 컴포넌트는 Props에 변경이 있을 때만 리렌더링 된다. 하지만 Props에 함수를 전달할 때는 memo를 사용해도 컴포넌트가 리렌더링된다. React.useCall.. 더보기 [CentOS7] letsencrypt 인증서 삭제하기, *.conf 에러 핸들링 오랜만에 서버 인증서 갱신해주러 접속을 해줬다. 자동 갱신하는 건 걸어 놓긴 했는데, ... 파일 복사하고 하는 것 때문에 가끔씩 건드려주고 있다. 이것도 자동으로 바꾸긴 해야겠다. 그러다가 명령어를 잘못 입력해서 인증서를 하나 더 생성해버림.. 그러면서 인증서가 httpd.conf의 설정을 건드리고 파일이 수정되어 뭔가 꼬였다. httpd가 뻗어버리고 status찍으면 failed 나오는 상태가 됐다 ㅎㅎ +) 파일이 수정되었다는 사실은 수정 이력 조회 명령어를 통해 알아보았다 // 현재 디렉토리에서 조회 ls -l // 더 자세한 시간 출력 ls -l --time-style full-iso // 파일의 더 자세한 정보 조회 stat [파일명] 먼저 새로 생성된 인증서를 삭제해주고, certbot de.. 더보기 [React-Native] Mac M1 설치 - 에뮬레이터 켜는 과정에서 발생한 에러들 기본 node, npm, android studio, xcode 등은 다 깔려있는 상태여서 추가로 필요한 것들만 설치하였음 watchman 설치 brew로 설치를 했는데 버전을 확인해 보니 이렇게 나온다 ㅋ_ㅋ 뭐지? 된거 맞겠지? npx react-native init [ProjectName] 으로 시작 근데 cli.init is not a function 이라는 에러가 떴다. npm uninstall -g react-native-cli yarn install yarn global add @react-native-community/cli npx react-native init AppName npm 말고 yarn으로 add 해주니 프로젝트가 잘 생성됐다. ios 띄우기 근데 이제는 cocoapod이 안 .. 더보기 [Android Studio] 이어폰 착용 시 Emulator Device 음질로 소리가 재생될 때.. Flutter 프로젝트를 시작하고 기본 코드로 Virtual Device를 띄웠는데 Mac에 연결돼있던 이어폰이 Virtual Device 음질로 재생되면서 너무 구려지는 것... Mac 설정 Security & Privacy 에서 Android Studio에 대한 allow를 해제하는 것으로는 해결이 안 됐다. 구글링하여 Emulator 내에서 오디오 기능을 비활성화 하는 방법을 찾았다. 먼저 Mac 터미널에서 adb 명령어를 사용할 수 있게 환경변수를 등록해줬다. vim ~/.zshrc export PATH=~/Library/Android/sdk/tools:$PATH export PATH=~/Library/Android/sdk/platform-tools:$PATH source ~/.zshrc 등록까지.. 더보기 [MAC M1] Flutter 개발환경 셋팅 1. Flutter SDK 설치 Flutter SDK releases All current Flutter SDK releases, stable, beta, and master. docs.flutter.dev macOS의 stable channel에서 [arm64] Architecture로 다운받는다. 압축은 평소 dev파일들을 모아놓는 폴더라던가 사용자 폴더에 풀면 된다. (크게 상관이 없다) 2. Xcode 설치 App Store에서 Xcode 검색하면 바로 나온다. 오래 걸리니 제일 먼저 시작해놓길.. 다른 것들도 먼저 설치하고 있다가 Xcode 설치가 완료되면 $ sudo gem install cocoapods -n /usr/local/bin $ pod setup $ sudo xcode-select.. 더보기 이전 1 2 3 4 5 6 7 ··· 14 다음
